Ce sera le deuxième article d'une petite série que nous rédigeons sur l'accessibilité des formulaires. Si vous avez manqué le premier message, consultez Formulaires accessibles avec des pseudo-classes. Dans cet article, nous allons examiner :focus-visible et comment l'utiliser dans vos sites Web !

Focus sur le point de contact

Avant d'aller de l'avant avec :focus-visible, revisitons comment :focus fonctionne dans votre CSS. Le focus est l'indicateur visuel avec lequel un élément interagit via le clavier, la souris, le trackpad ou une technologie d'assistance. Certains éléments sont naturellement interactifs, comme les liens, les boutons et les éléments de formulaire. Nous voulons nous assurer que nos utilisateurs savent où ils se trouvent et les interactions qu'ils effectuent.

N'oubliez pas de ne pas faire ça dans votre CSS!

:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}

Lorsque vous supprimez le focus, vous le supprimez pour TOUT LE MONDE! Nous voulons nous assurer de maintenir le cap.

Si, pour une raison quelconque, vous devez supprimer le focus, assurez-vous qu'il existe également une solution de secours. :focus styles pour vos utilisateurs. Cette solution de secours peut correspondre aux couleurs de votre marque, mais assurez-vous que ces couleurs sont également accessibles. Si le marketing, le design ou l'image de marque n'aiment pas les styles de bague de mise au point par défaut, il est temps de commencer à avoir des conversations et de collaborer avec eux sur la meilleure façon de les réintégrer.

Qu’est ce qu' focus-visible?

La pseudo-classe, :focus-visible, c'est comme notre valeur par défaut :focus pseudo-classe. Cela donne à l’utilisateur un indicateur que quelque chose se concentre sur la page. La façon dont tu écris :focus-visible est coupé et sec :

:focus-visible {
  /* ... */
}

Lors de l'utilisation :focus-visible avec un élément spécifique, la syntaxe ressemble à ceci :

.your-element:focus-visible {
  /*...*/
}

L'avantage d'utiliser :focus-visible c'est que vous pouvez faire ressortir votre élément, lumineux et audacieux ! Pas besoin de s'inquiéter de l'affichage si l'élément est cliqué/appuyé. Si vous choisissez de ne pas implémenter la classe, la valeur par défaut sera l'anneau de focus de l'agent utilisateur, ce qui n'est pas souhaitable pour certains.

Histoire de focus-visible

Avant nous avions le :focus-visible, le style de l'agent utilisateur s'appliquerait :focus à la plupart des éléments de la page ; boutons, liens, etc. Cela appliquerait un contour ou une « bague de mise au point » à l’élément focalisable. Cela a été jugé moche, la plupart n'aimaient pas la bague de mise au point par défaut fournie par le navigateur. La bague de mise au point étant défavorable à l’observation, la plupart des auteurs l’ont supprimée… sans solution de rechange. N'oubliez pas que lorsque vous supprimez :focus, cela diminue la convivialité et rend l’expérience inaccessible aux utilisateurs de clavier.

Dans l’état actuel du Web, le navigateur n’indique plus visiblement le focus autour de divers éléments lorsqu’ils ont le focus. Le navigateur utilise à la place diverses heuristiques pour déterminer quand cela pourrait aider l'utilisateur, en fournissant en retour une bague de mise au point. Selon Khan Academy, une heuristique est, "une technique qui guide un algorithme pour trouver les bons choix."

Cela signifie que le navigateur peut détecter si l'utilisateur interagit ou non avec l'expérience à partir d'un clavier, d'une souris ou d'un trackpad et, en fonction de ce type d'entrée, il ajoute ou supprime la bague de mise au point. L'exemple de cet article met en évidence l'interaction d'entrée.

Dans les premiers jours de :focus-visible nous utilisions un polyremplissage pour gérer la bague de mise au point créée par Alice Boxhall et Brian Kardell, Mozilla a également sorti sa propre pseudo-classe, :moz-focusring, avant la spécification officielle. Si vous souhaitez en savoir plus sur les débuts de la bague de mise au point, consultez Moulages A11y avec Rob Dodson.

Importance de la concentration

