visibilité du focus

Rendez absolument vos liens et champs de formulaires visibles pour ceux qui ne peuvent
pas utiliser la souris !
téléchargez la transcription : http://www.tanguy-loheac.com/docs/transcription_visibilite_focus.pdf

Ce sur quoi je voudrais attirer votre attention aujourd'hui, c'est

la visibilité du focus

lorsque on utilise la touche tabulation.

En effet, il y a de nombreuses personnes

qui sont handicapés moteur

qui ne peuvent pas utiliser la souris

ou même vous lorsque votre souris sans fil tombe en panne

hé bien, on est bien content

de pouvoir utiliser la touche tabulation

et de savoir sur quel élément on se trouve

dans une page Web.

En effet, lorsque on utilise la touche tabulation

par défaut, si on ne fait rien,

chaque élément, comme les liens ou les champs de formulaire

va être visible.

L'élément qui prend le focus sera visible.

Là, si je suis sur "Actualités", "Blog",

"Contact", "Mentions légales", "Civilité" dans le champ de formulaire,

voilà.

Donc, à chaque fois que je passe d'un élément à l'autre

avec la touche Tab,

je dois pouvoir voir le focus.

C'est vraiment ce qu'on doit pouvoir voir sur chaque site.

Le problème, c'est qu'il y a une pratique aujourd'hui

qui consiste à utiliser des feuilles de style de réinitialisation,

qui vont mettre toutes les valeurs à zéro,

qui vont remettre toutes les valeurs à zéro,

pour se faciliter la vie et être compatible avec tous les navigateurs.

Ici je vous ai mis un extrait de code

où l'on a appliqué la propriété outline

O-U-T-L-I-N-E

c'est celle qui permet de gérer justement cette visibilité du focus,

et cette propriété vient d'être appliquée ici à tous les éléments de type a, form, input, textarea, select, button,

donc tous les éléments de formulaire,

et même des éléments qui peuvent les contenir, comme ul, ol, li.

Et ce qu'on a fait, c'est qu'on a mis "outline-style", donc le style à "none",

"outline-color" à "invert", on a inversé la couleur,

et "outline-width", la largeur, à zéro.

Et ça c'est absolument dramatique, comme on va le voir sur la page suivante :

je reprends exactement la même page,

et ici, j'appuie sur tabulation,

et là, vous ne voyez pas du tout où je me trouve !

C'est vraiment embêtant, parce

une personne qui ne peut pas se servir de la souris,

sera incapable de naviguer sur votre site,

si on fait ça.

Donc VRAIMENT,

si vous utilisez une CSS de réinitialisation, ce qui n'est pas interdit,

faites attention à ce que l'outline ne soit pas, lui, réinitialisé, inhibé.

On peut même, si on est consciencieux,

renforcer cette visibilité.

Ici par exemple, je fais tabulation, et on voit encore mieux

où je suis, car j'ai utilisé les pseudos-sélecteurs "focus" et "active"

pour renforcer cette visibilité par un fond différent,

et un entourage différent,

pour renforcer justement cette visibilité

lorsque j'utilise la touche tabulation.

Voilà, j'espère que vous avez saisi le problème,

si vous avez des questions, n'hésitez pas à les poser sur la page de commentaires.

Je tiens à remercier pour la réalisation de cette vidéo,

pour l'aide qu'il m'a apporté, notamment

sur l'établissement de la CSS

Nicolas Hoffmann, et vous trouverez à ce sujet sur le site Openweb.eu.org

un article qui complète cette vidéo

et qui vous explique en détail

le procédé.