Looks right, reads wrong: Making email accessible  

Accessibility is an essential part of email. Many people actually read by keyboard, screen reader, voice control, or with Zoom. So, how we structure and order content, especially within our emails, really matters.

If you design emails, you’ve likely reversed stacked columns on mobile to bring key content to the top. It may look nice, but assistive technology reads it in the wrong order. Screen readers jump around, keyboard focus bounces up and down, and suddenly your carefully crafted layout becomes confusing.

However, we’ve introduced new CSS properties, reading-flow and reading-order, that fix this! These properties let us control how content is read and focused to match what’s on screen.

We’ll explore how CSS properties work, share an email-friendly example, and show how it’s already built into Design Studio — so that you can create emails that not only look right, but read right, for everyone.

There is a common pattern in email design where you have two or more columns side by side when viewed on a desktop, then when viewed on a mobile, these columns get stacked vertically. Sometimes people use reverse stacking, where the second column gets positioned on top of the first column when viewed on mobile.

The issue with doing this is that the visual order of the content no longer matches the content order. Assistive technology, such as screen readers and tabbed inputs, will follow the content order. This means the focus will first jump down to the bottom column, then back up to the top column, and then jump down again to continue with the email's content. All this leads to a disjointed and frustrating user experience.

The easiest way to see this yourself is to add a link to each column and use the tab key on your keyboard to navigate the email content.

These new properties have been added to the CSS Display specification as a means to address these long-standing issues.

When using flex or grid layout is very easy to use. Let’s look at a simple code example.

Here, we are reversing the content order by using flex-direction: row-reverse; but then by adding reading-flow: flex-visual; it means the content will be read out and focused in the visual order.

When working in email flex and grid layouts aren’t used often as they have limited support. Instead, we can use reading-flow: source-order; this will allow us to then individually set reading-order values to each item we’ve moved.

When reading-flow: source-order; is set on an element, each direct child element effectively has a reading-order value of 0 This means it will default to still reading in the content order. If we then set one of the child elements to reading-order: -1 that is lower than 0 so it will be read before all the other elements. If we were to set it to reading-order: 1; it will be read after all the other elements. Or we could set a reading-order value on each element, and they will be read in the order of those values.

Numbers don’t need to be sequential; we could set them to -12, 7, 42 and it would still work fine. If two elements have the same value, then it will fall back to using the content order.

Also, these reading-order values are all scoped within the reading-flow: source-order; element, so if we have repeated patterns in our content, we don’t need to worry about reusing numbers like you may have encountered when using tabindex.

This is stripped back to give a clean, simple example. To get support across more email clients, you’ll need to add more code.

Note: For this to work, the elements with reading-order set on them need to be direct children of the element with reading-flow:source-order. Be mindful of that as you add this to your more complex email column code.

These are new CSS features and, at the time of writing, are only supported in Chromium browsers, including Chrome 137+ and Opera 121+.

There are support requests for Firefox and Safari, so we hope to see support for these platforms soon.

Email support is currently low, partly due to a lack of browser support. The only email clients I’ve seen it working in are Notion Mail and Samsung Mail. However, when this is implemented in Safari, we’d likely see support come to Apple Mail as well as some other iOS apps at the same time, and as it’s added to Firefox, we may see support in Thunderbird.

I believe it’s still very much worth adding to your code, as anecdotally, we’ve heard people often switch to the web version of an email to get a more accessible experience when needed.

If you are using Design Studio, then this is already added into the columns component when you switch on the reverse stacking option.

Within Design Studio, we have a strong focus on accessibility, which is why the reverse stacking of columns was only recently added. We wanted to make sure we could make it as accessible as possible, given the limitations of email.

Accessibility and design don’t have to be at odds. With a little care (and the right tools), you can build layouts that work beautifully for everyone.

If you’re using Design Studio, these accessibility improvements are already part of your workflow. Reverse stacking is just one of many small details we’ve built to help you create more inclusive, polished emails without extra effort.

Ready to give it a try? Explore Design Studio to start building emails that look right and read right.