CSS used with HTML and XHTML
This technique relates to:
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.
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.
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 or XHTML and
not the CSS. This may change in future specifications. It may also differ from the
visual presentation order.
- 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.
Resources are for information purposes only, no endorsement implied.
- Visually examine the order of the content in the Web page as it is presented to the end user.
- Examine the elements in the DOM using a tool that allows you to see the DOM.
- 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.) "
- Step #3 is true.