Accessibility checklist · Accessible.org

Buttons

Anything the user presses to make something happen.

It is a real <button>, not a styled <div> or <span>.4.1.2 Name, Role, ValueA
You can reach it with Tab and fire it with Enter or Space.2.1.1 KeyboardA
It has a clear text label. Icon-only buttons carry an aria-label.4.1.2 Name, Role, ValueA
Focus is clearly visible when it lands on the button.2.4.7 Focus VisibleAA
The clickable target is at least 24 by 24 CSS pixels, or well spaced.2.5.8 Target Size (Minimum)AA

Photos, illustrations, logos and decorative graphics.

Meaningful images have alt text that says what they show or do.1.1.1 Non-text ContentA
Purely decorative images use empty alt="" so screen readers skip them.1.1.1 Non-text ContentA
An icon that is the only label for a control has an accessible name.4.1.2 Name, Role, ValueA
Text is real text, not baked into an image.1.4.5 Images of TextAA

Fields, selects, checkboxes and the submit flow.

Every field has a visible <label> tied to it, not just a placeholder.3.3.2 Labels or InstructionsA
Which fields are required, and the expected format, are stated in text.3.3.2 Labels or InstructionsA
Errors are identified in text and explain how to fix them.3.3.1 Error IdentificationA
Related fields are grouped with <fieldset> and a <legend>.1.3.1 Info and RelationshipsA
Inputs use the right type and autocomplete for their purpose.1.3.5 Identify Input PurposeAA
Information the user already entered is not asked for again in the same process.3.3.7 Redundant EntryA

The skeleton a screen reader uses to navigate.

There is one <h1> that names the page.2.4.6 Headings and LabelsAA
Heading levels step down in order, with no skipped levels.1.3.1 Info and RelationshipsA
Regions use landmarks: header, nav, main, footer.1.3.1 Info and RelationshipsA
The page has a unique, descriptive <title>.2.4.2 Page TitledA

The whole page, driven without a mouse.

Everything can be operated with the keyboard alone.2.1.1 KeyboardA
Focus never gets trapped in a widget with no way out.2.1.2 No Keyboard TrapA
Focus order follows the visual and reading order.2.4.3 Focus OrderA
A visible focus indicator appears on every interactive element.2.4.7 Focus VisibleAA
When an element takes focus, it is not entirely hidden behind sticky headers or footers.2.4.11 Focus Not Obscured (Minimum)AA
A skip link lets keyboard users jump past the header to the content.2.4.1 Bypass BlocksA

Making sure everyone can actually see it.

Body text clears 4.5:1 contrast, large text clears 3:1.1.4.3 Contrast (Minimum)AA
Icons, borders and control states clear 3:1 against their surroundings.1.4.11 Non-text ContrastAA
No information is carried by colour alone.1.4.1 Use of ColorA
Content stays readable at 200% text zoom, with no loss or overlap.1.4.4 Resize TextAA

Anything that opens a list of choices.

The trigger is a <button> that reports state with aria-expanded.4.1.2 Name, Role, ValueA
It opens from the keyboard and every item can be reached.2.1.1 KeyboardA
Arrow keys move between items and Esc closes it.2.1.1 KeyboardA
Closing the menu returns focus to the trigger.2.4.3 Focus OrderA

Overlays that take over the screen.

It uses role="dialog" with aria-modal and an accessible name.4.1.2 Name, Role, ValueA
Opening it moves focus into the dialog.2.4.3 Focus OrderA
Focus is kept inside the dialog while it is open.2.4.3 Focus OrderA
Esc closes it and focus returns to whatever opened it.2.1.2 No Keyboard TrapA

Rows and columns of related data.

Tabular data uses a real <table>, not stacked <div>s.1.3.1 Info and RelationshipsA
Header cells use <th> with the right scope.1.3.1 Info and RelationshipsA
A <caption> says what the table is about.1.3.1 Info and RelationshipsA

Video, audio and anything that moves.

Video has synchronised captions.1.2.2 Captions (Prerecorded)A
Audio and video offer a transcript or described alternative.1.2.1 Audio-only and Video-onlyA
Nothing autoplays sound, or there is an obvious way to stop it.1.4.2 Audio ControlA
Non-essential motion respects prefers-reduced-motion.2.3.3 Animation from InteractionsAAA