How Do I Use the Campaign Precheck Accessibility Check?


Millions of people worldwide suffer from some level of vision impairment; Email on Acid’s accessibility tools allow you to craft emails to reach a broader audience. In this guide we will walk through the accessibility features built into Campaign Precheck; language, content-type, title, role, title attribute, alt text, contrast ratio, links and zoom.

  1. Getting Started with Accessibility
  2. Setting up Code for Screen Readers
  3. Setting Presentation Roles for Screen Readers
  4. Removing Title Attributes
  5. Setting Image Alt Text
  6. Enhancing Contrast Ratio
  7. Enhancing Link Accessibility
  8. Reviewing Email when Using Zoom

 

Getting Started with Accessibility

The accessibility process is summarized on the left side of the screen. Your email will render on the right. To learn about the special features in the right panel, click here. 

Access the accessibility feature by clicking Next following Inbox Display, or you may select it from the menu at the top left side of the page.

Getting started with accessibility

Setting up Code for Screen Readers

Individuals with visual deficiencies often utilize screen readers. Screen readers need to know which content to read, which content to skip, and how the content should sound.

  • Including a title will add context to the email;. Complete the first section, Set email title by typing into the space provided.

Set email title

  • Next, Set the content-type for email clients, by using the dropdown menu. Setting the content-type ensures that every email client and screen reader knows how to interpret the HTML and any special characters it may contain.

Set the content-type for email clients

  • Finally, Set language, by using the dropdown menu. Defining language is critical for compatibility with screen readers. It tells the screen reader how to interpret the text, characters and accent for optimal pronunciation.

Set email language

  • Once finished, click Next.

 

 

Setting Presentation Roles for Screen Readers

Adding a presentation role to the tables tells a screen reader to skip reading the code that creates a table and only read the customer-facing text.

  • You have two choices, you may Add Roles to All to change all tables at once, or you may click through Add Role one-by-one.
  • Once this is complete, click Next.

Set presentation roles for screen readers

Removing Title Attributes

Title attributes give additional information about elements in your email. For example, tips that appear when a user hovers over part of an email. Title attributes should be avoided by screen readers as they disrupt the order in which the content is read.

  • You can remove all title attributes by clicking, Remove All Titles, or you can scroll through and select the ones you’d like to remove by clicking Remove Title.
  • Once finished, click Next.

Remove title attributes

Setting Image Alt Text

Adding Alt-text improves accessibility by describing images to users with visual impairments; screen readers read the alt text to give details about an image. Alt-text changes are automatically applied to the HTML.

  • You may click Add Alt to All or you may add or edit alt text for each image using the boxes provided.
  • Once finished, click Next.

Set image alt text

Enhancing the Contrast Ratio

Contrast ratio is the difference between foreground and background colors. This tool will compare your email against Level AA standards and make suggestions.

  • To see how contrast ratio works, click on Show Me, next to the lightbulb icon. This will generate an example in the panel on the right.

Experience contrast ratio for yourself

  • You can adjust all to automatically correct the contrast for all items by clicking, Adjust All. Or, if you’d prefer to see the changes one-by-one, you may click Adjust next to each example. When you do this, you will see the contrast ratio change in the panel on the right. If you elect not to change the contrast ratio, you may click, Undo, and the color will revert back.
  • Once finished, click Next.

Enhance contrast ratio

Enhancing Link Accessibility

Another step towards ensuring accessibility is to clearly define links. Customers with color vision deficiencies may not be able to see links if they are blue, red, or green. Underlining will ensure that they know a link is present.

  • To view an example, click Show Me, next to the lightbulb icon. An example will appear in the panel on the right.

Enhance link accessibility experience

  • To adjust your email, you may select Underline All, which will automatically underline all links within your email. Or you may change them one at a time by clicking Underline next to each example. As you click, the changes will be reflected in your email on the right, and all changes will be applied to the HTML.
  • Once finished, click Next.

Underline links in your email

Reviewing Email when Using Zoom

Visually-impaired customers may use zoom to read email text.

  • Use the -/+ symbols to zoom in and out and review how it appears in the panel on the right. This provides information for developers.
  • Once finished, click Next.

Review what your email looks like using zoom

Note: Between each step in Campaign Precheck, you may receive a notification that you missed a spot. This may be the case, if so, click Previous to return and make any additional changes. However, you may have elected to reserve some aspects of your email, this is where you may review them. When you are ready, click Next to move onto the next Campaign Precheck feature.

If you missed a spot, Campaign Precheck will let you know

 

To view the guide for URL Validation, click here.

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Free Email Goodies