# Input buttons must have discernible text via value, aria-label, or aria-labelledby.

> Canonical HTML version: https://rocketvalidator.com/accessibility-validation/accesslint/0.16/labels-and-names/input-button-name
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

An `<input>` element with `type="submit"`, `type="button"`, or `type="reset"` needs an accessible name so that assistive technologies can communicate the button's purpose to users. When one of these input buttons lacks a `value` attribute (or an equivalent labeling mechanism like `aria-label` or `aria-labelledby`), screen readers may announce it as something generic like "button" or "submit" with no further context. Users who rely on screen readers then have no way to tell what the button does or to distinguish it from other buttons on the page.

Keyboard-only users and voice control users are also affected. Voice control software like Dragon NaturallySpeaking allows users to activate buttons by speaking their accessible name. Without a discernible name, the button becomes difficult or impossible to target by voice.

This rule maps to WCAG 2.1 Success Criterion 4.1.2: Name, Role, Value (Level A). That criterion requires all user interface components to have a name that can be programmatically determined. Because this is a Level A requirement, it is a baseline expectation for any accessible website.

## How input buttons get their accessible name

For `<input>` buttons, the accessible name is computed differently than for `<button>` elements. A `<button>` element can take its name from its text content, but an `<input>` element is a void element with no children. Instead, the accessible name comes from one of these sources, in order of precedence:

1. The `aria-labelledby` attribute, which references the `id` of another element containing the label text.
2. The `aria-label` attribute, which provides the label text directly.
3. The `value` attribute.

If none of these are present, the browser may fall back to a default label based on the `type` (for example, "Submit" for `type="submit"` in some browsers), but this behavior is inconsistent across browsers and languages. You should always set an explicit name.

## How to fix it

The simplest fix is to add a `value` attribute with descriptive text. The `value` text is both the visible label on the button and its accessible name, so it keeps the visual and programmatic labels in sync.

If you need the accessible name to differ from the visible text for some reason, use `aria-label`. If the label text already exists elsewhere on the page, use `aria-labelledby` to point to it.

Choose a name that clearly describes the action the button performs. Generic labels like "Submit" or "Click here" are technically accessible but may not be helpful when a page contains multiple buttons. Be specific: "Place Order", "Search", "Reset Form", and so on.

## Examples

### Input button with no accessible name

This button has no `value`, `aria-label`, or `aria-labelledby`. A screen reader might announce it as just "button" or fall back to an inconsistent browser default.

```html
<input type="submit">
```

### Fixed: using the `value` attribute

Adding a `value` attribute gives the button both a visible label and an accessible name.

```html
<input type="submit" value="Place Order">
```

### Fixed: using `aria-label`

If the visible label needs to stay empty or differ from the accessible name, `aria-label` provides a name directly to assistive technologies.

```html
<input type="button" aria-label="Search flights">
```

Note that when `aria-label` is used without a `value`, the button will appear with no visible text. In most cases, using `value` is preferable because it provides a visible label for all users.

### Fixed: using `aria-labelledby`

When the label text already exists in another element, `aria-labelledby` can reference it by `id`.

```html
<h2 id="checkout-heading">Complete Your Purchase</h2>
<input type="submit" aria-labelledby="checkout-heading">
```

### Multiple button types

The rule applies to `type="submit"`, `type="button"`, and `type="reset"` equally. Each one needs a discernible name.

```html
<!-- All three have accessible names via value -->
<input type="submit" value="Send Message">
<input type="reset" value="Clear Form">
<input type="button" value="Preview">
```