Skip to main content

Accessibility Audit

Accessibility Audit

Project: {{PROJECT_NAME}} Version: {{VERSION}} Date: {{DATE}} Author: {{AUTHOR}} Status: Draft | In Review | Approved Reviewers: {{REVIEWERS}}

Document History

Version Date Author Changes
0.1 {{DATE}} {{AUTHOR}} Initial draft

1. Compliance Target

Standard Level Notes
WCAG 2.1 AA Minimum required
WCAG 2.1 AAA Target for critical flows (checkout, forms)
EN 301 549 Applicable If serving EU public sector
Section 508 {{Yes/No}} If US federal contract

Audit date: {{DATE}} Auditor: {{NAME}} Next scheduled audit: {{DATE}}

2. Audit Methodology

2.1 Automated Testing

  • axe-core: Integrated in Storybook + CI (via @axe-core/playwright)
  • Lighthouse: Accessibility score tracked in CI (target: ≥ 95)
  • pa11y: Run on full page URLs in staging environment

2.2 Manual Testing

  • Keyboard-only navigation on all critical user flows
  • Screen reader testing (see matrix in Section 6)
  • Zoom test: 200% browser zoom — no loss of content or functionality
  • Reflow test: 320px viewport width

2.3 User Testing

  • {{Yes — included users with disabilities in user testing | No — planned for future}}: {{Notes}}

3. Perceivable

1.1 Text Alternatives

Criterion Status Notes Issue Ref
1.1.1 Non-text Content (A) {{Pass}} All <img> have alt; decorative images use alt=""

Checklist:

  • All <img> elements have descriptive alt text or alt=""
  • Icon buttons have aria-label
  • Complex images (charts, diagrams) have long descriptions
  • CAPTCHAs have audio alternative
  • SVG icons: meaningful → role="img" aria-label="...", decorative → aria-hidden="true"

TODO: Run axe and list all violations.

1.2 Time-based Media

Criterion Status Notes Issue Ref
1.2.1 Audio-only / Video-only (A) {{Pass/Fail/N/A}}
1.2.2 Captions (A) {{Pass/Fail/N/A}}
1.2.3 Audio Description (A) {{Pass/Fail/N/A}}
1.2.4 Captions Live (AA) {{Pass/Fail/N/A}}
1.2.5 Audio Description Prerecorded (AA) {{Pass/Fail/N/A}}

TODO: Audit all video/audio content on the platform.

1.3 Adaptable

Criterion Status Notes Issue Ref
1.3.1 Info and Relationships (A) {{Pass/Fail}} Semantic HTML for tables, lists, headings
1.3.2 Meaningful Sequence (A) {{Pass/Fail}} DOM order matches visual order
1.3.3 Sensory Characteristics (A) {{Pass/Fail}} No "click the red button" instructions
1.3.4 Orientation (AA) {{Pass/Fail}} No locked orientation
1.3.5 Identify Input Purpose (AA) {{Pass/Fail}} autocomplete on all personal data fields

Checklist:

  • Tables use <th> with scope attributes
  • Heading hierarchy is logical (H1 → H2 → H3, no skipped levels)
  • Lists use <ul> / <ol> — not styled <div>
  • Form inputs have autocomplete attributes for name, email, phone, address

1.4 Distinguishable

Criterion Status Notes Issue Ref
1.4.1 Use of Color (A) {{Pass/Fail}} Color not sole differentiator
1.4.2 Audio Control (A) {{Pass/Fail}} Auto-play audio has stop mechanism
1.4.3 Contrast Minimum (AA) {{Pass/Fail}} See contrast table below
1.4.4 Resize Text (AA) {{Pass/Fail}} 200% zoom — no content loss
1.4.5 Images of Text (AA) {{Pass/Fail}} Real text used, not images
1.4.10 Reflow (AA) {{Pass/Fail}} 320px width — no horizontal scroll
1.4.11 Non-text Contrast (AA) {{Pass/Fail}} UI components 3:1 ratio
1.4.12 Text Spacing (AA) {{Pass/Fail}} Custom spacing doesn't break layout
1.4.13 Content on Hover/Focus (AA) {{Pass/Fail}} Tooltips can be hovered/dismissed

4. Operable

2.1 Keyboard Accessible

Criterion Status Notes Issue Ref
2.1.1 Keyboard (A) {{Pass/Fail}} All functionality keyboard-operable
2.1.2 No Keyboard Trap (A) {{Pass/Fail}} Focus can always be moved away
2.1.4 Character Key Shortcuts (A) {{Pass/Fail}} Single-key shortcuts can be disabled

Checklist:

  • All interactive elements reachable by Tab key
  • All actions triggerable by Enter/Space
  • No keyboard traps (except intentional: modal focus trap with Escape exit)
  • Custom widgets follow ARIA Authoring Practices patterns

2.2 Enough Time

Criterion Status Notes
2.2.1 Timing Adjustable (A) {{Pass/Fail}} Session timeout warns with option to extend
2.2.2 Pause, Stop, Hide (A) {{Pass/Fail}} Auto-updating content has pause control

2.3 Seizures and Physical Reactions

Criterion Status Notes
2.3.1 Three Flashes (A) {{Pass/Fail}} No content flashes >3 times/sec

2.4 Navigable

Criterion Status Notes
2.4.1 Bypass Blocks (A) {{Pass/Fail}} Skip-to-content link implemented
2.4.2 Page Titled (A) {{Pass/Fail}} Unique descriptive page titles
2.4.3 Focus Order (A) {{Pass/Fail}} Focus order matches reading order
2.4.4 Link Purpose (A) {{Pass/Fail}} Link text descriptive in context
2.4.6 Headings and Labels (AA) {{Pass/Fail}} Descriptive heading and label text
2.4.7 Focus Visible (AA) {{Pass/Fail}} Focus indicator visible on all elements

