Une page bien structurée (titres et listes) et une barre de navigation accessible

• • La page d'accueil dispose d'une structuration particulièrement riche

    . Elle est profonde (on va jusqu'aux balises de niveau 3), la hiérarchie est bien respectée (pas de "trous") et elle fait sens fonctionnellement parlant. Pour l'utilisateur non voyant, ce titrage va être une aide précieuse à la compréhension de la page (ce titrage sera exploité tel le sommaire de la page) et à la navigation (on peut naviguer sur la liste des titres comme sur des d'ancres et accéder à directement à l'information qui nous intéresse);

  • La page fait une bonne utilisation des listes ordonnées

    : le plan du site de bas de page et la barre de navigation horizontale.

• Une barre de navigation accessible

  Bien que l'image de la barre du menu horizontal soit appelée depuis la CSS, le contenu textuel des images qui portent le nom de chaque élément du menu reste accessible.

  La méthode employée est classique :

  • chaque balise d'élément de la liste appelle la même image de fond, la barre de menu complète;
  • chaque élément du menu n'affiche que la partie souhaitée de la barre du menu faisant apparaitre le texte gravé du menu qui l'intéresse
  • dans chaque élément de liste, on a une balise span dans un lien hypertexte;
  • dans le span, le texte alternatif de la partie de l'image affichée : on a simulé le texte alternatif d'une image appelée depuis la CSS;
  • le texte est caché en étant positionné en dehors de la partie visible de l'écran (technique de hors cadre CSS).

  Alors ce menu n'est pas complètement accessible car sa navigation au clavier n'est pas opérationnelle. Mais un menu alternatif et accessible (le même mais déplié !) est prévu en bas de page.

Des éléments moyennement accessibles : les liens d'accès rapide et les formulaires

• Les liens d'accès rapide

  Il est remarquable que des liens d'accès rapide soient présents sur cette page : un lien pour aller directement au contenu de la page et un autre pour aller au plan du site codé dans le pied de page. Ces liens d'accès rapide sont le premier contenu de la page (en dehors du titre) !

  Mais, sa mise en œuvre reste incomplète : ils ne sont pas visibles tant qu'on n'a pas désactivé les CSS. Les internautes victimes de problèmes moteur ne pourront donc pas en profiter. Ce sont pourtant les premiers bénéficiaires de ce type de mécanisme (les utilisateurs de synthèse vocale, peuvent, à loisir, passer les listes de liens).

• Les formulaires

  La page en propose deux :

  1. le premier formulaire qui semble proposer un abonnement à la newsletter du site;
  2. et un deuxième qui est un moteur de recherche classique (un champ de saisie plus un bouton de soumission).

  Pour indiquer la fonction de chaque champ, on a utilisé l'attribut title. Pourquoi pas. Mais, je ne peux m'empêcher de rappeler qu'il est toujours plus robuste d'utiliser la balise label, le title risquant de ne pas être lu, puisque sa lecture par une synthèse vocale reste facultatif (car au choix de l'utilisateur).

  Les boutons de soumission ont un intitulé mais, bizarrement, plutôt que de reprendre celui gravé dans l'image de fond du bouton en question ( get updates et search), on a choisi d'en coder un qui est identique pour les deux formulaires et est, sémantiquement, très peu explicite : submit !

Mauvaises pratiques : des informations illisibles et une navigation imparfaites

• Le titre du site est trop peu contrasté

  Le titre et la signature du site (The White House, President Barack Obama) sont quasi illisibles: le ratio de luminosité ne dépasse pas les 1,3 pour 1.

• Un pan entier d'information caché aux utilisateurs

  Je parle d'un contenu textuel qui est codé après le pied de page. En voici, la restitution textuelle :

  You are exiting the White House Web Server

  Thank you for visiting our site.

  You will now access

  We hope your visit was informative and enjoyable.

  To comment on the site, send feedback to the Web Development Team by clicking here.

  Ce texte est caché par une instruction CSS : display:none;. Les synthèses vocales n'interprétent que très peu de sélecteurs CSS, mais cette instruction-ci en fait malheureusement partie...

  C'est très dommage et très peu compréhensible : comment le lien vers le formulaire de feedback peut-il être caché à tous ? Les auteurs pensent-ils que les robots de Google vont remplir ce formulaire ?

• Des liens mal intitulés

  On trouve des liens aux intitulés pauvres et peu explicites (watch the video, read this post, clicking here).

  On rencontre aussi parfois des liens de même intitulé menant vers des pages différentes (watch the video, read this post, learn more).

  Dans les deux cas, sans le contexte informatif de la page, on ne peut pas deviner la destination de ces liens...

  Cas particulier des quatre liens image qui pointent vers la page d'accueil du site (elle même donc !) :

  1. on comprend l'utilité pour les pages internes aussi, un peu moins sur la page d'accueil;
  2. chacun de ce liens a un intitulé différent. Cela ajoute à la confusion sur la destination de ces liens;
  3. autant les liens d'intitulé The White House President Barack Obama et www.whitehouse.gov me semblent suffisamment explicites, autant, je ne vois pas comment on peut comprendre les intitulés de liens The White House emblem et Flag of the United States of America.

• Une navigation au clavier imparfaite

  L'utilisateur au clavier n'a pas accès aux boutons qui permettent de naviguer sur la galerie photo centrale et, comme on l'a noté plus haut, ne peut pas tabuler la barre de navigation principale...Il doit se contenter du menu codé en bas de page. Seul souci, c'est qu'en l'absence de liens d'accès rapide visibles, l'internaute doit tabuler 37 fois avant de pouvoir accéder au deuxième lien du menu The Blog avec ce menu de bas de page...