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.
I made this video pitch in late 2019 for Microsoft’s “The Web We Want” initiative and it was picked by the audience and the judges (YouTube version if the embed does not load):
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:
- 0:00
- I want a source order viewer for rearranged content ↬ The Web We Want
- 0:11
- 1.3.2 Meaningful Sequence — Level A
- 0:42
- 2.4.3 Focus Order — Level A
- 0:52
- Accessibility Insights
- 1:03
- C27: Making the DOM order match the visual order
- 1:05
- Source Order Matters
- 1:07
- HTML Source Order vs CSS Display Order
- 1:09
- irc.w3.org #css 2015-09-09
- 1:13
- The future of layout with CSS: Grid Layouts
- 1:19
- Flexbox & the keyboard navigation disconnect
- 1:25
- The responsive order conflict for keyboard focus
- 1:27
- Does reordering content affect accessibility? — A11ycasts #21
- 1:34
- The Dark Side of the Grid (Part 2)
- 1:40
- Grid, content re-ordering and accessibility
- 1:47
- CSS Grid Generator
- 1:55
- Tweet from Jen Simmons
- 2:02
- Feature Request for Firefox Grid Inspector: Source Order
- 2:03
- Bug 1415410: Add source order visualization to grid inspector
- 2:08
- #394: Reading order visualization
- 2:20
- Schedule | YGLF Lithuania
- 3:25
- Reading Order Bookmarklet
Update: 29 June 2021
While this feature has been available in Chrome as an experiment for some time, it is getting a proper release as of Chrome 92:
The order of content in an HTML document is important for search engine optimization and accessibility. The newer CSS features allow developers to create content that looks very different in its on-screen order than what is in the HTML document. This is a big accessibility problem as screen reader users would get a different, most likely confusing experience than sighted users.
I may have worded that differently, but what is important is that the Chrome team saw enough value to keep it.
4 Comments
Reply Amazing
Reply Very nice! And actually, a relatively quick turn-around time (less than a year) from want-to-fulfillment! Kudos!
Reply Thank you for pushing that, it’s awesome!
Reply 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
Leave a Comment or Response