Input buttons need a name

• Rule: axe/input-button-name
• Checks: Input buttons must have discernible text
• WCAG: 4.1.2
• Fix class: content: A fix needs authored text.

Who it affects

• People who use a screen reader or a braille display, most of them blind.
• People who control the page by speaking.

How to fix it

An <input type="button"> has no value

Set value to the words for the button’s action. The browser shows the value as the button’s text, so its name and its visible label stay the same.

<input type="button" value="Add to cart">

A submit or reset input has an empty value

Put the action in value, such as “Place order”, or remove the empty attribute so the browser shows its default label. Words that say what submitting does serve people better than the default.

<input type="submit" value="Place order">

The input shows an icon through CSS and has no text

Replace it with a <button>, which can hold the icon, hidden from assistive technology, beside visually hidden text that names the action.

<button type="button">
  <svg aria-hidden="true" focusable="false"><use href="#icon-print"></use></svg>
  <span class="visually-hidden">Print receipt</span>
</button>

Fixes that fail

Naming the input with title instead of value

axe accepts it, but the button then shows no text, and the title appears only on mouse hover, so keyboard, touch and voice control users see no name.

Using a symbol as the value, such as value="X" or value="›"

axe accepts any text, but screen readers read out the character rather than the action, and voice control users cannot guess what to say.

More on the rule

axe-core’s documentation of the rule

CORA’s fix guidance adapts content from accessibility-agents, under the MIT License: see its notice.