ARIA Validator

The ARIA Validator parses an HTML snippet and surfaces the accessibility problems hiding in it, ranked as errors or warnings with concrete fix suggestions. Paste markup into the textarea and the tool runs twelve rule checks locally with DOMParser: missing lang on the html element, img tags without alt, alt text over 125 characters, inputs without an associated label, empty buttons, empty links, heading level skips, missing or duplicated h1 elements, role="button" misused on divs, interactive elements with no accessible name, and SVGs lacking role or aria-label. Every finding lists its rule id, the offending element, and a suggestion written for a developer who wants to fix rather than merely diagnose — for example, preferring a real button element over role="button" with manual keyboard handlers. A stats row summarizes errors, warnings, and the total, and a "Load sample (with issues)" button drops in intentionally broken markup for a tour of the rule set. This free HTML accessibility checker is honest about its scope, noting that a screen reader or axe-core audit should follow any automated pass.

1. 1

   Paste your HTML into the "HTML markup" textarea, or click "Load sample (with issues)".

2. 2

   Watch the Errors, Warnings, and Total issues stats update as you type.

3. 3

   Scan the "Issues found" list — red badges are errors, amber are warnings.

4. 4

   Read each rule id, element, and suggestion to plan fixes.

5. 5

   Fix the markup, paste it again, and repeat until the green "All checks passed" panel appears.

• Pre-flight checking a landing page template before an accessibility audit.
• Reviewing a component's rendered HTML for missing labels during development.
• Catching empty icon buttons and links across a component library.
• Enforcing heading hierarchy on a CMS-driven article template.
• Training junior developers to spot ARIA misuse like role="button" on divs.
• Quick regression checks after refactoring form markup.

• Treat this as a fast static first pass — follow up with axe-core and a screen reader.
• Fix errors before warnings; missing alt and labels block real users first.
• Use the rule ids (img-missing-alt, input-no-label) to standardize team checklists.
• Paste complete structures, since the checker needs parent elements to test wrapping labels.
• Re-check after every fix, as removing one issue can reveal another.

• Clear the textarea with the Clear button when switching between snippets.
• The element column quotes the exact tag, so search your codebase with it.
• Load the sample first to see what a failing markup looks like.
• Keep the rule id handy when filing issues — it maps to your style guide.