Skip to content
Biome
Docs Enterprise Playground
Blog

useValidAriaValues

Diagnostic Category: lint/a11y/useValidAriaValues

Since: v1.0.0

Sources:

Description

Section titled Description

Enforce that ARIA state and property values are valid.

Examples

Section titled Examples

Invalid

Section titled Invalid
<span role="checkbox" aria-checked="test">some text</span>
code-block.jsx:1:23 lint/a11y/useValidAriaValues ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The value of the ARIA attribute aria-checked is not correct.
  
  > 1 │ <span role=“checkbox” aria-checked=“test”>some text</span>
      │                       ^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ The only supported value for the aria-checked property one of the following:
  
  - false
  - true
  - mixed
  
<span aria-labelledby="">some text</span>
code-block.jsx:1:7 lint/a11y/useValidAriaValues ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The value of the ARIA attribute aria-labelledby is not correct.
  
  > 1 │ <span aria-labelledby="">some text</span>
      │       ^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ The only supported value is a space-separated list of HTML identifiers.
  
<span aria-valuemax="hey">some text</span>
code-block.jsx:1:7 lint/a11y/useValidAriaValues ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The value of the ARIA attribute aria-valuemax is not correct.
  
  > 1 │ <span aria-valuemax=“hey”>some text</span>
      │       ^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ The only supported value is number.
  
<span aria-orientation="hey">some text</span>
code-block.jsx:1:7 lint/a11y/useValidAriaValues ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The value of the ARIA attribute aria-orientation is not correct.
  
  > 1 │ <span aria-orientation=“hey”>some text</span>
      │       ^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ The only supported value for the aria-orientation property is one of the following:
  
  - undefined
  - horizontal
  - vertical

Valid

Section titled Valid
<>
    <span role="checkbox" aria-checked={checked} >some text</span>
    <span aria-labelledby="fooId barId" >some text</span>
</>

Accessibility guidelines

Section titled Accessibility guidelines

Resources

Section titled Resources

How to configure

Section titled How to configure
biome.json
{
  "linter": {
    "rules": {
      "a11y": {
        "useValidAriaValues": "error"
      }
    }
  }
}
Section titled Related links