Source Order Accessibility Principles

The source order of a web page is the underlying mark-up that users rely on to navigate and access content. Source order accessibility is important to people with the following disabilities:

  • Blindness;
  • Low vision;
  • Motor impairments; and
  • Cognitive impairments.

Websites are accessed by a variety of devices including mouse, keyboard, touchscreen, switch, joystick and assistive technologies such as screen readers and magnifiers. When the source order, keyboard focus order and visual reading order of a webpage are inconsistent with each other this can greatly impact their ability to navigate and access a web page effectively.

  • Source order
    • The order that the underlying HTML or other mark-up is written.
  • Keyboard focus order
    • The order of interactive page elements, such as links and form controls, when accessed by the keyboard i.e. the order in which items receive keyboard focus.
  • Visual reading order
    • The logical and intuitive order in which a sighted user naturally reads the page content. This is generally left to right and top to bottom – all content should be presented in a meaningful sequence so that any relationship within the data is clear.

Accessibility principles specific to source order include, but are not limited to:

  • Providing accessible navigation
    • Ensure that the visual order of the navigation matches the source order of the navigation.
  • Provide a natural keyboard focus order
    • Ensure there is a visible keyboard focus indicator on any item i.e. links, navigations, form fields and controls. Avoid imposing an unnatural focus order on a webpage – if there is a logical source order (that matches the visual page order) there is no need to manipulate the keyboard focus order.
  • Content is presented in a meaningful manner
    • Ensure that layout tables and forms which use tables for layout are designed so that the information is presented in a meaningful way.
  • Avoid changes in context or content
    • Ensure that any changes in context or content are requested by the user or that the user is informed of the change before it occurs and the change itself is inserted after the current focus.
  • Use the appropriate mark-up or CSS to manipulate and present information
    • Use a layout table rather than whitespace to format text to look like a table; use CSS to format text into columns.

Impact on users

The following is an overview of common source order accessibility errors and the impact on users with a disability.

Providing accessible navigation
If the visual or keyboard order of the navigation does not follow the source order then a screen reader could end up reading navigation items in an incorrect order or not at all.
Provide a natural keyboard focus order
When a keyboard focus order is imposed that overrides the natural keyboard order of the webpage in line with the source code the end user can miss items or be taken around the page in a counter-intuitive manner.
Content is presented in a meaningful manner

The visual reading order of content (including tables and forms) should be presented in a meaningful and logical sequence i.e. left to right and top to bottom. Screen readers will read the content of web pages in the order that it appears in the source mark-up.

When the visual order and source order do not match, relationships within the content may not make sense to a visual user and may also be read incorrectly by a screen reader.

Avoid changes in context or content

Changes in context or content that occur unexpectedly i.e. not at the user’s request, can cause disorientation for the end user, resulting in losing track of their current position in a website or taking them to a different page entirely.

If small changes in content such as a change in form dropdown content appear prior to the current focus the end user may not be aware that the change has taken place.

Use the appropriate mark-up or CSS to manipulate and present information
The meaning of content e.g. table data, may not be conveyed accurately and could be misinterpreted by an assistive technology user if whitespace is used for formatting in place of the appropriate code or CSS.