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
Accessibility and Grid
I have written about the ways that CSS can mess with the content order of the page (and how important source order is). While I specifically addressed CSS flex and CSS grid, this issue is not unique to them. Floats and absolute positioning have been doing their damage for far longer.
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).
I am not alone in raising this issue. Léonie Watson wrote about it a few months after mine in her post Flexbox & the keyboard navigation disconnect, and Rachel Andrew devotes an entire chapter to it in her book The New CSS Layout.
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
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 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).
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.
Firefox Bugzilla Request
I filed an issue in Bugzilla: Bug 1415410 – Add source order visualization to grid inspector
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.