ARIA Landmark Examples

Key highlights of changes from before to after:

• Now that HTML5 Sectioning Elements are widely supported, adding an ARIA role to them is duplicative.
• The search form has an available ARIA role that 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.