What are aria landmarks?

ARIA landmarks are essential accessibility attributes that provide a powerful way to identify the organization and structure of a web page, enabling assistive technologies to interpret and navigate content more effectively. By classifying and labeling sections of a page, they transform the visual layout into a programmatic structure that can be understood by screen readers and other tools, significantly enhancing the user experience for individuals with disabilities.

What are ARIA Landmarks?

ARIA (Accessible Rich Internet Applications) landmarks are special roles defined by the W3C that designate regions of a web page as common, recognizable sections. Think of them as signposts on a road map, guiding users to important areas like the main content, navigation, or footer. They give meaning to different parts of a page, allowing assistive technologies to convey this structural information to users who cannot perceive it visually.

These roles essentially describe the purpose of a section, allowing assistive technologies to present an overview of the page's layout and offer quick navigation options. For example, a screen reader user can jump directly to the "main" content or the "navigation" section without tabbing through every element on the page.

Why are ARIA Landmarks Important?

The importance of ARIA landmarks lies in their ability to bridge the gap between visual design and programmatic accessibility. Without them, a visually impaired user might perceive a flat, undifferentiated stream of content, making it incredibly difficult to understand context or locate specific information.

Enhanced Navigation: They allow users of assistive technologies to quickly navigate to specific sections of a page, such as the main content, header, or footer, bypassing irrelevant areas.
Improved Comprehension: By explicitly defining the purpose of different page regions, landmarks help users build a mental model of the page's structure, improving overall comprehension.
Increased Efficiency: Users can move through pages much faster, as they don't have to listen to or interact with every element to find what they're looking for.
Accessibility Standard Compliance: Implementing ARIA landmarks is a key aspect of meeting web accessibility guidelines, such as WCAG (Web Content Accessibility Guidelines).
Better User Experience: Ultimately, they lead to a more inclusive and user-friendly experience for everyone, especially those relying on screen readers.

Common ARIA Landmark Roles

While there are many ARIA roles, a core set is dedicated to defining page regions. Modern HTML5 semantic elements (like <header>, <nav>, <main>, <footer>, <aside>) natively convey many of these landmark roles, making explicit ARIA attributes redundant when used correctly. However, understanding the ARIA roles helps clarify their purpose and can be applied to non-semantic elements when necessary.

Here's a table of common landmark roles:

ARIA Landmark Role	Corresponding HTML5 Element	Purpose
`banner`	`<header>`	Contains site-wide content at the top of the page, often including the logo, site title, and global navigation. There should typically be only one `banner` landmark per page (unless in distinct document sections, then one per section).
`navigation`	`<nav>`	Contains navigational links to other documents or parts of the current document. Can be used for global navigation, local navigation, or pagination.
`main`	`<main>`	Represents the dominant content of the `<body>` of a document. It should be unique to the document and should not contain content that is repeated across documents, such as site headers or footers.
`complementary`	`<aside>`	Content that supports the main content, yet is separate and meaningful on its own. Examples include sidebars with related links, advertisements, or author information.
`contentinfo`	`<footer>`	Contains information about the parent document, such as copyright, privacy links, or contact details. Typically found at the bottom of the page. There should typically be only one `contentinfo` landmark per page (unless in distinct document sections, then one per section).
`search`	(None directly)	A region containing a collection of items that, as a whole, combine to create a search tool.
`form`	`<form>`	Identifies a section of content that constitutes a form. Note that native `<form>` elements are often sufficient, but `role="form"` can be useful in dynamic applications where the form isn't a top-level HTML element.
`region`	`<div>` or `<section>`	A generic section of the document that is not a more specific landmark. Use sparingly and only when no other landmark role is appropriate, and ensure it has an accessible name. For example, a collection of news articles could be in a `region`.
`article`	`<article>`	A self-contained composition in a document, page, application, or site that is intended to be independently distributable or reusable. E.g., a forum post, a magazine or newspaper article, or a blog entry.
`document`	(entire HTML page)	The root element of a document, effectively the entire web page. Often implied by the `<html>` element.

For a comprehensive list and detailed descriptions, refer to the W3C ARIA Authoring Practices Guide.

Implementing ARIA Landmarks

The primary method for implementing ARIA landmarks today is by utilizing semantic HTML5 elements. When used correctly, these elements inherently convey the landmark role to assistive technologies without needing explicit role attributes.

Prioritize Semantic HTML5: Always use native HTML5 semantic elements first. For example, use <nav> for navigation, <main> for the main content, and <footer> for copyright information. Browsers and assistive technologies automatically map these to their corresponding ARIA landmark roles.
Use role attribute for non-semantic elements: If you are unable to use a semantic HTML5 element (e.g., in legacy code, or when styling requires a div), you can apply the role attribute directly:
```
<div role="navigation">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
  </ul>
</div>
```
However, this should be a last resort. Always prefer <nav>.
Provide Unique Labels for Multiple Landmarks: If you have multiple instances of the same landmark role (e.g., two <nav> elements – one for global navigation and one for local navigation), you must provide unique, descriptive labels using aria-label or aria-labelledby to differentiate them for assistive technology users.
```
<nav aria-label="Main Navigation">
  
</nav>

<nav aria-label="Section Navigation">
  
</nav>
```

Best Practices for ARIA Landmarks

One Main Landmark: A web page should typically have only one main landmark, representing the primary content.
One Banner and Contentinfo (Per Document): Generally, there should only be one banner and one contentinfo landmark per document.
Use Sparingly: Don't overuse region or other general landmarks. Only use them when no other landmark role is more appropriate, and always provide an aria-label.
Avoid Redundancy: Do not add role="navigation" to a <nav> element. It's redundant. Similarly, do not add role="main" to a <main> element.
Logical Nesting: Landmarks should be nested logically. For instance, a navigation landmark might contain a list of links, but not typically a main landmark.
Test with Assistive Technologies: Always test your implementation with screen readers (like NVDA, JAWS, or VoiceOver) to ensure landmarks are being conveyed correctly and are helpful for navigation.

Example

Here's a simplified HTML structure demonstrating good use of semantic HTML5 elements that automatically provide ARIA landmark roles:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Example with ARIA Landmarks</title>
</head>
<body>
    <header>
        <h1>My Awesome Website</h1>
        <nav aria-label="Primary Site Navigation">
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About Us</a></li>
                <li><a href="/services">Services</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h2>Welcome to Our Site!</h2>
            <p>This is the main content of the page, where we discuss important topics.</p>
            <section>
                <h3>Latest News</h3>
                <p>Check out our recent updates...</p>
            </section>
        </article>
        <aside aria-label="Related Information">
            <h3>Quick Links</h3>
            <nav aria-label="Support Navigation">
                <ul>
                    <li><a href="/faq">FAQ</a></li>
                    <li><a href="/help">Help Center</a></li>
                </ul>
            </nav>
        </aside>
    </main>

    <footer>
        <p>&copy; 2023 My Awesome Website. All rights reserved.</p>
        <nav aria-label="Legal Navigation">
            <ul>
                <li><a href="/privacy">Privacy Policy</a></li>
                <li><a href="/terms">Terms of Service</a></li>
            </ul>
        </nav>
    </footer>
</body>
</html>

In this example:

<header> acts as banner.
<nav aria-label="Primary Site Navigation"> provides primary navigation.
<main> defines the main content area.
<aside aria-label="Related Information"> serves as complementary content.
<footer> acts as contentinfo.
Multiple nav elements are uniquely labeled to distinguish their purpose.