Stellen Sie sicher, dass die Schaltflächen einen lesbaren Text haben
WCAG besagt, dass Schaltflächen einen erkennbare(n) Text haben müssen, der für Nutzer von Screenreadern klar den Zweck, die Funktion, das Ziel oder die auszuführende Aktion beschreibt.
Die input-button-name-Regel trennt die Funktionalität von der button-name-Regel, um sicherzustellen, dass Input-Schaltflächen einen klaren Text enthalten.
Warum das wichtig ist
Nutzer von Screenreadern können den Zweck von Elementen mit role="link", role="button" oder role="menuitem" nicht verstehen, wenn diese keinen zugänglichen Namen haben.
Behebung des Problems
Stellen Sie sicher, dass alle Schaltflächen einen klaren, zugänglichen Namen besitzen.
Gutes Codebeispiel
Die button-name-Regel umfasst fünf Markup-Muster, die die Prüfkriterien erfüllen:
<button id="text">Name</button><button id="al" aria-label="Name"></button><button id="alb" aria-labelledby="labeldiv"></button>
<div id="labeldiv">Schaltflächenbeschriftung</div><button id="combo" aria-label="Aria-Name">Name</button><button id="buttonTitle" title="Titel"></button>
Kopieren Testfälle
Die Regel für Schaltflächennamen enthält sechs Markup-Muster, die die Testkriterien nicht erfüllen:
<button id="leer"></button><button id="val" value="Schaltflächenname"></button><button id="alempty" aria-label=""></button><button id="albmissing" aria-labelledby="nonexistent"></button><button id="albempty" aria-labelledby="emptydiv"></button>
<div id="emptydiv"></div><button id="buttonvalue" value="foo" tabindex="-1"></button>
Kopieren Testfälle
Weitere Beispiele finden Sie auf den folgenden Seiten der ATC-Regelbibliothek des W3C auf GitHub: