Accessibility Audit Guide

A practical, checklist-driven approach to making your website work for everyone—including the 1.3 billion people worldwide with disabilities

The $13 Trillion Wake-Up Call

Why Your "Pretty" Website Is Probably Broken

The Four Pillars of Web Accessibility

Your Complete Accessibility Audit Checklist

Visual Accessibility

□ Color Contrast Testing

1. Install the free WAVE browser extension from WebAIM

2. Run it on every page template (homepage, product page, contact page, etc.)

3. Look for contrast errors (they'll be marked in red)

4. For each error, you need to adjust either the text color or background color until you hit these ratios:
• Normal text: 4.5:1 minimum
• Large text (18pt or 14pt bold): 3:1 minimum
• UI components and graphics: 3:1 minimum

• WordPress: Use the Accessibility Checker plugin for automated scanning

• Squarespace: Access Design > Site Styles to globally adjust color values

• Wix: Use their built-in Accessibility Wizard, but verify with external tools

• Shopify: Edit your theme.scss.liquid file to update color variables globally

□ Images and Alt Text Audit

1. Open your site's HTML (right-click > Inspect)

2. Search for <img tags

3. Check every image for alt attributes

4. Evaluate the quality of existing alt text

• Decorative image? Use empty alt text: alt=""

• Informative image? Describe what info it conveys

• Functional image (like a button)? Describe what it does, not what it looks like

• Complex image (chart/graph)? Provide brief alt text plus longer description nearby

• WordPress: Use alt text field in Media Library

• Squarespace: Click image > Design tab > Image Alt Text

• Wix: Select image > Settings > What's in the image?

• Shopify: Products > All products > Edit product > Add alt text to images

□ Font and Typography Testing

1. Set your browser to 200% zoom

2. Navigate your entire site

3. Check if all text remains readable

4. Look for text overlapping, cutting off, or becoming illegible

5. Test on an actual phone, not just browser mobile view

• Body text: minimum 16px (1rem)

• Line height: 1.5x minimum for body text

• Paragraph width: 45-75 characters ideal

• Font choice: Avoid ultra-thin weights (below 400)

• Letter spacing: Default or slightly increased, never decreased

Keyboard Navigation

□ The Tab Test

1. Go to your homepage

2. Press Tab repeatedly

3. You should see focus indicators (outlines) moving through interactive elements

4. Can you reach every link, button, and form field?

5. Can you activate them with Enter or Space?

6. Can you escape from popups with Esc key?

• Visible focus indicators: Users must see where they are

• Logical tab order: Left to right, top to bottom

• No keyboard traps: Users can tab in AND out of all elements

• Skip links: "Skip to main content" should be first tab stop

• All interactive elements reachable: Including dropdowns and modals

• Custom dropdowns that only work on click

• Carousels without keyboard controls

• Modal popups you can't escape from

• Videos without keyboard controls

• Removing focus outlines for "aesthetic" reasons (never do this)

*:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

□ Form Keyboard Navigation

1. Tab through every form on your site

2. Fill them out using only keyboard

3. Submit with Enter key

4. Verify error messages are announced

5. Confirm you can fix errors without mouse

• Tab order matches visual order

• Radio buttons arrow through options

• Checkboxes work with spacebar

• Dropdowns open with spacebar/enter

• Error messages link to problem fields

• Submit works with Enter key

Screen Reader Compatibility

□ Semantic HTML Structure

1. Install NVDA (free Windows) or use VoiceOver (built into Mac/iPhone)

2. Turn it on and close your eyes

3. Try to understand your page structure

4. Navigate by headings (H key in NVDA)

5. Check if the structure makes sense

• One H1 per page (the main topic)

• H2s for major sections

• H3s for subsections

• Never skip levels (no H1 to H3)

• Never use headings for styling—use CSS instead

<h1>Product Name</h1>
  <h2>Features</h2>
    <h3>Feature 1</h3>
    <h3>Feature 2</h3>
  <h2>Pricing</h2>
  <h2>Reviews</h2>

□ Link Context Testing

1. List all link text on your page

2. Remove surrounding context

3. Can you understand where each link goes?

• Click here

• Read more

• Learn more

• Download

• Link

• Download 2024 annual report (PDF)

• Read more about accessibility standards

• Contact customer service

• View pricing plans

<a href="/article">Read more<span class="sr-only"> about accessibility compliance</span></a>

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

Cognitive Accessibility

□ Plain Language Audit

1. Copy your main pages into Hemingway Editor (free online)

2. Aim for Grade 8 or below

3. Eliminate jargon and acronyms

4. Break up long sentences

5. Use common words

• Sentences under 20 words

• Paragraphs under 5 sentences

• Active voice instead of passive

• Concrete words instead of abstract

• Examples to explain concepts

□ Error Message Clarity

1. Intentionally trigger every error on your site

2. Document the message shown

3. Evaluate against these criteria:
• Says what went wrong
• Says how to fix it
• Shows where the error is
• Uses plain language
• Avoids technical codes

1. What went wrong

2. Where it went wrong

3. How to fix it

4. Example of correct format

Mobile and Touch Accessibility

□ Touch Target Testing

1. Open your site on an actual phone

2. Try to tap every link and button

3. Count your misses

4. Measure target sizes with browser tools

• Touch targets: 44x44 CSS pixels minimum

• Space between targets: 8px minimum

• Exception: Inline text links

• Social media icons too small

• Close buttons on popups (the tiny X)

• Stacked navigation links

• Form radio buttons and checkboxes

• Footer links crammed together

• Add CSS padding to increase tap area without changing visual size

• Use flexbox gap property for consistent spacing

• Make entire card/row clickable, not just the link

Document and Media Accessibility

□ PDF Accessibility Check

1. Download every PDF from your site

2. Open in Adobe Reader

3. Try to select and copy text

4. If you can't, it's an image PDF (inaccessible)

5. Use Read Out Loud feature to test screen reader compatibility

• Create from source document (Word/Google Docs), not scans

• Add proper headings in source document

• Include alt text for images

• Use built-in accessibility checkers

• Provide HTML alternative when possible

□ Video Captions and Transcripts

1. List every video on your site

2. Check for captions (CC button)

3. Check caption quality and synchronization

4. Look for transcript availability

5. Verify audio descriptions for visual content

• Captions for all speech and relevant sounds

• Transcripts for audio-only content

• Audio descriptions for visual information (when budget allows)

• Player has keyboard controls

• YouTube auto-captions (edit for accuracy)

• Otter.ai for transcription

• Rev.com for professional captions ($1.25/minute)

The Business Case You Need

• 4,605 ADA web accessibility lawsuits filed in 2023

• Average settlement: $20,000-50,000

• Legal fees: $100,000+ to defend

• Remediation costs: $10,000-50,000

• 26% of US adults have a disability

• $13 trillion global spending power

• 73% will leave your site for a competitor's if they can't use it

• Their networks amplify impact—one bad experience reaches hundreds

• Alt text helps image search

• Proper headings improve content understanding

• Good structure enhances crawlability

• Captions increase video engagement 12%

• Captions help in noisy environments

• Good contrast helps in bright sunlight

• Keyboard navigation helps power users

• Simple language helps non-native speakers

• Large touch targets help on mobile

Platform-Specific Implementation Guides

WordPress Accessibility

• WP Accessibility by Joe Dolson (free)

• Accessibility Checker by Equalize Digital

• One Click Accessibility (basic fixes)

• Theme removes keyboard focus indicators

• Plugins inject inaccessible content

• Page builders create div soup instead of semantic HTML

• Custom forms lack proper labels

Squarespace Accessibility

• Automatic heading hierarchy

• Alt text fields for all images

• Keyboard navigation support

• Focus indicators included

• Skip links (via Code Injection)

• ARIA labels for complex interactions

• Transcript blocks for videos

• Alt text for background images

Wix Accessibility

• Basic contrast checking

• Alt text reminders

• Heading structure

• Keyboard navigation (often broken)

• Form labels (frequently missing)

• Focus indicators (sometimes removed)

• Reading order (can be wrong)

Shopify Accessibility

• Dawn (Shopify's accessible flagship)

• Debut

• Brooklyn

• Simple

Your 30-Day Accessibility Action Plan

Week 1: Baseline and Quick Wins

• Install WAVE extension

• Scan all page templates

• Document all errors

• Create priority list

• Adjust all failing color combinations

• Test fixes on mobile

• Update style guide

• Audit all images

• Write missing alt text

• Fix decorative images

Week 2: Keyboard and Structure

• Complete tab test

• Fix focus indicators

• Add skip links

• Test all forms

• Fix heading hierarchy

• Add landmark regions

• Improve link text

• Structure navigation

Week 3: Content and Media

• Run readability tests

• Rewrite complex sections

• Fix error messages

• Add instructions

• Caption all videos

• Add transcripts

• Fix PDFs or convert to HTML

• Test with screen reader

Week 4: Testing and Documentation

• Recruit users with disabilities (if possible)

• Or test with simulation tools

• Document remaining issues

• Create fix timeline

• Document accessibility standards

• Train content creators

• Set up monitoring

• Create checklist for new content

• Rerun automated tests

• Verify all fixes

• Test on multiple devices

• Celebrate progress

The Hard Truths About Accessibility

Red Flags Requiring Immediate Action

1. Keyboard traps - Users literally can't escape

2. Missing form labels - Forms become unusable

3. Auto-playing audio - Screen readers become inaudible

4. Seizure triggers - Flashing over 3 times per second

5. Time limits without warning - Sessions expire mid-task

6. CAPTCHAs without alternatives - Completely blocks some users

7. PDF-only content - No HTML alternative

8. Videos without controls - Can't pause, stop, or adjust

9. Infinite scroll - Footer content unreachable

10. Text in images only - Invisible to screen readers

Tools You Actually Need

• WAVE browser extension

• Lighthouse (built into Chrome)

• NVDA screen reader (Windows)

• VoiceOver (Mac/iOS built-in)

• Hemingway Editor

• Color contrast analyzers

• axe DevTools ($0-40/month)

• JAWS screen reader (industry standard)

• Dragon NaturallySpeaking (voice control testing)

• UserWay or AudioEye (monitoring services)

The Email You'll Send Tomorrow

1. [Biggest issue] - affecting [impact] - 2 hours to fix

2. [Second issue] - affecting [impact] - 4 hours to fix

3. [Third issue] - affecting [impact] - 1 day to fix

Your Accessibility Commitment