Cours CSS / États des liens et focus visible au clavier

Stylisez les états des liens avec des pseudo-classes telles que :link, :visited, :hover et :focus-visible tout en gardant les liens reconnaissables. Les utilisateurs au clavier ont besoin d’un indicateur de focus visible, et le seul style hover ne peut pas communiquer tous les états interactifs.

Rendez les liens reconnaissables

a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

Le lien est créé avec un élément a contenant href. Simplement colorer le texte en bleu ne le rend pas réellement cliquable. Le soulignement informe également les lecteurs ayant des difficultés à distinguer les couleurs en signalant les liens activables. text-underline-offset ajuste l'espacement entre les lettres et le soulignement. Ici, em est basé sur la taille de la police du lien.

Utilisez un nom qui décrit la connexion, tel que « Informations pour les visiteurs », plutôt qu'une destination inconnue, telle que « Cliquez ». Avant de faire en sorte qu'un lien normal ressemble à un bouton, vous devez distinguer s'il s'agit d'une navigation ou d'une action. Les liens conviennent aux éléments qui permettent de passer à un autre document, et les boutons conviennent généralement aux éléments qui exécutent des actions sur l'écran actuel.

Comparer les états du lien et l'ordre des sources

a:link { color: #1756a9; }

a:visited { color: #6b438c; }

a:hover { color: #b53239; }

a:active { color: #8a2630; }

Un lien peut correspondre à plusieurs états à la fois : un lien visité sous le pointeur correspond à la fois à :visited et :hover. Avec une spécificité égale et des conditions de cascade par ailleurs égales, la déclaration écrite plus loin dans le code source l’emporte pour la même propriété. L’ordre :link → :visited → :hover → :active rend les couleurs de survol et pressées observables que la destination ait été visitée ou non. Voir CSS Combinateurs et Pseudo-Classes.

Cet ordre ne permet pas de l’emporter sur toutes les autres règles. Si vous avez des sélecteurs plus spécifiques ou d'autres conditions de cascade, les résultats seront différents. Si la couleur ne change pas, vérifiez quelle déclaration de couleur est appliquée dans les outils de développement. :active n'est pas dans un état permettant de continuer à afficher le menu sélectionné. Si vous devez afficher le menu de la page actuelle, envisagez une classe distincte ou une présentation sémantique telle que aria-current.

Gardez le focus au clavier visible

a:focus-visible {
  outline: 3px solid #e58c1f;
  outline-offset: 3px;
}

Le focus fait référence à l'objet qui recevra les saisies au clavier. Si l'emplacement actuel n'est pas visible lors de la navigation vers un lien avec Tab, il est difficile pour l'utilisateur de savoir où appuyer sur Entrée. :focus-visible s'applique dans les situations où le navigateur détermine que l'affichage du focus est nécessaire. Il apparaît généralement lors des déplacements au clavier, mais toutes les situations de clic/saisie ne se divisent pas simplement en deux types. Pour appliquer ces principes aux champs de formulaire, comparez les états de focus dans le cours CSS États du formulaire : Focus, Validation, désactivé et lecture seule.

outline dessine le contour de focus et outline-offset le sépare de l'élément. Ne retirez pas l'indicateur par défaut avec outline: none sauf si vous fournissez un remplacement adéquat. Cet exemple conserve à la fois le soulignement du lien et un contour de focus visible. Voir MDN: :focus visible.

Créer l'exemple à deux fichiers

Créez links.html et visit.html dans le même dossier. Enregistrez le premier code sous le nom links.html et le code suivant sous visit.html en UTF-8. Le premier lien vous amène au fichier séparé, et le deuxième lien vous amène au titre des heures d'ouverture dans la page actuelle.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Link states exercise</title>
  <style>
    body { margin: 24px; font: 1rem/1.7 sans-serif; color: #333; }
    main { max-width: 65ch; }
    a { text-decoration: underline; text-underline-offset: 0.15em; }
    a:link { color: #1756a9; }
    a:visited { color: #6b438c; }
    a:hover { color: #b53239; }
    a:active { color: #8a2630; }
    a:focus-visible { outline: 3px solid #e58c1f; outline-offset: 3px; }
    nav li + li { margin-block-start: 0.7em; }
  </style>
</head>
<body>
  <main>
    <h1>Small Garden visitor information</h1>
    <nav aria-label="Instruction link"><ul>
      <li><a href="visit.html">Visitor information on a separate page</a></li>
      <li><a href="#hours">Opening hours on this page</a></li>
    </ul></nav>
    <h2 id="hours">Opening hours</h2>
    <p>Plant care takes place in the morning. These times are fictional sample content, not information about a real facility.</p>
    <p>Hover over the links or press Tab to check their colors and outlines.</p>
  </main>
</body>
</html>

<!doctype html>

<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Visitor Information</title></head>

<body><h1>Visitor information page</h1><p>This separate document is opened by the first link.</p><p><a href="links.html">Return to the link exercise</a></p></body></html>

Testez les liens avec une souris et un clavier

1. Ouvrez links.html et survolez le premier lien. Vérifiez s'il devient rouge. Si vous maintenez le bouton de la souris enfoncé, vous verrez une couleur rouge foncé. Comme la navigation se produit lorsque vous relâchez le bouton, la couleur active ne reste pas après le clic.
2. Ouvrez le premier lien et revenez en arrière dans le navigateur. Déplacez le pointeur hors du lien et vérifiez la couleur du lien visité. Les résultats peuvent varier avec de nouveaux profils, les fenêtres privées ou après avoir effacé l'historique, et les adresses déjà visitées peuvent être considérées comme visitées depuis le début.
3. Placez le pointeur en dehors du lien et utilisez Tab pour aller au premier lien. Assurez-vous que le contour orange apparaît, puis appuyez à nouveau sur Tab pour passer au lien suivant. Shift+Tab permet de se déplacer dans l'ordre inverse.
4. Avec le focus sur le premier lien, appuyez sur Entrée. Assurez-vous que visit.html s'ouvre. Lorsque vous revenez, activez le deuxième lien avec Entrée et il devrait vous amener au titre « Opening hours » (horaires d’ouverture).

L'affichage des liens visités comporte des restrictions de confidentialité. Certaines propriétés de couleur, tels que color, peuvent être utilisés, mais la taille, l'image, etc. ne peuvent pas être librement modifiés pour déterminer si une visite a eu lieu. Le navigateur peut ne pas indiquer directement les couleurs visitées dans getComputedStyle(), etc., donc ne jugez pas l'historique des visites uniquement en fonction de la valeur de style calculée. Les restrictions détaillées sont décrites dans :visited sur la documentation MDN sur les restrictions de :visited .

Diagnostiquer les changements d'état manquants

• Si le lien ne fonctionne pas, vérifiez le nom de fichier de href et l'emplacement de visit.html. Tout d'abord, vérifiez si vous avez mis les deux fichiers dans le même dossier.
• Si vous ne voyez que la couleur au survol au lieu de la couleur visitée, éloignez le pointeur du lien. Si le survol est forcé dans les outils de développement, désactivez-le.
• Si le focus n’avance pas au clavier, vérifiez s'il s'agit d'un vrai lien avec un href. Les paramètres de navigation au clavier de votre navigateur/système d'exploitation peuvent également avoir un effet.
• Lorsque la ligne de focus est coupée, vérifiez le débordement de l'élément parent et l'espace environnant. Sur mobile, le survol tactile peut se comporter différemment que sur ordinateur, donc les informations essentielles ne sont pas seulement affichées au survol.

Une fois que vous avez terminé de vous entraîner à changer l'ordre des règles, remettez-les dans leur ordre original. Le CSS qui a été temporairement modifié dans les outils de développement reviendra à la valeur enregistrée dans le fichier lorsque vous actualisez, mais l'historique de navigation n'est pas réinitialisé simplement en actualisant.