12.3. Garantir la visibilité de la prise de focus au clavier

Afin de permettre aux personnes qui naviguent au clavier de se situer dans la page, chaque élément interactif (liens, boutons, champs de formulaires, etc.) doit être visuellement mis en avant lors de la prise de focus.

Remarque

Veiller à ce que cette mise en avant visuelle soit suffisamment contrastée.

Astuce

Une très bonne pratique d’accessibilité consiste à doubler systématiquement chaque règle :hover par une règle :focus dans la CSS.

Comme par exemple :

main a:hover,
main a:focus {
   text-decoration: none;
}

2 commentaires

  • Par Cédric Escarment, le 23 mars 2017 à 14:18.

    Bonjour,
    Si j’ai un bouton avec une bordure de couleur, et qu’au survol / à la prise du focus je change la couleur de la bordure (avec un contraste suffisant entre les deux couleurs), est-ce que c’est correct ?
    Ne risque-t-on pas que certains utilisateurs ne perçoivent pas ce changement ? Pour une information dans la page, il est interdit de véhiculer une information uniquement par la couleur, même suffisamment contrasté.

    Répondre

    • Par Johan Ramon, le 27 mars 2017 à 10:19.

      Bonjour Cédric,

      A priori, d’après vos explications, cela est ok/conforme pour l’accessibilité.
      Ce cas est-il toutefois visible quelque part pour que nous puissions concrètement le vérifier ?

      Quoi qu’il en soit, dans tous les cas de figure, il est important de ne pas supprimer ou dégrader l’indication visuelle du navigateur (propriétés CSS outline). Cf. critère 10.7 du RGAA.

      Johan

      Répondre

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Haut de page