Eingabe-Schaltflächen müssen erkennbaren Text haben
Blind
Hören
WCAG 2.2 Level A
Von Menschen für Menschen geschrieben und recherchiert
Casandra Visser
Autor
Yotam Flohr
Forscher
Ritvik Shrivastava
Fachmännisch überprüft von
Kommentare:
0
Laut WCAG müssen alle Eingabe-Schaltflächen erkennbaren Text enthalten.
Warum es wichtig ist
Ohne einen zugänglichen Namen können Screenreader den Zweck einer Eingabe-Schaltfläche nicht erkennen, sodass die Funktion für Nutzer nicht ersichtlich ist.
Behebung des Problems
Fügen Sie allen Eingabe-Schaltflächen erkennbaren Text hinzu.
Gutes Code-Beispiel
Die folgenden elf Markup-Muster erfüllen die Testkriterien für Eingabe-Schaltflächen:
Codebeispiel
<form action="#">
<input type="button" id="pass1" value="Schaltflächenname" />
<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="Etwas" id="pass6" />
<input type="reset" id="pass7" />
<input type="reset" value="Etwas" id="pass8" />
<input type="button" title="Etwas" id="pass9" />
<input type="submit" title="Etwas" id="pass10" />
<input type="reset" title="Etwas" id="pass11" />
</form>
Kopieren Schlechtes Code-Beispiel
Die folgenden fünf Markup-Muster erfüllen die Testkriterien für Eingabe-Schaltflächen nicht:
Codebeispiel
<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">Schaltflächenbeschriftung</div>
<div id="emptydiv"></div>
</form><form action="#">
<input type="submit" value="" id="fail5" />
</form><form action="#">
<input type="reset" value="" id="fail6" />
</form>
Kopieren Testfälle
Weitere Beispiele finden Sie in der ATC-Regelbibliothek von W3C auf GitHub.