1178 sujets

Accessibilité du Web

Hello,

Voilà mon bout de code simplifié pour afficher un CTA à base de lien.
<a class="cta" href="/service/blabla" role="link" tabindex="0"><span class="fas fa-long-arrow-alt-right">&nbsp;</span>Le lien</a>

Récemment, j’ai rajouté role="link" tabindex="0" car à la base, le lien était obfusqué via javascript. J’ai décidé de rendre le code plus accessible, mais j’ai un problème lors de la navigation par clavier avec la touche tab : le bouton (a href) ne présente pas de signe comme quoi il est sélectionné. Dans focus, active, etc, je me perds. Je dois avoir une valeur qui écrase le comportement par défaut du navigateur, mais je suis prête à rajouter une nouvelle classe sur ce bouton pour corriger le tir.

Auriez-vous une idée de quoi mettre, svp ?

Merci pour les handis (et moi).
Administrateur
Bonjour,

en utilisant un élément A avec attribut href, tu n'as pas besoin de préciser un role=link ni de tabindex=0 : tout cela est natif, A href a déjà ce rôle et c'est déjà un élément interactif pouvant prendre le focus Smiley cligne
Tu peux tranquillement supprimer ces 2 attributs.

Reste un problème a priori de CSS. Les navigateurs modernes stylent le focus par défaut avec la pseudo-classe :focus-visible. Tu peux voir l'ensemble dans les Devtools de Firefox (F12) en ajoutant ceux-ci : F1, Inspecteur, "Afficher les styles du navigateur".
Retour au panneau Inspecteur : sélectionne ton lien et trouve au-dessus des règles CSS qui s'y appliquent un bouton ":hov". Coche :focus ou : focus-visible pour comprendre ce que le navigateur fait, visuellement et dans les règles qui apparaissent en dessous.

Depuis que Firefox a enfin supprimé son pointillé par défaut et adopté ce que Edge, Safari et Chrome font (bordure pleine noire ou bleue de entre 1 et 2 px d'épaisseur - la magie de "1px auto"), mon conseil est de ne rien écraser, rien styler si le comportement par défaut est déjà bon, à moins que tu ne veuilles améliorer l'outline en sachant quoi faire.
Évidemment pas de outline: 0 ou outline: none Smiley eek

EDIT: Raphaël a écrit à propos de cette pseudo-classe : Le coup de pouce accessibilité de CSS :focus-visible
Modifié par Felipe (30 May 2024 - 12:14)
Meilleure solution
Merci Felipe. En fait, tu as raison, il traînait un outline none Smiley confused

Il va falloir que je fasse maigrir aussi ma feuille de style Smiley murf

Smiley biggol

Belle journée, et merci pour le lien.