Productivity and Utilities

HTML Accessibility Snippet Checker

Paste a piece of HTML to list common accessibility mistakes with the line each one is on.

SumPandasumpanda.com

Calculator report

https://sumpanda.com/html-accessibility-snippet-checker/ ·

Your numbers

Result

Problems found

9 errors and 2 warnings

Errors: 9
Warnings: 2
Rules checked: 13

Problems

Line	Kind	Rule	Element	What to fix
1	Error	Page language missing	<html>	The html element has no lang attribute, so screen readers guess the language of the whole page.
2	Warning	Zoom blocked in the viewport tag	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">	The viewport tag blocks or limits pinch zoom. People with low vision rely on zooming.
4	Error	Empty heading	<h2>	The heading is empty. Screen reader users who list headings will land on nothing.
5	Error	Image without an alt attribute	<img src="logo.png">	An image needs an alt attribute. Use alt="" when it is only decoration.
6	Error	Link with no name	<a href="/pricing">	The link has no text, image description or label, so a screen reader can only say "link".
6	Error	Image without an alt attribute	<img src="arrow.svg">	An image needs an alt attribute. Use alt="" when it is only decoration.
7	Warning	Link text that says little	<a href="/docs">	The link text "Click here" does not say where it goes. Links are often read out of context as a list.
8	Error	Button with no name	<button>	The button has no text or label, so a screen reader can only say "button".
11	Error	Form control without a label	<input type="text" name="city">	The field has no label. Add a label element with a for attribute, wrap the field in a label, or give it aria-label.
12	Error	Repeated id	<div id="box">	The id "box" is used 2 times. An id must be unique, because labels and scripts pick the first match.
13	Error	Frame without a title	<iframe src="https://example.com/map">	The frame has no title, so its purpose is unclear to a screen reader user.

Count for each rule

Rule	Kind	Found
Image without an alt attribute	Error	2
Link with no name	Error	1
Button with no name	Error	1
Form control without a label	Error	1
Repeated id	Error	1
Page language missing	Error	1
Frame without a title	Error	1
Empty heading	Error	1
Positive tabindex	Warning	0
Hidden element that can take focus	Warning	0
Link text that says little	Warning	1
Label points to a missing id	Warning	0
Zoom blocked in the viewport tag	Warning	1

How this was calculated

The text is split into tags and text. No page is built or run, so styles, scripts and the contents of other files are not seen.
Each tag is tested against a fixed list of thirteen rules, such as an image with no alt attribute, a link or button with no name, a field with no label, a repeated id, a page with no language and a heading with nothing in it.
Errors are mistakes that leave a person without information. Warnings are patterns that often cause trouble but can be fine in context.

Passing this list does not make a page accessible. It cannot judge colors, focus order, headings that make sense, keyboard use, captions or whether alt text is a good description. Test with a keyboard and a screen reader as well.

Next step

Color Contrast CheckerCheck the contrast between text and background colors against WCAG levels.
HTTP Security Headers AnalyzerReview the response headers your pages are sent with.
Meta Tag and Open Graph GeneratorBuild the head tags for a page, including the viewport tag.

How to use the html accessibility snippet checker

Paste a piece of HTML, from a single element to a whole page.
Read the number of problems and the table that lists each one with its line, the rule, the element and what to fix.
Use the count for each rule to see which kinds of mistake are most common in your markup.
Fix the markup, paste it again and check that the list gets shorter.

Formula

images need an alt attribute, and alt="" for pictures that only decorate

links, buttons, headings and frames need a name: text, an image description, aria-label, aria-labelledby or a title

form fields need a label that is linked by for and id, wraps the field, or comes from aria-label

ids must be unique, the html element needs lang, and tabindex should not be above 0

Thirteen rules are checked: eight errors and five warnings. The checks read tags and attributes only, so styles and scripts are not considered.

A short page with many mistakes

The sample page has 11 problems: 9 errors and 2 warnings. The html element has no language on line 1, and the viewport tag on line 2 blocks zoom. An empty heading is on line 4, an image with no alt on line 5, and a link with only an image that has no alt on line 6, which is both an unnamed link and a missing alt.

The link "Click here" on line 7 is a warning, the empty button on line 8 is an error, and the text field on line 11 has no label although the email field above it does. Two divs on line 12 share the id box, and the frame on line 13 has no title.

Why these rules

Each rule describes a mistake that leaves a person without information when they use a screen reader or a keyboard. An image with no alt may be read as its file name. A link with no name is announced as just "link". A field with no label has no purpose to announce. Fixing these takes only a moment in the markup.

Other checks are in other tools: the Color Contrast Checker tests colors, the HTTP Security Headers Analyzer reads response headers, and the Meta Tag Generator writes the head of a page including the viewport tag. The HTML Table Generator builds tables with header cells.

What it cannot see

The tool does not run the page, so it cannot know the color of text, the order of focus, whether a heading makes sense, or what a script adds after loading. It also cannot judge whether alt text is a good description. Passing the list is a start, and testing with a keyboard and a screen reader is the real measure.

Assumptions and limits

The pasted text is HTML written in the usual way, and tags are read case-insensitively.
Elements with the hidden attribute are skipped for the naming rules.
A name from a title attribute counts, although a visible label is better.
Up to 300,000 characters are read, the markup is never run, and nothing is uploaded.

Formulas reviewed October 10, 2026. See the calculation methodology for how SumPanda rounds, tests and sources its formulas.

Frequently asked questions

Should every image have alt text?

Every image needs the alt attribute. Pictures that carry meaning need a short description in it, and pictures that only decorate should have an empty value so screen readers skip them.

Why is "click here" a warning and not an error?

It is a link with a name, so it is announced, but the name tells little when links are read out as a list. It is a warning because the surrounding text may explain the link.

Why does the tool flag a positive tabindex?

A tabindex above zero forces the element to the front of the tab order, which usually breaks the natural reading order and surprises keyboard users. Using 0, or placing the element correctly in the markup, is safer.

Does it check ARIA roles?

Only a few ARIA attributes are read: aria-label, aria-labelledby and aria-hidden. A full ARIA review needs a browser tool that can see the accessibility tree.