Skip to Main Content


PRESENTER: This tutorial explores the importance of source order versus display order versus keyboard focus order. We're going to cover the three orders, changing keyboard focus order and visual display order, why authors change visual display order, why do the three orders need to match, and what is the solution?

Section one, the three orders. First up, source order. This is the order that the actual markup is written. In this example, the order includes an h1, followed by a paragraph, followed by an h2.

Next up, visual display order. This is the logical and intuitive order in which a sighted user naturally reads the page contents. This is generally left to right and top to bottom. You can determine the visual display order by viewing the web page on different screen sizes. Note that the visual display order may change depending on the size of the screen you view the web page on. So you should view the page on multiple screen sizes.

All content should be presented in a meaningful sequence so that any relationship within the data is clear. This will be discussed in another video.

Next up, keyboard focus order. This is the order of interactive page elements, such as links and form controls when accessed by the keyboard. You can determine the keyboard focus order by tabbing through elements on a web page. Keyboard focusable items should receive focus in a sequential manner that preserves meaning and operability.

Section two, changing keyboard focus order and visual display order. Authors can use CSS to reorder aspects of an HTML document. For example, a page can contain a sidebar of content, followed by the main content. The document source order would be header, sidebar, main content, footer.

However, authors could use CSS to float the sidebar so that it sits to the right of the main content, and then it would appear as if the sidebar was after the main content. The source order hasn't changed, only the way that the sidebar and main content have been visually displayed. There is now a difference between source order and visual display order. Depending on whether there are focusable elements inside these containers, there's also a difference between source order and keyboard focus order.

Section three, why authors change the visual display order. There are a range of different reasons why authors may decide to change the visual display order of layouts but a common reason has to do with responsive layouts. This is where authors determine how a layout would appear in small, medium, and large screen sizes.

In some cases, the author may want the visual display order to change its small screen sizes so that the elements stack on top of each other. The source order is the same at small or large screen sizes, but the visual and possibly the keyboard focus order has changed at small screen size.

Section four, why do the three orders need to match? Websites are accessed by a variety of devices, including mouse, keyboard, touch screen, switch, joystick, and assistive technologies, such as screen readers and magnifiers. When the source order, keyboard focus order, and visual display order are inconsistent with each other, this can greatly impact their ability to navigate and access web pages effectively.

The three different orders matter in a range of different circumstances, first of all, low vision users. Users with low vision, who use a screen magnifier in combination with a screen reader may be confused when the source order doesn't match what's on screen.

The second type of user is keyboard only users. Now, these users may have trouble predicting where the focus will go next when the keyboard focus order doesn't match the visual display order.

And then cognitively impaired users-- cognitive impaired users, who use a screen reader to aid their readability while visually watching the screen, may be confused when the source order doesn't match the visual display order.

Section five, what's the solution? In all web documents, it's important that the source order is the same as the visual display order and the keyboard focus order. That can be achieved by starting with a well-structured and accessible document before any CSS is applied. Then, before CSS is applied, the visual display order should be planned out so that it will match the source order as closely as possible.

After the CSS has been applied, authors should check that the content follows a meaningful reading sequence. This will be covered in a future video. Authors should use the Tab key to move through all focusable elements and make sure that there's a logical tab order and that the visual display order matches the keyboard focus order.

Section six-- how to determine source order? You can determine the source order of a document by turning off style sheets. There are a range of different browser extensions that can be used to turn off CSS, such as the Web Developer Toolbar for Firefox and Chrome by Chris Pederick, the WAVE Browser Extension for Chrome and Firefox by WebAIM, and the Disable Styles Extension for Firefox by AccessibilityOz. This extension disables style sheets, however, it also reapplies, display none, visibility hidden, aria-hidden equals true, and role equals presentation, as these were also hidden from screen readers. This extension attempts to mimic what is read aloud by a screen reader.

Conclusion-- so there you have it, a simple explanation of source order versus keyboard focus order versus visual display order. Except where otherwise noted, this work is licensed under Creative Commons by Attribution-Sharealike 4.0 license. Copyright 2018, California Community Colleges Chancellor's Office. These works are licensed under Creative Commons Attribution 4.0 International License. They're available to everyone and may be repurposed to meet the unique needs of educational institutions.