Common regions of a web page should be explicitly identified. This helps screen reader users to easily jump directly to those regions, and contributes to their understanding of the overall structure of the page.
HTML5 semantic elements
Starting with HTML5, the HTML specification includes several elements that identify common regions of the page. See below for a table of relevant HTML elements and their corresponding ARIA Landmark roles.
ARIA landmark roles
ARIA is a W3C specification that stands for “Accessible Rich Internet Applications”. Its overall purpose is more fully described on the IT Accessibility Checklist page titled ARIA. It includes a set of role attributes that can be used to identify common regions of the page. In general, these are the same page regions that can be identified using HTML semantic elements.
HTML vs ARIA: Which to use?
ARIA Landmark roles came first, and were supported by assistive technologies before HTML5 semantic elements were. However, that was well over a decade ago, and assistive technologies have supported both methods for many years. Therefore, it is always best to use HTML first, and turn to ARIA only as a last resort.
An example of why you might use ARIA Landmark roles is if you’re retrofitting a legacy website for accessibility, and it uses non-semantic HTML elements such as <div> as the outer containers for common page regions. Depending on the website, changing <div> to a semantic element such as <nav> (for a navigation region) or <main> (for the main region) might be disruptive, if the site’s CSS and JavaScript are dependent on the original code. In that case, adding ARIA role="navigation" or role="main" to the <div> elements has the same effect for screen reader users, and is not at all disruptive.
Mapping of HTML elements to ARIA landmark roles
| HTML Element | ARIA Landmark Role | Description |
|---|---|---|
| aside | complementary | A sidebar, content that is peripheral to the main content |
| footer | contentinfo | Footer of the page |
| header | banner | Banner of the page |
| main | main | Main content of the page |
| nav | navigation | Website navigation, links to other pages |
In addition, <form> (or role="form") and <section> (or role="region") are handled by some screen readers in the same way as other page regions if they have aria-labelledby, aria-label, or title attributes.
Additional details about these mappings are available on the W3C’s HTML Sectioning Elements page.
Label any region that is used more than once
If any region is used more than once on a page, the aria-label or aria-labelledby attribute should also be used in order to distinguish between the regions. For example, it is common for web pages to have multiple navigation regions. These might be differentiated as follows:
- <nav aria-label=”Quick links”>
- <nav aria-label=”Audience menu”>
- <nav aria-label=”Social”>
Avoid role=”application”
One ARIA Landmark role that has no corresponding HTML counterpart is role="application". This can be used to identify a very dynamic and desktop-like web application. When this role is used, there is an expectation that the application has its own model for navigating and operating all controls by keyboard and help text is easily available so users can learn the keystrokes. When assistive technologies encounter content that’s marked with this role, they essentially stop listening for users’ keystrokes and hand off all functionality to the application. This can be problematic as it defies users’ expectations, and therefore should be used only in rare instances where the web application has been carefully developed with accessibility in mind, and steps have been taken to inform users of what to expect and how to use it.