Scan any page against 21 automated WCAG 2.2 checks and get a plain-English fix for every problem found. Alt text, form labels, heading order, keyboard traps, contrast, and more. Free, no sign-up, and no crawl limits.
Enter a public URL and we fetch the page and check the HTML it returns. If the page sits behind a login, or is built entirely in the browser, paste its HTML instead and the same checks run locally in your own tab.
Other free tools for auditing and building better pages. No sign-up on any of them.
Check your heading hierarchy for skipped levels and multiple h1s. Better for screen readers and for search.
Use Tool →Build a palette you can actually use, then check the pairs you plan to put text on.
Use Tool →See how hard your copy is to read. Clear writing is an accessibility win as much as a marketing one.
Use Tool →Generate title, description, and viewport tags correctly, including a viewport that does not block zoom.
Use Tool →Confirm a page points at the canonical URL you intended, so crawlers and people land in the same place.
Use Tool →Turn a plain screenshot into a clean, presentable image for your bug report or documentation.
Use Tool →How It Works
No account, no sign-up, no crawl limit. Enter a URL and we fetch the page, or paste the HTML and the same checks run locally in your own browser tab.
Paste a public URL, or switch to Paste HTML for pages behind a login, in staging, or built entirely in the browser.
Every failed check shows what it looks at, why it matters to a real person, how to fix it, and up to three examples pulled from your own markup.
Work down from critical to advisory, ship the fix, then run the page again to confirm the check flipped to a pass.
Be Realistic
This matters more than the score. Automated tools are very good at one class of problem and blind to another, and knowing the difference is what stops a green result from becoming false confidence.
machine-checkable ≠ accessible
A tool can prove an alt attribute exists. It cannot tell you the alt text is wrong. It can prove a label is wired to a field, but not that the label makes sense. Everything in the second group needs a person, a keyboard, and ideally a screen reader.
There are two more limits worth stating plainly. First, this checker reads the HTML the server returns, so anything a page renders later with JavaScript is invisible to it. On a single-page app you will get a thin report, and the tool says so when that happens.
Second, contrast is only measured where a text color and a background color are both set in an inline style attribute. Contrast that comes from a stylesheet needs a rendered page with computed styles, which no HTML-level checker can do. Check your palette directly instead of assuming a clean report means clean contrast.
The Checks
Each check points at the WCAG 2.2 success criterion behind it, so a finding here can go straight into a ticket without anyone having to translate it first.
| Check | WCAG criterion | Severity |
|---|---|---|
| Images have an alt attribute | 1.1.1 Non-text Content (A) | critical |
| Alt text is not just a file name | 1.1.1 Non-text Content (A) | moderate |
| Form fields have labels | 1.3.1, 4.1.2 (A) | critical |
| Links have discernible text | 2.4.4, 4.1.2 (A) | critical |
| Buttons have an accessible name | 4.1.2 Name, Role, Value (A) | critical |
| Page declares a language | 3.1.1 Language of Page (A) | serious |
| Page has a title | 2.4.2 Page Titled (A) | serious |
| Labels point at a real field | 1.3.1 Info and Relationships (A) | serious |
| Iframes have a title | 4.1.2 Name, Role, Value (A) | serious |
| Pinch zoom is not disabled | 1.4.4 Resize Text (AA) | serious |
| ARIA references resolve to real ids | 4.1.2 Name, Role, Value (A) | serious |
| Clickable elements are keyboard reachable | 2.1.1 Keyboard (A) | serious |
| Media does not autoplay with sound | 1.4.2 Audio Control (A) | serious |
| Inline text colors meet 4.5:1 | 1.4.3 Contrast Minimum (AA) | serious |
| Page has exactly one h1 | 1.3.1 Info and Relationships (A) | moderate |
| Heading levels do not skip | 1.3.1 Info and Relationships (A) | moderate |
| No positive tabindex values | 2.4.3 Focus Order (A) | moderate |
| Element ids are unique | 4.1.1, 1.3.1 (A) | moderate |
| Data tables have header cells | 1.3.1 Info and Relationships (A) | moderate |
| Page has a main landmark | 2.4.1 Bypass Blocks (A) | moderate |
| Link text describes its destination | 2.4.4 Link Purpose (A) | advisory |
Criterion numbers follow WCAG 2.2, a W3C Recommendation since October 2023. Levels shown in brackets are the conformance level of that criterion.
Scoring
A page starts at 100 and loses points for each failed check, weighted by how much damage that failure does to somebody. This is our own weighting for triage, not an official WCAG measure, and no score is a claim of compliance.
| Severity | Cost per failed check | What it means |
|---|---|---|
| Critical | 15 points | Someone can be blocked from using part of the page entirely. An unlabelled payment field or an icon-only link with no name belongs here. |
| Serious | 10 points | The page is usable but painful. Blocked zoom, a missing language, and low contrast all make people work much harder than they should. |
| Moderate | 6 points | Structure and navigation problems. A skipped heading level or a missing main landmark slows people down without stopping them. |
| Advisory | 2 points | Good practice worth fixing when you are already in the file. Generic link wording is the clearest example. |
Checks that have nothing to look at are marked not applicable and do not affect the score. A page with no tables is not rewarded or punished for table headers.
Common Failures
These six account for the bulk of what an automated scan turns up, and every one of them is a small, contained fix.
The most common failure of all, and the easiest to fix. A missing alt attribute means a screen reader has nothing to announce, so whatever the image communicated is simply gone.
Add alt to every imgA placeholder disappears the moment somebody types, and it is not reliably announced as the field name. If the only label is grey text inside the box, the field is effectively unnamed.
Use a real label elementLight grey on white looks calm in a design file and fails in daylight on a phone. Normal text needs 4.5:1 against its background, and large text needs 3:1.
4.5:1 for normal textA div with a click handler cannot be focused or triggered with a keyboard. Anyone who does not use a mouse can see the control and cannot press it.
Use a real buttonSocial icons and close buttons are the usual culprits. Without an aria-label or alt text on the inner icon, they are announced as just "link" or "button".
Label icon controlsuser-scalable=no still appears in plenty of templates. It stops people from pinching to enlarge text, which is often the only adjustment they need.
Never block zoomBest Practices
All CommonNinja tools mentioned below are free and need no sign-up. Use these while you work through the report and after you ship the fixes.
01
Sort by severity and work down. One unlabelled checkout field costs a real customer far more than twelve headings in the wrong order.
02
Most failures live in a header, a card component, or a form partial. Fixing the template once repairs every page that uses it, so scan one page per template rather than every URL.
03
Put the mouse down and tab through. If you cannot see where focus is, or you get stuck inside a menu, no automated tool will tell you but every keyboard user will feel it.
04
Ask what the image is doing on the page. A product photo needs the product, a chart needs its conclusion, and a decorative flourish needs an empty alt so it gets skipped.
05
Headings are the table of contents screen reader users navigate by. Choose the level for the structure and use CSS for the size.
06
This tool can only measure contrast set inline, so check your brand colors directly. Build the palette once with contrast in mind and the problem stops recurring.
Use the Color Palette Generator →07
Heading order affects both accessibility and how search engines read your page, so it is worth doing properly once.
Use the Heading Structure Analyzer →08
Accessibility regressions arrive with new components, not with old ones. A scan after each release catches them while the change is still fresh in your head.
Glossary
Six terms that come up in every accessibility conversation and ticket.
From the Blog
More from the CommonNinja blog. Free, no sign-up, just practical posts on building pages that work for everyone.
In this article, we are going to discuss SEO, explain why it’s important to the success of a website, and suggest ways...
Read article →In this article, we are going to discuss website speed, explain why it’s important, and suggest ways of improving your...
Read article →In this article, we are going to discuss responsive design.
Read article →In this article, we are going to discuss AI, how it revolutionizes the industry of web design and discuss the future of...
Read article →In this article, we will look at some important SEO factors to consider when building a website, for the purpose of...
Read article →In this article, we’ll discuss how to create responsive web designs with CSS container queries.
Read article →