Les styles: focus et: hover doivent-ils être identiques ou distincts?
Je suis en train de redéfinir un guide de style inter-applications, et je veux m'assurer que nous tenons compte de l'accessibilité dans la conception, y compris les rapports de contraste, les tailles de texte et les états de focus. Un problème qui me dérange est de savoir si l'état: focus pour les boutons, les entrées et autres doit être le même que l'état mouse: hover, ou s'il doit être distinct pour pouvoir être superposés. J'aimerais avoir des raisons pour lesquelles ils devraient ou ne devraient pas être séparés.
L'état de mise au point doit être plus évident que l'état de vol stationnaire
Une souris sur ou :hover l'état est une interaction plus directe (c'est-à-dire que l'utilisateur contrôle le curseur de la souris directement sur le bouton sur lequel il souhaite cliquer)
Le :focus state, d'autre part, nécessite une analyse séparée de la page entière afin de déterminer quel composant est actuellement ciblé. Par exemple, un utilisateur peut appuyer plusieurs fois sur la touche TAB jusqu'à ce qu'un rectangle de focus atterrisse sur un lien, un bouton ou une autre entrée auquel il souhaite accéder ou "cliquer" en appuyant sur la touche ENTER. L'élément qui a actuellement le focus doit être évident pour que l'utilisateur sache quand arrêter d'appuyer sur la touche TAB et peut interagir en toute confiance avec la cible focalisée. Il est courant de placer une sorte de rectangle autour d'un bouton focalisé qui est facile à repérer pour l'utilisateur.
Dans le cas d'un survol, le curseur de la souris lui-même remplit ce rôle, donc un rectangle de focus n'est pas requis.
Voici un exemple montrant différents états de bouton dans Gmail ...
Honnêtement, tant que votre état de vol stationnaire et votre état de mise au point montrent très clairement exactement quel élément aura une action, je ne vois aucune raison de les styliser séparément. : le focus est essentiellement un survol du clavier.
La réponse précédente est correcte en disant qu'un élément: focus doit contenir une boîte autour, mais tant que la propriété de contour n'est pas masquée, cela ne devrait pas être un problème.
Le seul moment où il peut être utile de styliser séparément est si vous vous concentrez automatiquement sur des éléments sans que l'utilisateur n'interagisse directement avec eux.
Tous les états visuels peuvent être combinés dans une matrice. En effet, le focus nécessite plus de distinction que le survol, mais peut également être combiné lorsque vous survolez votre élément focalisé.
Ces états peuvent également être combinés à des éléments non sélectionnés et sélectionnés.
