How to Test Your Website for Accessibility: 10-Step Audit Process

Testing your website for accessibility requires a combination of automated tools, manual evaluation, and assistive technology testing. No single method catches all issues—automated tools find about 30-40% of problems, while manual testing and screen reader evaluation are essential for the rest. This guide walks through a comprehensive 10-step audit process.

Before You Start

What You'll Need

Tools:

• Web browser (Chrome recommended for DevTools)
• Browser extensions (axe DevTools, WAVE)
• Screen reader (NVDA for Windows, VoiceOver for Mac)
• Color contrast analyzer

Time estimate:

• Simple site (5-10 pages): 2-4 hours
• Medium site (10-50 pages): 1-2 days
• Complex application: 1-2 weeks

Testing Scope

Identify what to test:

• Homepage
• Key landing pages
• Forms (contact, checkout, login)
• Search functionality
• Navigation (menus, footer)
• Dynamic content (modals, accordions)
• Error states

Step 1: Automated Scanning

Run Multiple Tools

Different tools catch different issues. Use at least two:

axe DevTools (browser extension):

1. Install from Chrome/Firefox extension store
2. Open DevTools (F12)
3. Go to "axe DevTools" tab
4. Click "Scan ALL of my page"
5. Review results by severity

WAVE (browser extension):

1. Install WAVE extension
2. Click WAVE icon on any page
3. Review icons overlaid on page
4. Check Details panel for explanations

Lighthouse (built into Chrome):

1. Open DevTools (F12)
2. Go to Lighthouse tab
3. Select "Accessibility" category
4. Run audit
5. Review score and issues

Interpret Results

Critical issues: Fix immediately

• Missing alt text on informative images
• Empty buttons/links
• Missing form labels
• Duplicate IDs

Serious issues: Fix soon

• Insufficient color contrast
• Missing skip links
• Improper heading hierarchy

Moderate issues: Plan to fix

• ARIA misuse
• Missing landmarks

Document Findings

Create a tracking spreadsheet:

| Issue            | Severity | Page      | Element    | WCAG Criterion | Status |
|------------------|----------|-----------|------------|----------------|--------|
| Missing alt text | Critical | /products | Hero image | 1.1.1          | Open   |
| Low contrast     | Serious  | /about    | Body text  | 1.4.3          | Open   |

Step 2: Keyboard Navigation Testing

Test All Functionality Without Mouse

Basic navigation:

1. Start at browser address bar
2. Press Tab to move through page
3. Verify you can reach all interactive elements
4. Check focus is visible on each element

Key commands to test:

• Tab: Move forward
• Shift + Tab: Move backward
• Enter: Activate buttons/links
• Space: Activate checkboxes, buttons
• Arrow keys: Navigate within components
• Escape: Close modals/menus

Check for Common Issues

Focus visibility:

✓ Can you see where focus is at all times?
✓ Is focus indicator visible against all backgrounds?
✓ Does focus indicator have sufficient contrast?

Focus order:

✓ Does tab order follow visual/logical order?
✓ Can you tab into and out of all components?
✓ After closing modal, does focus return appropriately?

Keyboard traps:

✓ Can you tab out of all components?
✓ Are there any infinite loops?
✓ Can you access and close all modals with keyboard?

Interactive elements:

✓ Do all buttons work with Enter and Space?
✓ Do all links work with Enter?
✓ Do dropdowns work with arrow keys?
✓ Can you operate date pickers with keyboard?

Test Specific Components

Modal dialogs:

1. Open modal with keyboard
2. Verify focus moves into modal
3. Tab through modal content
4. Verify focus stays trapped in modal
5. Close with Escape
6. Verify focus returns to trigger

Dropdown menus:

1. Open with Enter or Space
2. Navigate with arrow keys
3. Select with Enter
4. Close with Escape

Step 3: Screen Reader Testing

Basic Screen Reader Setup

NVDA (Windows - Free):

1. Download from nvaccess.org
2. Install and launch
3. Use Insert key as NVDA modifier
4. Press Insert + Space to toggle focus mode

VoiceOver (Mac - Built-in):

1. Enable: System Preferences > Accessibility > VoiceOver
2. Or press Command + F5
3. Use VO keys (Control + Option) for commands

Testing Process

Page structure:

1. Navigate by headings (H key)
2. Check heading hierarchy (H1 → H2 → H3)
3. Navigate by landmarks (D key in NVDA)
4. Verify main, navigation, footer landmarks

Images:

1. Navigate to images
2. Listen to alt text
3. Verify descriptions are meaningful
4. Check decorative images are hidden

Forms:

1. Navigate to form
2. Tab through fields
3. Verify each field's label is announced
4. Check error messages are announced
5. Test form submission

Dynamic content:

1. Trigger content updates
2. Listen for announcements
3. Check live regions are working
4. Verify modal announcements

What to Listen For

Good:

• "Button, Submit order"
• "Edit, Email address, required"
• "Heading level 2, Product details"
• "Link, View cart, 3 items"

Bad:

• "Button" (no label)
• "Image" (no alt text)
• "Clickable" (unclear purpose)
• Silence (skipped content)

Step 4: Color and Contrast Testing

Test Text Contrast

Using browser DevTools:

1. Inspect text element
2. Click color swatch in Styles panel
3. View contrast ratio
4. Check if it passes AA (4.5:1 normal, 3:1 large)

Using Colour Contrast Analyser:

1. Use eyedropper to pick foreground
2. Pick background color
3. View pass/fail for AA/AAA

Test UI Component Contrast

Check 3:1 minimum for:

