Est-il préférable pour l'accessibilité du site Web d'avoir le menu avant ou après le contenu
J'ai vu deux approches de l'ordre de balisage du menu/contenu en fonction de l'accessibilité pour les utilisateurs du clavier uniquement:
- Menu d'abord, puis contenu avec un lien vers le contenu en haut
- Contenu d'abord puis menu avec un lien de navigation en haut
L'une de ces approches est-elle meilleure que l'autre ou sont-elles toutes les deux équivalentes?
Si l'un est meilleur que l'autre, pourquoi est-il meilleur?
Mettez un "Skip Navigation" ou "Skip to main content" Liens premier élément avant chaque chose au-dessus de vos pages. Ainsi, l'utilisateur du clavier décidera de laisser le lecteur d'écran parcourir toute la navigation et d'autres choses ou simplement sauter pour accéder au contenu principal. vous pouvez donc utiliser la classe visuellement masquée pour rendre le lien invisible pour les personnes voyantes. http://webaim.org/techniques/css/invisiblecontent/
Cet article y répond très bien - [WEB AIM - Skip Navigation]
Quelques points clés:
Fournir des liens visibles en haut de la page
L'essentiel est de s'assurer que le lien est l'un des premiers éléments que les lecteurs d'écran entendent et auquel les utilisateurs du clavier accèdent. Sinon, les utilisateurs peuvent ne pas se rendre compte qu'il existe un lien de "saut de navigation" et perdre du temps à essayer de brouiller les liens externes.
Cette méthode est accessible, cependant, elle perturbe visuellement la page car certains utilisateurs peuvent être déroutés.
Fournir des liens visibles ailleurs sur la page
Un utilisateur avec un lecteur d'écran est confronté à une page de 25 éléments de navigation, le lien de saut de contenu est au milieu et c'est la même chose sur chaque page, l'utilisateur sera frustré et supposera même qu'il n'y a pas d'options d'accessibilité sur le site et partir. Évitez ça.
Rendre le lien invisible
Il existe plusieurs méthodes pour ce faire, mais il est essentiel que le lien soit toujours utilisable par tous les utilisateurs de clavier, en particulier les utilisateurs de clavier voyants. Cela signifie que le lien doit être masqué visuellement par défaut, mais qu'il doit devenir visible lorsqu'il reçoit le focus clavier. Certaines techniques, telles que masquer le contenu de manière permanente avec CSS, rendre le lien de la même couleur que l'arrière-plan, redimensionner le lien à 0 pixel ou le placer sur une image transparente à un pixel ne répondent pas à ces exigences importantes.
Rendre un lien invisible a ses inconvénients, les utilisateurs qui passent par la navigation peuvent MANQUER le lien. Un excellent moyen de contourner ce problème consiste à utiliser les effets de transition dans CSS3 et à faire apparaître le lien, puis à le faire disparaître - de cette façon, l'utilisateur voit le lien, mais cela ne perturbe pas l'affichage visuel de la page.
[~ # ~] réponse [~ # ~] Gardez le lien en haut. Cela doit être la première chose disponible sur la page, car les lecteurs d'écran doivent être en mesure de détecter ce lien, vous devez également prendre en compte les utilisateurs qui ne sont pas malvoyants et qui pourraient trouver le lien déroutant ou perturbant le flux de la page - ce est résolu en rendant le lien invisible.
Lisez ces articles, cela vous éclairera beaucoup sur la question. Il s'agit d'une excellente ressource, car elle offre également des alternatives aux liens "Ignorer la navigation".
Ce que j'ai appris de la conception Web au cours de mes trois années à l'université, c'est que la navigation globale vient en premier, la navigation locale vient en deuxième, le contenu en troisième et les liens associés en quatrième.
Cela signifie que la première option, un lien de saut vers le contenu en haut, est la plus courante et la plus utilisée. De mon point de vue, c'est une convention tacite.