Accessibility quick scan
Most accessibility failures are small things left out of the HTML, like a picture with no description or a field with no name. This scan fetches a page, finds them and tells you which elements to fix.
Everything on a page needs a name
When you look at a page, the layout does a lot of work without saying a word. A magnifying-glass icon next to a box means “search here”. Large bold text means “a new section starts”. None of that reaches a person who uses a screen reader, a braille display or voice control. Their software can’t see the layout. It reads the HTML and wants two things from every element: what it is, and what it’s called.
An <img> answers through its alt attribute, a form field through its <label>, a section through its heading. When the answer is missing, the software says “image”, “edit text” or “link” and moves on, which helps nobody. The Web Content Accessibility Guidelines (WCAG) turn this idea into testable rules, and a good share of them can be verified by a program.
What the scan tests and what each finding costs
The page starts at 100 points. Each finding takes some away, and a problem that repeats costs more, up to a ceiling.
| Finding | Points removed |
|---|---|
No lang on <html> | 10 |
Zoom blocked (user-scalable=no, or maximum-scale below 2) | 10 |
Empty or missing <title> | 6 |
Images with no alt attribute | 4 + 2 per image, 20 at most |
| Form fields with no label | 5 + 3 per field, 20 at most |
| Links or buttons with no name | 4 + 2 each, 20 at most |
| No heading at all | 8 |
No <h1>; skipped heading levels | 4; 2 + 1 per skip, 6 at most |
| Vague link text (“click here”, “read more”) | 2 + 1 per link, 8 at most |
| Inline-styled text under 4.5:1 contrast | 3 + 2 each, 10 at most |
<iframe> without a title | 2 + 1 each, 6 at most |
Duplicate id values | 1 + 1 each, 5 at most |
| Audio or video that autoplays with sound | 4 |
No <main> region; a tabindex above 0 | 3 each |
The scan skips elements hidden with hidden, aria-hidden="true" or an inline display:none, and images marked role="presentation".
Reading the grade
Whatever points are left become a letter: A from 90, B from 80, C from 65, D from 50, F below that. Red findings are barriers, the kind that stop someone from finishing a task. Amber findings slow people down without stopping them. Under each one you’ll see up to eight of the elements involved, shown as a tag with its file path, field name, id or class, so you can search for them in your templates.
An A means the scan found none of the problems it knows how to detect. Automated tests catch roughly a third of real accessibility issues. Whether your alt text is accurate, whether the reading order makes sense, how a custom menu behaves under a keyboard: those take a person to judge.
Fixes for the findings you’ll see most
- Image without alt text
- Say what the image tells a sighted reader:
<img src="team.jpg" alt="Five engineers around a whiteboard">. For a decorative flourish, writealt="". The empty value tells assistive software to skip the image, and that isn’t the same as leaving the attribute out. - Field without a label
<label for="email">Email</label> <input id="email" type="email">. A placeholder doesn’t count, since it vanishes at the first keystroke.- Icon-only link or button
<button aria-label="Open menu">…</button>, or put analton the icon image inside it.- Skipped heading level
- Pick the level from the outline (
h2for a section,h3inside it) and set the size in CSS. - Blocked zoom
- Cut the viewport tag down to
<meta name="viewport" content="width=device-width, initial-scale=1">.
What this scan can’t see
Our server reads the HTML it receives and doesn’t run JavaScript, so anything a framework injects after load goes unexamined. It doesn’t download your style sheets either. That’s why contrast only gets measured where both the text color and the background are written in a style attribute. For everything else, test your colors in the contrast ratio calculator. To go further on one page, listen to it in the screen reader preview and follow its tab order.
Questions people ask
Does a perfect score mean my site is WCAG compliant?
No. It means this page passes the checks a program can run on raw HTML. Conformance to WCAG 2.2 level AA also takes manual testing with a keyboard and a screen reader, on every template of the site.
What is the difference between an empty alt and a missing alt?
alt="" says on purpose that the image is decorative, and screen readers skip it without a sound. With no alt attribute at all, many screen readers fall back to reading the file name, something like “IMG underscore 4521 dot jpg”.
Why is a placeholder not accepted as a label?
A placeholder disappears as soon as the visitor types, so anyone who gets interrupted or uses magnification loses track of what the field asked for. Some screen readers don’t announce it either. A visible <label> stays put and makes the click target bigger.
The scan reports no contrast problem. Are my colors fine?
Not necessarily. The scan doesn’t read colors defined in style sheets, only the ones set directly in style="…" attributes. Check your main text and button colors by hand in the contrast ratio calculator.
My page is built with React or Vue. Is the result reliable?
Only if the HTML is rendered on the server. If the server sends an almost empty document and the browser builds the page with JavaScript, the scan sees the empty document and reports little or nothing.