ARIA Landmark Examples
Building on the example in the Navigation → Landmarks page, this source code illustrates ways to add additional landmarks to a page beyond sectioning elements.
Key highlights of changes from before to after:
Now that HTML5 Sectioning Elements are widely supported, adding an
roleto them is duplicative.
The search form has an available ARIA
rolethat doesn't have a native HTML5 equivalent so adding
role="search"is appropriate for the search form in the header.
Whenever a landmark role (like
<nav>in this example) is used more than once on a page, provide each instance of that landmark with a unique
aria-label. Don't add the role to the
aria-label, it'll be read twice. For example an aria-label of Footer Navigation would read as "Footer Navigation: Navigation" by screen readers.
No ARIA is better than Bad ARIA. Be sure to take the overall context into account before adding additional roles and landmarks.