CSS Grid: Responsive and Accessibility

Reflow your content with ease

In the first post I wrote about my very first learnings with CSS Grid, I showed how I took a pattern I’ve used many times and reproduced it with a lot less code. After learning about how to do something simple, I started wondering about the other properties of CSS Grid, such as the reflow—how you can move content around on the screen without having to worry about source order in the HTML. This is commonly talked about as “display order” versus “source order.”

I mean, this is huge. We can finally break out of the thing that has been hampering us for so long. Just as with flexbox, CSS Grid allows you to move content around the screen without worrying about the HTML source order. In CSS Grid you use the grid-column property, just as we’ve had the order property for a while in flexbox.

The freedom to move content around based on screen size and what makes sense visually rather than being left to manipulate it with extra CSS using positioning is more exciting than I can really say. Often in past projects there was a lot of compromising with designers to get a layout that would work at various screen sizes, but wasn’t always the greatest when it came to the display order.

While all of this is really great, and I encourage you to play with around to see what you can do, you should be careful as keyboard users may not be able to use your site as easily.

Keyboard access with reflow of content

I’ve grown a bit cynical over the years as new things have come out to make life easier when we build for the web and that cynicism was present as I dug into CSS Grid. I wanted to find the various gotchas, things that could pose problematic when using it, especially when it came to accessibility. And in CSS Grid, it’s all about source order versus display order.

When you start moving content around in the display and it’s not in the same order as your HTML, then you can run into some large problems with tab order for keyboard users. You can see some great examples of this in Adrian Roselli’s HTML Source Order vs CSS Display Order. Focus in the CodePen embeds and tab around the display and you can see the problems.

Scott Jehl points out the same issue in Maintaining Accessiblity in a Responsive World. His unfortunate conclusion is:

For our client’s particular tab order issues, we weren’t able to do much to improve the tab order in some of our layouts, but we did add some navigational cues within the markup to help mitigate the problem.

Rachel Andrew has also been warning about this: Modern CSS Layout, power and responsibility. With the new layouts we have a lot of power, but we also have a responsibility to make sure that our users can access and understand our content no matter how they interact with it.

While I’m excited about the possibilities with CSS Grid and being able to display content in ways that make sense visually, I’m also very concerned that we will forget about keyboard users. I’m hoping that as we start to use CSS Grid and flexbox more and more that an easy solution will be found, but I worry that in the interim there will be a lot of confused users as they try and navigate sites that radically change the display order from the source order.