5. Understandable

3.1 Readable

Criterion Status Notes
3.1.1 Language of Page (A) {{Pass/Fail}} <html lang="en"> set
3.1.2 Language of Parts (AA) {{Pass/Fail}} lang on foreign language sections

3.2 Predictable

Criterion Status Notes
3.2.1 On Focus (A) {{Pass/Fail}} Focus does not trigger unexpected change
3.2.2 On Input (A) {{Pass/Fail}} Input change doesn't auto-submit form
3.2.3 Consistent Navigation (AA) {{Pass/Fail}} Nav consistent across pages
3.2.4 Consistent Identification (AA) {{Pass/Fail}} Same function = same label

3.3 Input Assistance

Criterion Status Notes
3.3.1 Error Identification (A) {{Pass/Fail}} Errors identified in text, not just color
3.3.2 Labels or Instructions (A) {{Pass/Fail}} All fields have labels
3.3.3 Error Suggestion (AA) {{Pass/Fail}} Error messages suggest correction
3.3.4 Error Prevention (AA) {{Pass/Fail}} Destructive actions require confirmation

6. Robust

Criterion Status Notes
4.1.1 Parsing (A) {{Pass/Fail}} Valid HTML, no duplicate IDs
4.1.2 Name, Role, Value (A) {{Pass/Fail}} All UI components have accessible name + role
4.1.3 Status Messages (AA) {{Pass/Fail}} Status messages announced via ARIA live regions

7. Screen Reader Testing Matrix

Screen Reader OS Browser Priority Status Tester Date
VoiceOver macOS 14 Safari HIGH {{Pass/Fail/Untested}}
VoiceOver iOS 17 Safari HIGH {{Pass/Fail/Untested}}
NVDA Windows 11 Chrome HIGH {{Pass/Fail/Untested}}
NVDA Windows 11 Firefox MEDIUM {{Pass/Fail/Untested}}
JAWS Windows 11 Chrome HIGH {{Pass/Fail/Untested}}
TalkBack Android 14 Chrome MEDIUM {{Pass/Fail/Untested}}

Tested user flows:

  1. User registration / login
  2. Main navigation
  3. Form submission with validation errors
  4. Data table — sorting, pagination, row actions
  5. Modal open/close/action
  6. Toast / notification announced

8. Keyboard Navigation Map

Context Key Action
Global Tab Next focusable element
Global Shift+Tab Previous focusable element
Global Escape Close modal, dropdown, toast
Global Alt+S Skip to main content (custom shortcut)
Dropdown Arrow Down/Up Navigate options
Dropdown Enter/Space Select option
Table Arrow keys Navigate cells (if grid role)
Modal Tab Cycle within modal (focus trapped)
Date picker Arrow keys Navigate days
Tabs Arrow keys Switch tab

9. Color Contrast Verification Table

Element Text Color Background Ratio AA Pass AAA Pass
Body text #0F172A #FFFFFF {{X:1}} {{Y/N}} {{Y/N}}
Secondary text #334155 #FFFFFF {{X:1}} {{Y/N}} {{Y/N}}
Disabled text #94A3B8 #FFFFFF {{X:1}} {{Y/N}} {{Y/N}}
Primary button text #FFFFFF #0EA5E9 {{X:1}} {{Y/N}} {{Y/N}}
Link color #0284C7 #FFFFFF {{X:1}} {{Y/N}} {{Y/N}}
Error text #EF4444 #FFFFFF {{X:1}} {{Y/N}} {{Y/N}}
Placeholder #94A3B8 #FFFFFF {{X:1}} {{Y/N}} {{Y/N}}

TODO: Measure all values using {{Colour Contrast Analyser | axe DevTools}}.

10. ARIA Usage Audit

Pattern ARIA Used Correct? Notes
Modal dialog role="dialog", aria-modal="true", aria-labelledby {{Yes/No}}
Navigation role="navigation", aria-label {{Yes/No}}
Alert/toast role="alert" or aria-live="polite" {{Yes/No}}
Tab panel role="tablist", role="tab", role="tabpanel" {{Yes/No}}
Accordion aria-expanded, aria-controls {{Yes/No}}
Custom select role="listbox", role="option", aria-selected {{Yes/No}}
Loading states aria-busy="true", live region {{Yes/No}}

11. Remediation Priority & Timeline

Issue WCAG Criterion Severity Priority Assigned To Target Date Status
{{Issue description}} {{1.4.3}} {{Critical/High/Medium/Low}} P1 {{NAME}} {{DATE}} {{Open/In Progress/Fixed}}

Severity definitions:

  • Critical: Blocks users with disabilities from core functionality
  • High: Significant barrier, workaround exists
  • Medium: Inconvenience, does not block task completion
  • Low: Minor enhancement opportunity

12. Testing Tools

Tool Type Usage Version
axe-core Automated CI integration + Storybook {{4.x}}
@axe-core/playwright Automated E2E accessibility checks {{4.x}}
Lighthouse Automated CI performance + a11y score Built-in Chrome
pa11y Automated Staged URL scanning {{6.x}}
Colour Contrast Analyser Manual Color contrast spot checks TPGi
Screen readers Manual See matrix above —
Accessibility Insights Manual Guided manual testing Microsoft

Approval

Role Name Date Signature
Author
Accessibility Lead
QA Lead
Product Owner

No comments to display

Back to top