How to Create ADA-Compliant Campaigns
Ensuring your campaign is accessible for individuals with disabilities is essential for its success. ShortStack's Campaign Builder offers various methods to help you create ADA-compliant campaigns. This guide outlines the steps to make your campaign more accessible.
Use live text wherever possible
What is live Text?
Live text is any text that can be read by screen readers, typically entered in text fields in the following Widgets:
Rich Text Widget: Text typed directly into the widget.
Button Text: Labels and calls to action.
Field Widget Text: Labels and placeholder text.
Share Widget Prompt Text: Text encouraging users to share your campaign.
Best practices
Use live text wherever possible instead of embedding text in images. While images enhance visual impact, live text ensures accessibility for visually impaired users.
Add alt image text
Why alt image text is important
Alt image text provides a description of images for screen readers, enabling visually impaired users to understand the content.
How to add alt image text
Open the Image Widget settings.
Navigate to the Options section.
Add a descriptive Alt Image Text for your image.
Note: Alt image text is not available for background images. To ensure accessibility, avoid placing text in background images. Instead, use a Rich Text Widget to add text over a simple background.
Update main tags
Why main tags matter
By default, all widgets are assigned the <div> tag, which does not provide context to screen readers. Updating main tags helps screen readers understand the layout and structure of your campaign.
How to update main tags
Open the widget’s settings (click the pencil icon).
Navigate to the Extras section.
Use the dropdown to select a more appropriate tag.
Available tag types
<div><header><main><section><footer><article><aside><address>
Increase contrast scores
Why contrast matters
To meet Web Content Accessibility Guidelines (WCAG), your site should achieve a minimum contrast ratio of 1.5:1. This ensures readability for users with visual impairments.
How to improve contrast
Use the Style Panel to update your campaign’s style elements, including text, buttons, and backgrounds.
Test contrast using accessibility tools like the WAVE Plugin.
Learn More: Refer to the WCAG Contrast Score Guidelines.
Other accessibility notes
Tab navigation
Visitors who cannot use a traditional mouse can navigate your campaign using the Tab key. Ensure proper configuration by testing the tab order of buttons, fields, and other elements on your campaign using your keyboard.
Related resources
6 Ways to Design With Inclusion in Mind: Create ADA Compliant Landing Pages (Blog)
Was this helpful?
Thanks — that helps us decide what to fix next.
Sorry this missed. Tell us what you needed and we'll get you an answer — and fix the page.