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:

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

4 Comments

Reply

Amazing

Neil Osman; . Permalink
Reply

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

Carolyn MacLeod; . Permalink
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

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>