Skip to content

Technique C27:Making the DOM order match the visual order

About this Technique

This technique relates to:

This technique applies to CSS used with HTML.

Description

The objective of this technique is to ensure that the order of content in the source code is the same as the visual presentation of the content. The order of content in the source code can be changed by the author to any number of visual presentations with CSS. Each order may be meaningful in itself but may cause confusion for assistive technology users. This could be due to the user switching off the author-specified presentation, by accessing the content directly from the source code (such as with a screen reader), or by interacting with the content with a keyboard. If a blind user, who reads the page with a screen reader that follows the source order, is working with a sighted user who reads the page in visual order, they may be confused when they encounter information in different orders. A user with low vision who uses a screen magnifier in combination with a screen reader may be confused when the reading order appears to skip around on the screen. A keyboard user may have trouble predicting where focus will go next when the source order does not match the visual order.

There may also be situations where the visually presented order is necessary to the overall understanding of the page, and if the source order is presented differently, it may be much more difficult to understand.

When the source order matches the visual order, everyone will read the content and interact with it in the same (correct) order.

Note

The tabindex attribute in HTML has two functions. One is to make an element focusable and the other is to assign the element a position in the focus order. A tabindex of 0 makes an element focusable, but adds it to the focus order in the order of source elements. The focus order will follow positive values of tabindex in ascending order. Setting tabindex values that result in an order different from the order of elements in the Document Object Model (DOM) can mean the order is incorrect for users of assistive technologies. This is largely because the tabindex property is specified in the HTML and not the CSS. This may change in future specifications. It may also differ from the visual presentation order.

Examples

  • An online newspaper has placed a navigation bar visually in the top left corner of the page directly below its initial logo. In the source code, the navigation elements appear after the elements encoding the logo.

Related Resources

No endorsement implied.

  • How users change colours on websites (gov.uk)
  • Most browsers offer developer tools to inspect the source code. These tools can usually be called up by pressing F12 or via the browser settings.
    • The Web Developer Toolbar (Firefox). Allows examination of the source code with CSS turned off in Firefox. This can be helpful in determining whether reading order and source code order match.
    • Web Developer Toolbar (Chrome). Allows examination of the source code with CSS turned off in Chrome. This can be helpful in determining whether reading order and source code order match.

Tests

Procedure

  1. Visually examine the order of the content in the Web page as it is presented to the end user.
  2. Examine the elements in the DOM using a tool that allows you to see the DOM.
  3. Ensure that the order of the content in the source code sections match the visual presentation of the content in the Web page. (e.g., for an English language page the order is from top to bottom and from left to right.) "

Expected Results

  • Step #3 is true.
Back to Top