• Form input borders
• Button borders (if no fill)
• Icons that convey meaning
• Focus indicators

Test Color Independence

Verify information isn't conveyed by color alone:

Links in text:

• Are they underlined OR have 3:1 contrast with text?

Form errors:

• Is there text/icon alongside red color?

Status indicators:

• Do they have labels or icons?

Charts/graphs:

• Can you distinguish data with patterns/labels?

Step 5: Heading Structure Testing

Check Hierarchy

Using WAVE or HeadingsMap:

1. View document outline
2. Verify single H1
3. Check no skipped levels (H1 → H3)
4. Verify headings describe content

Correct structure:

H1: Page Title
  H2: Section One
    H3: Subsection
    H3: Subsection
  H2: Section Two
    H3: Subsection

Incorrect structure:

H1: Page Title
H3: Missing H2 (skip)
H2: Out of order
  H4: Missing H3 (skip)

Verify Heading Usage

Check that headings are used for structure, not styling:

• Large bold text that isn't a heading = issue
• Heading tags used for visual styling = issue

Step 6: Form Testing

Labels and Instructions

For each form field, verify:

✓ Visible label present
✓ Label programmatically associated (for/id or aria-labelledby)
✓ Required fields indicated
✓ Format hints provided (e.g., "MM/DD/YYYY")

Error Handling

Test error states:

1. Submit form with missing required fields
2. Verify errors are announced
3. Check errors appear near fields
4. Verify error text is helpful
5. Test that errors have sufficient contrast

Form Components

Test special inputs:

• Date pickers (keyboard accessible?)
• File uploads (label present?)
• Checkboxes/radios (grouped properly?)
• Autocomplete (announced?)

Step 7: Image and Media Testing

Alt Text Review

For each image, determine type and verify:

| Image Type  | Expected Alt Text          |
|-------------|----------------------------|
| Informative | Descriptive alt text       |
| Decorative  | Empty alt (`alt=""`)       |
| Functional  | Action description         |
| Complex     | Alt + extended description |

Video and Audio

Videos:

✓ Captions present and accurate
✓ Audio description available (if needed)
✓ Player controls keyboard accessible
✓ Autoplay disabled (or controls available)

Audio:

✓ Transcript available
✓ Player controls accessible
✓ No autoplay

Step 8: Responsive and Zoom Testing

Browser Zoom

Test at 200% zoom:

1. Set browser zoom to 200%
2. Verify all content is visible
3. Check no horizontal scrolling on text
4. Verify functionality still works

Text-Only Zoom

Test with text-only sizing:

1. Increase text size (browser settings)
2. Verify text reflows properly
3. Check no overlapping content
4. Verify readability

Responsive Testing

Test at various viewports:

• Mobile (320px width)
• Tablet (768px width)
• Desktop (1024px+)

Verify:

• Touch targets 44x44px minimum
• Navigation accessible
• Forms usable
• Content readable

Step 9: Interactive Component Testing

Modals/Dialogs

✓ Focus moves to modal on open
✓ Focus is trapped within modal
✓ Escape key closes modal
✓ Focus returns to trigger on close
✓ Background content is hidden from AT

Accordions/Tabs

✓ Arrow keys navigate between tabs
✓ Tab key moves into panel content
✓ Expanded state announced
✓ ARIA attributes correct

Carousels/Sliders

✓ Pause control available
✓ Navigation keyboard accessible
✓ Current slide announced
✓ Auto-advance can be stopped

Tooltips/Popovers

✓ Trigger works with keyboard
✓ Content is accessible to screen readers
✓ Dismiss with Escape
✓ Doesn't obscure other content permanently

Step 10: Document Findings and Prioritize

Create Issue Report

For each issue found:

## Issue: Missing form label

**Severity:** Critical
**WCAG Criterion:** 1.3.1 Info and Relationships
**Location:** /contact (email field)

**Description:**
The email input field has no associated label element
or aria-label attribute.

**Impact:**
Screen reader users cannot identify the field's purpose.

**Recommendation:**
Add a visible label with matching for/id attributes:
<label for="email">Email Address</label>
<input type="email" id="email">

Prioritize Remediation

Priority 1 - Critical (fix within 1 week):

• Blocks users from completing tasks
• Major WCAG Level A violations
• Keyboard traps

Priority 2 - High (fix within 1 month):

• Significant barriers for AT users
• WCAG Level AA violations
• Missing alternatives

Priority 3 - Medium (fix within 3 months):

• Causes confusion/difficulty
• Minor WCAG violations
• Enhancement opportunities

Priority 4 - Low (ongoing):

• Best practice improvements
• AAA considerations
• Edge cases

Quick Checklist Summary

□ Run automated scans (axe, WAVE, Lighthouse)
□ Test keyboard navigation (all functionality)
□ Test with screen reader (content and structure)
□ Check color contrast (text and UI)
□ Verify heading structure (hierarchy)
□ Test all forms (labels, errors)
□ Audit images (alt text)
□ Check media (captions, transcripts)
□ Test zoom and responsive (200% zoom)
□ Test interactive components (modals, accordions)

Taking Action

Regular accessibility testing should be part of your development workflow—not a one-time event. Automated testing catches obvious issues quickly, while manual and screen reader testing uncover the barriers that actually impact users.

TestParty automates continuous accessibility monitoring, catching issues before they reach production.

Schedule a TestParty demo and get a 14-day compliance implementation plan.

Related Resources

• Accessibility Audit Guide
• Screen Reader Testing Guide
• Keyboard Navigation Testing
• WCAG 2.2 Level AA Checklist