accessibility-guidelines

This document is in beta. Help us by reporting issues via Github or email

Back to the overview page

Order of elements in code

On this page:


Summary

Make sure that elements appear in a logical reading order in code, so that they are presented in a meaningful order to screen reader users.

Content on the page needs to be announced by screen readers following a logical reading order.


Requirements

Requirements for both native and web

Requirements for both native and web

Why?

The order in which elements appear in code matters

Official wording in the Web Content Accessibility Guidelines

1.3.2 Meaningful Sequence: When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined. (Level A)

See the W3C’s detailed explanation of this guideline with techniques and examples.


Guidance for Design

Common mistakes

More guidance for design


Guidance for iOS

Setting a custom order for child elements:

containerView.isAccessibilityElement = false
containerView.accessibilityElements = [firstLabel, secondLabel, button]

How to test whether elements appear in a logical reading order in the View Hierarchy

More guidance for iOS


Guidance for Android

<RelativeLayout ...>
    <Button
        android:id="@+id/button1"
        android:nextFocusForward="@+id/editText1"
        ... />
    <Button
        android:id="@+id/button2"
        android:nextFocusForward="@+id/button1"
        ... />
    <EditText
        android:id="@id/editText1"
        android:nextFocusForward="@+id/button2"
        ...  />
    ...
</RelativeLayout>

Alternative from API 22 is to specify the traversal order android:accessibilityTraversalAfter="@id".
This is the recommended way but there is the API 22 restriction.

<RelativeLayout ...>
    <Button
        android:id="@+id/button1"
        android:accessibilityTraversalAfter="@+id/editText1"
        ... />
    <Button
        android:id="@+id/button2"
        android:accessibilityTraversalAfter="@+id/button1"
        ... />
    <EditText
        android:id="@id/editText1"
        android:accessibilityTraversalAfter="@+id/button2"
        ...  />
    ...
</RelativeLayout>

More guidance for Android


Guidance for Flutter

Flutter deals with assistive technologies like screen readers using the Semantics() widget. For a quick introduction of the Semantics() widget you can read this article. ##

There are ways of affecting the order for custom navigation of elements with a screen reader. By passing a SemanticSortKey to the sortKey property of Semantics() the element with the lower key value will be read first.

Column(
    children: <Widget>[
        Semantics(
            sortKey: OrdinalSortKey(1), // will be read/focused second by the screen reader
            child: SecondWidget()
        ),    
        Semantics(
            sortKey: OrdinalSortKey(0), // will be read/focused first by the screen reader
            child: FirstWidget()
        ),
    ]
),

Guidance for Web

Do not use positive values with tabindex

Example

<h1 tabindex="-1">I'm the heading for a modal dialog</h1>
...
<div tab-index="0" class="fake_button" aria-role="button">Button Label</div>

Failure example

<div tab-index="3" class="fake_button" aria-role="button">Button Label</div>

Be careful when using CSS Float, Flexbox, Grid and position

Example

<main>
 <div style="float:left;">
  <h1>Article header</h1>
  <div>Article content</div>
 </div>

 <aside style="float:right;">Supplementary info</aside>
</main>   

Failure example

<main>
  <h1>Article header</h1>
  <aside style="position:relative; left:50%;top:-50%;">Supplementary info</aside>
  <div>Article content</div>
</main>

Make new content appear in the DOM right after the element that triggers it

How to test whether elements appear in a logical reading order in the DOM

Common mistakes

More guidance for Web


More info

Sources

Contribute

This document is in beta. Help us by reporting issues via Github or email