Input buttons require discernible text

Input buttons must have a discernible accessible name

Every input button needs a programmatic name that assistive technologies can announce.

This applies to input type=button, type=submit, and type=reset across forms and toolbars.

Missing or empty names block screen reader users and make voice control unreliable.

Why It Matters

• Screen reader users cannot tell what an unnamed button does, so critical actions like Submit or Reset are hidden.
• Speech recognition users must say the button’s label; without a name, commands like “click Save” will fail.
• Clear, consistent button names reduce cognitive load for users with memory or attention limitations.

Common Causes

• input type="button" with no value, aria-label, or aria-labelledby.
• type="submit" or type="reset" with value="" (empty string) which overrides the browser’s default label.
• aria-label present but empty or whitespace-only.
• aria-labelledby pointing to an element that does not exist, is hidden, or has no text.
• Icon-only controls that never expose a text label to the accessibility APIs.
• Relying on the title attribute as the only label (inconsistently announced and not visible).

How to Fix

1. Prefer visible text
   • Recommendation: When possible, use a visible label for buttons. If you must use <input>, ensure an accessible name is provided.
2. Provide a name for input type="button"
   • Set a meaningful value attribute (e.g., value="Add to cart").
   • Or use aria-labelledby to reference nearby visible text.
   • aria-label is acceptable when no visible text exists, but keep it concise and clear.
3. Handle submit and reset safely
   • If you want the browser’s default name, omit the value attribute entirely (e.g., <input type="submit">).
   • If you provide value, ensure it is not empty and accurately describes the action (e.g., value="Send form").
   • Never set value="" for submit or reset.
4. Match Label in Name (WCAG 2.5.3)
   • When a visible label exists (e.g., “Save settings”), include those words in the accessible name, preferably at the start.
5. Avoid title-only labeling
   • The title attribute alone is not reliable for names and provides no visible text. Do not depend on it.
6. Keep ARIA references valid
   • Ensure aria-labelledby IDs exist, are unique, and reference elements with meaningful text that is not hidden.
7. Maintain names during UI changes
   • If button text changes dynamically (e.g., “Play” to “Pause”), update the accessible name at the same time.

How to Test

Keyboard

• Tab to each input button; it must receive focus and be operable with Enter/Space.
• While focused, confirm a visible label is present when applicable.

Screen reader

• With NVDA/JAWS/VoiceOver: navigate to each button and listen for a clear name.
• Verify the spoken name contains any visible label text (Label in Name).

Mobile/touch

• With TalkBack or iOS VoiceOver: swipe to the button; ensure its role and name are announced.
• Use rotor/quick nav to list buttons and confirm they appear with the expected names.

DevTools/Automation

• Inspect the element’s computed accessible name in browser Accessibility tools.
• Run automated checks (e.g., axe, WAVE) and review any “button name” or “accessible name” issues.

Quick checklist

• Each input button has a non-empty computed accessible name.
• Submit/Reset do not use an empty value; default names or meaningful values are present.
• ARIA labels are concise, localized, and accurate; aria-labelledby targets exist and contain text.
• Visible label words appear in the accessible name (Label in Name).
• Icon-only buttons expose a text name via aria-label or aria-labelledby.
• Title is not the sole source of the name.

Good Example

<form>
  <!-- Submit with explicit name -->
  <input type="submit" value="Send message" id="sendMsg">

  <!-- Reset using the browser’s default name (no value attribute) -->
  <input type="reset" id="resetForm">

  <!-- Input button named via aria-labelledby referencing visible text -->
  <span id="cartAddText">Add to cart</span>
  <input type="button" id="addCart" aria-labelledby="cartAddText">
</form>

Bad Example

<form>
  <!-- No accessible name at all -->
  <input type="button" id="doThing">

  <!-- aria-label present but empty -->
  <input type="button" id="iconPlay" aria-label="">

  <!-- Broken aria-labelledby reference -->
  <input type="button" id="apply" aria-labelledby="missingText">

  <!-- Submit with empty value overrides default and results in no name -->
  <input type="submit" id="send" value="">
</form>

Quick Checklist

• Input buttons expose a clear, non-empty accessible name.
• Names are action-oriented and match visible labels when present.
• Submit/Reset: omit value for defaults or provide meaningful values; never empty.
• ARIA labels are valid and point to existing, text-filled elements.
• Icon-only buttons include aria-label or aria-labelledby.
• Do not rely on title as the only label.
• Verify announcements with a screen reader and DevTools’ computed name.