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:

  1. Open the Elements pane.
  2. Open the Accessibility pane in the drawer (bottom) panel.
  3. Under the Source Order Viewer section, select the Show Source Order checkbox.
  4. Highlight any HTML element to display an overlay that the order in the page source.
Source Order Viewer in the Accessibility pane

Grab Edge Dev (or, if you are reading this in October, Edge 86) and enable the feature:

The Source order viewer settings in the dev tools.
In Edge 86, press Ctrl + Shift + I to open the dev tools, then F1 to open the settings, arrow down twice to Experiments, then Tab to and select “Source order viewer”.

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 accessibility inspector in the Edge dev tools showing a checked source order option, with the sections of the page numbered to show their relative order in the code; first of two images showing the length of a page. The accessibility inspector in the Edge dev tools showing a checked source order option, with the sections of the page numbered to show their relative order in the code; second of two images showing the length of a page.
The only reason I keep using this page for the demo is because it was in my original video pitch, not because I have an axe to grind.

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?

Still from the video showing each piece of content outlined and numbered, matching the numbering from the Canary example.
Still from the video.

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
1:09 #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

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.




Neil Osman; . Permalink

Very nice! And actually, a relatively quick turn-around time (less than a year) from want-to-fulfillment! Kudos!

Carolyn MacLeod; . Permalink

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

Leave a Reply to Neil Osman Cancel response

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>