Why a11y?

Aria Landmarks

What are ARIA Landmarks?

ARIA landmarks are HTML attributes that specify sections of a webpage to assistive technologies, improving navigation and interaction. These roles define the purpose of various sections, helping users understand how to move through the content without needing to read the entire page.

WCAG Guidelines Related to ARIA Landmarks

By using ARIA landmarks, web content is easier to navigate for users relying on keyboard navigation and screen readers.

Common ARIA Landmark Roles

Here are the most commonly used ARIA roles to improve the accessibility of web content:

role="banner"

The banner role marks a section that contains site-wide content like the logo or branding. Typically, the <header> element of a page should be assigned this role if it represents site-wide content.

Use Case: For the top of a webpage, often where the site logo, main navigation, and perhaps a search bar are located.

<header role="banner">
	<h1>My Website</h1>
	<nav>...</nav>
</header>

role="navigation"

The navigation role identifies the primary or secondary navigation areas on a page.

Use Case: Applied to <nav> elements that hold navigation links to help users jump directly to menus using assistive technology.

<nav role="navigation">
	<ul>
		<li><a href="/">Home</a<</li>
		<li><a href="/about">About Us</a></li>
	</ul>
</nav>

role="main"

This role defines the main content of the document. There should be only one main landmark per page.

Use Case: Applied to the <main> element or another container holding the core content of the page.

<main role="main">
	<h2>Welcome to our website!</h2>
	<p>This is the main content area.</p>
</main>

role="complementary"

Complementary content is related to but not essential to the main content. It’s often used for sidebars.

Use Case: Applied to content like a sidebar that enhances the main content but isn’t required to understand the page.

<aside role="complementary">
	<h2>Related Articles</h2>
	<ul>...</ul>
</aside>

role="contentinfo"

Marks the content information or the footer, which typically includes metadata, copyright, contact links, or terms of service.

Use Case: Applied to the <footer> element, which contains information relevant to the entire site.

<footer role="contentinfo">
	<p>© 2024 My Website. All rights reserved.</p>
</footer>

role="search"

The search role is used to identify search functionality within the site.

Use Case: Applied to the search bar or section of the page where users can search the website's content.

<section role="search">
	<form action="/search">
		<input type="text" placeholder="Search..." />
		<button type="submit">Search</button>
	</form>
</section>

role="form"

Marks a section of a page containing a form. Forms can be embedded anywhere on a page, and marking them explicitly can help users find and interact with them.

Use Case: Applied to a <form> element, especially if the form appears in an unexpected location, such as a modal.

<form role="form">
	<label for="name">Name:</label>
	<input type="text" id="name" name="name">
</form>

Benefits of ARIA Landmarks for Assistive Technologies

Improved Navigation

Screen reader users can use shortcuts to jump between ARIA landmarks, skipping repetitive content like headers and footers. This makes it easier to navigate large pages quickly.

Example: Users can press keys to quickly jump to the navigation, main content, or search areas.

Contextual Awareness

ARIA roles help screen readers provide context to users. For instance, when a screen reader encounters a <header> element with the role="banner", it can announce it as the site's banner, giving the user better understanding of the page structure.

Reduced Cognitive Load

ARIA landmarks provide a clear separation of different content areas, reducing the mental effort required to understand a page's layout.

Best Practices for ARIA Landmarks

Use Native HTML First

Before applying ARIA roles, use native HTML5 elements like <header>, <nav>, <main>, and <footer>, which have built-in accessibility benefits. Apply ARIA roles only when the semantic HTML elements are insufficient.

Avoid Duplicate Landmarks

Do not use the same landmark role multiple times on a page, except when clearly required (e.g., multiple navigation sections). Having multiple role="main" or role="banner" landmarks can confuse users.

Combine ARIA with Accessible Labeling

Combine ARIA landmarks with accessible labels (using aria-label or aria-labelledby) to provide extra clarity for users. For example, if you have more than one navigation landmark, label each one clearly:

<nav role="navigation" aria-label="Primary Navigation">
	<ul>...</ul>
</nav>
<nav role="navigation" aria-label="Footer Navigation">
	<ul>...</ul>
</nav>

Test with Assistive Technology

Regularly test your site with screen readers like NVDA, JAWS, or VoiceOver to ensure ARIA landmarks are being recognized and announced properly.

Tools for Testing ARIA Landmarks

  • WAVE (Web Accessibility Evaluation Tool): Detects ARIA landmarks and other accessibility issues. https://wave.webaim.org
  • Axe Accessibility Checker: Browser extension that highlights ARIA landmarks and potential issues. https://www.deque.com/axe

Common Mistakes to Avoid

  • Overusing ARIA roles: Don’t add ARIA roles when they’re not needed. For example, using role="main" on non-primary content.
  • Skipping native HTML: Always use native HTML elements first (like <main> or <nav>) before falling back on ARIA.
  • Mislabeling landmarks: Ensure that each ARIA role is used correctly and labeled accurately.

Example of Proper Use of ARIA Landmarks

Here’s an example of a page using ARIA landmarks to structure its content clearly:

<header role="banner">
	<h1>Company Logo</h1>
	<nav role="navigation" aria-label="Main Navigation">
		<ul>
			<li><a href="/">Home</a></li>
			<li><a href="/about">About Us</a></li>
		</ul>
	</nav>
</header>

<main role="main">
	<h2>Welcome to Our Website!</h2>
	<p>This is where the main content goes.</p>
</main>

<aside role="complementary">
	<h3>Latest News</h3>
	<ul>
		<li><a href="#">Article 1</a></li>
		<li><a href="#">Article 2</a></li>
	</ul>
</aside>

<footer role="contentinfo">
	<p>© 2024 Company Name. All rights reserved.</p>
</footer>

Related links