Accessibility Audit

[ajcwebdev]

Outline

• Visual Design
• Semantic HTML
• Interactive Elements
• Forms
• Visual Testing
• Automated Testing
• Manual Testing
  • Keyboard Navigation
  • Screen Reader Testing

Visual Design

• Ensure color palette meets contrast requirements
• Verify information is not conveyed by color alone
• Confirm form validation errors use multiple indicators beyond color
• Check typography for readability
• Design focus indicators for interactive elements
• Create consistent navigation patterns
• Plan for text scaling and viewport adaptation

Semantic HTML

• Implement proper heading hierarchy (h1-h6)
• Use lists (ul, ol) for grouped content
• Apply appropriate ARIA attributes only when necessary and ensure custom components have appropriate ARIA roles
• Ensure form fields have associated labels

Interactive Elements

• Verify all interactive elements are keyboard accessible
• Add descriptive text for buttons and links
• Create skip links for main content

Forms

• Associate labels with form controls
• Use fieldset and legend for grouped form controls
• Add descriptive placeholder text as enhancement, not replacement for labels
• Implement proper form validation with clear feedback
  • Validate URLs and RSS feeds
• Ensure error messages are announced by screen readers

Visual Testing

• Test with different color contrast settings
• Verify content at different zoom levels (up to 200%)
• Check responsive layout behavior
• Test with different color vision deficiency simulations
• Verify text spacing adjustments
• Check content reflow at different viewport sizes

Automated Testing

• Run Axe DevTools Chrome extension
• Check Lighthouse accessibility scores
• Implement automated accessibility tests in CI/CD pipeline
• Address all automated test findings
• Document any false positives or exceptions

Manual Testing

Keyboard Navigation

• Test tab order logic
• Verify focus visibility
• Check all interactive elements can be accessed
• Ensure no keyboard traps
• Test skip links functionality
• Verify escape key closes modals/dialogs
• Check arrow key navigation where appropriate

Screen Reader Testing

• Test with NVDA (Windows)
• Test with JAWS (Windows)
• Test with VoiceOver (Mac)
• Check heading navigation
• Verify link navigation
• Test landmark navigation
• Ensure form controls are properly announced
• Check dynamic content updates are announced
• Verify error messages are read correctly

[ajcwebdev]

Thanks to @BenDMyers for indirectly helping create this checklist since it was compiled from the full transcript for his FSJam interview, Fullstack Accessibility with Ben Myers (EP31).

• As with all accessibility audits, it can never be fully comprehensive so additional tasks are welcome.

• It aims to capture as much of Ben's actionable insights as possible with the goal of providing a baseline accessible experience for the majority of users on a variety of devices in a variety of situations.