Subscribe

A11Y 101: Content flow matters

✍️

When building websites its important to note the flow of content

5 Jun, 2022 Β· 2 min read

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.

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

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:

4
3
2
1

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.

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.

See the Pen Untitled by Chris Bongers (@rebelchris) on 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

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next πŸ“–

A11Y 101: Recap

11 Jun, 2022 Β· 2 min read

A11Y 101: Recap

A11Y 101: WAI-ARIA live

10 Jun, 2022 Β· 3 min read

A11Y 101: WAI-ARIA live

Join 1509 devs and subscribe to my newsletter