Campaign Precheck Accessibility Check
Millions of people worldwide suffer from some level of visual impairment; Email on Acid’s accessibility tools allow you to craft emails to reach a broader audience. Let’s walk through the accessibility features built into Campaign Precheck.
- Getting Started with Accessibility
- Setting up Code for Screen Readers
- Setting Presentation Roles for Screen Readers
- Removing Title Attributes
- Setting Image Alt Text
- Enhancing Contrast Ratio
- Enhancing Link Accessibility
- Reviewing Email when Using Zoom
Setting up Code for Screen Readers
Individuals with visual deficiencies often use screen readers. Screen readers need to know which content to read, which content to skip, and how the content should sound.
- Type the Email Title that you want your customers to hear into the set email title field.
- Set the Content Type so the reader knows how to interpret the content and any special characters it may contain using either UTF-8 or ISO-8859-1.
- 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 what to accent for optimal pronunciation.
To the right of the screen, you can view the source code, see what the email will look like with images displayed or blocked. You can also view what your email will look like to people with various vision issues due to color deficiency. Plus, you can preview the campaign on desktop, tablet, mobile view.
Once you have the screen reader option set, click Next to move on to the next section of your Campaign Precheck workflow. I If you’re following our recommended flow, that will be Presentation Roles.
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 may Add Roles to All to change all tables at once, or you may click through Add Role one-by-one. When you click on each suggestion on the left, you will see the change in the panel on the right. If you elect not to keep the change, you may click, Undo, and the color will revert-back.
Once you have the presentation roles updated, click Next to move on to the next section of your Campaign Precheck workflow.I If you’re following our recommended flow, the next step is removing title attributes.
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 adjust all title attributes at once by clicking Adjust All or review and adjust each suggestion individually. When you click on each suggestion on the left, you will see the change in the panel on the right. If you elect not to keep the change, you may click, Undo.
Once you have the title attribute updated, click Next to move on to the next section of your Campaign Precheck workflow, which if following our recommended flow will be set image alt text.
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.
Click on the suggested change on the left to highlight the area on right and add the alt text for each image. When you click on each suggestion on the left, you will see the change in the panel on the right. If you elect not to keep the change, you may click, Undo, and the color will revert-back.
Once you have updated the aAt text, click Next to move on to the next section of your Campaign Precheck workflow.If you’re following our recommended flow, that will be enhancing the contrast ratio of colors.
Enhancing the Contrast Ratio
Contrast ratio is the difference between foreground and background colors. This tool compares your email against Level AA standards and makes suggestions for adjusting contrast to achieve better visibility.
To see examples of how contrast ratio works, click on Show Me next to the lightbulb.
You can adjust all contrast ratio suggestions at once by clicking Adjust All or review and adjust each suggestion individually. When you click on each suggestion on the left, you will see the change in the panel on the right. If you elect not to keep the change, you may click, Undo, and the colors will revert-back.
Once you have updated the contrast ratio click Next to move on to the next section of your Campaign Precheck workflow. If you’re following our recommended flow, that will involve enhancing link accessibility.
Enhancing Link Accessibility
Another step towards ensuring accessibility is clearly defining links. Customers with color vision deficiencies may be unable 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.
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 you have updated the contrast ratio click Next to move on to the next section of your Campaign Precheck workflow.If you’re following our recommended flow will be enhance link accessibility.
Reviewing Email when Using Zoom In & Zoom Out
Visually-impaired customers may use the zoom in & out function to read email text. Use the -/+ symbols to zoom in and out and review how the email appears at different sizes.
Once you have finished reviewing the email zoom, you are finished with the Accessibility feature! You can proceed to the next step in your campaign precheck. If you’re following our recommended flow, that will be Links.
