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.