ARIA Landmark Roles: Why You Need To Use Them

When sighted people view a webpage, they can usually discern the structure at a glance. The header, main content area, footer, sidebar, etc stand out. However, the visually impaired don't have the same luxury. To even the playing field and make the web more accessible for all, we must use ARIA landmark labels in our HTML markup.

What Are Landmarks and Landmark Roles?

Landmarks are discrete components of webpages that form the overall structure, with headers, navbars, and footers as some examples. As mentioned, sighted users can typically identify these landmarks quickly, while visually impaired users cannot. To fix this, the HTML spec introduced ARIA landmark roles.

Landmark roles are implicit and explicit labels (not ARIA labels, though) for screen readers to understand the page structure. Elements such as <header> and <main> have implicit landmark roles, and elements such as <div> do not and require explicitly adding landmark roles. These landmark roles enable screen readers to present a website's general map to users and allow skip links.

However, not every div or non-semantic element needs a landmark role. It does not require a landmark role if you use a div for styling purposes and not as a button, navbar, or something else a sighted person could see. Be careful not to over-apply landmark roles and diminish their value to the user.

Landmark roles are so easy to use that there is no excuse not to. Add a role="<someRole>" attribute into your markup to increase accessibility and the user experience for your visually-impaired users.

Best Practices

• Use when you are using a non-semantic element like a div for page structure and not styling
• Asses your markup with an accessibility scanner like Lighthouse (built into ChromeDevTools)
• Use standard names for landmark roles

Takeaway

As web developers, we must constantly strive to improve accessibility in any way we can. Use ARIA landmark roles to improve the accessibility and navigability of your website. Some semantic HTML elements have landmark roles built in, and some must have ARIA landmark roles explicitly added as attributes. By adding these roles, you will increase your website's accessibility and do your part to make the web more accessible to all.