In this Article...
What are ARIA landmarks?
Landmarks are a type of ARIA (Accessible Rich Internet Applications) role used to help define the layout and organization of a website. They are intended to help users of assistive technologies by creating a “table of contents” for a page.
Landmarks identify specific sections and their purpose within an HTML document.
Why are ARIA landmarks important?
Landmarks are essential for website accessibility. They empower users with disabilities to navigate websites independently, ensuring everyone has equal access to information.
Landmarks function as a “menu” of links for the page and allow easy and quick access to the various areas of the page. This allows an assistive technology user to jump to the relevant sections instead of listening to all of the items one by one.
Should I use HTML tags or the role attribute?
With the advent of HTML5, pages can be created using semantic HTML elements that implicitly pass their landmark role to the browser.
Some common HTML elements that function as landmarks by default:
<header> Introduces the webpage, often containing logos and navigation menus.
<nav> The primary navigation section allows users to jump to different parts of the site.
<main> The core content area, where users find the primary information.
<aside> Supplemental content that complements the main content but is distinct from it (think sidebars).
<footer> The closing section, often containing copyright information and contact details.
With the ever-increasing complexity of web pages and their continual evolution, situations arise where the HTML tag does not pass the correct (or any) role information. For that, we add the role="name" attribute. Developers and designers should be careful when using these elements if they don’t intend to use landmarks.
Important Rules for Using Landmarks
The role attribute is added using
role="name"and notaria-role= ""like other ARIA attributes.
Roles must be chosen from a fixed set of values. You cannot create your own role names.
If a landmark defines one space, landmarks should be used to define all the spaces.
If the user encounters one landmark, they may assume all of the content is in landmarks and skip important pieces of information.
Use labels
If using a landmark type more than once, use the
“aria-label”or“aria-labelledby”attribute to specify a unique name for the landmark so that the user does not lose their place on the page.
Use Sparingly
For screen readers, too many landmarks can be burdensome for users. Use a few landmarks to define large, general areas, and don’t define/label every piece of content on a webpage.
List of Landmark Roles
The following roles are regions of the page intended as navigational landmarks.
banner
complementary
contentinfo
form
main
navigation
region
search
Resources
Landmark Regions from W3C
Accessibility Landmarks from W3 Schools
Learn More with WCAG
Understanding Info and Relationships (Level A)
Understanding Bypass Blocks (Level A)
If you have questions, please contact our DubBot Support team via email at help@dubbot.com or via the blue chat bubble in the lower right corner of your screen. We are here to help!