DEV Community

Cover image for A11Y 101: Content flow matters
Chris Bongers
Chris Bongers

Posted on • Originally published at

A11Y 101: Content flow matters

I'll be honest with you, I've made this mistake we will look at in this article many times before.

The mistake we are talking about is content flow. In simple terms, which direction does your content flow in?

When we write our code, there is some semantic follow-up.

Enter fullscreen mode Exit fullscreen mode

As you can see, these divs are represented in a logical order in the dom.
The main thing is screen readers will always read it in this way.

However, with the magical powers of CSS, we can manipulate the order and reverse it.
For example, we could wrap it on the above and apply flex-direction: column-reverse;.

Now the visual user will see the following flow:

Enter fullscreen mode Exit fullscreen mode

You might think, alright, but why does that matter?
And it gets confusing when we convert these elements into cards and try to use keyboard navigation.

Flow direction change demo

In the video above, we can see the keyboard navigation focusing on the correct flow, but for a visual representation, it's super unclear why the flow we see isn't represented.

You can even try it yourself in this CodePen.

When to be careful?

So, while writing this article, I looked at my website and still reversed some visual elements.

Including my mobile article cards, they switch around the image and the title visually.
But seeing as they are not separate tab elements, I found no harm in this.

Although, I've reached out to some accessibility experts to get their opinion on it.

My guidance at this point is never to change the focus order from the source order.
However, you could make exceptions if it makes better visual sense for elements that don't receive direct focus. (Keep this to a minimum)

Action item

Try and navigate through your website. Is the tab order the same as the visual order?

You'll be surprised by how many modern websites the tab order is wrong.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (2)

anuraghazra profile image
Anurag Hazra

Nice article. Logical tab order is very important.

Here's a production grade mistake by facebook:

dailydevtips1 profile image
Chris Bongers

Yep! Even big companies make these mistakes.
And to think they probably even have a accessibility team 🀯