---
url: /docs/guide/usage/linter/rules/jsx_a11y/control-has-associated-label.md
---

### 它的作用

强制要求一个控件（交互元素）具有文本标签。

### 为什么这不好？

没有可访问文本标签的交互元素（例如 `<button>`）会使辅助技术的用户难以或无法理解该控件的用途。

### 示例

以下是此规则的**错误**代码示例：

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

以下是此规则的**正确**代码示例：

```jsx
<button>保存</button>
<button aria-label="保存" />
<label>姓名 <input type="text" /></label>
<a href="/path">了解更多</a>
<th>列标题</th>
<div role="button">提交</div>
<div role="checkbox" aria-labelledby="label_id" />
```

## 配置

此规则接受一个包含以下属性的配置对象：

### controlComponents

type: `string[]`

default: `[]`

要视为交互控件的自定义 JSX 组件。

### depth

type: `integer`

default: `2`

在元素内搜索可访问标签的最大深度。
默认为 `2`。

### ignoreElements

type: `string[]`

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

要忽略的元素。
默认值为 `["audio", "canvas", "embed", "input", "textarea", "tr", "video"]`。

### ignoreRoles

type: `string[]`

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

要忽略的交互角色。
默认值为 `["grid", "listbox", "menu", "menubar", "radiogroup", "row", "tablist", "toolbar", "tree", "treegrid"]`。

### labelAttributes

type: `string[]`

default: `[]`

用于检查可访问标签文本的附加属性。

## How to use

## 版本

此规则于 v1.65.0 中添加。

## 参考资料