Ensure input buttons have discernible text

Ensure that all <input> elements of type button, submit, or reset have accessible names to convey their purpose to users, especially those relying on assistive technologies.

About This Rule

This rule ensures that input buttons have discernible text, enhancing accessibility for users who rely on screen readers. Adhering to this guideline aligns with the following standards:

• WCAG 2.1 (A): 4.1.2 Name, Role, Value
• WCAG 2.0 (A): 4.1.2 Name, Role, Value
• Section 508: 1194.22 (a)

Why It Matters

Screen reader users depend on accessible names to understand the function of input buttons. Without discernible text, these users may be unable to determine the purpose of a button, leading to confusion and a diminished user experience.

How to Fix

To make input buttons accessible:

• Use the value Attribute: For <input> elements of type button, submit, or reset, provide a descriptive label using the value attribute:
  Copy

  
  <input type="submit" value="Search">
        

• Use the aria-label Attribute: Alternatively, assign an accessible name using the aria-label attribute:
  Copy

  
  <input type="button" aria-label="Close">
        

• Use the aria-labelledby Attribute: You can also reference an existing element that provides the label using the aria-labelledby attribute:
  Copy

  <input type="reset" aria-labelledby="resetLabel">
  <span id="resetLabel">Clear Form</span>

• Use the title Attribute: As a last resort, provide a tooltip with the title attribute:
  Copy

  <input type="button" title="Help">

Examples

Incorrect

An input button without discernible text:

<input type="button">

Correct

An input button with a descriptive value:

<input type="button" value="Submit Form">

More Information

• H36: Using the value attribute of the input element to define the label
• ARIA8: Using aria-label for elements