J'ai soudainement découvert un problème très étrange aujourd'hui. Certains sites Web axés sur les standards CSS, XHTML, Web 2.0 et Web discutent de la façon de supprimer le cadre en pointillés (contour) autour du lien hypertexte lorsque vous cliquez sur la souris, comme outline:none ou outline: 0 . Peut-être que parfois l'apparence par défaut d'un cadre en pointillés (contour) affectera l'apparence, mais son existence doit avoir sa raison : c'est-à-dire améliorer la convivialité du site Web, en particulier pour apporter une grande commodité aux personnes qui utilisent la navigation au clavier. Pendant que nous discutons de sémantique et de facilité d’utilisation, nous faisons toujours des choses qui vont à l’encontre de celles-ci. Définissez l'arrière-plan du lien sur rouge lorsque le focus est déclenché, etc. Bien sûr, vous pouvez concevoir des styles plus complexes selon vos besoins, et vous pouvez également définir le focus et survoler le même style. Mais il y a une chose, vous ne pouvez pas bloquer le mécanisme de déclenchement de la mise au point.
1. La boîte en pointillés (contour) facilite la navigation au clavier
J'ai une habitude lorsque je lis des articles : j'utilise rarement la souris et je m'appuie essentiellement sur le clavier. Les plus utilisées sont la touche Tab, PageUp, PageDown, Enter et les quatre touches de direction. La touche Tab est utilisée pour naviguer dans les hyperliens. Vous pouvez basculer entre différents hyperliens. Après avoir sélectionné un lien, appuyez directement sur Entrée (vous pouvez maintenant utiliser la touche Tab pour voir l'effet sur cette page). Lorsque la touche Tab se concentre sur un lien, un cadre en pointillés (contour) apparaîtra autour du lien, indiquant que le lien est actif et accessible après confirmation. Bien sûr, beaucoup de gens diront : c’est tellement pratique d’utiliser une souris, pourquoi utiliser un clavier ? Ici, je voudrais donner quelques raisons.
On dit que l’un des critères pour être un véritable maître en informatique est de pouvoir effectuer toutes les opérations sans utiliser de souris. Parfois, lorsque je lis un article, tenir un café dans ma main droite et taper sur le clavier avec ma main gauche n'affecte pas ma lecture.
Les besoins particuliers de groupes particuliers de personnes. Votre site Web n'est pas uniquement destiné à vous. Vous ne pouvez pas influencer la façon dont les autres utilisent votre site Web.
Nouveau style lors de l'utilisation de la touche Tab pour se concentrer sur un lien (cela peut varier selon les navigateurs, mais chaque navigateur a cette fonction, ce qui montre sa nécessité)
2. Pire expérience utilisateur
Utilisez outline:none ou outline:0 pour supprimer le cadre extérieur en pointillés. Bien qu'aucun changement ne soit visible à partir du lien, au moins les informations du lien sont visibles à partir de la barre d'état. Mais une expérience utilisateur encore pire consiste à utiliser l'événement onfocus de JavsScript. Lorsque l'utilisateur se concentre sur un lien, il annule immédiatement le focus, ce qui signifie que vous ne pouvez jamais vous concentrer sur ce lien hypertexte, donc si vous n'utilisez pas la souris, vous pouvez absolument le faire. 't. Visitez n'importe quel lien sur cette page. Certains experts ont développé des méthodes pour utiliser JQuery pour supprimer le contour. Si vous « supprimez les lignes pointillées des liens » sur Google, vous obtiendrez des dizaines de milliers de résultats. Il semble que de nombreuses personnes en ont besoin et font des recherches. Mais il a violé le principe de facilité d’utilisation du Web et n’a pas du tout pris en compte l’expérience utilisateur.
3. Options alternatives
Si vous pensez vraiment que l'apparence d'un cadre en pointillé affectera l'apparence, vous pouvez certainement avoir un meilleur choix. Il s’agit d’utiliser la pseudo-classe :focus en CSS. Par exemple en utilisant
a: focus { couleur d'arrière-plan: #f00 }
/*ou*/
a: survol, a: focus {text-decoration: underline;}
Ne retirez donc jamais le cadre en pointillés autour du lien hypertexte, du moins pour ne pas bloquer le déclenchement du focus.