Skip to content
← Back to rules

jsx-a11y/control-has-associated-label Correctness

What it does

Enforce that a control (an interactive element) has a text label.

Why is this bad?

An interactive element (such as a <button>) without an accessible text label makes it difficult or impossible for users of assistive technologies to understand the purpose of the control.

Examples

Examples of incorrect code for this rule:

jsx
<button />
<a href="/path" />
<th />
<div role="button" />
<div role="checkbox" />

Examples of correct code for this rule:

jsx
<button>Save</button>
<button aria-label="Save" />
<label>Name <input type="text" /></label>
<a href="/path">Learn more</a>
<th>Column Header</th>
<div role="button">Submit</div>
<div role="checkbox" aria-labelledby="label_id" />

Configuration

This rule accepts a configuration object with the following properties:

controlComponents

type: string[]

default: []

Custom JSX components to be treated as interactive controls.

depth

type: integer

default: 2

Maximum depth to search for an accessible label within the element. Defaults to 2.

ignoreElements

type: string[]

default: ["audio", "canvas", "embed", "input", "textarea", "tr", "video"]

Elements to ignore. Defaults to ["audio", "canvas", "embed", "input", "textarea", "tr", "video"].

ignoreRoles

type: string[]

default: ["grid", "listbox", "menu", "menubar", "radiogroup", "row", "tablist", "toolbar", "tree", "treegrid"]

Interactive roles to ignore. Defaults to ["grid", "listbox", "menu", "menubar", "radiogroup", "row", "tablist", "toolbar", "tree", "treegrid"].

labelAttributes

type: string[]

default: []

Additional attributes to check for accessible label text.

How to use

To enable this rule using the config file or in the CLI, you can use:

json
{
  "plugins": ["jsx-a11y"],
  "rules": {
    "jsx-a11y/control-has-associated-label": "error"
  }
}
ts
import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["jsx-a11y"],
  rules: {
    "jsx-a11y/control-has-associated-label": "error",
  },
});
bash
oxlint --deny jsx-a11y/control-has-associated-label --jsx-a11y-plugin

Version

This rule was added in v1.65.0.

References