Containers and landmarks

Should

Containers should be used to describe page/screen structure, as supported by the platform.

Description

The visual layout of a page or screen groups elements to help people understand the structure of the content. Containers help assistive technology, such as screen readers, to describe groups of elements so that people who cannot see the visual layout can also understand the content structure. Screen reader users can also use containers and landmarks to quickly navigate within a page or screen.

Semantic structural elements and/or ARIA landmarks are available for HTML. Structural containers are available for native apps.

IOS

Use standard iOS navigational and structural views. Use of these views will allow for navigation using containers with a screen reader. Use UINavigationBar, UITabBar and other standard navigational structures.

ANDROID

Not applicable for native apps. Android accessibility only interacts with a single element at a time and does not have a mechanism to navigate by container and does not indicate entrance or exit from containers.

HTML

Use ARIA landmark roles or HTML5 sectioning elements to describe document structure and outline different parts of the page, such as navigation, main content and footer info.

Landmark roles include: banner, navigation, search, main, complementary, article, section, and contentinfo.

Equivalent HTML5 elements include: header, nav, main, aside, article,section, and footer. These elements have default landmark roles and do not require an ARIA role attribute to be set.

For more information refer to the W3C HTML5 Sectioning Elements: ARIA Landmarks Example.

HTML example

<div id="header" role="banner">
    <div id="logo">...</div>
    <h1>BBC</h1>
    <div id="nav" role="navigation">
        <ul>
            <li>Weather</li>
            <li>Sport</li>
            <li>Travel</li>
        </ul>
    </div>
</div>
<div id="content" role="main"> ... </div>
<div id="related-content" role="complementary"> ... </div>
<div id="footer" role="contentinfo">
    <p>BBC 2016</p>
    <ul> ... </ul>
</div>                        
<header>
    <div id="logo">...</div>
    <h1>BBC</h1>
    <nav>
        <ul>
            <li>Weather</li>
            <li>Sport</li>
            <li>Travel</li>
        </ul>
    </nav>
</header>
<main> ... </main>
<aside> ... </aside>
<footer>
    <p>BBC 2016</p>
    <ul> ... </ul>
</footer>                        
<div id="header">
    <div id="logo">...</div>
    <h1>BBC</h1>
    <div id="nav">
        <ul>
            <li>Weather</li>
            <li>Sport</li>
            <li>Travel</li>
        </ul>
    </div>
</div>
<div id="content"> ...</div>
<div id="related-content"> ...</div>
<div id="footer">
    <p>BBC 2012</p>
    <ul> ... </ul>
</div>                        

TESTING

 

Procedures
  1. Activate a screen reader.
  2. Verify that containers are used to structure the page:
    • For HTML pages these must be appropriate sectioning elements, or non-semantic containers with an ARIA landmark role, for each part of the page that has an equivalent ARIA landmark,
    • For HTML pages in mobile Safari each part of the page that has an equivalent ARIA landmark must be navigable by selecting 'Landmarks' in the Rotor menu.
    • For HTML pages in mobile Chrome each part of the page that has an equivalent ARIA landmark must be navigable by selecting 'Headings and landmarks' in the Local context menu.
Results

The following check is true:

  • The page is structured with appropriate containers:
    • HTML pages announced appropriate containers for each part of the page with an ARIA equivalent landmark;
    • iOS pages containers could be navigated to as landmarks;
    • Android pages containers could be navigated to as landmarks.