Free Accessibility Checker — WCAG 2.1 HTML Audit
Paste any HTML and instantly find WCAG 2.1 AA violations. Checks missing alt text, unlabelled inputs, empty links, heading hierarchy issues, and more. 100% client-side — your HTML stays in your browser.
Analysis runs entirely in your browser — no code is sent to any server.
Web Accessibility: Why It Matters and Where to Start
Web accessibility means building websites that work for everyone — including people who use screen readers, navigate by keyboard only, have low vision, or have cognitive disabilities. An estimated 15% of the world's population lives with some form of disability. When your website fails basic accessibility checks, you're actively excluding a significant portion of potential users and customers. Beyond ethical responsibility, accessibility compliance is increasingly a legal requirement.
The Most Common Accessibility Failures
- Missing alt text on images: The single most common violation. Screen readers cannot interpret visual content — without alt text, image information is completely inaccessible.
- Form inputs without labels: Using placeholder text instead of a proper label is one of the most frequent mistakes in modern web development. Placeholders disappear on input and aren't reliably announced by screen readers.
- Low colour contrast: Light grey text on white backgrounds may look clean visually but is unreadable for users with low vision or in bright sunlight. WCAG AA requires a 4.5:1 contrast ratio for normal text.
- Keyboard inaccessibility: All interactive elements (buttons, links, forms, modals) must be operable using keyboard only. Custom components built with div and span are invisible to keyboard navigation unless ARIA roles are added.
- Empty links and buttons: Icon-only buttons and empty anchor tags have no accessible name. Screen readers will announce these as “link” or “button” with no context — completely unhelpful.
Quick Wins: Fixes That Take Under 30 Minutes
Start with these high-impact, low-effort fixes before tackling complex ARIA implementations: add alt attributes to all images, add for/id pairs to all form labels, add lang="en" (or the relevant language code) to your HTML element, ensure every button and link has visible text or an aria-label, and fix any heading hierarchy jumps. These five fixes alone typically resolve 60–70% of common WCAG violations.
Frequently Asked Questions
What WCAG checks does this tool perform?
This tool checks eight WCAG 2.1 AA criteria: images missing alt attributes (SC 1.1.1), form inputs not associated with labels (SC 1.3.1), empty anchor tags with no link text (SC 2.4.4), buttons with no accessible text (SC 4.1.2), missing lang attribute on the HTML element (SC 3.1.1), heading hierarchy jumps such as H1 jumping to H3 without an H2 (SC 1.3.1), and form submissions without a submit button. Each violation is reported with the specific element and a suggested fix.
Does this tool work on live websites or only pasted HTML?
This tool works on pasted HTML only. Paste your page's source code (or a component's HTML) into the textarea and click Check Accessibility. To get the HTML from a live site, open DevTools in your browser, right-click the element you want to check, and select 'Copy > Copy outerHTML' — or use View Source (Ctrl+U) to copy the full page HTML.
What is WCAG 2.1 AA and why does it matter?
WCAG (Web Content Accessibility Guidelines) 2.1 Level AA is the globally recognized standard for web accessibility. Meeting AA compliance means your website is usable by people with disabilities including visual impairments (screen reader users), motor impairments (keyboard-only navigation), and cognitive disabilities. In many jurisdictions — including the EU, US (Section 508/ADA), and India (GIGW Guidelines) — AA compliance is a legal requirement for government and public-facing websites.
What does 'alt text' mean and how should I write it?
Alt text (the alt attribute on <img> elements) is a text description of the image content. Screen readers read this aloud for visually impaired users, and search engines use it to understand images. Write alt text that describes what the image shows — not what it is. For example: alt='Bar chart showing 40% revenue growth from 2022 to 2024' rather than alt='chart'. Decorative images that add no meaning should use alt='' (empty) so screen readers skip them. Never use alt='image' or alt='photo' — these are meaningless.
How do I associate a form input with a label?
Use the for attribute on the <label> element matching the id of the <input>. Example: <label for='email'>Email address</label><input type='email' id='email' name='email'>. Alternatively, wrap the input inside the label: <label>Email address <input type='email' name='email'></label>. Never use placeholder text as the only label — placeholders disappear when typing and are not accessible to screen readers in all cases.