J'ai ce lien qui ressemble plus à un bouton - mais chaque fois que je teste mon onglet de navigation via le clavier - ce lien n'est jamais et l'utilisateur ne peut pas l'utiliser.Comment rendre mon clic accessible via l'onglet du clavier
Comment puis-je le rendre compatible ADA et utiliser aria pour le rendre accessible via le clavier?
<div class="styles">
<a class="btn btn-primary" (click)="handlingClick($event)" id="addUser">Add User</a>
</div>
Vous devez ajouter l'attribut tabindex.
<a class="btn btn-primary" (click)="handlingClick($event)" id="addUser" tabindex="0">Add User</a>
La valeur 0 il donne un indice onglet naturel à base de l'ordre des éléments DOM.
Y at-il une chute à l'utilisation de tabindex partout? Je me sens comme si je devais faire un changement html alors je vais devoir m'assurer que le compte tabindex est tout à jour. – bluePearl
@bluePearl Si vous utilisez la valeur 0 alors il la rend simplement focalisable comme si elle avait l'attribut href. Vous ne spécifiez pas de commande - le navigateur le fait pour vous. Donc non, il n'y a pas de chute. C'est comme ça que c'est fait. Vérifiez la documentation supplémentaire que je viens d'ajouter à ma réponse pour plus d'informations si vous êtes intéressé. – Tom
quand j'ai essayé ceci - je n'étais pas capable de naviguer ou de cliquer (entrer) le lien quand j'ai utilisé le tabindex = 0. c'était obtenir le focus mais ne fonctionnant pas. – bluePearl
Les éléments d'ancrage peuvent être mis au point en mode natif. La raison pour laquelle votre lien ne reçoit pas de focus est qu'il n'a pas d'attribut href.
Une autre façon d'aborder ce problème serait d'ajouter un identifiant de fragment d'URL non existant à l'attribut href, comme ceci:
<div class="styles">
<a class="btn btn-primary" href="#void" (click)="handlingClick($event)" id="addUser">Add User</a>
</div>
Sans href il ne sera pas en mesure de se concentrer; utilisez un 'bouton' à la place. –
@GregMcMullen - ça a marché! – bluePearl
@GregMcMullen C'est pourquoi nous avons l'attribut "tabindex". La valeur "0" lui donne un ordre de tabulation logique basé sur sa position dans le DOM. Pas besoin de passer à un bouton. – Tom