Accessibility Checker
Check HTML snippets for common WCAG accessibility issues with actionable fix suggestions
HTML Input
What We Check
Image Alt Text
Checks that all <img> elements have alt attributes so screen readers can describe images to users.
Form Labels
Verifies that all form inputs have associated labels using <label for>, aria-label, or aria-labelledby.
Heading Hierarchy
Ensures headings follow a logical order (h1, h2, h3...) without skipping levels.
Link Text
Detects empty links and generic link text like 'click here' that are not meaningful to screen reader users.
Language Attribute
Checks for a lang attribute on the <html> element which helps screen readers use correct pronunciation.
ARIA & Interactive Elements
Verifies that interactive elements have proper roles and ARIA labels for assistive technology support.
Accessibility Checker
Check HTML snippets for common WCAG accessibility issues with actionable fix suggestions
Features
- Parse pasted HTML locally with DOMParser and check for common WCAG issues
- 12+ rule categories: alt text, form labels, heading hierarchy, empty links, ARIA usage, tabindex misuse, autoplay
- No network calls — paste HTML, get instant feedback
- NOT a full WCAG audit — for that use axe-core, Lighthouse, or a dedicated tool
- Useful for quick sanity-checks during development
How to use
- Paste your HTML code into the input area, or load one of the sample snippets to see the tool in action.
- Click 'Check Accessibility' to analyze your HTML for common WCAG issues across 12+ accessibility rules.
- Review the results grouped by severity, read the fix suggestions, and update your HTML to resolve the issues found.
Tips & Best Practices
- Paste the HTML source (View Source / Inspect → Outer HTML) — the checker doesn't fetch URLs (CORS would block that anyway).
- For a complete audit, use axe-core in your test suite or Lighthouse in DevTools — those check ~30 more rules including dynamic ones.
- Heading hierarchy: each level should follow the previous (h1 → h2 → h3); skipping levels is flagged.
- Alt text rule allows `alt=""` for purely decorative images — only missing/duplicate alt is flagged.
- Form labels: every input should have an associated label (via `for` attribute) or `aria-label`. Placeholder-only is flagged.
FAQ
What accessibility issues does this tool check for?
This tool checks for 12+ common WCAG accessibility issues including: missing alt attributes on images, form inputs without associated labels, heading hierarchy violations (skipped levels), empty links and generic link text, missing lang attribute on the HTML element, interactive elements without ARIA roles or labels, empty buttons, deprecated HTML elements, positive tabindex values that disrupt tab order, media elements with autoplay, and missing document titles. Each issue is mapped to specific WCAG success criteria.
Does this replace a full WCAG audit?
No, this tool checks for common HTML-level issues that can be detected by parsing the markup. A comprehensive WCAG 2.1 or 2.2 audit requires testing with actual assistive technologies like screen readers, checking color contrast ratios, verifying keyboard navigation, testing dynamic content updates, and evaluating cognitive accessibility. This tool is a great first step to catch the most common issues before doing a full manual audit.
What is the difference between errors and warnings?
Errors indicate definite accessibility violations that will impact users of assistive technologies. For example, a missing alt attribute on an image is an error because screen readers cannot describe the image. Warnings indicate potential issues that may or may not be problems depending on context. For example, an empty alt attribute is a warning because it is correct for decorative images but wrong for informational images. Passes confirm that a specific check was satisfied.
Can I check a live website URL instead of pasting HTML?
This tool is designed to check HTML snippets that you paste directly. For testing live websites, you would need to view the page source or use browser developer tools to copy the HTML, then paste it here. For live website testing, consider using browser extensions like axe DevTools or Lighthouse, which can inspect the rendered DOM including dynamically generated content.
Why is the lang attribute on the HTML element so important?
The lang attribute tells screen readers and other assistive technologies which language the content is written in. Without it, a screen reader might try to read English text using French pronunciation rules, making the content incomprehensible. It also affects how browsers handle hyphenation, spell checking, and other language-dependent features. Setting lang is one of the simplest but most impactful accessibility improvements you can make.
Is my HTML code sent to any server for analysis?
No, all analysis happens entirely in your browser using JavaScript. Your HTML code never leaves your device. The tool parses the HTML using the browser's built-in DOMParser API and runs all accessibility checks locally. This makes it safe to use with proprietary code, internal projects, or any HTML that contains sensitive content.