Website Accessibility Audit by WCAG 2.1 Level AA Standard
WCAG 2.1 AA is the international web accessibility standard, mandatory for government sites in the EU (EN 301 549) and USA (Section 508). Level AA includes 50+ success criteria covering perceivability, operability, understandability, and robustness of the interface.
POUR Principles
Perceivable (perceivable): information is available through different senses. Operable (operable): all functions are available via keyboard. Understandable (understandable): interface is predictable and consistent. Robust (robust): works with assistive technologies.
Audit Tools
Automated tools (find ~30% of issues):
# axe DevTools — Chrome/Firefox extension
# Run on each page: F12 → Accessibility
# axe-core via Playwright
npm install -D @axe-core/playwright
# audit.spec.ts
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';
const pagesToAudit = [
'/', '/about', '/contact', '/login', '/dashboard'
];
for (const path of pagesToAudit) {
test(`${path} has no WCAG 2.1 AA violations`, async ({ page }) => {
await page.goto(`https://staging.example.com${path}`);
const results = await new AxeBuilder({ page })
.withTags(['wcag2a', 'wcag2aa', 'wcag21aa'])
.analyze();
expect(results.violations).toEqual([]);
});
}
# WAVE — online or extension
https://wave.webaim.org/
# Pa11y
pa11y --standard WCAG2AA https://example.com --reporter html > report.html
# Lighthouse
lighthouse https://example.com --only-categories=accessibility --output html
Manual testing (60-70% of issues):
- Keyboard-only navigation — go through entire user flow
- Testing with NVDA + Chrome / JAWS + IE / VoiceOver + Safari
- Testing with 200% and 400% zoom (SC 1.4.10 Reflow)
- Windows high contrast mode
- Disable CSS — structure should remain meaningful
WCAG 2.1 AA Key Criteria Checklist
1.1.1 Non-text Content (A)
- All images have alt
- Icon buttons have aria-label
- Complex charts have text description
1.3.1 Info and Relationships (A)
- Headings H1-H6 reflect document structure
- Lists use
<ul>/<ol>/<li> - Tables have
<th>withscope - Forms: every input has
<label>
1.4.3 Contrast (Minimum) (AA)
- Text: minimum 4.5:1
- Large text (18pt/14pt bold): minimum 3:1
1.4.4 Resize Text (AA)
- Text scales to 200% without loss of content
1.4.10 Reflow (AA)
- At 320px there's no horizontal scroll
1.4.11 Non-text Contrast (AA)
- UI components and graphics: minimum 3:1 to background
2.1.1 Keyboard (A)
- All functions available via keyboard
2.4.3 Focus Order (A)
- Focus order is logical
2.4.7 Focus Visible (AA)
- Visible focus indicator on all elements
3.1.1 Language of Page (A)
-
<html lang="en">is set
3.3.1 Error Identification (A)
- Form errors described by text, not just color
4.1.2 Name, Role, Value (A)
- All custom components have correct role, aria-label, aria-expanded
Report Format
## WCAG Audit Report — example.com
Date: 2024-11-15
Standard: WCAG 2.1 AA
Tools: axe DevTools, NVDA 2024.2, manual testing
### Summary
| Level | Violations | Status |
|-------|-----------|--------|
| Critical (Level A) | 8 | Fail |
| Significant (Level AA) | 12 | Fail |
| Warnings | 23 | Review |
### Critical Issue #1
**Criterion:** 1.1.1 Non-text Content
**Elements:** 47 images without alt on /gallery, /products pages
**Impact:** screen reader announces filenames
**Fix:** add meaningful alt to all images
**Priority:** P1 (Critical)
Common Findings on Websites
- Missing
langattribute on HTML element - Poor contrast on gray text on white background
- Custom selects and dropdowns without keyboard support
- Forms with placeholder instead of label
- Sliders and carousels without control buttons
- Disabled zoom (
maximum-scale=1)
Audit Timeline
| Site Size | Timeline |
|---|---|
| Landing (5–10 pages) | 2–3 days |
| Corporate site (20–50 pages) | 4–7 days |
| SaaS / web app | 7–14 days |
| Fixes based on findings | x1.5 of audit timeline |