7 Common ADA Compliance Mistakes (and How to Fix Them)
For small businesses and nonprofits, a website is often the primary point of contact with the community. If your site isn't ADA compliant, you aren't just risking a potential lawsuit; you are actively turning away up to 25% of your potential audience who live with a disability.
Ignoring accessibility creates a barrier between your mission and the people you serve. Whether you are building a new site or managing an existing one, understanding these common pitfalls is the first step toward a truly inclusive digital presence.
In this guide, we break down the most frequent mistakes we see and provide actionable solutions to ensure your website works for everyone.
1. Missing or Descriptive-Poor Alt Text
The Problem: Many websites either leave the "alt text" field empty for images or use unhelpful descriptions like "image123.jpg" or "photo."
The Impact: People using screen readers rely on these descriptions to understand the visual content of your page. Without them, they miss out on context, information, and the overall experience of your site.
The Solution:
- Write descriptive text that conveys the purpose of the image.
- Keep it concise, typically under 125 characters.
- Skip the "image of" prefix, screen readers already identify it as an image.
- Leave decorative images blank (using an empty alt="" attribute) so the screen reader ignores them.
2. Insufficient Color Contrast
The Problem: Using light gray text on a white background or white text on a bright yellow button might look "modern," but it often fails contrast requirements.
The Impact: Users with visual impairments, including color blindness or low vision, may find your content completely unreadable. This leads to high bounce rates and frustrated visitors who cannot access your services.
The Solution:
- Aim for a 4.5:1 ratio for standard text and 3:1 for large text.
- Use contrast checkers like WebAIM’s Contrast Checker to verify your brand colors.
- Don't rely on color alone to convey meaning; use icons or underlines to highlight links.
- Consider a refresh if your current brand colors don't meet accessibility standards. You can learn more about updating your site in our Website Refresh guide.
3. Keyboard Navigation Failures
The Problem: Many sites are built assuming everyone uses a mouse. This often leads to menus, buttons, and links that cannot be accessed using only a keyboard.
The Impact: Individuals with motor disabilities or those who use assistive technology like switch devices can get "trapped" in certain sections of your site or find it impossible to navigate your main menu.
The Solution:
- Test your site manually by using the "Tab" key to move through elements and "Enter" to click.
- Ensure a visible focus indicator (like an outline or ring) appears when an element is selected.
- Check the tab order to make sure it follows a logical, left-to-right, top-to-bottom flow.
- Avoid "keyboard traps" where a user can enter a section (like a pop-up) but cannot exit using the keyboard.
4. Missing or Unclear Form Labels
The Problem: Using placeholder text inside a form field instead of a permanent label above it. Once the user starts typing, the hint disappears, leaving them guessing what the field was for.
The Impact: This is especially difficult for users with cognitive disabilities or memory impairments. Furthermore, screen readers often struggle to associate placeholder text with the correct input field, making it impossible for some users to fill out contact forms or donation pages.
The Solution:
- Use explicit labels (the
<label>tag) for every single form input. - Ensure error messages are descriptive (e.g., "Please enter a valid email address") rather than just turning the box red.
- Group related fields together using fieldsets for more complex forms.
- Include clear instructions at the beginning of the form if certain formats are required.
5. Improper Heading Structure
The Problem: Using heading tags (H1, H2, H3) based on how they look (their size and font) rather than their hierarchical importance.
The Impact: Screen readers use headings to build a table of contents for the page. If you skip from an H1 to an H4, or use bolded text instead of a proper heading tag, you break the logical flow of information.
The Solution:
- Use only one H1 per page, which should represent the main title.
- Follow a logical order: H1 is the title, H2s are main sections, and H3s are subsections.
- Don't skip levels (e.g., don't go directly from H2 to H4).
- Style your text with CSS, not by choosing a heading level that "looks right."
6. Auto-Playing Media & Missing Captions
The Problem: Background videos that play automatically without a pause button or videos that lack closed captions.
The Impact: Auto-playing audio can interfere with screen readers, making it impossible for visually impaired users to hear their device. Missing captions exclude the Deaf and hard-of-hearing community from your video content.
The Solution:
- Provide a pause/stop button for any media that lasts longer than five seconds.
- Include accurate captions for all video content.
- Provide transcripts for audio-only content like podcasts.
- Disable auto-play by default to give users control over their experience.
7. Relying Solely on Automated Tools
The Problem: Believing that an automated scanner or an "accessibility overlay" (a small widget that claims to fix your site) makes you fully compliant.
The Impact: Automated tools only catch about 30–40% of accessibility issues. Overlays often make the experience worse for screen reader users by interfering with their established settings. Relying on them gives a false sense of security while leaving major barriers in place.
The Solution:
- Combine automated scans with manual testing and expert review.
- Incorporate real-user testing whenever possible.
- Fix the underlying code rather than trying to "patch" it with a widget.
- Work with specialists who prioritize accessibility-first builds from the start.
Conclusion
ADA compliance is not a "one-and-done" task; it is an ongoing commitment to digital equity. By avoiding these seven common mistakes, you ensure that your website serves as a welcoming front door for everyone, regardless of how they access the web.
At Twist Web Studio, we specialize in building and optimizing sites that meet these standards from day one. Whether you are looking for a new launch or a technical optimization, we are here to help you navigate the complexities of the modern web in plain language.
Frequently Asked Questions
Is my small business required to be ADA compliant? While the ADA does not explicitly mention websites in its original text, the Department of Justice and recent court rulings have consistently held that websites are "places of public accommodation." For most businesses and nonprofits, compliance is a legal and ethical necessity.
Do accessibility overlays protect me from lawsuits? No. In fact, some overlays have been the target of lawsuits themselves because they don't fix the underlying code and can actually block assistive technologies. Manual fixes are always superior.
How often should I check my site for accessibility? You should audit your site every time you make a major design change or add a significant amount of new content. A quarterly "check-up" is a good rule of thumb for most small organizations.
Will making my site accessible hurt my SEO? Quite the opposite. Search engines and screen readers "see" the web in similar ways. Proper headings, alt text, and fast-loading, mobile-friendly designs actually boost your search rankings.
Where can I find more tips on web design? Check out our full blog for insights on everything from building trust with your audience to the latest industry trends.