Mobile Accessibility Guidelines - Structure

Containers and landmarks should

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

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 native controllers such as UINavigationController, UITabBarController and UISplitViewController to organise screen content. This allows VoiceOver users to easily navigate between sections of the screen.

Android

Currently, Android does not support a mechanism for navigating between containers within native applications. It is only possible to navigate through one single element at a time.

HTML

Use either WAI-ARIA landmark roles or HTML sectioning elements to identify common sections of page content (such as the main content section, navigation, header, and footer).

The available WAI-ARIA landmark roles are:

  • banner
  • navigation
  • search
  • main
  • complimentary
  • article
  • section
  • contentinfo

The HTML5 sectioning elements are:

  • header
  • nav
  • main
  • aside
  • article
  • section
  • footer

Note that the required landmark semantics are already built in to the equivalent HTML5 elements, so it is not necessary to apply a separate WAI-ARIA role when applying those elements to a page.

For more information, refer to: .

Note: When using HTML sectioning elements and roles, all content should be inside a sectioning element rather than just a descendant of the body element.

HTML Pass Example

<div id="header" role="banner">
  <div id="navigation" role="navigation">
    <ul>
      <li><a href="…">±«Óãtv</a></li>
      <li><a href="…">About Us</a></li>
      <li><a href="…">Contact Us</a></li>
    </ul>
  </div>
</div>
<main id="mainContent" role="main">
  <h1>±«Óãtv</h1>
  …

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.

Outcome

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.