An Alternative Theory

As we strive to maintain and build more accessible content, we are sometimes required to build what is functional first and focus on accessibility second. However, in order to create new guidlines around email accessibility, we must be willing to break the status quo. This raises the question: Where do we draw the line, and if it’s not accessible, can it be considered functional?

As we continue to learn ways to implement accessibility into email, it’s still great to discover and share new hacks. Because that is what makes email so much fun. This idea is all about an alternative to alternative text.

What is alternative text?

Alternative text has been around since the beginning of grunge music, or somewhere around that era, and quickly became the easiest attribute to misunderstand and improperly implement. Most commonly, it functions to provide a textual alternative to non-text content, which helps optimize for SEO, and situations when images do not not load. It also plays an important role with screen reader interactions.

One misconception about alt text, is that it must be presented within the alt attribute of the img element. While this is the most common placement, it can also be presented within the surroundings of the image itself.

Alt text and email

Styling alt text with CSS is becoming a standard part of the email developer's workflow, and offers an opportunity to add a professional touch that that can elevate customer satisfaction.

. .. .but what if we want to serve different content in lieu of these images, and the beautifully written alt text? With a few lines of HTML and CSS, we can. While still incorporating images to present information in a visual manner as usual, this method will display completely different content for those who opt out of the visual experience.


The basic markup

Create the main container and apply dimensions to match the natural width and height of the image, and don't forget to set overflow:hidden. This will act as our viewport.

<div class="main-container" style="width:300px; height:300px; max-height:300px; overflow:hidden;">  
 <!-- content -->
</div>  

When adding the image, it's important to follow a few recommendations:

  • leave out width and height attributes
  • set alt as an empty value
  • include aria-hidden="true" to ensure screen readers ignore the element
  • use title to provide a meaningful link description

This example uses one image. However, you may choose to stack images, or even incorporate different content types.

<a href="https://www.google.com/?q=images+are+enabled" title="Link Description">  
 <img src="https://unsplash.it/300/300" style="display:block;" alt="" border="0" aria-hidden="true">
</a>

<!-- alternative content container here -->  

Everyone hides in their own unique way, here's how we do it

Since overflow:hidden is not supported 100%, and it's necessary for .main-container, we'll want to restrict the alternative content from rendering in certain email clients. This can be accomplished by using the checkbox hack, wrapped in a MSO conditional statement. Combined with a few lines of CSS, this will work just perfectly.

Applying role="img" informs the screen reader that the contained elements represent an image.

<!--[if mso]><!-->  
 <input type="checkbox" id="alternative" lang="x-alternative" class="hide-input" style="display:none !important;mso-hide:all;" checked>
  <div class="alt-content" lang="x-alt-content" style="display:none; overflow:hidden; mso-hide:all;" role="img">

   <!-- alternative content here -->

  </div>
<!--<![endif]-->  

Next, add the content that you want to display when image is disabled into its own containing element within .alt-content, and set the width height dimensions to match the image.

<div style="width:300px; height:300px;">  
 <a style="color:#e83634;" href="https://www.google.com/?q=images+are+NOT+enabled">
  Alternative link / Content
 </a>
</div>  

Finally, add the corresponding CSS to ensure the alternative content is displayed where it is supported.

<style>  
.hide-input {
 display:none !important;
}

#alternative:checked + .alt-content,
* [lang="x-alternative"]:checked + [lang="x-alt-content"] {
 display: block !important;
 max-height: none !important;
}
</style>  

Where do we go now?

This method can be used in a variety of scenarios. Which may be for custom link tracking, or changing a message completely based on environments.

Either way, used or not, let this spark your imagination to keep experimenting and innovating, while expanding on great ideas to build greater ones.

Here is a complete codepen.io/theotherstevenc example, that incorporates srcset for retina image support.