R I S K M O N I T O R

Loading

Intelligent Cybersecurity Check for vulnerabilities now

Contact Info

Get A Quote

Input Button Name Accessibility

  • June 1, 2025

Input Button Name Accessibility

Rule ID: input-button-name
Ruleset: axe-core 4.10
User Impact: Critical
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Section 508, Trusted Tester, EN 301 549

How to Fix the Problem

To comply with accessibility standards, every <input type="button">, <input type="submit">, and <input type="reset"> must have an accessible and discernible name. This ensures that screen readers and other assistive technologies can convey the purpose of the button to users with disabilities.

Here are the correct and accessible ways to label input buttons:

✅ Valid Methods
You can use any of the following markup patterns to ensure accessibility:

html
<!-- Using 'value' attribute -->
<input type="button" value="Click Here" /><!– Using ‘aria-label’ for screen readers –>
<input type=“button” aria-label=“Click Here” />

<!– Using ‘aria-labelledby’ to associate with a visible label –>
<div id=“labeldiv”>Click Here</div>
<input type=“button” aria-labelledby=“labeldiv” />

<!– Combining ‘value’ and ‘aria-label’ –>
<input type=“button” value=“Click” aria-label=“Click Here” />

<!– Apply similar methods for submit/reset –>
<input type=“submit” value=“Submit Form” />
<input type=“reset” value=“Reset Form” />

❌ Avoid These Common Failures

These patterns will fail accessibility checks:

html
<!-- Missing value, label, or title -->
<input type="button" /><!– Empty aria-label –>
<input type=“button” aria-label=“” />

<!– Non-existent or empty reference –>
<input type=“button” aria-labelledby=“nonexistent” />
<input type=“button” aria-labelledby=“emptydiv” />
<div id=“emptydiv”></div>

<!– Empty value for submit/reset –>
<input type=“submit” value=“” />
<input type=“reset” value=“” />

Best Practices

  • Always use meaningful, concise text.

  • Use aria-label if you want to hide the text visually but still provide accessibility support.

  • Use aria-labelledby to link buttons to visible labels when text is elsewhere in the DOM.

Why it Matters

Screen reader users depend on clear labels to understand what a button does. If an input button lacks a discernible name, it becomes unusable for these users. Buttons without names result in confusion and limit the ability of users to interact with important functionality—such as submitting a form or triggering actions.

For example, a screen reader encountering an unlabeled button might simply announce “button,” providing no insight into its purpose. This undermines usability and violates critical accessibility standards.

Accessible names ensure clarity of purpose and improve navigation and interaction for all users, especially those relying on assistive technologies.

Rule Description

This rule ensures that all <input type="button">, <input type="submit">, and <input type="reset"> elements include a discernible label, either through a value, aria-label, aria-labelledby, or title attribute.

The rule is focused on input-type buttons specifically and is separate from similar rules that apply to <button> elements.

The Algorithm (in simple terms)

The accessibility check will pass if:

  • The input element has a value that is not empty, or

  • It has a non-empty aria-label, or

  • It references a valid element with a label using aria-labelledby, or

  • It has a title attribute (though this is less reliable for screen readers).

If none of these conditions are met, the rule will flag the button as inaccessible.

Tags:
Share:

Leave A Comment