web-dev-qa-db-fra.com

États des liens - le focus clavier doit-il être répliqué en vol stationnaire ou actif

Je me rends compte que cette question peut être assez spécifique au niveau CSS, mais elle ressemble plus à une question UX qu'à une question StackOverflow.

Ma question est de savoir si les liens doivent avoir un état: focus qui reproduit leur: hover ou leur: active? J'ai lu quelques autres sites qui expliquent leurs usages (et je les comprends clairement), mais aucun ne semble parler de l'UX des variantes. Je n'ai pas encore trouvé de question ici qui résout correctement ce problème.

La façon dont je le vois est que: le survol est une indication des utilisateurs de la souris qu'il y a une certaine interactivité, et que: le focus est le même mais pour un utilisateur du clavier; alors que: active montre qu'une interaction a commencé. Que ce soit en cliquant ou en appuyant sur Entrée (bien que ce dernier soit presque certainement instantané, il pourrait donc ne pas être perçu: état actif).

Est-ce la bonne façon de le voir, et si c'est le cas, ce CSS est la bonne façon de l'aborder:

a {
  color:blue;
  text-decoration:underline;
}
a:hover,
a:focus {
  color:red;
}
a:focus {
  outline: dotted thin;
  // This is a slight Tweak to browsers' standard :focus outline
}
a:active {
  color:green;
}

Je serais intéressé de savoir ce que les gens ressentaient et s'il y avait des exemples où les gens ont examiné les mérites des :hover, :focus & :active et le :hover & :active, :focus approches, et qu'ils ont trouvé pour offrir une meilleure expérience utilisateur.

Merci!

interaction-designaccessibilityhyperlinkshoverfocus
2
Rob Sterlini

Vous êtes déjà assez précis, oui. Si vous avez un état :hover Distinct et évident, vous devez le répliquer pour votre :focus.

Le :focus Est cependant le plus important, alors assurez-vous qu'il existe dans un style clair. Gardez à l'esprit qu'avec l'état de survol, l'utilisateur suit (probablement) visuellement le curseur, il est donc probable qu'il regarde déjà l'élément qui a un état de survol, si souvent les concepteurs utiliseront un effet plus subtil. Cependant, avec :focus, Il se peut que l'utilisateur ne regarde nulle part en particulier sur l'écran, vous devez donc pouvoir attirer son attention sur celui-ci. Cela peut signifier avoir un :focus Et :hover Différent. Mais ce n'est pas vraiment un problème, à moins que votre département de style/image de marque ait un problème avec les utilisateurs de clavier pouvant utiliser facilement le site!

En ce qui concerne l'état :active; cela dépendra si vous avez un état actif sur mesure pour les attributs. je pense que les anciennes versions de IE ne reconnaîtront que l'état :active (Donc si vous avez un :hover Et :focus Configuré mais pas de :active, Il ignorera tout et n'affichera rien) donc dans ces cas, je répliquerais le statut pour survoler, concentrer et activer. Mais si vous avez un :active, Il n'est donc pas nécessaire que l'état de mise au point corresponde à celui-ci.

2
JonW