Ensure Input Buttons Have Discernible Text
Blind
Hearing
WCAG 2.1 Level A
WCAG requires all input buttons to have discernable text.
Without an accessible name, screen readers cannot understand the purpose of an input button, which means the function cannot be relayed to users.
Add discernable text to all input buttons.
Eleven markup patterns pass the input-button-name test criteria:
<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
Five markup patterns fail the input-button-name test criteria:
<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
For more examples, visit W3C’s GitHub’s ATC Rules library.