[Résolu] Pertinence d'indications HTML spécifiques pour UA non visuel

Bonjour,

En reprenant le code d'un prestaire, je suis tombée sur des morceaux de code qui me laissent perplexe :

<span class="hidden">Accès rapides :</span>
<ul>
  <li>...</li>
</ul>
<span class="hidden">Fin des accès rapides.</span>

Dans cet exemple, il s'agit d'indiquer à un non voyant qu'il se trouve devant les liens d'évitement.

<h2><span>Recherche interne</span></h2>				
<form action="" method="post">
...
</form>

<h2><span>Navigation principale</span></h2>
<ul>
  <li>...</li>
</ul>

Dans cet exemple, on rajoute des titres de niveau 2 masqués sur les feuilles de style de type screen. Cela est censé rajouter plus de structure au document.

Outre le fait que du coup les titres de niveau trois (qui eux ne sont pas masqués) sont alors orphelins, je ne vois pas vraiment l'intérêt de cette méthode.

Est-ce que tout est à jeter ou y a-t-il un intérêt quelquonque à laisser ces indications en place ?
Modifié par Corinne S. (21 Jan 2010 - 15:11)

Salut Corinne,
le premier (Accès rapide) ne fera que rajouter de la confusion puisque ce n'est pas un titre,
fin d'accès rapide est inutile, drôle de méthode d'ailleurs.
Et le deuxième (autant masquer le h2 directement) ne sera pas d'une grande utilité à partir du moment ou le formulaire de recherche est implémenté comme il faut (avec un label ou un title sur l'input). Bref ce sont à mon sens des ajouts superflus.
Modifié par Hermann (21 Jan 2010 - 14:35)

Un utilisateur non-voyant n'a pas besoin qu'on lui indique en toutes lettres (ou plutôt de vive voix ou en caractères braille) qu'il a affaire à des liens d'évitement. Je dirai même plus : la plupart du temps, il consulte une page Web de façon non linéaire, le lecteur d'écran qu'il utilise lui permettant de lister l'ensemble des liens et l'ensemble des titres de section et de naviguer titre par titre, liste par liste, lien par lien. Autrement dit, à partir du moment où la page est bien accessible, il trouvera l'information recherchée sans passer par les liens d'évitement, et parfois plus rapidement qu'un utilisateur qui jouit de la vue.

Bref, les span de classe hidden et les deux h2 sont à supprimer : ils sont inutiles. À noter que s'ils sont masqués au moyen d'un display: none, non seulement les lecteurs d'écran ne les restituent pas, mais les robots des moteurs de recherche risquent de l'apprécier très modérément.
Modifié par Victor BRITO (21 Jan 2010 - 18:19)

Victor BRITO a écrit :
Un utilisateur non-voyant n'a pas besoin qu'on lui indique en toutes lettres (ou plutôt de vive voix ou en caractères braille) qu'il a affaire à des liens d'évitement. Je dirai même plus : la plupart du temps, il consulte une page Web de façon non linéaire, le lecteur d'écran qu'il utilise lui permettant de lister l'ensemble des liens et l'ensemble des titres de section et e naviguer titre par titre, liste par liste, lien par lien. Autrement dit, à partir du moment où la page est bien accessible, il trouvera l'information recherchée sans passer par les liens d'évitement, et parfois plus rapidement qu'un utilisateur qui jouit de la vue.

+1

Victor BRITO a écrit :

À noter que s'ils sont masqués au moyen d'un display: none, non seulement les lecteurs d'écran ne les restituent pas, mais les robots des moteurs de recherche risquent de l'apprécier très modérément.

Sauf exception: le cas de figure le plus courant, à savoir un span masqué en display:none dans un lien est lu par la (ou les) dernière version de JAWS (et window eyes avec des conditions supplémentaires...) mais pas à ma connaissance par les autres lecteurs d'écrans; mais ça ne change rien au fait qu'il faille éviter le display:none, JAWS n'a d'ailleurs pas ici un comportement standard.
Modifié par Hermann (21 Jan 2010 - 15:14)

C'est bien ce qui me semblait.
Merci à vous deux d'avoir confirmé mon sentiment.

Rectification nécessaire...

