Le WCAG exige que tous les boutons de saisie aient un texte perceptible.
Pourquoi c’est important
Sans nom accessible, les lecteurs d’écran ne peuvent pas comprendre l’utilité d’un bouton de saisie, ce qui signifie que la fonction ne peut pas être transmise aux utilisateurs.
Résolution du problème
Ajoutez un texte perceptible à tous les boutons de saisie.
Exemple de bon code
Onze modèles de balisage satisfont aux critères du test de nom de bouton de saisie :
<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>
Exemple de mauvais code
Cinq modèles de balisage ne répondent pas aux critères du test input-button-name :
<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>
Cas de test
Pour plus d’exemples, visitez la bibliothèque des règles ATC du W3C sur GitHub.