What does css grid mean for accessibility?
Have you ever tried tabbing through a webpage? Tabbing takes a user from one focusable element (a link, button, input, etc) to the next. Its how some people navigate the internet. The tab order follows the DOM order — i.e. the order that your HTML is written in. A user-friendly tab order, as you might expect, starts somewhere towards the top left. It moves from left to right and from top to bottom. If you move your elements with CSS, the tab order will continue to follow the HTML order, and not reflect the visual order established by your style sheets. The visual sequence — the actual visual presentation of the content, can potentially become totally out of whack with the DOM order. If you don’t fully understand what I’m talking about, watch this video.
CSS grid makes it incredibly easy to move content around the page independent of the source order. The order of elements on the page can be decoupled from the order of elements in the markup. While this is useful in some situations, it could lead to a confusing tab order that jumps around the page — the keyboard user may be thrown right-to-left then right again, down the page then up , etc. This will be a disorientating experience. I have purposefully taken this to its extremes in a CodePen demo. It’s called ‘Tab Mania Nightmare’ to emphasise the point.
Léonie Watson, an accessibility expert, wrote about this topic in regard to flexbox. The problem is likely to be far more common with CSS grid.
I’m a solo web designer. I design in the browser and move things around to see what works. CSS grid will make this effortless. But once the design is in place, there’s no need to leave focus-able elements strewn across the page in a random order. Source order is important. It’s the order that screen readers use. Its also the order that users will experience in syndicated content or on apps like Pocket and Instapaper. For some sight-impaired people wholly reliant on a screen-reader, the visual order will be irrelevant. These users may benefit from the ability of developers to achieve the layout they want without compromising the HTML. But for other users who need to navigate by keyboard while also looking at the screen, we should avoid disconnecting the DOM order and visual order unless you really need to.
