How to Make Your Email Signature Screen Reader Friendly

Creating an accessible email signature that is screen reader friendly is often overlooked. According to the World Health Organization (WHO), 15 percent of the world’s population live with a disability, including at least 2.2 billion who have a vision impairment or blindness.

The most common oversights when it comes to email signatures are images missing alt text, links devoid of destinations, hard-to-read typefaces, and using colors with low-contrast ratio. Follow the tips below to make your email signature more accessible, or feel free to use our template as a reference.

Here are six simple rules to adhere to when creating an accessible email signature.

1. Be sure to add alt text to all images

Alt text should be descriptive but as short as possible. You should try and avoid using text in images, if possible, and be sure to put a caption underneath if you do use image with text.

<img src="Image-source.jpg" alt="Description Goes Here">

If you’re unable to add alt text to a certain element, such as an icon, you can insert a span element and apply an aria-label with the description of the element.

<i class="facebookIcon">  <span aria-label="[description]"></span></i>

Related: 1.1.1 Non-text Content

2. Double check your links and buttons

Be sure to check all the links and/or buttons in your signature. Whether it’s a phone number, social profiles, or website, make sure that they all have the correct URL destination. Additionally, make sure they are formatted properly by adding an underline or bolding the link itself.

Recommendation: Underline all links at a minimum and bold if needed.

3. Use colors with an accessible contrast ratio

People with low vision or color-blindness have trouble reading text when it doesn’t have strong contrast with the background color. Use your discretion when choosing colors and make sure the text color has a high contrast level from the background. WebAIM has a great tool to check the contrast ratio of your text.

Recommendation: While certain email clients allow you to change the background on elements, including text, sticking to a white or light background for your email signature will make it most accessible.

Related: 1.4.3 Contrast (Minium)

“Today’s workplaces are full of poorly designed ‘productivity’ software—and therefore email accessibility is more important than ever. An inherently accessible technology, the email inbox is the place where most blind and visually impaired people are most confident and productive. As email becomes automated and platforms start to load our emails with non-standard HTML, though, we have to be extra mindful not to create access barriers that will sabotage our employees, colleagues or customers from accessing the information we’re sending them.” -Will Butler, Accessibility Evangelist

4. Choose an appropriate font, font-size and style

The most accessible web safe fonts are Arial, Tahoma, and Verdana. They are all sans-serif fonts that have good readability and legibility. Even though they are not the most visually appealing fonts, they are supported by most, if not all, email clients.

The size of the font should be at least 12-point or larger, but use your discretion as you shouldn’t make it 72pt either.

Recommendation: Use Arial, Tahoma or Verdana, with a minimum of at least a 14-point font.

5. Handy code snippets to make your email accessible and other tips and tricks

• Use <br class="Apple-interchange-newline"> to create new line breaks. Mac Mail App added this class to any <br> tags in their client so developers started using it in email signatures. They have since removed this class, according to Google Chrome. It wouldn’t hurt to add this class if other email clients picked it up.You might ask, why not use <p> tags instead of <br> tags? If you want to start a new point you should use a <p> tag just like in writing when you use paragraphs. You should use <br> tags if you want the content to be part of the same point.
• Use aria-hidden="true" if you want to hide elements from users utilizing assistive technology. Decorative elements such as icons, images, and duplicate text can be hidden using aria-hidden="true".
• Use role="Presentation" when using tables in your signature. This will let screen readers know that the use of table is for presentation purposes and not for data.
• Define global inline styles within the body tag that will wrap your email signature. Use inline styles so that any styling in the <head> tag of your email won’t override the styles in your email signature.
• Do I need to include <html> or <head> tags in my signature? You do not need to include these tags since your email or email template will have it.
  
  

6. Lastly, test your email signature with a screen reader

The most important thing to do is to test your email signature with a screen reader. The screen reader will allow you to examine your signature so you can make appropriate changes if applicable. There are various screen readers you can use for testing purposes, but if you’re using a Mac, every machine comes with the VoiceOver screen reader app and on Windows 10 they have an app called Narrator.

Recommendation: Test your email using VoiceOver, Narrator or a screenreader of your choice.

After you’ve made your email signature accessible it’s time to implement it within your email client. The top three email clients are Gmail, Apple Mail and Outlook. Below you’ll find ways to implement each.

How to implement your email signature in Gmail:

1. Highlight and copy the content of your email signature from CodePen (not the html code).
2. In the top right click on the gear icon ⚙️Settings > See all settings.
3. Scroll down and in the Signature section and paste the contents of what you copied into the signature box.
4. Scroll to the bottom of the page and click Save Changes.

How to implement your email signature in Apple Mail on Mac:

1. Highlight and copy the content of your email signature from CodePen (not the html code).
2. On the top left Go to Mail > Settings.
3. Navigate to the Signatures section, hit the + to add a new signature and paste the contents of what you copied into the signature box. You might see empty boxes where images should be
4. Close out of the settings and you should be good to go.

How to implement your email signature in Apple Mail on iOS (iPhone, iPad):

1. Open the CodePen template in a browser on your phone.
2. Highlight and copy the content of your email signature, not the html code.
3. Navigate to ⚙️Settings > Mail > Signature.
4. Paste the contents of what you copied into the signature box. You might see empty boxes where images should be.
5. No need to hit save as it will auto save once you exit.

How to implement your email signature in Outlook (Outlook 365, Outlook 2019, Outlook 2016):

1. Highlight and copy the content of your email signature from CodePen (not the html code).
2. In Outlook, go to File > Options > Mail > Signatures.
3. Paste the signature into the box provided. You might see empty boxes where images should be.
4. Close the settings and create a new email and you should be able to select your new signature.

Our Email Signature Template

See the Pen Accessible Email Template w. Meeting Link Morey Creative Studios by Morey Socialman (@moreysocialman) on CodePen.

Need expert guidance on making your HubSpot website WCAG compliant? Our dedicated Accessibility Team specializes in transforming complex WCAG requirements into clear, actionable solutions. Let’s make your website accessible to everyone.