A Practical WCAG Checklist You Can Run in the Browser

WCAG Checker is the rule pass. Screen Reader Preview is how you hear the accessibility tree’s names in order. Use them on markup and pages you own. This is not a network scan; if a UI asks for a URL, only submit origins you are allowed to test.

Names first: what assistive tech will speak

Every interactive control needs an accessible name. A button that is only an icon font with no aria-label, no visible text, and no title worth using will be announced as “button.” An <input> without a <label> (or aria-label / aria-labelledby) is “edit text” with no purpose.

Images that convey meaning need alt that states the function, not “image123.” Decorative images should be alt="" so they are skipped. Linked images need alt that names the destination, not a description of the photo’s colors.

Screen Reader Preview is the fastest way to see the spoken sequence of a snippet: headings, links, buttons, alts. If the preview is a jumble of “link graphic” and unlabeled tabs, you have the bug before anyone files a ticket.

For the longer explanation of how that tree is built, read How Screen Readers Interpret HTML.

Contrast that survives a real background

WCAG 2.1 AA wants 4.5:1 for normal text and 3:1 for large text. Placeholder gray on white often fails. Primary buttons with white text on a light brand color fail. Text over a photograph fails unless you add a scrim.

Check the pair that users actually see: the computed foreground against the computed background, including overlays. A palette that passed in Figma on a solid #FFFFFF can fail on a #F4F1EA page chrome.

When you are still choosing tokens, Color Studio is the place to generate pairs and keep the ones that meet the ratio. The WCAG checker will flag what already shipped.

Non-text contrast (icons, input borders, focus rings) is 3:1 against adjacent colors. A 1px #E5E5E5 border on white is a frequent miss.

Structure: headings, landmarks, and skip links

One h1 that names the page. Headings in order - do not skip levels to get a visual size; use CSS for size. Landmark regions (header, nav, main, footer, or role equivalents) let people jump. Multiple navs need distinguishable names (aria-label="Section").

A skip link as the first focusable control should move focus to main. If you cannot tab to it and activate it, it is decoration.

Lists should be lists (ul/ol), not a pile of divs with bullets in CSS, when the content is actually a list. Tables need headers (th) when they are data tables.

WCAG Checker is good at empty headings and missing main. It is bad at “this h2 is marketing fluff and the real title is in a div.” That is your pass.

Keyboard paths that are not a mouse story

Unplug the mouse (or ignore it):

• Can you reach every action with Tab / Shift+Tab?
• Is focus visible on every stop? (outline: none without a replacement fails).
• Can you close the modal and return focus to the opener?
• Does a custom dropdown trap Tab inside until Escape?
• Does the date picker work with arrows, or only with a click on a calendar icon?

tabindex="0" puts an element in the tab order; tabindex="-1" makes it focusable from script. tabindex="5" (positive) is how you invent a random order. Avoid it.

Automation will not finish this list. Spend five minutes on the primary task: sign in, add to cart, submit the tool form.

A pass you can run before you call it done

1. Paste or load your HTML/page into WCAG Checker. Fix name, contrast, and document-structure hits first.
2. Paste the same critical snippet into Screen Reader Preview. Read the announcement list out loud. If you cannot tell what a control does, neither can a customer.
3. Keyboard the main path once.
4. Recheck contrast after you change the palette - How to Build a UI Color Palette.
5. Repeat after the next CSS tweak. Accessibility regressions are usually “we restyled the button.”

No account. No need to upload a PDF named after a fictional intern.

What an automated pass still misses

Captions on video. Plain-language errors. Whether a red outline is the only way you indicated a failed field (color alone). Whether the focus order matches the visual order. Whether a chart has a text alternative. Whether motion respects prefers-reduced-motion - see How CSS Animations Work.

A checker is a lint step. A person using NVDA, VoiceOver, or JAWS on a real page is the exam.

Check contrast, then listen to the markup

Run WCAG Checker on the page you are about to ship. Then listen to the same markup in Screen Reader Preview. Fix names and contrast before you debate anything else.