How to make a responsive email’s swap out header accessible

So what's the problem?

So you care about accessibility and you want your email to open with an <h1> tag but your email begins with a banner, perhaps with a logo embedded or some text, and it also gets swapped out for a higher resolution version responsively? Where do you fit that <h1> if you don’t have live text?

Let’s look at an example from a recent project -

View of the banner and logo

As you can see, the image contains the hotel logo as well as a lovely view from the hotel. But this banner is really about the hotel name and therefore the title of the email so that’s the text we’ll aim for.

<h1>, images and alt text

We all know that images should include alt text but what you might not know is that if you wrap an image with an <h1> tag, it takes on the alt text and elevates it to h1 status!

So effectively the alt text now has two roles -

- The heading text
- The image description

And if your banner is also wrapped in a link,

- The link text

So this can make writing the alt text a bit harder as you need to think, does it work for each of these roles?

DIVs to the rescue!

Thanks to some amazing help from Mark Robbins (https://twitter.com/M_J_Robbins), I discovered that I could use a DIV for each image and also apply the appropriate classes to show and hide each banner depending on the viewport size.

As the alt text is also a description for the link, it’s quite safe to exclude the aria-label from the a tag.

Desktop and resonsive banner each wrapped in a DIV, wrapped in an h1!

Show/hide media query CSS

Wrapping up

I hope this has helped you in your quest to make accessibility a key part of your email design and build process!