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.