Web developers use a variety of techniques to control the layout of a webpage, some of which have the unintended effect of making the content inaccessible to people with disabilities.
- Ensure order also conveys meaning
- Reading order and tab order should be the same as the display (visual) order
- The sequence in which elements receive focus must reflect the intent and meaning of the page content
Web developers use a variety of techniques to control the layout of a webpage, some of which have the unintended effect of making the content inaccessible to people with disabilities. There may be conflicting reasons for doing so, whether advised to by the SEO expert, or the need to have something further down the document appear higher up the page for other business reasons.
Developers enjoy a challenge and have helped to explore ways to present the order and location of content on the page differently to how it appears in the HTML. For example, the design may have a site wide page structure of a header section surmounting a left sidebar, a main column and a right sidebar, with a footer underneath.
One thought might be to structure the layout by using a table. While using tables for layout goes against the principle of separating content from presentation, WCAG 2.0 does not directly say that you can't or shouldn't use a table for layout in this way — as long as certain conditions are met. Thankfully, these days using tables for layouts are considered bad practice and low quality. But a developer may still think of ordering the content containers in a visual order rather than a logical order.
Order also conveys meaning
The diagrams demonstrate the difference between a visual order and a logical order.
The diagram on the left assumes the order is: header, left, main content, right, footer.
The diagram on the right assumes the order is: header, main content, left, right, footer.
Although the left diagram seems like a convenient way to order the containers within the document, the diagram on the right is a better conceptual model of how the content should be ordered. It places the main content higher up in the flow and assumes the left panel should precede the right panel.
What a developer needs to understand is that people with disabilities who use assistive technologies like screen readers heavily depend on the content order because these technologies heavily depend on the logical order conveyed in the document.
Guideline 1.3 Adaptable states:
Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
A related concern is ensuring that the order in which focus moves from element to element on the page in response to keyboard commands maintains not just a logical sequence, but also one that accurately conveys the intended meaning of the content.
A person using a keyboard to tab through the focusable elements on a webpage needs these to be presented in a sequence that preserves the meaning of the content on the page as a whole.