Most websites are inaccessible by accident, not intent. A user navigating by keyboard alone cannot reach your form. Someone with low vision cannot read white text on a light gray background. A deaf visitor misses video content with no captions.
The Web Content Accessibility Guidelines (WCAG) set the standard. Level AA is the baseline most organizations aim for. But many teams skip the audit entirely, assuming accessibility means adding alt text and calling it done.
This post covers five common design errors that block real users, how to find them in your own site, and how to fix them quickly.
Why Accessibility Audits Matter Beyond Compliance
Accessibility is not a legal checkbox. It is a usability problem that affects your bottom line. Keyboard users, screen reader users, and people with color blindness are not edge cases. Together, they represent 15–20% of the population. When your site fails them, you lose traffic, conversions, and customer trust.
An audit reveals what your team cannot see in normal use. You need a systematic approach: automated scanning, manual testing, and real user feedback. Most teams find 20–40 fixable errors on a typical site.
Error 1: Missing or Incorrect Alt Text on Images
Alt text describes images to screen readers. When it is missing, blind users hear "image" and nothing more. When it is wrong, they get false information.
What to check: Every image on your site needs an alt attribute. The text should describe the image's purpose, not just label it. "Photo of a woman smiling" is not helpful. "Sarah Chen, VP of Sales, speaking at the 2024 conference" is.
Decorative images (icons, dividers, spacers) should have empty alt="" so screen readers skip them. If the image is part of a link (like a logo), the alt text becomes the link label. Make sure it says where the link goes.
How to find it: Use a browser accessibility checker (axe DevTools, WAVE, or Lighthouse in Chrome DevTools). Run it on each page. Look for the "Images missing alt text" report. Check every flagged image.
How to fix it: Open your CMS or HTML editor. Add or update the alt attribute on each image. Keep it under 125 characters. Test with a screen reader (NVDA for Windows, VoiceOver for Mac) to hear what users hear.
Error 2: Insufficient Color Contrast
Text that is too light or too dark against its background fails for users with low vision or color blindness. WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold).
Many sites use light gray text on white backgrounds or dark text on dark backgrounds. These fail instantly. The problem gets worse on mobile screens or in bright sunlight.
What to check: Every text color against its background. This includes buttons, links, form labels, and placeholder text. Do not rely on your eyes. Use a contrast checker (WebAIM Contrast Checker, axe DevTools, or Lighthouse).
How to find it: Run Lighthouse or axe on your page. Look for "Low contrast text" warnings. The tool will show the exact ratio and tell you what ratio is needed. Check every instance.
How to fix it: Darken the text or lighten the background. For dark mode, lighten the text or darken the background. Test the contrast ratio again. If you cannot change the color, add a text shadow or border to increase contrast. Avoid light grays (under #999) and near-white text.
Error 3: Keyboard Navigation Failures
Many users cannot use a mouse. They navigate with the Tab key, arrow keys, and Enter. If your site does not support keyboard navigation, it is unusable for them.
Common problems: interactive elements (buttons, links, form fields) are not reachable by Tab. Dropdown menus trap focus. Modals do not return focus to the trigger when closed. Carousels have no keyboard controls.
What to check: Start at the top of the page. Press Tab repeatedly. Can you reach every button, link, and form field? Does focus move in a logical order (left to right, top to bottom)? Can you activate buttons with Enter or Space? Can you close modals with Escape?
How to find it: Manual testing is the only way. Unplug your mouse. Navigate your entire site using only Tab, Shift+Tab, arrow keys, Enter, and Escape. Write down every place where you get stuck.
How to fix it: Add tabindex="0" to interactive elements that are not naturally focusable (like custom buttons built with divs). Remove tabindex values greater than 0 (they break logical order). Use semantic HTML: <button>, <a>, <input> are focusable by default. Trap focus inside modals with JavaScript so Tab does not escape. Test again with keyboard only.
Error 4: Missing Form Labels and Error Messages
Form fields without visible labels confuse all users, especially screen reader users. They cannot tell what each field is for. When validation fails, unclear error messages leave them stuck.
What to check: Every form field has a visible label. The label is linked to the input with <label for="input-id">. Error messages are clear and specific ("Email must include @" not "Invalid input"). Required fields are marked.
How to find it: Fill out your form incorrectly on purpose. What happens when you leave a field blank? What happens when you enter a wrong format? Do you know which field caused the error and why?
How to fix it: Use proper <label> elements with for attributes that match the input id. Add aria-required="true" to required fields. When validation fails, show an error message next to the field and in a summary at the top. Use aria-describedby to link the error to the input.
Error 5: No Captions or Transcripts for Video
Deaf and hard-of-hearing users cannot hear your video content. Captions are required by WCAG AA. Transcripts help screen reader users and improve SEO.
What to check: Every video has burned-in captions or a caption track. The captions are accurate and complete, including dialogue and relevant sounds ("door slams," "phone rings"). A transcript is available below or linked nearby.
How to find it: Watch your video with sound off. Can you understand what is happening? If not, captions are missing or incomplete.
How to fix it: Use a captioning service (Rev, 3Play Media, or YouTube's auto-caption feature). Review the captions for accuracy. Add a transcript in a text file or on the page below the video. Link the transcript clearly.
Running Your First Accessibility Audit
Start with automated tools. They catch 30–40% of accessibility issues quickly. Then do manual testing. This is where you find keyboard traps, unclear focus indicators, and confusing layouts.
Step 1: Run Lighthouse on your home page. Note every error and warning. Fix the high-priority items first (missing alt text, low contrast, missing labels).
Step 2: Test keyboard navigation. Unplug your mouse. Tab through the entire page. Write down where focus gets stuck or disappears.
Step 3: Test with a screen reader. NVDA (Windows) and JAWS are common. VoiceOver comes built into Mac and iOS. Listen to how your page sounds to someone who cannot see it. Are headings logical? Are buttons labeled? Are lists marked up correctly?
Step 4: Test with a color blindness simulator. Use a browser extension to see your site through the eyes of someone with red-green or blue-yellow color blindness. Do your charts, buttons, and status indicators still make sense?
Step 5: Prioritize fixes. Critical issues (keyboard traps, missing form labels) block entire user groups. Medium issues (low contrast, missing alt text) affect subsets of users. Low issues (minor heading structure problems) are nice to fix but less urgent.
Common Pitfalls to Avoid
Accessibility is not a one-time fix. It is part of your design and development process. Avoid these mistakes:
- Relying only on automated tools. They miss 60% of issues. Manual testing is required.
- Assuming accessibility is only for people with disabilities. It helps everyone (captions in loud environments, keyboard navigation when your mouse breaks, color contrast in bright sunlight).
- Treating accessibility as a design afterthought. Build it in from the start. Inaccessible designs are hard to fix later.
- Using generic alt text ("image," "photo," "icon"). Describe the image's purpose or content.
- Hiding focus indicators to "improve design." Focus indicators are required. Style them to match your brand instead.
- Using color alone to convey meaning. Pair color with text, icons, or patterns so colorblind users understand.
What Happens After the Audit
Document your findings in a spreadsheet: page, error type, severity, fix needed, owner, deadline. Assign fixes to team members. Set a review date (30–60 days for critical issues).
Build accessibility into your workflow. Train your team on WCAG basics. Add accessibility checks to your code review process. Test new features with keyboard and screen reader before launch.
Accessibility is not a project. It is a standard. Once your site meets WCAG AA, maintain it. New content and features should follow the same standards.
FAQs
Is WCAG AA compliance required by law?
In the US, websites of public entities and many large businesses must meet WCAG AA under the Americans with Disabilities Act (ADA). Private companies are not always legally required, but accessibility is good practice and reduces legal risk.
How much does an accessibility audit cost?
Automated audits are free (Lighthouse, axe). Professional audits by consultants range from $2,000–$10,000 depending on site size and depth. Many teams start with free tools and hire help for complex fixes.
Can I use AI to generate alt text?
Automated alt text is better than nothing but often misses context. A woman in a photo might be described as "woman" instead of "CEO Jane Smith at the conference." Review and edit AI-generated alt text before publishing.
Will accessibility hurt my design?
No. Good design is accessible design. High contrast improves readability for everyone. Clear labels and logical structure help all users. Keyboard navigation is faster for power users. Captions help in noisy environments.
People Also Ask
What is the difference between WCAG A, AA, and AAA?
WCAG has three levels. Level A is basic. Level AA is the standard most organizations target (it covers 80% of real-world needs). Level AAA is strict and rarely required. Start with AA.
How do I test my site for accessibility?
Use automated tools first (Lighthouse, axe DevTools, WAVE). Then test manually with keyboard navigation and a screen reader. Test with a color blindness simulator. This combination catches 90% of issues.
What is ARIA and when should I use it?
ARIA (Accessible Rich Internet Applications) adds extra information for screen readers. Use it only when semantic HTML is not enough (custom buttons, dropdowns, live regions). Overusing ARIA breaks accessibility.
How do I make PDFs accessible?
Add a tagged structure, alt text for images, and readable fonts. Use a PDF accessibility tool to check for issues. Provide an HTML version when possible. PDFs are hard to make truly accessible.
What should I do if I cannot afford to fix everything?
Prioritize critical issues first: keyboard traps, missing form labels, low contrast text, missing alt text on meaningful images. These block the most users. Fix medium and low issues on a rolling basis.
Do I need captions for every video?
Yes, WCAG AA requires captions for all video with dialogue or important sound. Transcripts are also required. Use a captioning service if you have many videos.
How often should I audit my site?
Audit at least once a year. Test new features and content before launch. Accessibility should be part of your ongoing quality assurance, not a one-time project.
What is the most common accessibility error?
Missing alt text on images. It is easy to overlook and blocks screen reader users completely. Make alt text part of your image upload workflow.
Can I hire someone to make my site accessible?
Yes. Web accessibility audits and remediation services can fix your site. But your team should learn the basics so you maintain accessibility going forward.
If this post is wrong, outdated, or you would take a different path
I write from work I have done on real sites. Search products change, and a step that was right when I published can go stale. I can also be wrong about the method.
If you disagree with the approach, the facts, or the outcome, I want the detail. Tell me what is off, what you would do instead, and where you saw it. I use that to correct the post so the next reader is not stuck.
This is not a comment thread. Use Contact me so the note is tied to this post and I can reply.
You are sending feedback for
Web Accessibility Audits: Fix Common Design Errors That Block Users
Website UX & Design
https://hammadshk.com/blog/web-accessibility-audits-fix-common-design-errors-that-block-users
