Accessibility in Messaging

Following accessibility standards in your marketing messaging demonstrates to your existing customers that you proactively think about their needs and opens you to a wider audience.

General accessibility best practices

There are some general approaches you can take to create accessible messaging.

  • Incorporate Responsive design
  • Use a logical reading order
  • Use HTML elements
  • Use short, descriptive, and relevant alt text for images and links
  • Indicate content that's important and let devices focus on the most relevant content
  • Break up content into smaller sections to facilitate understanding
  • Create a text-only version
  • Use buttons that are at least 42 pixels (bulletproof buttons)

HTML elements

Using HTML elements allows screen readers to interpret your email.

Copy 
<!DOCTYPE html>
                <html><html lang="en">
                <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
                <title>HTML Reference</title>
                </head>
                <body><h1>Important heading</h1>
                <p>Your email content. </p>
                <h3>Less important heading</h3>
                <p>Separate content into smaller sections and use paragraph tags.</p>
                </body>
            </html>

Declare a content type

The content type is important, as it ensures characters are correctly interpreted. This is especially important for screen readers or other assistive technologies.

Copy 

                <!DOCTYPE html>
                <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
                </head>
            

Use a title tag

Create a title for your message that describes the content. This won't be visible to your readers, but may be important for screen readers.

Copy 

                <!DOCTYPE html>
                <html>
                <head>
                <title>HTML Reference</title>
                </head>
                <body>
                <Your email content/>
                </body>
                </html>
            

Declare the language using the lang attribute

Declaring the language tells the screen reader which language to speak.  

Copy 

                <!DOCTYPE html>
                <html lang="en">
                <head>
                </head>
                <body>
                <Your email content</>
                </body>
                </html>
            

Use alt text for images

Alt text provides a description of the image for a screen reader. Avoid starting your description with Image of or Picture of.

Copy 

                <!DOCTYPE html>
                <html>
                <html lang="en">
                <head>
                </head>
                <body>
                <img src="img_chania.jpg" alt="Flowers climbing the walls of buildings in a narrow brick paved street in Chania, Crete">
                </body>
                </html>
            

 

Best practices for vision and print

Some of the General Accessibility best practices crossover with best practices for  vision and print accessibility. 

Use a readable web font

Choosing easily legible fonts will benefit your readers from the outset and open your messaging to the widest audience. The most recommended fonts are simple and unadorned, and are likely to be available on a reader's device. Verdana, Arial, Tahoma, and Helvetica are recommended sans serif fonts.

Use Headings to organize your content

Readers using screen readers may use heading tags to jump between content sections. If your message comprises a few parts, consider using HTML headings to tag content sections.  

Copy 

                <code>
                <!DOCTYPE html> 
                <html> 
                <html lang="en"> 
                <head> 
                </head> 
                <body> 
                <h1>This is the first section of content</h1> 
                <p>Introductory content</p> 
                <h2>This is a new section</h2> 
                <p>Content for the new section</p> 
                </body> 
            </html>

Use sufficient color contrast

Use more than one color in your messaging--a good color contrast will make your content easier to read. Be careful with red and green color combinations, as well.

Best practices for mobility and touch

There are a few considerations for readers with mobility issues.

Use bulletproof buttons - Buttons that are at least 42px will give users the best experience and provide a large enough clickable surface. 

Give links multiple sensory characteristics- Make sure links are easy to see by using a combination of visual cues, such as bold text and underlines, along with color changes.