Ensure Input Buttons Have Discernible Text

Yotam Flohr
Researcher
Blind Hearing
WCAG 2.1 Level A

Written and researched for humans by humans

Yotam Flohr
Researcher
Ritvik Shrivastava
Expertly reviewed by
Comments: 0
Your entire domain
Get detailed instructions on how to resolve every accessibility issue on your website

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