Mobile Accessibility Guidelines - Structure

Headings must

Content must provide a logical and hierarchical heading structure, as supported by the platform.

A good heading structure enables people to scan a page/screen quickly and understand the structure of the content. Screen reader users can also use headings to quickly navigate within a page or screen.

Headings are standard for HTML, and available on iOS since iOS6. Android does not have a way to distinguish headings programmatically, however some elements, such as tables and listviews, do have headers.

iOS

Headings are assigned using the UIAccessibilityTraitHeader trait, although be aware that this trait is only available on iOS6 and later, and it is not possible to set a heading level.

Android

At the time of writing, Android does not provide a specific way to natively identify headings.

It is possible to “spoof” headings by providing the text as a TextView, and using the android:contentDescription attribute to indicate that the text represents a heading. A TalkBack user will hear the text, followed by the word “heading”.

Note, however, that there is no way for a user to navigate directly between headings, even when this approach is provided; it is only a method for users to distinguish between heading and non-heading text.

Android Pass Example

<TextView
    android:text="[My Heading]"
    android:contentDescription="[MyHeading], heading"
    />

HTML

Use heading (h1 to h6) elements to structure content. Ensure that there is only one h1 element per page, and that there are no gaps in the heading structure (i.e. do not apply text with an h3 heading element if there is no h2 element).

HTML Pass Example

<h1>The United Kingdom</h1>
  <h2>England</h2>
    <h3>London</h3>
    …
    <h3>Birmingham</h3>
    …
    <h3>Manchester</h3>
    …
  <h2>Northern Ireland</h2>
    <h3>Belfast</h3>
    …
    <h3>Larne</h3>
    …
    <h3>Coleraine</h3>
    …
  <h2>Scotland</h2>
    <h3>Edinburgh</h3>
    …
    <h3>Glasgow</h3>
    …
    <h3>Aberdeen</h3>
    …
  <h2>Wales</h2>
    <h3>Cardiff</h3>
    …
    <h3>Swansea</h3>
    …
    <h3>Rhyl</h3>
    …

Testing

Procedures

  1. Activate a screen reader.
  2. Examine each page/screen and locate any visual headings/headers.
  3. Determine if headings/headers are possible in the platform.
  4. Verify that there are actual heading/headers.
  5. Verify that headings/headers are announced by a screen reader.
  6. Verify that all headings are logically structured. This is for HTML content only.

Outcome

Check that the following are all true:

  • All visual heading/header elements are represented as headings/headers (within the limited imposed by the platform);
  • All headers are logically structured (HTML content only).