The accessibility analyzer audits your HTML against WCAG guidelines across 7 dimensions — alt text, heading structure, form labels, link text, color contrast indicators, ARIA usage, and semantic HTML. Paste your HTML and get a scored accessibility report with specific violations and fixes.
Accessibility Score
WCAG Dimension Scores
Specific Violations Found
How we score
Image Alt Text (15%): All img tags should have descriptive alt attributes. Missing or filename-based alt text scores 0.
Heading Structure (20%): Single H1, logical hierarchy (H1→H2→H3), no skipped levels.
Form Labels (20%): All inputs need associated labels or aria-label attributes.
Link Text (15%): Links must have descriptive text — "click here" and "read more" score 0.
ARIA Usage (15%): Presence of aria-label, aria-describedby, and role attributes where needed.
Semantic HTML (15%): Use of nav, main, header, footer, article, section vs. plain div soup.
How to Audit HTML Accessibility
Web accessibility isn't just about compliance — it's about reaching every user. About 15% of the global population has some form of disability. Screen readers, keyboard navigation, and high contrast modes all depend on properly structured HTML. The accessibility analyzer scores your HTML against the most common WCAG 2.1 failure points.
Step 1: Paste a component or full page
Copy the HTML from your browser's "View Source" or developer tools "Outer HTML". The analyzer uses the browser's built-in DOMParser to parse the HTML exactly as a browser would. Paste a single component, a page section, or the full HTML document — all work.
Step 2: Fix high-impact violations first
Missing alt text on images is the single most common WCAG failure. Add descriptive alt text to every meaningful image. For decorative images (backgrounds, spacers), use alt="" to tell screen readers to skip them. Never use the filename or "image" as alt text.
Step 3: Fix form labels
Every input needs an associated label. Use the for attribute matching the input's id, or wrap the input in the label element. Placeholder text does NOT substitute for a label — placeholders disappear when the user starts typing.
Step 4: Replace div soup with semantic HTML
Wrap your navigation in <nav>, main content in <main>, site header in <header>, and footer in <footer>. These landmark elements let screen reader users jump directly to content sections without reading every element on the page.
FAQ
What is WCAG and why does it matter?
WCAG (Web Content Accessibility Guidelines) is the international standard for web accessibility. It defines criteria that make content accessible to users with disabilities — screen reader users, keyboard-only users, people with color blindness, cognitive differences, and more. WCAG 2.1 AA compliance is required by law for government and many enterprise websites.
What does alt text need to say?
Alt text should describe what the image conveys in context, not just what it depicts. 'Submit button' is better than 'button.png'. Decorative images should use empty alt text (alt='') so screen readers skip them. Images conveying data need detailed descriptions. Never use the filename as alt text.
Why should I only have one H1 per page?
The H1 heading is the main page topic — screen readers and search engines treat it as the primary identifier. Multiple H1s confuse both assistive technology and search engine crawlers. Use H2-H6 for subheadings in a logical hierarchy: H1 → H2 → H3, never skipping levels.
What is the difference between aria-label and aria-labelledby?
aria-label provides an inline string label ('Close dialog'). aria-labelledby references another element's text by ID, keeping label text visible on screen. Use aria-label for icon-only buttons. Use aria-labelledby to connect a visible heading to a region. Both create accessible names that screen readers announce.
Is this tool free and private?
Yes, completely free. Your HTML is analyzed locally using the browser's built-in DOMParser API — no HTML is sent to any server.
What semantic HTML elements improve accessibility?
Landmark elements — nav, main, header, footer, section, article, aside — give screen reader users a way to navigate your page structure. A page with all div elements forces assistive technology to read everything linearly. Landmarks let users jump directly to navigation, skip to main content, or find the footer.