Feature Request for Firefox Grid Inspector: Source Order
This post is both a feature request and an opportunity to share my thoughts in a format I find easier to use than a Bugzilla report. And Jen Simmons said I could do it as a blog post. So there.
Firefox Grid Inspector
I am a big fan of the grid inspector that the Firefox developer tools offer. I’ve been playing with grid for a while, even deploying it on client sites. Being able to see named areas, spanning columns and rows, and all my spacing has made it much easier. For that, I am grateful to the inspector.
So grateful that I tweeted an animation of the grid inspector in action on one of my practice Codepens (I intentionally did not use a client site). Jen Simmons was kind enough to respond and ask for any feedback or feature requests. Which is what this is, but in my own weird way.
Yeah, I’m a big fan of Firefox’s grid tools. Being able to see my grid tracks, named grid regions, & generally make sense of my code is ace. pic.twitter.com/vhL2DHiQnD
This is a genuine accessibility concern. When a user is tabbing through a page or listening to the 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 (personally 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).
The average developer, in my experience, will not see my post, Léonie’s post, or even Rachel’s dedicated chapter (nevermind other sources). I think that we need to bake these kinds of warnings into the tools we use.
The Feature Request
While this request is for the grid inspector, I think it would be swell to add it to the inspector in general to flag anything shoved out of reading order (flex, float, and absolute positioning), but I haven’t yet thought out how that might be exposed.
Take the grid implementation I tweeted and let’s use that as my example. My intended output is print, so re-arranging the content within the grid to fit on a sheet of paper means it is going to break any reading order that a keyboard or screen reader will use. For an audience of me, this is ok. For a general audience, this is probably not ok.
Imagine if when I pulled up the grid inspector, it also visually showed me the source / reading order. Perhaps through a series of arrows and numbers. I have made a quick prototype using a screen capture and PowerPoint (I don’t have Photoshop on this machine and I am on a plane). Obviously for smaller elements (such as icons) this can fall apart, since the numbers and arrow heads will easily be larger than the icon being marked.
While it would be nice for the inspector to flag items that break out of the reading order, taking into account language settings, I don’t think it needs to go that far (yet). Perhaps providing a link to an informational article at MDN would be more than enough
I put the circles in the middle of grid items for no particular reason except they fit on the screen better. Obviously the circles and lines would not extend past the browser chrome, and these circles and lines are awful, but I am not exactly a PowerPoint expert and doing this on a plane is tough.
Update
Now that I am home, using my machine, and can Photoshop some stuff, I can really let me design skills shine (hah)! Anyway, I made a screen shot showing the entirety of a grid area and show it with the grid inspector dev tools as they are today. This identifies the current situation.
The first image is the sample page as seen normally in Firefox. The second image shows the same page with the Firefox dev tools activated. The dev tools are set to show the overlay grid and the line numbers.
The following two images show how I envision the source order visualization working. Number each grid area, then draw arrows showing the order. One shows the counters in the center of each area, while the other shows them in the upper left corner. This approach seems to make more sense to me (for LTR languages) as that is where a user will likely start reading the content (excluding layout within the grid area).
The first image shows the counters in the center of each grid area, while the second shows them at the start of the content area (in this case for LTR languages).
You might notice that one of the arrows looks different in the second example.
I think that for cases where the next grid area is up and to the left (for LTR languages), that implies a likelihood that the reading order is going to break from the visual display.
Since grids can be used to make faux columns, any case where the next item in the reading order is to the right (for LTR languages), even if visually higher in the page, cannot be assumed to be an issue. I think that any time the reading order is to the left horizontally or up, then that might be worth highlighting as a potential issue.
The animation I have dropped here demonstrates how that might work in a case where the numbers and arrows animate into place.
Wanna Play Around
I have all the files as high-resolution files and a Photoshop document stuffed full of reasonably-named layers and layer groups. Just let me know.
I would like to see a variation of this for a flex inspector, for the same reasons. You can respond to Jen Simmons’ tweet if you agree.
Reading / source order with indicators when the order breaks from the page language default reading order.
Update: 20 March 2019
I was traveling and conferencing when Microsoft released its Accessibility Insights tool, but I saw this tweet from Manuel Matuzović that looked kinda familiar:
Accessibility Insights shows the order and flow of tab stops, so interactive controls (or those explicitly given tabindex="0". I think Microsoft can take this a step further and use it to show reading order of the entire page. So I filed a feature request asking for just that: Reading order visualization #394
Update: 13 April 2019
I have made a proof of concept in bookmarklet form and I have linked it to the feature requests listed above: Reading Order Bookmarklet
Update: October 15, 2019
I made a pitch video:
If that video is too large or otherwise chunking, view it at YouTube, which does a better job with streaming. It has the same captions. Links to the screen shots and resources mentioned in the video are available at Smashing / Web We Want Video Pitch.
Update: 9 September 2020
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”.
Microsoft has added a source order view to Edge 86 which, at the time of this writing, is in the Dev channel and must be enabled. It also lives in Chromium, so could do this in Chrome as well if you prefer. I give a bit more context and more screen shots in my post Source Order Viewer in Edge 86.
Leave a Comment or Response