Overview
Ensuring your campaign is accessible for individuals with accommodations is vital for its success. ShortStack's Campaign Builder offers several methods to ensure your campaign is ADA-compliant. This document will cover how to create an ADA-accessible campaign for your customers.
1. Use Live Text Wherever Possible
Screen Readers can read all live text on your campaign. What is live text? Live text is used in any Widget where you see a text field that you type in. Here are some examples:
- Text typed into a Rich Text Widget
- Button Text
- Field Widget Text
- Share Widget Prompt Text
In sum, a screen reader device can read anything typed into your campaign. As a best practice, use text wherever possible instead of images. Images are great for visual impact, but they are not the best option for the visually impaired.
2. Add Alt Image Text
When you do have an image, remember to use Alt Image Text. In the Image Widget settings, you can add the alt image text under the options section. When added, screen readers can read out the description of the image. Alt Image Text is not available for images used as a background for a Widget.
To ensure accessible campaigns, do not add any text in background images. Instead, have a simple background and place text on top via a Rich Text Widget.
3. Update Main Tags
By default, all Widgets are assigned the main tag <div>. However, this is not the most accessible option because screen readers can not differentiate where each Widget lies on the webpage.
To update the main tags for each Widget, open the Widget's settings (denoted by the pencil icon), then select the section Extras. Then, you can update the main header via the drop-down once in the Extras Section of the Widget's settings.
The Tag types available are:
- Div
- Header
- Main
- Section
- Footer
- Article
- Aside
- Address
4. Increase Contrast Scores
Did you know that to have an accessible site, you should have a certain contrast score so people with visual impairment can still read the page? Per the Web Content Accessibility Guidelines (WCAG), the lowest contrast score you want for your site is 1.5:1. Learn more about WCAG Contrast Score guidelines here.
Increase your color contrast by updating all style elements for your campaign using the Style Panel.
Here's a free website accessibility plugin to help you create a more accessible site: WAVE Plugin
5. Other Notes
Tab Navigation
Visitors to your campaign who can't use a traditional mouse can easily tab through all of its elements. You can easily test this feature to ensure all buttons and fields are configured properly by using your keyboard's Tab button.