Source Order Viewer in Edge 86
Edge 86 has introduced a feature that shows the source order of a page. You can read more about it in the post What’s New In DevTools (Microsoft Edge 86)
Source Order Viewer is an experiment that displays the order of elements in the page source. The on-screen display order may differ from the order of the source, which confuses screen reader and keyboard users. Use the Source Order Viewer experiment to find the differences between on-screen display order and the order of the source.
After enabling the experiment, ensure you restart the DevTools. To use Source Order Viewer:
- Open the Elements pane.
- Open the Accessibility pane in the drawer (bottom) panel.
- Under the Source Order Viewer section, select the Show Source Order checkbox.
- Highlight any HTML element to display an overlay that the order in the page source.
Grab Edge Dev (or, if you are reading this in October, Edge 86) and enable the feature:
Then visit a page that is familiar to you and uses CSS to control the layout — ideally something like CSS grid, flex, float, or (ugh) even tabled layouts. Just like in my bookmarklet you will need to choose a node that contains the nodes whose order you want to see (except here you can click it).
The Microsoft Edge team added this as a result of my years’ long campaign for a source order viewer to be built into the browser dev tools.
Jump to roughly 3:46 in the video above to see how my bookmarklet corresponds to the screen shots just before the video. Cool, huh?
Links to the sites and pages referenced in the video:
- I want a source order viewer for rearranged content ↬ The Web We Want
- 1.3.2 Meaningful Sequence — Level A
- 2.4.3 Focus Order — Level A
- Accessibility Insights
- C27: Making the DOM order match the visual order
- Source Order Matters
- HTML Source Order vs CSS Display Order
- irc.w3.org #css 2015-09-09
- The future of layout with CSS: Grid Layouts
- Flexbox & the keyboard navigation disconnect
- The responsive order conflict for keyboard focus
- Does reordering content affect accessibility? — A11ycasts #21
- The Dark Side of the Grid (Part 2)
- Grid, content re-ordering and accessibility
- CSS Grid Generator
- Tweet from Jen Simmons
- Feature Request for Firefox Grid Inspector: Source Order
- Bug 1415410: Add source order visualization to grid inspector
- #394: Reading order visualization
- Schedule | YGLF Lithuania
- Reading Order Bookmarklet
Very nice! And actually, a relatively quick turn-around time (less than a year) from want-to-fulfillment! Kudos!
Thank you for pushing that, it’s awesome!
This is incredible, thank you for pushing that. I always knew DOM order was important and I was skeptical about rearrangements or miswriting content even without flexbox, but that demo you put together tells the problem exactly. Even if someone have no idea what the problem is, it’s now shining in our face