Developer Accessibility Checklist
Based on WCAG 2.2 AA Guidelines - Updated and Enhanced
Global Accessibility Requirements
All functionality operable via keyboard alone.
Logical and intuitive tab order.
Visible focus on all interactive elements.
No keyboard traps.
Correct use of ARIA Landmarks (<header>, <nav>, <main>, <footer>).
Page has a meaningful <title> and lang attribute.
Links
Link text is descriptive, not "click here."
Links are keyboard and screen reader accessible.
Visible focus state for links.
Buttons
Buttons have accessible labels (text or aria-label).
Triggered by Enter or Space keys.
Focus style is clearly visible.
Forms and Inputs
Text Fields
Inputs have associated labels.
Radio Buttons & Checkboxes
Grouped correctly with <fieldset> and <legend>.
Dropdowns (Selects)
Use native <select> elements where possible.
Error Handling
Errors programmatically linked to fields.
Error messages clearly visible and meaningful.
Images and Non-Text Content
Informative images have meaningful alt text.
Decorative images have empty alt="".
Complex images/SVGs have short alt AND extended descriptions.
Tables
Tables use <th> for headers with correct scope.
Tables are read logically by screen readers.
Navigation Menus
Keyboard accessible navigation.
Current page indicated with aria-current or similar.
Accordions & Tabs
Accordions are keyboard navigable (Enter/Space, Arrow keys for Tabs).
State changes (expanded/collapsed) properly announced with aria-expanded.
Modals/Dialogs
Focus trapped inside modal while open.
Escape key closes modal.
Modal labeled properly using role="dialog" and accessible name.
Dynamic Content and SPAs
Important dynamic updates announced using ARIA Live regions.
SPA page changes update <title> and notify screen reader users.
Browser history correctly updated after dynamic navigation (Back button works).
Carousels and Slideshows
Keyboard operable controls (Pause, Next, Previous).
Auto-playing slides can be paused or stopped.
Frames and Embeds
Frames (<iframe>) have descriptive title attributes.
Lazy Loading and Infinite Scroll
Focus can reach lazy-loaded content without issues.
Keyboard and screen readers can access all dynamically loaded sections.
Color Contrast
Text meets minimum 4.5:1 contrast ratio against background.
Interactive elements have visible focus styles with enough contrast.
Zoom and Reflow
No horizontal scroll required at 320px screen width.
Content maintains functionality and meaning at 200% zoom.
Mobile-Specific Requirements
Touch targets at least 44x44px.
No hover-dependent interactions without accessible alternatives.
ARIA Essentials
Native HTML used before ARIA roles when possible.
Roles, states, and properties updated dynamically if needed.
ARIA Live regions used wisely to announce important changes.