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
ARIA
roleto them is duplicative. -
The search form has an available ARIA
rolethat doesn't have a native HTML5 equivalent so addingrole="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 uniquearia-label. Don't add the role to thearia-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.