HOME / ROLES / DEVELOPERS / STRUCTURE - DEVELOPERS /

Encode elements in a logical order

Screen readers read page content in a linear order, which is defined by the order that content appears in the source code (the Document Object Model) at a given time. Sometimes, when visual positioning is used to change the linear order for display purposes, the logical order is lost when read by a screen reader. This can affect both blind screen-reader users and sighted people with reading difficulties who are listening to content being read.

  • Make sure that content is announced in a logical order. Use CSS to position content, rather than layout tables. Be aware of the potential effects on reading flow when using CSS to position content in a location that’s significantly different from where it appears in the content order. Use a DOM inspection tool to check the rendered code order, especially when the content is dynamically updated (see Tools).

Testing

  • Visually examine the content order of the page, then listen to the page as it’s read by a screen reader. Does the page’s content order make sense when read aloud?

More information

✎ Technique: Grouping section content

For a readable interface, it's important to use visual cues to group or separate content to show which content relates to other content. This makes content easier to read, especially for people who have difficulty reading on-screen content and people who use screen readers.

When grouping content visually, you must make sure that you're not skewing the source order and breaking up the same content for screen-reader users.

Examples

✗ Bad example

In this example of a column-based layout, a 'header row' of headings has been created for content, followed by a second row to adjacently position the respective content: 


<div class="row">
  <h3>Left content</h3>
  <h3>Right content</h3>
</div>
<div class="row">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean gravida tortor dolor, eget laoreet leo bibendum quis. Morbi ac egestas tellus. Maecenas ut consectetur ligula.</p>
  <p>Fusce semper quam nulla, eu cursus lacus cursus et. Maecenas rutrum id arcu quis lacinia. Phasellus pharetra dui nisl, at finibus sapien vehicula eget. Aliquam porttitor pellentesque arcu quis sodales. Aliquam sed tempus diam. Morbi rutrum odio in mi condimentum tristique.</p>
</div>

As you can see in this demo page, the "left content" heading appears to be associated with the paragraph beginning "Lorem ipsum". In the source, it's another story: The "Right content" heading comes immediately after "Left content." This means that screen-reader users will hear each headings in succession, and the first heading's association with the "Lorem ipsum" paragraph will not be apparent.

✓ Good example

Before using CSS to position elements visually, get the source order correct first. In this example, section content is grouped together logically before being placed along the horizontal axis with a CSS column class that floats the content left: 


<div class="column">
  <h3>Left content</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean gravida tortor dolor, eget laoreet leo bibendum quis. Morbi ac egestas tellus. Maecenas ut consectetur ligula.</p>
</div>
<div class="row">
  <h3>Right content</h3>
  <p>Fusce semper quam nulla, eu cursus lacus cursus et. Maecenas rutrum id arcu quis lacinia. Phasellus pharetra dui nisl, at finibus sapien vehicula eget. Aliquam porttitor pellentesque arcu quis sodales. Aliquam sed tempus diam. Morbi rutrum odio in mi condimentum tristique.</p>
</div>

Code editor

Two examples, one good and one bad, of source order accessibility are available to experiment and test with.

See the Pen good and bad source order examples by HUIT - Web, UX and Digital Accessibility Services (@hwpdas) on CodePen.

See also: Encode elements in a logical order ✎, Blind, Low vision, Dyslexia, Screen reader, Custom stylesheet, Perceivable, Text, CSS, HTML

✎ Technique: Positioned navigation bar

When positioning elements using CSS, it's possible to place them in a position that does not reflect their location in the source order. This can have unexpected side effects for keyboard-navigation users.

Examples

Consider a navigation bar that’s positioned at the top of a web page. It appears first visually because it's a reliable and consistent navigation feature, and something that should be prominent and easy to locate and use.

✗ Bad example

If the author were to position the navigation bar using position: absolute, they’re free to place it anywhere in the markup, even right at the bottom: 


  <nav>
    <ul>
      <li><a href="/">home</a></li>
      <li><a href="/about">about</a></li>
      <li><a href="/contact">contact</a></li>
    </ul>
  </nav>
</body> <!-- closing body tag -->

The problem here is that keyboard users navigate pages by moving from one interactive element to the next, in the order they appear in the source. They would have to step through all the interactive elements in the page to reach the navigation bar. So if they landed on a page that they didn't want to read, navigating away from that page would be time consuming (and irritating!).

✓ Good example

Since position: absolute applied is unaffected by the element’s position in the source, one could instead move the navigation bar to the top of the page’s source code, allowing the navigation bar to be focused before the rest of the page: 


<body> <!-- opening body tag -->
  <nav>
    <ul>
      <li><a href="/">home</a></li>
      <li><a href="/about">about</a></li>
      <li><a href="/contact">contact</a></li>
    </ul>
  </nav>
See also: Support navigation and wayfinding ✎, Encode elements in a logical order ✎, Blind, Low vision, Dyslexia, Motor impairment, Screen reader, Custom stylesheet, Keyboard ✎, Speech recognition, Switch-based input, Operable, Perceivable, Links, CSS, HTML