Accessibility Audit Checklist

Accessibility is not optional, it is a legal requirement in many jurisdictions and a moral imperative everywhere. AI-generated code frequently strips accessibility features or never includes them. This checklist helps you audit your app against the most impactful WCAG criteria.

Last updated: 2026-03-14

Keyboard Navigation

All interactive elements are reachable via Tab key

Tab through every page and verify that every button, link, input, and control receives focus in a logical order.

Focus indicator is visible on all elements

Check that focused elements have a clearly visible outline or highlight that distinguishes them from unfocused elements.

Modals trap focus correctly

Open every modal and verify that Tab cycles only through modal elements until it is dismissed.

Escape key closes modals and overlays

Press Escape on every modal, dropdown, and overlay to verify they close without requiring a mouse click.

Custom components support keyboard interaction

Verify that custom dropdowns, sliders, tabs, and accordions respond to arrow keys and other expected keyboard shortcuts.

Screen Reader Compatibility

All images have meaningful alt text

Check that every image has an alt attribute that describes its content or is marked as decorative with an empty alt.

Form fields have associated labels

Verify that every input field has a visible label element properly associated via the for attribute or wrapping.

ARIA attributes are used correctly

Check that ARIA roles, states, and properties are applied correctly and do not conflict with native HTML semantics.

Dynamic content changes are announced

Verify that live regions announce important updates like error messages, notifications, and status changes.

Page headings follow a logical hierarchy

Check that heading levels (h1 through h6) are used in order without skipping levels.

Visual Design

Text contrast meets WCAG AA standards

Verify that normal text has at least 4.5:1 contrast ratio and large text has at least 3:1 against its background.

Color is not the only means of conveying information

Check that error states, required fields, and status indicators use icons, text, or patterns in addition to color.

Text can be resized to 200% without loss of functionality

Zoom the browser to 200% and verify that all content remains readable and no functionality is lost.

Animations respect prefers-reduced-motion

Enable reduced motion in OS settings and verify that animations are minimized or disabled.

Content Structure

Page has a descriptive title

Verify that each page has a unique, descriptive title tag that identifies the page content and site name.

Language attribute is set on the HTML element

Check that the lang attribute is present and correct on the html element for proper screen reader pronunciation.

Links have descriptive text

Verify that link text clearly indicates the destination or action rather than using generic text like click here.

Tables use proper header markup

Check that data tables use th elements for headers and include scope attributes for complex tables.

Frequently Asked Questions

Do AI-generated apps typically pass accessibility audits?

Rarely. AI tools prioritize visual appearance and functionality over accessibility. Missing alt text, absent ARIA attributes, inadequate color contrast, and broken keyboard navigation are extremely common in vibecoded apps.

Which accessibility testing tools should I use alongside this checklist?

Use axe DevTools or Lighthouse for automated checks, then supplement with manual keyboard navigation testing and screen reader testing using VoiceOver on Mac or NVDA on Windows.

Is WCAG AA or AAA compliance required?

WCAG AA is the standard most legal requirements reference. AAA is aspirational and not always achievable. Focus on meeting AA criteria first, then address AAA where feasible.

Let human testers run through this checklist for you

Submit your app and our testers will find the bugs you missed. Starting at €15 per test.

Related checklists

Mobile Responsive Testing Checklist

Mobile responsive testing checklist for AI-generated web apps. Verify layouts, touch interactions, and performance across devices and screen sizes.

Cross-Browser Testing Checklist

Cross-browser testing checklist for AI-generated web apps. Verify compatibility across Chrome, Firefox, Safari, and Edge with layout and feature checks.

Form Testing Checklist

Thorough form testing checklist covering validation, submission, error handling, and accessibility. Catch form bugs that frustrate users and lose data.

← Back to Checklists