Paste your HTML, React, or Next.js code to check for WCAG 2.2 accessibility violations. Runs 100% offline in your browser — no uploads, no signups.
Paste your HTML on the left and run the audit. We'll find missing labels, bad alt tags, and structural flaws.
This tool is uniquely designed to aid modern web developers. While traditional URL accessibility scanners struggle with Single Page Applications (SPAs) built in React, Next.js, and Vue due to client-side rendering firewalls, this tool allows you to bypass the network completely.
1. Open your running React or Next.js app in Google Chrome.
2. Right-click the page and select Inspect.
3. In the Elements panel, find the main app wrapper (usually <div id="__next"> or <div id="root">).
4. Right-click that element, select Copy > Copy outerHTML.
5. Paste that massive block of code directly into our tool above and click Run.
<img> tags missing alt attributes. Screen readers rely entirely on this property to announce visuals to visually impaired users.<button> and <a> tags that contain no readable text or aria-labels. This is extremely common in modern UI development where buttons are built using only raw SVG icons.<title> elements inside the head, which is the primary navigation hook.<h1> elements are bleeding into the same layout.aria-controls="...", aria-labelledby="...") actually resolves to an existing element in the DOM tree, preventing fatal screen reader crashes.If you can use a native HTML element (like <button>) instead of a custom role (like role="button"), always use the native one. It is more robust and accessible by default.
Only use aria-label when there is no visible text. If there is visible text that labels an element, use aria-labelledby to link them instead of repeating the text.
Dynamic UI elements must update their ARIA states (like aria-expanded or aria-selected) instantly via JavaScript to inform screen reader users of layout changes.
Use aria-describedby to link form inputs to their specific error messages or helper instructions. This ensures the reader announces the context for the specific field.
Accessibility directly impacts your SEO ranking and audience retention. Running your final React DOM output through a static WCAG analyzer ensures you don't miss structural elements that generic component linters might overlook.
Completely private. The analysis engine uses your browser's native local "DOMParser" to process the nodes in memory locally. Your code is never serialized, never sent over a network, and never stored on a server. It is perfectly safe for proprietary pre-released apps.
Yes! While JSX uses camelCase properties (like className) instead of standard lowercase attributes, this parser is forgiving and will successfully test the structure. However, for maximum 100% accuracy, we still recommend inspecting your browser and copying the finalized rendered "outerHTML".
Modern web design uses a lot of icon-only elements (e.g. a Hamburger menu using an SVG). A screen reader cannot "see" the icon. If the <button> lacks an internal span or an aria-label, blind users simply hear "Button" read aloud without any context on what it does when clicked.
ARIA allows you to link complex elements together (e.g. an input field to a distant error message) using attributes like "aria-describedby". The Strict Validaton toggle crawls your code to guarantee that every single ID referenced by an ARIA tag actually exists in the DOM snippet. If you misspelled the ID, the tool flags it.
Because they are Single Page Applications (SPAs). If you try to run a standard URL accessibility scanner, it will usually only see an empty <div id="root"> element because the JavaScript hasn't painted the application yet. By copying the DOM directly into this tool, you bypass that completely.
You can read the full, official Web Content Accessibility Guidelines (WCAG) directly from the W3C standards body here: WCAG 2.1 Specification Document.