Lien "aller au contenu" et "aller au menu"
Une bonne pratique pour améliorer l'accessibilité d'un site est d'ajouter un lien en haut de chaque page pour aller directement à la zone de contenu principal et un lien pour accéder directement au menu de navigation.
L'objectif est de fournir un mécanisme qui permet de passer les différents blocs de contenu qui se situe entre le début de la page et la zone de contenu principale (En-tête, menu, ...).
Ces liens doivent donner le focus au début de la zone de contenu principale (aller au contenu) ou au début du menu (aller au menu). Bien entendu, si vous avez plusieurs autres zone de contenu importante, il est important de compléter la liste des liens d'évitements.
Ils sont utiles pour :
- les personnes se servant du clavier pour naviguer par choix ou par obligation de manière définitive ou temporaire
- les utilisateurs qui utilise des loupes d'écrans pour déplacer rapidement la loupe
"Pas de bras, pas de chocolat !"
Pour vous montrez que ces quelques liens sont d'un apport non négligeable, je vais prendre l'exemple d'un site de commerce en ligne à grande fréquentation. Pour acheter un produit, il faut 145 tabulations avec la présence ces liens. Sans, il en faut 1548 tabulations soit plus de 10 fois plus, autrement dit personne n'arrive au paiement en naviguant au clavier. Ce sont des acheteurs potentiels perdus.
Implémentation et Intégration
Il est important que ces liens soient visibles, sans quoi leurs utilité sera toute relative notamment pour les utilisateurs de loupe d'écran. C'est l'une des raisons que ces liens doivent intégré dès la réalisation de la maquette graphique, sinon on risque fort de voir ces liens comme une verrue dans l'identité graphique du site Web.
Par ailleurs, il existe aujourd'hui une convention plus ou moins établit concernant les raccourcis clavier que doivent avoir une page. On peut ajouter le raccourcis clavier "s"
directement sur le lien "aller au contenu". On aura donc un code du genre :
Technique WCAG :
Commentaires
bgouban
Certains diront que cela peut nuire à leur design ou interface : ceux ci doivent noter qu'il est possible de rendre ce menu invisible grace à une "position:absolute" et une marge négative (en gros, le menu accessibilité est à 8000 pixels au dessus de la page).
Du coup, les utilisateurs valides ne verront rien, tandis que les utilisateurs de screenreaders pourront bénéficier de cette fonctionnalité.
Merci pour la piqure de rappel @truffo et bonne continuation ;)
Ajouter un commentaire