Accessibility Checker: Find WCAG 2.2 Problems in Your HTML

What is it?

The Accessibility Checker finds the most common problems that stop disabled people from using a page, each linked to its WCAG 2.2 success criterion. It checks images without alt text, form fields without labels, buttons and links with no name, skipped headings, missing page language and title, broken ARIA, zoom blocking, iframes without a title, keyboard traps and low colour contrast in inline styles.

Who is it for?

Website owners who want their site usable by everyone, developers preparing for an accessibility audit, and bloggers who want better SEO, since many accessibility fixes also help search engines.

How to use it

  1. Paste your code into the HTML to check box, or tap Try a sample to see how it works.
  2. The list of problems updates as you type: ✕ marks an error, ! a warning. The line above it sums up, for example “2 errors, 1 warning. Tap Show to jump to the line.”
  3. Tap Show next to a problem to jump to that line, fix it, and watch the list update. Problems that are not on one line say Whole page. Clear empties the box.

Worked example

Paste <input placeholder="Your email"><div onclick="go()">Send</div>. You get two problems: the field has no label (WCAG 1.3.1, 4.1.2), and a clickable div cannot be reached with the keyboard. Fix them with <label for="em">Your email</label><input id="em"> and a real <button>Send</button>.

About one in six people lives with a disability. The page you paste is checked inside your browser and is not sent anywhere.

Errors and how to fix them

  • “✓ No accessibility problems found in the code. Also test with a keyboard and a screen reader”: no checker can find everything; try the page with Tab only and with a screen reader (NVDA, VoiceOver or TalkBack).
  • “<input type="…"> has no label. A placeholder is not a label: it disappears when typing starts”: add a visible <label for="id">.
  • Empty <button> or link: an icon-only button needs aria-label="Close" or hidden text.
  • “<iframe> without a title that says what it shows”: add title="Map of our shop".
  • Low contrast (ratio shown): normal text needs at least 4.5:1, large text 3:1.
  • Zoom blocked: remove user-scalable=no and maximum-scale from the viewport tag.

Open the tool: Accessibility Checker

Still stuck?

Contact support. Tell us which tool or page you were using, what you tapped, what you saw, and your phone or computer and browser (for example: Android phone, Chrome). We reply by email.

Questions, or an error not listed here?

Tell us in the comments: what you were doing, the exact message you saw, and your device and browser. We read every comment and add new fixes to this article.