How to Create ADA-Compliant Campaigns

Overview

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

1. Open the Image Widget settings.
2. Navigate to the Options section.
3. 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

1. Open the widget’s settings (click the pencil icon).
2. Navigate to the Extras section.
3. 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.