useControlLabel (HTML)

Summary

Rule available since: v2.5.9
Diagnostic Category: lint/nursery/useControlLabel
This rule doesn’t have a fix.
The default severity of this rule is error.
Sources:
- Inspired from jsx-a11y/control-has-associated-label

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useControlLabel": "error"
6
      }
7
    }
8
  }
9
}

Description

Enforce that interactive control elements have an accessible label.

A control with no accessible label is announced by assistive technology as an anonymous control (e.g. just “button”), leaving its purpose unclear. A label can come from text content, aria-label, aria-labelledby, or title attribute.

This rule checks native controls whose accessible name is expected to come from their own content or attributes (button, menuitem). Elements hidden from assistive technology with aria-hidden are skipped, as are elements that already require a text alternative under a dedicated rule (e.g. area, img, checked by useAltText).

Examples

Invalid

1
<button></button>

code-block.html:1:1 lint/nursery/useControlLabel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This control element has no accessible label.
  
  > 1 │ <button></button>
      │ ^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Assistive technology announces it as an anonymous control, so its purpose is unclear to screen-reader users.
  
  ℹ Add text content, or an aria-label, aria-labelledby, or title attribute.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<button>   </button>

code-block.html:1:1 lint/nursery/useControlLabel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This control element has no accessible label.
  
  > 1 │ <button>   </button>
      │ ^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Assistive technology announces it as an anonymous control, so its purpose is unclear to screen-reader users.
  
  ℹ Add text content, or an aria-label, aria-labelledby, or title attribute.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
<button>Submit</button>

1
<button aria-label="Close"></button>

1
<button><span>Delete</span></button>