CSS Grid & Accessibility
Issue 27
Adventures in UX Design is a newsletter helping you navigate UX roadblocks
While CSS Grid and Flexbox create more opportunities for designers to explore new ways of laying out content, they also make it easier to rearrange the order of content visually in the display. The risk here is that because content/source and design are truly separated, if changes are made visually and source and design get out of sync, problems will arise for people who use the keyboard to tab through a document, and for screen readers.
The authors at MDN web docs explain, “Any time you reorder things with grid layout — or with Flexbox — you only perform visual reordering. The underlying source is what controls things like text to speech, and the tab order of the document.”
“If you reorder things visually using grid layout,” they continue, “this will not change how the items are ordered if the content is being read out by a screen reader, or other text to speech user agent. In addition the reordering will not change tab order. This means that someone navigating using the keyboard could be tabbing through links on your site and suddenly find themselves jumping from the top to the bottom of the document due to a reordered item being next in line.”
The temptation to make quick fixes in your work without going back to the source concerns designers and experts like Jen Simmons, Rachel Andrews, and others who caution that risking accessibility comes at a cost.
Rachel and others emphasize the need for developers to focus on getting the source and documentation right first before they separate the source from design. And if changes are made visually, teams need to build into their process time to update the source to match the visual changes. Don’t use the ease at which CSS Grid and Flexbox allow you to make changes to forget about your source.
Similarly, Rachel Andrews cautions that we shouldn’t strip out semantic elements to flatten out the source. Focus on creating the most accessible source order of your content and use Grid and Flexbox to create an optimal display for it. Your source order is important for navigation.
Why is accessibility important? Because as designers and content creators, our goal should be to create experiences available to as wide an audience as possible. We can’t assume that everyone looks like us, has the same experiences, and accesses information in the same way that we do.
READ: CSS Grid Layout and Accessibility at MDN web docs
READ: Flexbox & the keyboard navigation disconnect
READ: Accessibility Matters by Vox Media.
