ARIA Landmarks Example

Accessibility Mar 6, 2023

General Principles

Landmarks provide a powerful way to identify the organization and structure of a web page. The structural information conveyed visually to users should be represented programmatically in the markup using landmark roles. The use of landmarks roles support keyboard navigation to the structure of a web page for screen reader users, and can be used as targets for author supplied "skip links" and browser extensions for enhanced keyboard navigation.

This section is intended to assist designers, developers and quality assurance staff in defining and understanding the importance of logical, usable, and accessible layout for assistive technologies using HTML sectioning elements and ARIA landmark roles.

Due to the complexity of today's web content, if using landmarks, all perceivable content should reside in a semantically meaningful landmark in order that content is not missed by the user.

Step 1: Identify the logical structure

Break the page into perceivable areas called "areas".
Typically, designers indicate areas visually using alignment and spacing of content.
Regions can be further defined into logical sub-areas as needed.
An example of a sub-area is a portlet in a portal application.

Step 2: Assign landmark roles to each area

Assign landmark roles based on the type of content in the area.
banner, main, complementary and contentinfo landmarks should be top level landmarks.
Landmark roles can be nested to identify parent/child relationships of the information being presented.

Step 3: Label each area

If a specific landmark role is used more than once on a web page, it should have a unique label.
If an area begins with a heading element (e.g. h1-h6), it can be used as the label for the area using aria-labelledby attribute.
If an area does not have a heading element, provide a label using the aria-label attribute.
Avoid using the landmark role as part of the label. For example, a navigation landmark with a label "Site Navigation" will be announced by a screen reader as "Site Navigation Navigation". The label should simply be "Site".

<header>  
    <h1>Stamp collecting</h1>
</header>
<main>	
    <section aria-label="Introduction to stamp collecting">		
        <h2>What is stamp collecting?</h2>		
        <p>Stamp collecting, also known as philately, is the study of postage stamps, stamped envelopes, postmarks, postcards, and other materials relating to postal delivery.</p>	
    </section>	
    
    <section aria-label="Start a stamp collection">		
        <h2>How do I start a stamp collection?</h2>   
        
        <h3>Required equiment</h3>    
        <p>...</p>    
        
        <h3>How to acquire stamps</h3>    
        <p>...</p>    
        
        <h3>Organizations you can join</h3>		
        <p>...</p>	
    </section>
</main>