webtoolshelper
Website Tools

ARIA Validator

Catch ARIA mistakes that break screen-reader output. The validator checks every role against WAI-ARIA 1.2 (including abstract roles that must not be used), every aria-* attribute name and value, required states such as aria-checked on checkboxes, required parent roles such as tab inside tablist, ID references in aria-labelledby and aria-describedby, focusable content hidden with aria-hidden, names on elements that cannot be named, presentational focusable elements and redundant roles.

  • Encrypted connection
  • No sign-up
  • Free to use
Analyse pasted HTML instead

Checks roles, aria-* attributes and values, required states, required parent roles, ID references and hidden focusable content against WAI-ARIA 1.2.

How to use ARIA Validator

  1. Enter a URL or paste HTML.
  2. Click Validate ARIA.
  3. Fix failed rules first.
  4. Prefer native HTML elements where possible.

ARIA Validator features

Roles

Valid, abstract and redundant roles.

Attributes

Names and allowed values.

Required states

aria-checked, aria-valuenow, aria-expanded…

Context

Required parent roles.

References

Missing ids.

Paste mode

Analysed in your browser.

When to use ARIA Validator

  • Custom widget development.
  • Design system audits.
  • Fixing screen-reader bugs.
  • Accessibility reviews.

ARIA Validator FAQ

What is the first rule of ARIA?

Do not use ARIA if a native HTML element or attribute gives you the semantics and behaviour you need.

Why is aria-hidden on a link a problem?

Keyboard users can still focus it, but screen readers say nothing.

Does it see ARIA added by JavaScript?

No, only the HTML delivered by the server or pasted.

What is the first rule of ARIA?

If a native HTML element or attribute already provides the semantics and behaviour you need, use it instead of adding ARIA to a generic element.

Keyboard Navigation Checker Find keyboard barriers before your users do. The checker lists the tab order with… Accessibility Audit Report Turn an automated accessibility scan into a report you can share. The generator… HTML Accessibility Checker Find the accessibility barriers that can be detected in a page’s code. The checker… Accessibility Statement Generator Publish an honest accessibility statement for your website or app. Choose the…

ARIA that helps instead of hurts

Incorrect ARIA overrides correct HTML semantics and can make a working page unusable for screen-reader users.

Typical examples are role="button" on a div that cannot be focused, aria-labeledby spelled with one l, aria-hidden="true" on a container that still holds links, and tabs that are not inside a tablist. Each of these is invisible to sighted users and to most automated page-speed or SEO tools, which is why a dedicated ARIA check is worth running on every custom widget.

Related tools on this site cover the rest of an accessibility review: the HTML accessibility checker, WCAG contrast checker, accessibility colour analyzer, keyboard navigation checker, ARIA validator, alt text generator, heading structure checker and the accessibility statement generator.

ARIA adds roles, states and properties that tell assistive technology what an element is and does. Used wrongly, it makes pages worse than no ARIA at all. The validator checks every role against WAI-ARIA 1.2, every aria-* attribute name and value, and required states such as aria-checked on a checkbox role.

Structural rules are checked too: tab must sit inside tablist, option inside listbox, and ID references in aria-labelledby, aria-describedby and aria-controls must point to elements that exist. Abstract roles such as widget must never be used in markup.

Automated validation finds code errors, not whether the result makes sense to users. The first rule of ARIA still applies: use native HTML elements such as button and select wherever possible, and test custom widgets with a screen reader.

Other useful tools