Ensure Input Buttons Have Discernible Text
Blind
Hearing
WCAG 2.2 Level A
Written and researched for humans by humans
Casandra Visser
Author
Yotam Flohr
Researcher
Ritvik Shrivastava
Expertly reviewed by
Comments:
0
WCAG requires all input buttons to have discernable text.
Why It Matters
Without an accessible name, screen readers cannot understand the purpose of an input button, which means the function cannot be relayed to users.
Fixing the Issue
Add discernable text to all input buttons.
Good Code Example
Eleven markup patterns pass the input-button-name test criteria:
Code example
<form action="#">
<input type="button" id="pass1" value="Button Name" />
<input type="button" id="pass2" aria-label="Name" />
<input type="button" id="pass3" aria-labelledby="labeldiv" />
<input type="button" id="pass4" value="Name" aria-label="Aria Name" />
<input type="submit" id="pass5" />
<input type="submit" value="Something" id="pass6" />
<input type="reset" id="pass7" />
<input type="reset" value="Something" id="pass8" />
<input type="button" title="Something" id="pass9" />
<input type="submit" title="Something" id="pass10" />
<input type="reset" title="Something" id="pass11" />
</form>
Copy
Bad Code Example
Five markup patterns fail the input-button-name test criteria:
Code example
<form action="#">
<input type="button" id="fail1" />
</form>
<form action="#">
<input type="button" id="fail2" aria-label="" />
</form>
<form action="#">
<input type="button" id="fail3" aria-labelledby="nonexistent" />
</form>
<form action="#">
<input type="button" id="fail4" aria-labelledby="emptydiv" />
<div id="labeldiv">Button label</div>
<div id="emptydiv"></div>
</form>
<form action="#">
<input type="submit" value="" id="fail5" />
</form>
<form action="#">
<input type="reset" value="" id="fail6" />
</form>
Copy
Test Cases
For more examples, visit W3C’s GitHub’s ATC Rules library.