Features
Start a free trial

Make sure all ARIA attributes have valid values

Rule ID: aria-valid-attr-value User Impact: critical Guidelines: WCAG 2.0

ARIA attributes enhance web accessibility by providing additional semantics to elements. However, it's crucial that these attributes have valid values to ensure proper functionality and compatibility with assistive technologies.

About This Rule

This rule ensures that all ARIA attributes have valid values, as specified in the WAI-ARIA guidelines. Adhering to valid attribute values is essential for assistive technologies to accurately interpret and convey the intended meaning and functionality of web elements.

Why It Matters

Invalid ARIA attribute values can lead to misinterpretation by assistive technologies, resulting in a poor user experience for individuals relying on them. For instance, an incorrectly set aria-hidden attribute might cause screen readers to inappropriately announce hidden content.

How to Fix

Ensure that each ARIA attribute is assigned a valid value:

  • Verify that the attribute value is correctly spelled and corresponds to an acceptable value for that attribute.
  • Consult the WAI-ARIA specifications to confirm the validity of attribute values.
  • Use tools like validators or linters to detect invalid ARIA attribute values during development.

Example

Incorrect

An element with an invalid aria-hidden value:

Copy code
<div aria-hidden="rtue">Content</div>

Correct

The same element with a valid aria-hidden value:

Copy code
<div aria-hidden="true">Content</div>

ARIA Attribute Value Types

ARIA attributes accept specific types of values. Understanding these types helps in assigning appropriate values:

  • True/False: Accepts true or false. Example: aria-hidden="true"
  • Tristate: Accepts true, false, or mixed. Example: aria-checked="mixed"
  • ID Reference: Refers to the ID of another element in the same document. Example: aria-labelledby="heading1"
  • ID Reference List: A space-separated list of one or more ID references. Example: aria-describedby="desc1 desc2"
  • Integer: A numerical value without a fractional component. Example: aria-level="2"
  • Number: Any real numerical value. Example: aria-valuenow="3.5"
  • String: Unconstrained text value. Example: aria-label="Submit"
  • Token: One of a limited set of allowed values. Example: aria-live="polite"
  • Token List: A space-separated list of one or more tokens. Example: aria-relevant="additions text"

Other Rules

Interested in other web accessibility rules? Please see these other rules: