I have long been concerned about the potential accessibility problems that grid layout could cause. These essentially centre around the concept of disconnecting the source from the visual display.
As a short explanation, values of display – other than none, do not change the logical order or visibility of your content. So, the order that things are in the source, is the order that they are tabbed to, and the order they are read out by a screen reader. If you mess around with the order – be that with flexbox flex-direction: row-reverse, or grid-auto-flow: dense, or by positioning items with grid layout – you risk making a very odd and disconnected experience. I’m not an a11y expert, for a much better description see:
- The Dark Side Of The Grid: Visual Order
- Source Order Matters
- Flexbox and the keyboard navigation disconnect
When people first start using grid they do pretty basic things, and so for a couple of years we haven’t really been running into this too much in the wild. However, it seems that all of a sudden I’m seeing really great tools and tutorials pop up, that make me worry. You’ve all learned grid, you are now doing neat stuff with it, and some of that stuff is potentially terrifying from the content reordering standpoint. It has to be said, most of the people publishing these tutorials are also adding a warning about this issue, and I’m glad that the message is out there. I think I have included that information in every one of my grid talks one way or another. However we know that not everyone is so diligent, and the code of those tutorials will not always be used with such care. Recent examples are:
Creators of these things, please don’t see this as me calling you out personally, I needed to include them to demonstrate the things people are doing which are cool but also potentially problematic in the wild.
I think this is something we sorely need to address at a CSS level. We need to provide a way to allow the tab and reading order to follow the visual order. Source order is a good default, if you are taking advantage of normal flow, a lot of the time following the source is exactly what you want. However not always, not at every breakpoint. If we don’t give people a solution for this, we will end up with a mess. We’ve given people these great tools, and now I feel as if I’m having to tell people not to use them. Some people won’t, because they know and care. Many others will because they either don’t know, don’t care, or are using some visual grid builder which does not expose this information to them.
For developers, and those writing tutorials reading this, please do consider these issues in your excitement to use Grid Layout. Please ensure the issue is raised in any talk, tutorial, or tool you create. A pretty good way to check that you haven’t made a terrible mess is by using the Tab Stops Checker in the Accessibility Insights tool.
For those working on a11y and CSS, this has been discussed before, however given the things I am starting to see in the wild, I think this has to have some urgency behind it. We’re can’t keep asking people to abstain from using the powerful and fun tools we’ve handed them. We need to offer a way to use these things safely, particularly before we end up with a lot of tools which auto-generate grid code.