Si le span d'annonce des liens d'accès rapide est effectivement inutile, le cas des titres masqués va dépendre du contexte et du contenu.

Les titres masqués font partie des techniques adoptées actuellement par WCAG2.0, et peuvent être pertinents dans le cas de navigations complexes (navigation principale et secondaire, navigation contextuelle, formulaire de recherche perdu dans la masse de la navigation, etc.)

Victor BRITO a écrit :
Un utilisateur non-voyant [...] Je dirai même plus : la plupart du temps, il consulte une page Web de façon non linéaire, le lecteur d'écran qu'il utilise lui permettant de lister l'ensemble des liens et l'ensemble des titres de section et de naviguer titre par titre, liste par liste, lien par lien.

Attention à ne pas réduire la consultation via une synthèse vocale au seul cas des lecteurs d'écrans. Des synthèses vocales sont également présentes dans les loupes d'écran. La consultation linéaire y joue alors un rôle plus important.

Laurent Denis a écrit :
Rectification nécessaire...

Les titres masqués font partie des techniques adoptées actuellement par WCAG2.0, et peuvent être pertinents dans le cas de navigations complexes (navigation principale et secondaire, navigation contextuelle, formulaire de recherche perdu dans la masse de la navigation, etc.)

Pour compléter la remarque de Laurent : ne pas faire l'erreur de considérer la simple présence de menus secondaires comme un indice suffisant de "complexité"

La raison est que l'utilisation de titres cachés peut avoir des conséquences négatives pour des dispositifs de navigation au clavier de titre en titre qui sont particulièrement utiles pour les utilisateurs ne pouvant pas utiliser de souris.

En précisant que ces utilisateurs de la navigation au clavier sont ceux pour lesquels nous sommes particulièrement démunis et pour lesquels la navigation sur un site peut devenir rapidement ingérable bien que "possible".

<edit> Pour bien comprendre la problématique, très triviale, de la navigation au clavier voici un petit jeu : commander le premier livre disponible dans la section jeunesse/section livre à partir de la page d'accueil de la fnac sans utiliser votre souris.
Ca nous donne entre l'affichage de la page d'accueil et la saisie de la commande : 8 clic de souris contre plus de 400 actions clavier. Illustration parfaite d'un truc "possible" ingérable.</edit>

De manière générale : l'utilisation d'élément cachés est à ranger dans la catégorie des "optimisations" et chaque fois qu'on optimise pour un utilisateur on prends le risque de compliquer exagérément la vie d'un autre utilisateur.

JP
Modifié par jpv (22 Jan 2010 - 10:17)

Laurent Denis a écrit :
Si le span d'annonce des liens d'accès rapide est effectivement inutile, le cas des titres masqués va dépendre du contexte et du contenu.

Dans ce cas-là, le <span> est effectivement inutile : le visibility:hidden s'appliquant au <h2>.

De plus, la complexité de la page ne me semble pas nécessiter de titre masqué.
Il n'y a qu'une seule navigation (en bas de page) et un seul formulaire de recherche placé en haut du code.

jpv a écrit :

De manière générale : l'utilisation d'élément cachés est à ranger dans la catégorie des "optimisations" et chaque fois qu'on optimise pour un utilisateur on prends le risque de compliquer exagérément la vie d'un autre utilisateur.

Sur le terrain utilisateur immédiat, oui. Sur le terrain agents utilisateurs, en revanche, c'est un bon exemple des dispositifs d'accessibilité et de l'implémentation UAG à améliorer : rendre visible dans l'interface du navigateur un contenu masqué, lors d'un accès clavier.

Laurent Denis a écrit :
Sur le terrain agents utilisateurs, en revanche, c'est un bon exemple des dispositifs d'accessibilité et de l'implémentation UAG à améliorer : rendre visible dans l'interface du navigateur un contenu masqué, lors d'un accès clavier.

Comme les liens d'évitement du site de Groupama.

En tant qu'utilisateur de lecteur d'écran, je confirme ce qui a été dit : les indications du genre début de la liste de liens / fin de la liste de liens ne servent strictement à rien. En revanche, les titres supplémentaires cachés peuvent aider à la navigation si la page est suffisament complexe.