Accessibility Rich Internet Applications (WAI-ARIA) landmarks are attributes that you can include in elements within your webpage to define regions or sections such as the main content or a navigation region. The following landmarks are provided by ARIA.
|Banner||Contains the site-oriented content of each page, like the logo, usually located at the top of the page. There should only be one banner landmark per page.|
|Complementary||A section of content that complements the main content but also retains its meaning when separated from the main content.|
|Contentinfo||Contains content usually found in the footer of a page, like copyright and privacy statements. There should only be one contentinfo landmark per page.|
|Form||Contains form input elements which can be edited and submitted by the user.|
|Main||The main content of the page, only one should be applied per page.|
|Navigation||A collection of navigation links to navigate the site or page.|
|Search||A search tool.|
|Application||Represents a unique software unit, and keyboard commands are handled by the application rather than the browser itself. This role should be used sparingly.|
You should not place the
role' attribute on elements that have native semantic meaning, such as
<banner> etc. Realistically, it should only be assigned to
As these roles will be exposed within the Document Object Model (DOM) of the webpage, assistive technologies can use this additional information to provide additional functionality, such as enabling screen readers the ability to easily jump between sections, and be provided the additional context of that section.
As an example, this could be how you have implemented a navigational menu.
<div id="nav"> <ul> <li>Home</li> <li>Services</li> <li>Contact Us</li> </ul> </div>
Using a screen reader as an example assistive technology, when the user encounters these navigational links, they will have output a collection of links, and have to intuit from the context that these links are related or a main menu. Using ARIA landmarks we can provide semantic information about this
<div> by adding the attribute
role="navigation", therefore defines this
<div> as a navigation region.
Note, it's always preferable to use native HTML elements if possible, such as the
<nav> element in HTML, instead of ARIA landmark attributes if at all possible.
<div id="nav" role="navigation"> <ul> <li>Home</li> <li>Services</li> <li>Contact Us</li> </ul> </div>
Still using a screen reader, the user will now have the output of something along the lines of 'navigation landmark'.
The landmark role is intended to be used sparingly, landmarks should only be used to outline the overall segments of the page. If to many landmark roles are applied to a page, it can make the advantages gain by applying these roles obsolete or even cause a detrimental effect to users.
This article was last updated on September 12th 2020.