• Projects
  • Blog

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

Transforming an email banner with no live text into an accessible format

Posted: 19th September 2023

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.

Samphire Rottnest banner with logo

<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!