PhpBB Lab Académie

Distinguer hover, focus et focus-visible, conserver des liens reconnaissables et donner un contour visible aux contrôles existants du site.

Savoir où se trouve le clavier

Votre menu et votre formulaire sont accessibles par leurs éléments HTML natifs. Il faut aussi qu’une personne voyante au clavier puisse repérer le contrôle actif.

Le focus indique l’élément qui reçoit les actions du clavier. Cette leçon met en forme les vrais liens, inputs, textarea et bouton ; elle ne crée pas de contrôles supplémentaires et ne change aucun tabindex.

1. Conserver un signe autre que la couleur pour les liens

Ajoutez a { color: #163b65; text-decoration: underline; }. text-decoration: underline dessine un soulignement. Les liens restent ainsi identifiables sans dépendre uniquement de leur bleu.

Le sélecteur descendant .navigation-principale a cible les liens contenus dans le menu, à travers les li. Ajoutez-y display: block; et padding: 0.5rem;. Le lien lui-même reçoit une zone intérieure plus confortable à activer ; vous ne créez pas un faux bouton autour de lui.

2. Comprendre hover

Une pseudo-classe complète un sélecteur pour désigner un état. Dans a:hover, les deux-points introduisent l’état de survol par un dispositif de pointage.

Ajoutez a:hover { text-decoration-thickness: 0.15em; }. Cette propriété épaissit le soulignement. Ici, em se rapporte à la taille de police de l’élément concerné, contrairement à rem qui se rapporte à la racine.

Un écran tactile ne fournit pas nécessairement un survol stable. Nous ne plaçons donc aucune information essentielle uniquement dans cet état.

3. Comprendre focus et outline

La pseudo-classe :focus correspond à l’élément qui possède le focus. outline dessine un contour qui ne prend pas de place dans le calcul de la boîte, contrairement à border. outline-offset espace ce contour de la boîte.

Ajoutez :

a:focus, input:focus, textarea:focus, button:focus {
    outline: 0.1875rem solid #163b65;
    outline-offset: 0.1875rem;
}

La liste de sélecteurs couvre chaque famille de contrôle. Le contour est conservé même si le focus provient de la souris : c’est notre base volontairement explicite. Ne mettez pas outline: none ailleurs pour l’annuler.

4. Distinguer focus-visible sans en faire une recette magique

:focus-visible correspond à un élément focalisé lorsque le navigateur juge qu’un indicateur visuel est nécessaire. C’est notamment fréquent lors de la navigation au clavier, mais ce n’est pas synonyme de « clavier uniquement » : une zone de saisie peut aussi le faire correspondre après un clic.

Nous conservons :focus comme base et renforçons seulement l’épaisseur quand :focus-visible correspond. La propriété outline-width modifie uniquement l’épaisseur du contour déjà défini :

a:focus-visible, input:focus-visible, textarea:focus-visible, button:focus-visible {
    outline-width: 0.25rem;
}

Un navigateur qui ignore cette seconde règle garde le contour de :focus. Nous n’avons besoin d’aucune détection JavaScript pour ce choix.

5. Tester les vraies interactions

Avec Tab puis Maj + Tab, parcourez le menu et le formulaire. Dans le groupe radio, utilisez les flèches selon le fonctionnement natif du navigateur ; avec Espace, cochez ou décochez copie. Vérifiez que l’élément actif possède son contour, qu’il n’est pas coupé et que tous les noms restent compréhensibles.

Testez aussi sans souris : hover ne doit pas être nécessaire pour trouver une action. Un lecteur d’écran continue à recevoir les labels natifs ; nous n’ajoutons pas d’aria-label qui les remplacerait.

Référence technique, pour approfondir

W3C — Focus visible
W3C — Pseudo-classe focus-visible

a {
    color: #163b65;
    text-decoration: underline;
}

a:hover {
    text-decoration-thickness: 0.15em;
}

.navigation-principale a {
    display: block;
    padding: 0.5rem;
}

a:focus, input:focus, textarea:focus, button:focus {
    outline: 0.1875rem solid #163b65;
    outline-offset: 0.1875rem;
}

Le renforcement :focus-visible se place après cette base, avec outline-width: 0.25rem;.

Étape 1

Ajoutez la règle de liens avec la couleur et le soulignement. Ajoutez le padding aux liens descendants de navigation-principale.

Étape 2

Ajoutez l’état a:hover et comprenez que son soulignement plus épais ne constitue pas la seule indication de lien.

Étape 3

Ajoutez la règle commune :focus avec outline et outline-offset.

Étape 4

Ajoutez après elle la règle commune :focus-visible avec outline-width: 0.25rem;.

Étape 5

Parcourez les trois pages au clavier. Dans Contact, vérifiez les quatre saisies, le groupe radio, la case et le bouton. Ne soumettez pas de données personnelles.

Hover est un état de pointage, focus l’état actif et focus-visible une décision du navigateur sur la nécessité d’un indicateur. Notre base garde le contour de focus ; les liens restent soulignés avant toute interaction.