Catégories
accessibilité Technologie

WCAG : tabindex, rendre pratique la navigation avec le clavier

Lorsque l’on rempli un formulaire d’une page web (ou d’une application informatique quelconque) on peut passer au champs suivant avec la touche tab. Parfois, cette navigation n’est pas logique et l’on est obligé de recourir à sa souris.

Pour rendre cette navigation logique, on peut préciser l’ordre avec l’attribut tabindex à qui on donne un nombre entier en paramètre.

L’utilisation de tabindex cumuler à la définition en CSS du sélecteur « :focus » rend la navigation encore plus explicite : ce sélecteur permet d’habiller l’élément qui a est actif, c’est à dire le champs ou se trouve le curseur, le bouton ou le lien sur lequel vous vous trouvez.

Vous pouvez retrouver les détails de ces techniques sur le site du W3C.

panorama valberg
panorama valberg

Catégories
accessibilité Technologie

Pourquoi il ne faut pas utiliser l'attribue target=_blank

Mimosa
Mimosa

A la définition strict de XHTML, l’attribue target de la balise <a> n’existe pas. Et pourtant c’est un attribue qui est utilisé en permanence, pour rappel, il permet d’ouvrir la cible du lien dans une nouvelle fenêtre ou un nouvel onglet selon le navigateur web utilisé et son paramétrage.

Pourquoi cette attribut a-t-il été abandonnée ? Il y a plusieurs raison, mais restons sur ce principe : le navigateur appartient à l’internaute et c’est à celui-ci de décider ce qu’il veut faire avec un lien, c’est à lui de décider si il veut l’ouvrir dans la fenêtre courante et ainsi quitter la page en cours de consultation, c’est à lui de décider s’il veut l’ouvrir dans une nouvelle fenêtre…

Pourquoi donner tant de liberté à l’internaute ? Parceque de toute façon vous ne connaissez pas sont niveau de maitrise de son ordinateur, je m’explique :

  • S’il n’est pas à l’aise avec les fenêtres ou onglets multiple, il aura de toute manière l’impression de quitter la page en cours et l’ouverture d’une nouvelle ne fera que « polluer » son ordinateur en en utilisant des ressources pour rien…
  • S’il l’utilisateur est à l’aise avec ces principes multitâches de l’ordinateur, vous inquiétez pas pour lui : il saura ce qu’il veut faire comment il veut le faire et comment revenir en arrière s’il en a envie.

Bref, l’endroit ou s’ouvre le lien (ce que défini l’attribue target), ne regarde que l’internaute et jamais le concepteur du site.

La seule exception valable (à mes yeux) à la règle est lors de l’ouverture de fichiers qui ne s’ouvre pas dans le navigateur, un PDF par exemple, dans ce cas là, ça peut éviter des désagrément à certaine personnes.

Pour information, sous Firefox, un clic sur le bouton du milieur de la sourie (la molette) permet d’ouvrir le lien dans un nouvel onglet.

Catégories
accessibilité Technologie

des champs accessibles avec label

Juste pour prêcher la bonne paroles aux développeurs web, voici un focus sur une balise HTML trop souvent oublié :<label>

Comme son nom l’indique, cette balise sert à étiqueté un champs de formulaire, c’est à dire à créer un lien entre le champs et le sens de ce champs : le texte qu’il le décris.

A quoi ça sert ?

  1. Souvent Toujours, la relation est évidente car le texte se trouve juste à côté, en tout cas graphiquement ce que ne voit pas une personne atteinte de handicap visuel !
  2. Pour tout ceux qui possède un handicap moteur, c’est à dire tout ceux qui n’ont pas joué à Quake et autre FPS, atteindre un bouton radio en moins d’une seconde est véritable défit ! La balise <label> permet de cliquer sur le texte accompagnant pour cocher ou non un bouton radio ou une case à coché, ce qui va leur simplifier la vie !

Comment ça fonctionne :

démo

<label for="yes" title="Oui">Oui</label>
<input type="radio" id="yes" name="test" />
<label for="no" title="Non">Non</label>
<input type="radio" id="no" name="test" />
l1040137.jpg
Trace blanche dans un ciel bleu

Cela fait longtemps que j’utilise cette balise qui permet d’améliorer considérablement l’ergonomie d’une application sans pour autant être difficile à mettre en place et sans nécessiter l’approbation de qui que ce soit.