Il existe de nombreuses raisons pour lesquelles la concentration est importante dans votre candidature. D’une part, comme je l’ai dit ci-dessus, nous, en tant qu’ambassadeurs du Web, devons nous assurer que nous offrons la meilleure expérience accessible possible. Nous ne voulons pas qu'aucun de nos utilisateurs devine où ils se trouvent pendant qu'ils parcourent l'expérience.

Un exemple qui me vient toujours à l’esprit est celui Site Web de Deux frères aveugles. Si vous allez sur le site Web et cliquez/appuyez (cela fonctionne sur mobile), l'œil fermé dans le coin inférieur gauche, vous verrez l'œil ouvert et une simulation commence. Les deux frères, Bradford et Bryan Manning, ont reçu un diagnostic de maladie de Stargardt à un jeune âge. La maladie de Stargardt est une forme de dégénérescence maculaire de l'œil. Au fil du temps, les deux frères deviendront complètement aveugles. Visitez le site et cliquez sur l'œil pour voir comment ils voient.

Si vous étiez à leur place et que vous deviez naviguer dans une page, vous voudriez vous assurer que vous saviez exactement où vous étiez tout au long de l'expérience. Une bague de mise au point vous donne ce pouvoir.

Démo

La démo ci-dessous montre comment :focus-visible fonctionne lorsqu'il est ajouté à votre CSS. La première partie de la vidéo montre l'expérience lors de la navigation avec une souris, la seconde montre la navigation avec uniquement mon clavier. Je me suis également enregistré pour montrer que je suis passé de l'utilisation de ma souris à mon clavier.

Le navigateur prédit quoi faire avec la bague de mise au point en fonction de ma saisie (clavier/souris), puis ajoute une bague de mise au point à ces éléments. Dans ce cas, lorsque je navigue dans cet exemple avec le clavier, tout reçoit le focus. Lorsque vous utilisez la souris, seule l'entrée obtient le focus et pas les boutons. Si vous supprimez :focus-visible, le navigateur appliquera la bague de mise au point par défaut.

Le code ci-dessous s'applique :focus-visible aux éléments focalisables.

:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

Si vous souhaitez préciser le label ou le bouton pour recevoir :focus-visible il suffit de précéder la classe avec input or button respectivement.

button:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

/*** OR ***/

input:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

Assistance

Si le navigateur ne prend pas en charge :focus-visible vous pouvez disposer d'une solution de secours pour gérer l'interaction. Le code ci-dessous provient du Aire de jeux MDN. Vous pouvez utiliser le @les soutiens en règle générale ou « requête de fonctionnalité » pour vérifier le support. Une chose à garder à l’esprit, la règle doit être placée en haut du code ou imbriquée dans un autre groupe de règles.

<button class="button with-fallback" type="button">Button with fallback</button>
<button class="button without-fallback" type="button">Button without fallback</button>

.button {
  margin: 10px;
  border: 2px solid darkgray;
  border-radius: 4px;
}

.button:focus-visible {
  /* Draw the focus when :focus-visible is supported */
  outline: 3px solid deepskyblue;
  outline-offset: 3px;
}

@supports not selector(:focus-visible) {
  .button.with-fallback:focus {
    /* Fallback for browsers without :focus-visible support */
    outline: 3px solid deepskyblue;
    outline-offset: 3px;
  }
}

Autres problèmes d'accessibilité

Problèmes d'accessibilité à garder à l'esprit lors de l'élaboration de votre expérience :

• Assurez-vous que les couleurs que vous choisissez pour votre indicateur de mise au point, le cas échéant, sont toujours accessibles conformément aux informations documentées dans le WCAG 2.2 Contraste non textuel (niveau AA)
• La surcharge cognitive peut provoquer une détresse chez l'utilisateur. Assurez-vous de garder les styles cohérents sur les différents éléments interactifs

Support du navigateur

Liens

• Contenu propulsé par le référencement et distribution de relations publiques. Soyez amplifié aujourd'hui.
• PlatoData.Network Ai générative verticale. Autonomisez-vous. Accéder ici.
• PlatoAiStream. Intelligence Web3. Connaissance Amplifiée. Accéder ici.
• PlatonESG. Carbone, Technologie propre, Énergie, Environnement, Solaire, La gestion des déchets. Accéder ici.
• PlatoHealth. Veille biotechnologique et essais cliniques. Accéder ici.
• La source: https://css-tricks.com/managing-user-focus-with-focus-visible/