A: ARIA attributes must conform to valid values (WCAG 4.1.2) 

• Meaning
• Impact
• Recommendation
• Examples

Ensure that all ARIA attributes use valid values.

This means

Incorrect tokens, invalid data types, or values outside the allowed range are used. Examples: aria-pressed="yes" instead of true|false|mixed, aria-current="active" instead of allowed tokens, aria-valuenow outside of aria-valuemin and aria-valuemax, or aria-labelledby referencing non-existent IDs.

Impact

Assistive technologies misinterpret or fail to interpret states and relationships. This complicates orientation and operation for users and leads to violations of the WCAG.

Recommendation

• Use allowed tokens per attribute:

  • aria-pressed: true false mixed

  • aria-expanded: true false

  • aria-selected: true false

  • aria-sort: none ascending descending other

  • aria-current: page step location date time true false

  • aria-haspopup: menu listbox tree grid dialog true false

• Booleans and tokens always lowercase.

• Correctly type and check numbers: aria-level integer ≥ 1; aria-valuenow within aria-valuemin and aria-valuemax.

• ID references must exist and be space-separated (aria-labelledby="id1 id2").

• Only use meaningful text for aria-label and aria-roledescription.

• Remove redundant or incorrect values.

Example

Problematic

<button aria-pressed="yes"></button>
<div role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="120"></div>
<nav aria-current="active">Start</nav>
<button aria-labelledby="fehlend">Menu</button>
<input role="slider" aria-valuemin="ten" aria-valuenow="5">

Better

<button aria-pressed="true">Play</button>
 
<div role="slider"
     aria-label="Volume"
     aria-valuemin="0" aria-valuemax="100" aria-valuenow="80"></div>
 
<nav aria-current="page">Start</nav>
 
<span id="menu-label" class="sr-only">Menu</span>
<button aria-labelledby="menu-label"></button>
 
<input role="slider" aria-valuemin="0" aria-valuemax="10" aria-valuenow="5">

Related WCAG criterion:
WCAG 4.1.2 - Name, Role, Value