HTML5 and ARIA landmarks

During a transition phase include roles on semantic html tags.

Running through some accessibility testing with site improve I ran across an interesting tip.

Instead of using <main> use <main role="main">

On the deque university site:

The markup for regions and roles is redundant, but this is a transition period, and the above markup is the most robust. The most useful of these for most websites are header/banner, nav/navigation, main, and footer/contentinfo. Source: HTML 5 and ARIA Landmarks

So for the time being use role types even if its redunant.

If there is no visible label or description on a select menu best practice is to use an aria-label ex. <select aria-label="Topics"

Testing Select box labels with Screen Readers to assess WCAG conformance by David MacDonald


← Previous Links to learn CSS Grid Layout 18: Extinction Rebellion hourglass Next →