Accessibility checklist

"Click here" is avoided Links say where they lead instead of vague words that mean nothing when read alone.
1.1.1 Non-text Content Images, icons and other non-text items need a text version that gives the same meaning.
1.3.2 Meaningful Sequence When order changes the meaning, the code order must match the order people should read.
1.3.5 Identify Input Purpose Fields asking for personal details say what they collect so browsers can fill them in.
1.4.1 Use of Color Colour alone never carries meaning; pair it with text, an icon or a pattern as well.
1.4.10 Reflow At 320 CSS pixels wide the page fits on screen without scrolling sideways to read.
1.4.11 Non-text Contrast Borders of controls, focus rings and key icons need at least 3:1 contrast.
1.4.3 Contrast (Minimum) Normal text needs a 4.5:1 contrast ratio and large text needs at least 3:1.
1.4.4 Resize Text Text can be enlarged to 200 percent without content being cut off or lost.
2.1.1 Keyboard Everything a mouse can do on the page can also be done with a keyboard alone.
2.1.2 No Keyboard Trap Focus can always move into and back out of every part of the page by keyboard.
2.2.2 Pause, Stop, Hide Moving or auto-updating content that lasts over five seconds can be paused or hidden.
2.3.1 Three Flashes Nothing on the page flashes more than three times in any one second.
2.4.1 Bypass Blocks There is a way to jump past repeated blocks like the header straight to the content.
2.4.11 Focus Not Obscured A focused item is never fully hidden behind sticky headers, banners or other overlays.
2.4.2 Page Titled Each page has a title that describes its topic or the task it is for.
2.4.3 Focus Order Tabbing moves through the page in an order that keeps meaning and makes sense.
2.4.4 Link Purpose The reason for a link is clear from its text, or from the text right around it.
2.4.7 Focus Visible Whatever has keyboard focus shows a visible indicator so people know where they are.
2.5.3 Label in Name The accessible name of a control contains the words shown on its visible label.
3.1.1 Language of Page The page states its main language in code so screen readers pronounce it properly.
3.3.1 Error Identification When input is wrong, the problem field is identified and the error is described in text.
3.3.2 Labels or Instructions Fields come with labels or instructions whenever people need to enter information.
3.3.3 Error Suggestion If the site knows how to fix a mistake, the error message tells the person how.
4.1.3 Status Messages Status updates are announced by screen readers without moving the user's focus.
:focus-visible A CSS selector that styles focus for keyboard users without showing it on every click.
<details> and <summary> Built-in elements that make a show and hide section with no script and full keyboard support.
<dialog> A native HTML element for pop-up windows that handles focus and Escape for you.
Accessibility Making sites work for people with all kinds of abilities, devices and ways of browsing.
Accessibility audit A structured review of a page against checks, noting each failure and how to fix it.
Accessibility tree The simplified version of the page that browsers pass on to screen readers and other tools.
Accessible name The text a screen reader announces for an element, such as a button's label.
alt="" An empty alt tells screen readers to skip an image that is only there for decoration.
Animations respect reduced motion Large movement is toned down or turned off for people who have asked for less motion.
ARIA Extra attributes that add roles, states and names where plain HTML cannot express them.
aria-controls Points from a control to the element it shows, hides or changes, using that element's id.
aria-current Marks the current item in a set, such as the page you are on in a navigation menu.
aria-describedby Links an element to extra text, like a hint or error, that is read after its name.
aria-disabled Marks a control as unavailable while keeping it focusable so people can still find it.
aria-expanded Tells screen readers whether the section a button controls is open or closed right now.
aria-hidden Hides an element from screen readers while leaving it visible on the screen.
aria-invalid Flags a field whose current value has failed validation so screen readers say so.
aria-label Gives an element an accessible name directly when there is no visible text to use.
aria-labelledby Names an element using the text of one or more other elements, referenced by id.
aria-live Makes a region announce its changes so screen reader users hear updates as they happen.
aria-pressed Shows whether a toggle button is currently on or off, like a bold or mute button.
aria-required Tells screen readers a field must be filled, mainly for custom controls without required.
Assistive technology Tools like screen readers, magnifiers and switches that help people use a computer.
autocomplete An input attribute that tells the browser what data a field wants so it can be filled in.
Autoplay can be stopped Video, audio or carousels that start on their own have a clear way to pause them.
Browse mode A screen reader mode for reading a page with arrow keys and jumping by headings or links.
Buttons do actions, links go places Use a button for something that happens on this page and a link to go somewhere else.
Contrast ratio A number comparing the lightness of text and background, from 1:1 up to 21:1.
Data table headers Tables of data use th cells so each value is read with the heading it belongs to.
Decorative image An image that adds no information and should be silent to screen readers.
Dialog returns focus on close When a pop-up closes, focus goes back to the control that opened it.
Disclosure pattern A button that shows or hides a nearby section and reports its open state.
div onclick A clickable div is not a real button and misses keyboard and screen reader support.
Error summary A list at the top of a form that names each problem and links to the field involved.
Escape closes overlays Pressing Escape shuts dialogs, menus and pop-ups and returns the user to where they were.
Every field has a visible label Each input has a label people can see, tied to it in code so it is announced too.
Every image has alt text Each img has an alt attribute, written out for meaning or left empty for decoration.
Every page has one h1 A single main heading tells people what the page is about before anything else.
fieldset and legend Wrap related fields in a fieldset and give it a legend that names the whole group.
Focus indicator The outline or highlight showing which element will respond to the keyboard.
Focus management Moving focus on purpose with script, for example into a dialog when it opens.
Focus order The sequence in which elements receive focus as someone presses Tab through a page.
for attribute Connects a label to its input by matching the input's id, so clicking the label works.
Functional image An image that works as a link or button, so its alt says what it does, not how it looks.
Heading levels Headings go from h1 to h6 in order, without skipping levels to get a smaller size.
Icon buttons have a name Buttons that show only an icon still need a text name for screen readers to announce.
inert An attribute that makes part of the page unclickable and unfocusable while a dialog is open.
inputmode Hints which on-screen keyboard to show, such as a number pad, without changing validation.
Keyboard trap A spot where keyboard focus gets stuck and the user cannot Tab or Escape away from it.
Landmarks Page regions like header, nav, main and footer that screen reader users can jump between.
lang attribute Set on the html element to declare the page language, such as lang="en".
Language of parts A phrase in another language gets its own lang so it is read with the right voice.
Links list A screen reader feature that lists every link on the page, stripped of surrounding text.
Lists use ul, ol and li Groups of items are marked up as real lists so screen readers say how many there are.
Live region An area of the page whose updates are spoken aloud without the user moving to it.
main element Wraps the main content of the page so it can be reached in one jump.
Native elements first Prefer built-in HTML controls before ARIA, since they already come with keyboard support.
Nested interactive elements Putting a button inside a link, or the reverse, confuses browsers and screen readers.
New tab warning Tell people when a link opens a new tab or window so the change is not a surprise.
Placeholder is not a label Hint text inside a field vanishes when typing starts, so it cannot replace a label.
Plain language Short sentences and common words make content easier for everyone to understand.
prefers-reduced-motion A CSS media query that detects when someone has asked their system for less motion.
Read more links Repeated links like Read more need hidden or extra text so each one is unique.
Reading order The order a screen reader follows, which comes from the code rather than the layout.
Reflow Content rearranges into a single column at high zoom instead of needing sideways scroll.
rem units Sizing text in rem lets it grow when people raise the default font size in their browser.
required attribute Marks a field as mandatory so browsers and screen readers both report it.
Required fields marked in text Show required fields with words or an explained asterisk, never by colour alone.
role An ARIA attribute that tells assistive technology what kind of thing an element is.
role=alert Announces urgent messages, like a form error, immediately and interrupts other speech.
role=group Groups related controls under a shared name when a fieldset is not a good fit.
role=img on SVG Treat an inline SVG as one image and give it a name so it is announced properly.
role=menu Meant for app-style menus with arrow keys, not for ordinary site navigation links.
role=status A polite live region for updates such as saved messages or search result counts.
Screen reader Software that reads the screen aloud or in braille and is driven by the keyboard.
showModal() Opens a dialog as modal, trapping focus inside it and making the page behind inert.
Skip link A link at the very top that jumps keyboard users past the menu to the main content.
tabindex Controls whether an element can take focus; 0 adds it and -1 allows focus by script only.
tabindex above zero is avoided Positive tabindex values reorder focus in confusing ways and are hard to maintain.
type=button Stops a button inside a form from submitting it when it is only meant to run script.
type=email and type=tel Specific input types bring the right mobile keyboard and better autofill for each field.
user-scalable=no A viewport setting that blocks pinch zoom on phones and should never be used.
Visually hidden text Text kept off screen with CSS but still read by screen readers for extra context.
WCAG The Web Content Accessibility Guidelines, the shared standard for testing accessibility.
WCAG 2.2 AA The level most laws and policies aim for, covering all A and AA success criteria.