Add source order visualization to grid inspector
Categories
(DevTools :: Inspector: Layout, enhancement, P3)
Tracking
(Not tracked)
People
(Reporter: aroselli, Unassigned)
References
(Blocks 1 open bug)
Details
Attachments
(3 files)
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.89 Safari/537.36 Steps to reproduce: 1. Visit a page using named regions in CSS grid: https://s.codepen.io/aardrian/debug/wrYjRP 2. Inspect the grid container. 3. From the Inspector, choose the Layout tab. 4. Examine the grid elements. Actual results: The grid layout inspector does a great job of showing me the named regions, column and row spans, line numbers, and gutters. This is awesome. But I have a feature request. Expected results: This is a feature request. I would like an option to show the source order / reading order in the layout view. I have written my ideas in a blog post (which I am happy to paste in full here): http://adrianroselli.com/2017/11/feature-request-for-firefox-grid-inspector-source-order.html I have also made a (terrible) example image that shows what I am thinking. Essentially, use numbers and arrows to show a developer how the source order appears under the layout, and as a result in what order a screen reader or keyboard-only user will experience the content. I think there is value in bringing this to other layout methods, but I am limiting this report to CSS grid.
Reporter | ||
Comment 1•6 years ago
|
||
There is a similar issue, though it is different than this one since it is asking for an audit feature: https://bugzilla.mozilla.org/show_bug.cgi?id=1415363
Updated•6 years ago
|
Reporter | ||
Comment 2•6 years ago
|
||
I made a couple better quality images. This is one of them. It shows the counters in the center of each grid area, with arrows connecting them to show reading order.
Reporter | ||
Comment 3•6 years ago
|
||
I made a couple better quality images. This is one of them. It shows the counters in the corner of each grid area, with arrows connecting them to show reading order. It also shows one that is most likely breaking reading order by highlighting it in yellow.
Updated•6 years ago
|
Updated•6 years ago
|
Reporter | ||
Comment 4•5 years ago
|
||
I created a bookmarklet that acts as both a proof of concept and a stop-gap until this feature is natively implemented in browsers and/or testing tools: http://adrianroselli.com/2019/04/reading-order-bookmarklet.html
Comment 5•5 years ago
|
||
Yura: I was wondering if this feature would tie into any of your plans for the Accessibility Inspector.
Comment 6•5 years ago
|
||
We were definitely considering tab/focus order visualization in the near future, similar to a11y insights, though I understand this is for all content. It's relevant for grid/flex/etc like floats so can be done in general enough way. If we could think of a meaningful way of visualizing content order (especially on massive pages) from the UX perspective, I could consider taking it on too. Adrian, I'll check out your link, though it seems like the website is offline right now.
Reporter | ||
Comment 7•5 years ago
|
||
Database server upgrade at my host. Poorly timed, but my site is back now. To gather both of my blog posts…
Original request:
http://adrianroselli.com/2017/11/feature-request-for-firefox-grid-inspector-source-order.html
Prototype:
http://adrianroselli.com/2019/04/reading-order-bookmarklet.html
Reporter | ||
Comment 8•4 years ago
|
||
I made a video that played at Smashing Conference NYC to try to garner broader community support: https://adrianroselli.com/2019/10/smashing-web-we-want-video-pitch.html
It is also on YouTube: https://www.youtube.com/watch?v=UjXCAuWuXdk
Reporter | ||
Comment 9•4 years ago
|
||
Microsoft's Edge DevTools team has added this feature to Chromium and it will be in Edge 86:
https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/experimental-features#enable-source-order-viewer
Comment 10•4 years ago
|
||
Thanks Adrian, that's awesome!
This bug is related to Yura's recent work on displaying tabbing order.
Updated•4 years ago
|
Updated•1 year ago
|
Description
•