Website ADA Compliance
This covers the basics of ADA (Americans with Disabilities Act) compliance for websites and how we approach it when building sites in Duda.
What is ADA Compliance?
- ADA compliance is short for the Americans with Disabilities Act Standards for Accessible Design. This means all electronic information and technology—including websites—must be accessible to those with disabilities.
- Accessibility is not just a legal concern—it also improves usability for all visitors.
WCAG says websites must be perceivable, operable, understandable, and robust.
These guidelines address digital barriers that prevent people with disabilities from using websites.
Many SEO best practices also align with WCAG guidelines.
WCAG Priorities We Focus On
Captions for Videos: All videos with audio content must have captions so people who are deaf can understand the information. The best method we can currently offer is to have the client upload videos to a YouTube channel. Once uploaded, YouTube automatically embeds captions correctly. We then embed the video on the site using the YouTube URL.
Alt Text for Images, Icons & Buttons: Every image, icon, and button must have descriptive alt text for people using screen readers. Alt text should accurately describe the function or content of the element. For example, instead of saying just 'Button' or 'Image,' it should read 'Submit Form Button' or 'Photo of a red car.' This ensures users understand the purpose or meaning of the element.
Legible Text: On-page text must be easy to read, with proper font weight, size, and color contrast. Users with vision impairments should be able to magnify content.
Accessible Forms: Forms should not have restrictive time limits, or they must include extended time options.
Consistent Layouts: Navigation, headers, footers, and sidebars must stay consistent across all pages.
Heading Structure: All web pages must use proper heading tags (H1, H2, H3) to help screen reader navigation.
Alt Text Tools: Add alt text to images directly in the editor.
Color Contrast Checks: Adjust text and background colors for readability.
Heading Structure: Apply heading tags correctly for screen readers.
Keyboard Navigation: Duda supports keyboard-friendly navigation.
Accessibility Page & Widget: We now add an accessibility page (linked in the footer) to all new and existing websites. The accessibility app provides a widget we place into Duda via an HTML widget, and it automatically populates the accessibility page for you.
We have partnered with AudioEye, an accessibility software solution.
The app will now be added to all new and existing client websites.
AudioEye fixes most ADA compliance issues automatically.
For some errors it cannot fix, the app walks us through the necessary adjustments step by step.
This ensures we address the majority of ADA complaints while helping clients maintain legal compliance with WCAG.
For clients needing a yearly test and further ADA compliance we can upgrade their AudioEye package for a fee.
Build sites that follow accessibility best practices.
Use Duda's built-in features and our AudioEye partnership to improve compliance.
Add accessibility pages and widgets to all sites.
Advise clients on ADA basics and why accessibility matters.
Encourage clients to keep content updates (like alt text for new images) accessible.
If a client needs true once-a-year testing and higher-level compliance, we offer a higher-paid option outside of the basic package. We can upgrade them to this option at the client's request.
We cannot take responsibility for client-uploaded content (images, videos, documents) that lacks accessibility features.
Key Reminder: ADA compliance is an ongoing process. Our role is to build with accessibility in mind, add AudioEye and accessibility tools, and guide clients in maintaining accessible content over time.
Keyboard Testing with Tab Key
Click into the browser window (the address bar/URL area) so the page has focus.
On a MacBook in Google Chrome, press the Tab key.
Keep pressing Tab to move through links, buttons, and form fields.
Check that each element highlights in order and that navigation and widgets open and function properly without using a mouse.
AudioEye Accessibility Scanner
After adding the AudioEye app and allowing it time to scan, use the Accessibility Scanner section. This tool highlights issues and guides you through additional testing to confirm compliance.
Key Reminder: ADA compliance is an ongoing process. Our role is to build with accessibility in mind, add AudioEye and accessibility tools, and guide clients in maintaining accessible content over time.