DevKit Tools

HTML Accessibility Checker

Paste HTML and get the accessibility failures that can be found in markup: missing alt and labels, broken heading order, duplicate ids and invalid ARIA.

Accessibility/HTML Accessibility Checker

Paste markup and get a list of real accessibility failures: missing alt and labels, broken heading order, duplicate ids and bad ARIA.

Audit

Errors

0

Warnings

0

Passed

0

Nothing failed in these checks.

These are the failures that can be found in markup alone. Colour contrast, focus order and whether an alt text is actually meaningful need a real page and a person, so a clean report here is a floor rather than a certificate.

Generating...

About the html accessibility checker

This is the kind of task worth handing to a tool rather than to a model. You are not asking for something to be written, you are asking for something to be checked, and a check needs to be exhaustive and repeatable rather than plausible.

Every rule here is one that can be decided from markup alone. Missing alt, an input with no label, a heading that jumps from h2 to h4, two elements sharing an id, a role that is not in the spec: all of these are objective, and all of them are common.

How to use it

  1. 1Paste the HTML you want checked.
  2. 2Read the errors first, then the warnings.
  3. 3Fix and paste again.
  4. 4Treat a clean result as a floor, not a finish line.

Questions

Does a clean report mean my page is accessible?

No. It means the failures visible in markup are gone. Colour contrast, focus order, whether alt text is actually meaningful and whether the page works by keyboard all need a real page and a person.

Why is a placeholder not a label?

It disappears as soon as someone types, so anyone who loses their place has nothing to refer back to. Screen readers also treat it inconsistently. Use a real label, visually hidden if the design needs it.

Why do duplicate ids matter?

A label's for attribute and aria-labelledby both resolve to the first match. Every element after the first silently loses its accessible name, and nothing visibly breaks.

What is wrong with a positive tabindex?

It jumps that element ahead of everything in the natural order, so focus starts leaping around the page. Use 0 to make something focusable and -1 to make it focusable only from script.

More Performance tools