http://www.abc-netmarketing.com/Accesibilite-des-sites-web-les.html

Accesibilité des sites web : les grands prinicipes de mise en oeuvre


Article paru le : 24 décembre 2002

Malgré les efforts de standardisation et de normalisation, peu de sites web peuvent aujourd’hui se prétendre accessibles aux déficients visuels. De plus, les problèmes d’accessibilité ne concernent pas uniquement les déficients visuels. Des problèmes d’accessibilité se posent également aux utilisateurs de nouveaux services (WAP, WebTV, Palm...), aux seniors dont la vue baisse.

On remarque ainsi que l’utilisation de la synthèse vocale se généralise auprès du grand public (accès au Web à partir d’un ordinateur de voiture, d’un simple téléphone...).

Très rapidement le World Wide Web Consortium (W3C) et son émanation spécialisée sur les aspects d’accessibilité, la Web Accessibility Initiative (WAI) ont tenté de standardiser Internet afin d’intégrer les problématiques d’accessibilité lors de la conception des pages web.

Pour rendre un site accessible, il est nécessaire d’adopter un certain nombre de règles simples, qui sont décrites ci-après. Néanmoins deux principes importants peuvent être dégagés :

- Tout élément visuel ("graphique") doit être accompagné d’un commentaire textuel le décrivant. On parle alors de contenus alternatifs. Par exemple, l’attribut "alt" permet de commenter une image.

- La structure du document (contenu) et sa mise en page (contenant) doivent être traitées séparément. La structure est spécifiée par les éléments et attributs HTML (titres, sous- titres, paragraphes, images, ...), la mise en page, à l’aide de feuilles de styles (choix typographiques, couleurs, espacements...). Cette séparation nette du fond et de la forme permet aux navigateurs textuels de suivre plus facilement la structure logique du document et d’en extraire l’information.

Les quelques points suivants permettent d’introduire les principales recommandations et objectifs des normes W3C / WAI.

Utilisation du HTML 4.01 et des CSS 2

Dans l’optique d’une portabilité absolue sur tout type de support, dont toutes les aides techniques destinées aux handicapés, le contenu (l’information) doit être absolument séparé du contenant (les balises de mise en forme).

La norme HTML 4.01 fournit tous les outils nécessaires pour écrire du code accessible. L’intérêt du langage HTML ne réside pas seulement dans une mise en page multimédia et hypertexte. Il permet d’aller beaucoup plus loin, en enrichissant le texte d’informations structurelles, voire sémantiques, que le logiciel client (le navigateur) peut utiliser en fonction des besoins, des préférences et des possibilités de l’utilisateur.

La mise en forme graphique est réalisée en utilisant des feuilles de styles (Cascading Style Sheets ou CSS). Les nouvelles spécifications du HTML (HTML 4.01 décembre 99) et des CSS (CSS 2, mai 1998), permettent d’améliorer considérablement l’accessibilité des documents HTML et d’offrir de nouvelles méthodologies de travail (CSS par version de navigateur et par plate-forme).

L’utilisation de feuilles de style offre de nombreux avantages aux concepteurs HTML :

- Elle permet une mise en page plus riche, la même feuille de style peut être partagée entre plusieurs documents, ce qui permet de gagner un temps considérable lors de la maintenance du site.

- Le responsable du site n’aura aucune vérification à faire pour s’assurer de l’homogénéité de son site (et cela est d’autant plus vrai dans le cas de sites réalisés en équipe). Les informations de même nature (en-têtes de niveau équivalent, paragraphes...) seront présentées automatiquement de la même manière, sans qu’il soit nécessaire de répéter systématiquement les mêmes éléments de mise en forme.

De plus, l’utilisation de feuilles de style permet d’améliorer l’accessibilité d’un document en offrant à l’utilisateur déficient visuel la possibilité de modifier la mise en forme du document et d’en personnaliser son affichage.

Utiliser les éléments HTML à bon escient

L’utilisation de balises structurantes à des fins de formatage de paragraphes représente une gêne considérable et une surcharge de code. Le HTML 4.01 intègre la notion de feuille de style qui permet de séparer totalement les informations structurelles de la mise en page.

En particulier, l’utilisation de tableaux comme moyen de mise en page pose des problèmes d’accessibilité. La séparation entre les colonnes n’est pas toujours facile à percevoir pour des utilisateurs qui n’ont pas une vue d’ensemble du document. Lorsque c’est possible, il est préférable d’éviter d’utiliser un tableau à des fins de mise en page. Quand il n’y a pas d’autre solution (double colonne, séparation d’un menu...), il faut s’assurer que le tableau se "linéarise" d’une façon harmonieuse dans les navigateurs texte, et qu’il est lu correctement par une synthèse vocale. Seules des données devraient être présentées dans des tableaux.

D’autre part, il est très important de veiller à ce que des informations solidaires ne soient pas réparties en plusieurs cellules, de façon à ce qu’une lecture du tableau ligne par ligne conserve l’information d’origine.
Structure et homogénéité
Une interface cohérente
Il faut donner à l’utilisateur un environnement informatique cohérent en terme de "dialogue utilisateur". Cela implique de faire en sorte que les applications et interfaces concernant des domaines, des objets et même des fonctions identiques ou similaires se présentent toujours de la même manière à l’utilisateur.

Exemples :

- Un champ de recherche doit se trouver au même endroit dans toutes les pages d’un site.

- Les boutons de validation des formulaires doivent avoir un graphisme cohérent sur l’ensemble du site.

Il est très important de conserver une présentation homogène sur toutes les pages du site. L’utilisateur acquiert ainsi des repères sur le site et se l’approprie (organisation de l’information, navigation...).

Une présentation claire et aérée

Le graphisme doit être plaisant et le chargement de la page rapide. Il ne faut pas que les pages soient trop denses sinon l’utilisateur distingue difficilement l’information pertinente.

Des liens clairs et concis

Les liens hypertexte doivent être clairs et concis
Les plages Braille affichent couramment 40, voire 20 caractères, ce qui renforce la nécessité de textes concis pour les liens. Les navigateurs permettent de passer de lien en lien par touche "TAB". Cette fonctionnalité est très utilisée par les handicapés visuels. Il est possible d’organiser la circulation de lien en lien par des attributs spécifiques ("tabindex").

Les liens doivent être accessibles par des raccourcis clavier

Il est préférable d’ajouter dans le code des raccourcis claviers (attribut "accesskey") permettant aux utilisateurs n’utilisant pas de souris d’atteindre rapidement le lien de leur choix.

Les intitulés des liens doivent être contextualisés

La navigation de lien en lien renforce la nécessité d’utiliser des textes compréhensibles hors du contexte dans lequel ils sont positionnés (à la fin d’un paragraphe...). Eviter en particulier les liens dont la formulation n’est pas explicite en soi : "Cliquer ici". Dans ce cas précis, on suppose que l’internaute dispose d’un périphérique de pointage type souris ce qui n’est pas toujours le cas. On suit un lien, on le sélectionne, on ne clique pas toujours dessus.

Les liens doivent guider efficacement l’internaute

Si des liens ont des intitulés identiques, ils doivent renvoyer vers la même URL. L’attribut "title" précise le contenu de la page vers laquelle le lien pointe et guide l’utilisateur dans sa navigation. Il faut reprendre l’intitulé du lien dans l’attribut "title", car lorsqu’il est présent, la synthèse vocale ne lit que cet attribut et non le contenu du lien lui même.

Cet article a été crée à partir du livre blanc édité par Visual Friendly, téléchargeable à cet adresse :
http://www.visualfriendly.com/pdf/Livre_blanc_VisualFriendly.pdf