Join GitHub today
GitHub is home to over 36 million developers working together to host and review code, manage projects, and build software together.Sign up
Reading order visualization #394
Is your feature request related to a problem? Please describe.
When a user is tabbing through or listening to a page, having content visually appear outside of an expected flow can be counfounding. For users who cannot see the page, it also means offering help (face-to-face or through documentation) can be harder since the code order is opaque to most users. There are even WCAG success criteria devoted to this (1.3.1: Info and Relationships; Level A and 1.3.2: Meaningful Sequence; Level A). CSS absolute positioning, floats, flex, and grid can all make it trivially easy to create a page that is visually out of sequence but does not immediately register as a problem to a developer.
Describe the desired outcome
As a developer / tester / auditor / etc, I see benefit in providing an easy way to visualize the reading order of content on the page. In addition, applying simplified rules (if the arrow goes up and to the left for LTR languages, for example) can highlight places that a developer should review.
Describe alternatives you've considered
I see Accessibility Insights provides a visualization for tab order that looks very similar to my idea for visualizing reading order. This suggests that the visualization technique itself has some merit. Attached is a sample image I made for my Firefox feature request (with the last arrow in the step highlighted because it most likely violates reading order).
@ferBonnin , yes, I have. That is what prompted me to post this feature request.
That feature only indicates interactive controls (or content that has been made a tab stop with
In my example above, none of that content is tabbable so its reading order is not exposed in the tool. My feature request would expose its reading order.
Does that help clarify it?
This is a great suggestion that can help add visualizations for a couple of requirements.
I created a bookmarklet that acts as both a proof of concept and a stop-gap until this feature is natively implemented in browsers and/or testing tools: http://adrianroselli.com/2019/04/reading-order-bookmarklet.html