Website Accessibility Audit Checklist: 15 Issues to Fix First
By Elizabeth Stein
Over 1 billion people worldwide live with some form of disability. When your website isn't accessible, you're excluding up to 15% of your potential audience - and exposing yourself to legal risk. In the US alone, web accessibility lawsuits have surged past 4,000 per year, and WCAG 2.1 AA is the standard courts consistently reference.
Beyond compliance, accessible sites perform better. Proper heading structure, descriptive link text, and semantic HTML all improve SEO. Alt text gives search engines more content to index. Keyboard navigability reduces bounce rates for power users. Accessibility and good engineering overlap more than most teams realise.
Here are the 15 most common WCAG failures, ordered by frequency, with a concrete fix for each.
The Checklist
1. Missing Alt Text on Images
Images without alt attributes are invisible to screen readers. Decorative images should use alt="" to be skipped; meaningful images need a description of what they convey.
Fix: Add alt="Description of image content" to every <img>. For decorative images, use alt="".
2. Low Colour Contrast
Text that doesn't meet minimum contrast ratios is unreadable for users with low vision - and difficult for everyone in bright sunlight. WCAG requires 4.5:1 for normal text and 3:1 for large text.
Fix: Use a contrast checker to verify your colour pairs. Adjust your palette so all text meets the 4.5:1 ratio against its background.
3. Missing Form Labels
Form inputs without associated <label> elements leave screen reader users guessing what information is being requested. Placeholder text is not a substitute for a label.
Fix: Add a <label htmlFor="inputId"> for every form field, or use aria-label when a visible label isn't feasible.
4. No Skip Navigation Link
Keyboard users must tab through every navigation link on every page load before reaching the main content. A skip link lets them jump directly to it.
Fix: Add a visually hidden link as the first focusable element: <a href="#main-content" className="sr-only focus:not-sr-only">Skip to content</a>.
5. Missing Language Attribute
Without a lang attribute on the <html> element, screen readers can't determine the correct pronunciation rules. A French screen reader trying to read English text produces gibberish.
Fix: Add <html lang="en"> (or whatever language your content is in) to your document root.
6. Empty Links and Buttons
Links or buttons with no text content - common with icon-only buttons - are announced as "link" or "button" with no context. Users have no idea what they do.
Fix: Add visible text, an aria-label, or a visually hidden <span> inside the element describing its action.
7. Missing ARIA Landmarks
Landmarks (<nav>, <main>, <header>, <footer>, <aside>) let screen reader users jump between sections of a page. Without them, navigating a page requires reading everything linearly.
Fix: Use semantic HTML elements for your page regions. Add role attributes only when you can't use the native element.
8. Non-Descriptive Link Text
"Click here" and "Read more" tell a screen reader user nothing about where the link goes. When a user pulls up a list of all links on a page (a common screen reader feature), every link should make sense out of context.
Fix: Write link text that describes the destination: "View our pricing plans" instead of "Click here".
9. Keyboard-Inaccessible Elements
Custom dropdowns, modals, tabs, and sliders built with <div> elements are often unreachable by keyboard. If a user can't Tab to it and activate it with Enter or Space, it's broken.
Fix: Use native HTML elements (<button>, <select>, <dialog>) where possible. For custom components, add tabindex="0", role, and keyboard event handlers.
10. Auto-Playing Media
Audio or video that plays automatically is disorienting for screen reader users and problematic for people with cognitive disabilities. It can also be disruptive in quiet environments.
Fix: Never autoplay media with sound. If you autoplay video, mute it by default and provide a visible pause button.
11. Missing Focus Indicators
Removing the browser's default focus outline (the common outline: none in CSS resets) makes it impossible for keyboard users to see which element is currently focused.
Fix: Replace the default outline with a custom focus style rather than removing it: *:focus-visible { outline: 2px solid #4A90D9; outline-offset: 2px; }.
12. Incorrect Heading Hierarchy
Skipping heading levels (going from <h1> to <h3>) or using multiple <h1> tags breaks the document outline that screen readers use to navigate. It also hurts SEO.
Fix: Use one <h1> per page. Follow a strict descending order: <h1> then <h2> then <h3>. Never skip levels.
13. Small Touch Targets
Buttons and links smaller than 44x44 pixels are difficult to tap accurately on mobile devices, especially for users with motor impairments.
Fix: Ensure all interactive elements are at least 44x44px. Use padding to increase the tap target without changing visual size.
14. Missing Captions and Transcripts
Video without captions excludes deaf and hard-of-hearing users. Audio without transcripts is inaccessible to the same group and to anyone who can't play audio.
Fix: Add closed captions to all video content and provide text transcripts for audio-only content.
15. Dynamic Content Not Announced
Content that updates dynamically (notifications, form validation messages, live data) isn't announced to screen reader users unless you explicitly tell the browser to announce it.
Fix: Use aria-live="polite" on regions that update dynamically. Use aria-live="assertive" only for urgent notifications like error messages.
Running Your First Audit
Manual testing catches what automated tools miss - particularly keyboard navigation and screen reader flow. But automated tools catch the bulk of detectable issues quickly, especially across large sites.
A good approach is to start with an automated scan to identify the low-hanging fruit (missing alt text, contrast failures, missing labels), then follow up with manual keyboard testing on your key user flows.
Rocket Vitals runs axe-core WCAG 2.1 AA checks across both desktop and mobile viewports on every crawled page, so you get a complete picture of accessibility failures across your entire site - not just the homepage.
Related Checks
Rocket Vitals runs automated checks for each of these issues. See the full details for each check:
- Images missing alt text - Detects images without alternative text across your site
- Form inputs missing labels - Finds form controls without associated labels
- Missing skip link - Flags pages with no skip-to-content link
- Insufficient color contrast - Identifies text that fails WCAG contrast ratios
- Keyboard trap - Catches elements that trap keyboard focus
- Heading order incorrect - Detects skipped heading levels
- Focus not visible - Finds elements with no visible focus indicator
Run a free scan to see which of these accessibility issues affect your site. Check your site →