# Input buttons must have discernible text

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

Every interactive control on a page needs an accessible name so that assistive technologies can announce it to users. For `<input>` elements with `type="button"`, `type="submit"`, or `type="reset"`, the accessible name typically comes from the `value` attribute. While `<input type="submit">` and `<input type="reset">` have default browser-provided labels ("Submit" and "Reset"), `<input type="button">` has no default — it renders as an empty, unlabeled button if no name is provided.

This issue critically affects **blind** and **deafblind** users who rely on screen readers. When a screen reader encounters an input button without discernible text, it may announce something like "button" with no indication of what the button does. This makes it impossible to navigate forms, submit data, or perform actions confidently. Sighted users can often infer a button's purpose from visual context, but screen reader users depend entirely on the programmatic accessible name.

## Related WCAG Success Criteria

This rule maps to **WCAG 2.2 Success Criterion 4.1.2: Name, Role, Value (Level A)**, which requires that all user interface components have a name that can be programmatically determined. It also relates to **Section 508** requirements that every non-text element must have a text equivalent, and **EN 301 549 Section 9.4.1.2**.

## How to Fix It

There are several ways to give an input button a discernible accessible name:

1. **`value` attribute** — The most straightforward approach. Set `value` to descriptive text that communicates the button's purpose.
2. **`aria-label` attribute** — Provides an accessible name directly. Useful when you need the accessible name to differ from the visible text, or when `value` cannot be used.
3. **`aria-labelledby` attribute** — References another element's `id` whose text content becomes the accessible name. The referenced element must exist and contain text.
4. **`title` attribute** — Acts as a fallback accessible name. However, `title` is less reliable because it is not consistently exposed by all assistive technologies and only appears as a tooltip on hover, making it inaccessible to keyboard and touch users. Prefer `value` or `aria-label` instead.

For `<input type="submit">` and `<input type="reset">`, browsers provide default labels, so they pass without an explicit `value`. However, if you set `value=""` (an empty string), you override the default and create an empty accessible name, which fails.

## Examples

### Incorrect: Input button with no accessible name

```html
<form action="/search">
  <input type="button" id="go" />
</form>
```

This button has no `value`, `aria-label`, `aria-labelledby`, or `title`. A screen reader will announce it as just "button" with no context.

### Incorrect: Empty `aria-label`

```html
<form action="/search">
  <input type="button" aria-label="" />
</form>
```

An empty `aria-label` does not provide a discernible name.

### Incorrect: `aria-labelledby` referencing a nonexistent or empty element

```html
<form action="/search">
  <input type="button" aria-labelledby="nonexistent" />
</form>
```

```html
<form action="/search">
  <input type="button" aria-labelledby="empty-label" />
  <div id="empty-label"></div>
</form>
```

If the referenced element doesn't exist or has no text content, the button has no accessible name.

### Incorrect: Submit or reset with an empty `value`

```html
<form action="/search">
  <input type="submit" value="" />
  <input type="reset" value="" />
</form>
```

Setting `value` to an empty string overrides the browser's default label, leaving the button unnamed.

### Correct: Using the `value` attribute

```html
<form action="/search">
  <input type="button" value="Search" />
</form>
```

### Correct: Using `aria-label`

```html
<form action="/search">
  <input type="button" aria-label="Search" />
</form>
```

### Correct: Using `aria-labelledby`

```html
<form action="/search">
  <input type="button" aria-labelledby="btn-label" />
  <span id="btn-label">Search</span>
</form>
```

### Correct: Submit and reset with default or explicit values

```html
<form action="/search">
  <input type="submit" />
  <input type="reset" />
  <input type="submit" value="Send Form" />
  <input type="reset" value="Clear All Fields" />
</form>
```

The first two rely on the browser's built-in default labels ("Submit" and "Reset"). The last two provide custom, more descriptive labels through the `value` attribute. Both approaches are valid, though explicit descriptive labels are generally preferred for clarity.