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