File Manager

Current Path: Root / node_modules/ eslint-plugin-jsx-a11y/ docs/ rules

Parent Directory

Name	Size	Last Modified
[F]accessible-emoji.md Edit	947 bytes	2022-10-08 17:28:32
[F]alt-text.md Edit	4.81 KB	2022-10-08 17:28:32
[F]anchor-has-content.md Edit	1.34 KB	2022-10-08 17:28:32
[F]anchor-is-valid.md Edit	10.68 KB	2022-10-08 17:28:32
[F]aria-activedescendant-has-tabindex.md Edit	1.91 KB	2022-10-08 17:28:32
[F]aria-props.md Edit	730 bytes	2022-10-08 17:28:32
[F]aria-proptypes.md Edit	683 bytes	2022-10-08 17:28:32
[F]aria-role.md Edit	1.82 KB	2022-10-08 17:28:32
[F]aria-unsupported-elements.md Edit	902 bytes	2022-10-08 17:28:32
[F]autocomplete-valid.md Edit	1.26 KB	2022-10-08 17:28:32
[F]click-events-have-key-events.md Edit	798 bytes	2022-10-08 17:28:32
[F]control-has-associated-label.md Edit	3.58 KB	2022-10-08 17:28:32
[F]heading-has-content.md Edit	1.41 KB	2022-10-08 17:28:32
[F]html-has-lang.md Edit	651 bytes	2022-10-08 17:28:32
[F]iframe-has-title.md Edit	749 bytes	2022-10-08 17:28:32
[F]img-redundant-alt.md Edit	1.70 KB	2022-10-08 17:28:32
[F]interactive-supports-focus.md Edit	5.99 KB	2022-10-08 17:28:32
[F]label-has-associated-control.md Edit	4.69 KB	2022-10-08 17:28:32
[F]label-has-for.md Edit	3.49 KB	2022-10-08 17:28:32
[F]lang.md Edit	659 bytes	2022-10-08 17:28:32
[F]media-has-caption.md Edit	1.90 KB	2022-10-08 17:28:32
[F]mouse-events-have-key-events.md Edit	1.02 KB	2022-10-08 17:28:32
[F]no-access-key.md Edit	755 bytes	2022-10-08 17:28:32
[F]no-autofocus.md Edit	937 bytes	2022-10-08 17:28:32
[F]no-distracting-elements.md Edit	1.33 KB	2022-10-08 17:28:32
[F]no-interactive-element-to-noninteractive-role.md Edit	2.65 KB	2022-10-08 17:28:32
[F]no-noninteractive-element-interactions.md Edit	5.44 KB	2022-10-08 17:28:32
[F]no-noninteractive-element-to-interactive-role.md Edit	2.53 KB	2022-10-08 17:28:32
[F]no-noninteractive-tabindex.md Edit	5.05 KB	2022-10-08 17:28:32
[F]no-onchange.md Edit	1.57 KB	2022-10-08 17:28:32
[F]no-redundant-roles.md Edit	1.11 KB	2022-10-08 17:28:32
[F]no-static-element-interactions.md Edit	4.16 KB	2022-10-08 17:28:32
[F]role-has-required-aria-props.md Edit	786 bytes	2022-10-08 17:28:32
[F]role-supports-aria-props.md Edit	1.48 KB	2022-10-08 17:28:32
[F]scope.md Edit	500 bytes	2022-10-08 17:28:32
[F]tabindex-no-positive.md Edit	709 bytes	2022-10-08 17:28:32

Editing: control-has-associated-label.md

# control-has-associated-label

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

There are two supported ways to supply a control with a text label:

- Provide text content inside the element.
- Use the `aria-label` attribute on the element, with a text value.
- Use the `aria-labelledby` attribute on the element, and point the IDREF value to an element with an accessible label.
- Alternatively, with an `img` tag, you may use the `alt` attribute to supply a text description of the image.

The rule is permissive in the sense that it will assume that expressions will eventually provide a label. So an element like this will pass.

```jsx
<button type="button">{maybeSomethingThatContainsALabel}</button>
```

## How do I resolve this error?

### Case: I have a simple button that requires a label.

Provide text content in the `button` element.

```jsx
<button type="button">Save</button>
```

### Case: I have an icon button and I don't want visible text.

Use the `aria-label` attribute and provide the text label as the value.

```jsx
<button type="button" aria-label="Save" class="icon-save" />
```

### Case: The label for my element is already located on the page and I don't want to repeat the text in my source code.

Use the `aria-labelledby` attribute and point the IDREF value to an element with an accessible label.

```jsx
<div id="js_1">Comment</div>
<textarea aria-labelledby="js_1"></textarea>
```

### Case: My label and input components are custom components, but I still want to require that they have an accessible text label.

You can configure the rule to be aware of your custom components. Refer to the Rule Details below.

```jsx
<CustomInput label="Surname" type="text" value={value} />
```

## Rule details

This rule takes one optional object argument of type object:

```json
{
  "rules": {
    "jsx-a11y/control-has-associated-label": [ 2, {
      "labelAttributes": ["label"],
      "controlComponents": ["CustomComponent"],
      "ignoreElements": [
        "audio",
        "canvas",
        "embed",
        "input",
        "textarea",
        "tr",
        "video",
      ],
      "ignoreRoles": [
        "grid",
        "listbox",
        "menu",
        "menubar",
        "radiogroup",
        "row",
        "tablist",
        "toolbar",
        "tree",
        "treegrid",
      ],
      "depth": 3,
    }],
  }
}
```

- `labelAttributes` is a list of attributes to check on the control component and its children for a label. Use this if you have a custom component that uses a string passed on a prop to render an HTML `label`, for example.
- `controlComponents` is a list of custom React Components names that will render down to an interactive element.
- `ignoreElements` is an array of elements that should not be considered control (interactive) elements and therefore they do not require a text label.
- `ignoreRoles` is an array of ARIA roles that should not be considered control (interactive) roles and therefore they do not require a text label.
- `depth` (default 2, max 25) is an integer that determines how deep within a `JSXElement` the rule should look for text content or an element with a label to determine if the interactive element will have an accessible label.

### Succeed
```jsx
<button type="button" aria-label="Save" class="icon-save" />
```

### Fail
```jsx
<button type="button" class="icon-save" />
```

## Accessibility guidelines
- [WCAG 1.3.1](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships)
- [WCAG 3.3.2](https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions)
- [WCAG 4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value)

Cancel

File Explorer

Navigation

File Manager

Editing: control-has-associated-label.md

File Explorer

Navigation

File Manager

Editing: control-has-associated-label.md

Confirm Deletion

Rename Item

Change Permissions (Chmod)