accessibility-guidelines

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

Back to the overview page

Order of elements

The order in which elements appear in the HTML should match the order in which they appear on screen.

Content on the page needs to be announced by screen readers in a natural, predictable reading order that matches the order in which elements appear on screen.


On this page:


Requirements

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 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.