Appel aux Webmestres

A vous créateurs de sites Internet, dont le but est de faire passer des informations, des idées, des connaissances ou même de vendre des produits...
Comment imaginer que le meilleur moyen d'arriver à toucher le plus grand nombre de personnes sera de laisser une part non négligeable de la population dans le pire des cas à la porte de votre site ou le plus souvent de ne leur proposer qu'une navigation partielle ou très peu intuitive pour les utilisateurs du clavier ce qui la rend frustrante donc vite abandonnée par les internautes.

Alors, il est grand temps de réagir, des outils existent, des normes existent pour que le web soit ouvert au maximum de personnes. De plus vous y gagnerez pour que votre site Internet soit adapté aux nouvelles technologies (écran de téléphone mobile par exemple...).

Les nouveaux navigateurs même si ce n'est pas encore parfait, acceptent maintenant de plus en plus les nouvelles façons de créer des sites qui respectent les standards du W3C.

Depuis la création de la W.A.I. en 1996 par le W3C, ces membres n'ont pas cessé de faire avancer la notion d'accessibilité. En 1999, ils ont émis un guide de référence sur l'accessibilité des contenus Internet que l'on appelle : (W.C.A.G.). La version 1.0 de ces recommandations ne demandent qu'à évoluer pour suivre les nouvelles technologies de l'informatique. Au cours des prochaines années paraîtra certainement la version 2.0 de ce guide. Plusieurs pays ont élaboré, à partir de ces (W.C.A.G.), une liste de critères d'évaluation de sites Internet. En France c'est l'association Braillenet qui nous a doté d'un véritable outil de travail dans ce domaine : les critères AccessiWeb. Ces critères d'évaluation aident à développer l'accessibilité au sein des techniques de la communication et de l'information.

Au sujet de la liste des critères AccessiWeb, c'elle que vous trouverez ci-dessous est une version reformulée que j'ai rédigé pour vous donner un premier aperçu de ce qu'il faut respecter afin de rendre un site accessible. Cependant, je vous incite vivement à consulter le site AccessiWeb où se trouve les deux listes des critères AccessiWeb v1.1 [Général] et v1.1 [Déployé]. Ces listes classent les critères par niveau de priorité et sont un véritable outil de travail.
Vous trouverez également sur ce site la présentation du label AccessiWeb.
Je vous invite aussi à visiter les autres sites ci-dessous ou vous pouvez trouver de nombreux renseignements intéressants notamment sur le W3C, sur le guide et sur la méthode d'évaluation de l'association Braillenet

  1. Site du W3C (site en anglais)
  2. Site de La grange
  3. Site de Braillenet
  4. Site AccessiWeb
  5. Le guide AccessiWeb
  6. RéféRentiel Général d'Accessibilité pour les Administrations (RGAA)
Retour au sommaire

Compréhension des critères AccessiWeb

 

1. Les images

- Les graphiques et les images doivent avoir une alternative textuelle, elle doit être explicite dans le contexte dans lequel ils se trouvent.

- La description de ces images et de ces graphiques ne doit pas dépasser 80 caractères. Les images et les éléments graphiques servants de décoration et n'ayant pas de valeur informative seront codés par un attribut textuel nul.

-une image qui nécessite un long commentaire doit avoir une légende ou un renvoi vers un fichier de description et celui-ci devra être plus informatif que le texte placé dans l'alternative de l'image.

- Il est nécessaire que la description des zones réactives cliquable d'une image map soit explicite et que ces zones soient ordonnées de façon logique.
Les zones d'une image map doivent être définies juste après la déclaration de chacune d'entre-elle afin que la lecture des commentaires associés correspondent bien à l'image à laquelle ils se rapportent.

-Si vous avez du texte sous forme d'image, il faut que le contenu alternatif textuel reprenne au minimum celui-ci, il est préconisé de réserver le texte sous cette forme que lorsque cela est strictement nécessaire.

2. Les cadres

- Il est préférable de ne pas utiliser une présentation sous forme de cadres mais si toutefois vous souhaitez en avoir sur votre site, il est recommandé de ne pas dépasser la quantité de 3 par page.

Les cadres doivent être nommés de façon explicite et aussi avoir une balise noframes dans lequel nous retrouvons les principaux liens existants sur le site. Il faut aussi que les cadres aient un attribut title bien renseigné et il est judicieux d'ajouter une balise "longdesc" pour expliquer l'interaction entre ceux-ci.

- Lorsqu'il y a des cadres, il est conseillé d'avoir la possibilité de pouvoir se servir de l'ascenseur pour que les malvoyants puissent lire toutes les informations de la page.

3. Les couleurs

Une alternative doit être fournie aux informations données uniquement par les couleurs.

Il est nécessaire que le contraste des couleurs soit assez prononcé entre le texte et son support afin qu'une personne malvoyante ait le moins de difficultés possible à naviguer sur le site et à lire son contenu.

4. Le multimédia

- Lorsqu'un support multimédia fournit de l'information il est recommandé de prévoir une alternative adaptée.
Elle peut se présenter sous forme textuelle, de sous-titrage ou d'audio-description suivant les besoins des personnes n'ayant pas accès à ce support. Cette alternative doit être pertinente et synchronisée avec le multimédia.

5. Les tableaux

- Sur un site Internet, les tableaux ne devraient être utilisés que pour afficher des données, il est préférable de les éviter pour la mise en forme d'une page.

La balise "caption" permet de donner un titre aux tableaux de données, celui-ci doit être unique et pertinent.

Il faut aussi renseigner les en-têtes de colonne et utiliser les attributs adéquats pour relier les colonnes aux entêtes. On préconise aussi d'utiliser l'attribut "abbr" pour les titres de colonnes dépassant 15 caractères afin d'en alléger la lecture par une synthèse vocale.

L'attribut "summary" permet de faire un bref résumé du contenu du tableau. remplit de façon pertinente il aide les personnes non-voyantes à mieux comprendre l'utilisation de celui-ci.

- Il est plus judicieux d'utiliser des blocs en css pour la présentation d'une page web plutôt que des tableaux. Mais si on ne renonce pas à utiliser ces derniers il faut s'assurer que leur lecture se fera bien de façon linéaire pour une bonne compréhension du texte.

6. Les liens

- L'intitulé des liens doit être explicite et ne doit pas dépasser 80 caractères. On doit renseigner l'attribut "title" si le lien sert à un téléchargement ou à ouvrir une nouvelle fenêtre, dans ce cas la description du "title" reprendra l'intitulé du lien et on y ajoutera l'information qui justifie sa présence.

- Il convient que les liens identiques renvoient vers la même page et il est recommandé de personnaliser le texte de chaque lien lorsqu'il nous dirige vers une cible différente.

Il est préférable que les liens soient séparés de manière distincte pour que leur lecture en soit plus aérée par une synthèse vocale.

7. Code exécutable

- Lorsqu'un script nécessite une alternative pour être accessible, l'information donnée par celle-ci doit être équivalente à l'information fournie par le script. IL faut aussi pouvoir exécuter toutes les actions activées par la souris au moyen des touches du clavier.

8. Eléments obligatoires

- Il est nécessaire que les pages "html" aient un "doctype" bien adapté au choix de programmation du site en début de leur code source, pour que le navigateur puisse déterminer de quel type de document il s'agit.

- Le code source d'une page comprendra aussi l'indication de la langue utilisée dans le document, ainsi que l'indication de la table de caractères, et un titre explicite dans la balise "title". Ce titre devra être différent sur chaque page.

Il est recommandé que le code des pages soit valide afin qu'il s'affiche de façon correcte dans les différents navigateurs utilisés.

- Un mot ou toute une partie de texte qui n'est plus dans la langue principale du site doit avoir une balise "lang" qui permette au logiciel de lecture vocale de les prononcer dans la langue signalée.

Les balises utilisées dans une page Web ne doivent pas être détournées de la fonction pour laquelle elles ont été conçues.

-Il est souhaitable d'utiliser les balises "abbr" et "abbr" pour indiquer la signification d'un acronyme ou d'une abréviation surtout la première fois qu'elles se présentent dans une page. Lorsque le "title" n'est pas renseigné il est préférable de mettre des points entre les lettres d'un sigle pour que la lecture par une synthèse vocale en soit plus claire.

9. Structuration de l'information

-Il est nécessaire que les pages web soient bien structurées à l'aide de balises qui hiérarchisent les titres et que les blocs de textes soient bien distincts les uns des autres. De même, on utilisera des listes non ordonnée, ordonnée ou de définition pour faciliter la navigation dans une page.

- Il convient que les sites important aient un plan ainsi qu'un moteur de recherche pour atteindre plus aisément ce que nous recherchons dans le contenu du site.

- Il est recommandé de faire une page d'aide où la structure du site est expliquée ainsi que la navigation et ses différents raccourcis clavier. L'internaute doit retrouver le plan, la page d'aide et le moteur de recherche au même endroit sur toutes les pages du site.

10. Présentation de l'information

- Le contenu et la présentation du site doivent être séparés à l'aide d'une feuille de style, une fois celle-ci désactivée le contenu doit rester visible et compréhensif. Il est également nécessaire que dans ce cas l'ordre de tabulation reste logique.

- Il est préférable de donner une valeur relative à la dimension des tableaux et à celle de la police afin d'avoir la possibilité de les agrandir avec la commande du navigateur prévue à cet effet.

11. Les formulaires

- Dans les formulaires la balise "label" doit être présente avec ses attributs correspondants "id" et "for" pour relier les champs de saisie aux textes qui lui sont associés. Ces textes doivent être explicites. Il en est de même pour le commentaire du bouton de validation du formulaire.

Dans un formulaire chaque intitulé de champ et son champ associé doivent être accolés pour éviter un risque de confusion en remplissant ses différents champs avec une aide technique.

il est préférable de regrouper les champs de même nature et de leur donner un titre en utilisant les balises "fieldset" et "legend".

- Si un formulaire est géré par un script il faut une alternative à celui-ci pour pouvoir remplir le formulaire, il faut aussi que les zones obligatoires à remplir soient clairement établies par un signe précisé avant la zone d'édition.

Les listes de choix dans les menus déroulant doivent être ordonnées de façon logique.

Il est primordial que l'on puisse parcourir les champs d'un formulaire et valider celui-ci aussi bien par la souris que par le clavier.

12. Navigation

- La navigation à l'intérieur d'un site doit être intuitive, on retrouvera la barre de navigation placée toujours au même endroit sur les pages, on pensera également à ajouter des signes de séparation entre les liens afin de permettre à une synthèse vocale de marquer de petites pauses pendant leur lecture.

On implémentera des raccourcis clavier "accesskey" pour faciliter la navigation à l'intérieur d'un site.

- Il est souhaitable de mettre un lien d'évitement qui permet de sauter un bloc de liens ou de texte pour accéder directement au contenu de la page.
Ce type de lien avec ancre sur la même page est également appréciable pour améliiorer la navigation dans une page lorsque celle-ci dépasse trois écrans.

13. Consultation

- Il est préférable de laisser le rafraîchissement de la page à la volonté du poste client afin d'éviter qu'un rafraichissement autommatique gêne la lecture du texte.

- Il est conseillé que les redirections automatiques de pages Webb s'effectue côté serveur.

- Il est important que l'ouverture d'une nouvelle fenêtre soit signalée à l'utilisateur dans l'intitulé du lien ou à défaut dans un "title".
Il faut savoir aussi que le fait qu'une pop-up qui s'ouvre automatiquement par un script au chargement d'une page pose des problèmes de lecture, il vaut mieux éviter ce procédé, et faire en sorte que l'utilisateur puisse choisir le moment où il souhaitera ouvrir ce genre de fenêtre. Il ne faudra pas oublier de mettre un lien qui permette de refermer la pop-up.

- Il est recommandé de bien décrire les fichiers qui sont mis en téléchargement, en indiquant leurs format et leurs poids. Il faut que ceux-ci soient d'un format accessible ou qu'un lien nous propose une possibilité de conversion de ces fichiers.

- Il faut éviter au maximum les effets de clignotement les défilements et tout ce qui peut nuire à la lecture ou leur trouver une alternative adaptée.
Retour au sommaire

En conclusion

Voilà, En respectant les critères AccessiWeb votre site Internet sera accessible au plus grand nombre. Non seulement aux personnes mal et non voyantes, mai aussi aux personnes qui ont des difficultés à se servir de leurs mains, à celles qui sont atteintes de surdité et aussi à celles qui ont des problèmes de lecture ou de compréhension. Enfin, il ne faut pas oublier que la vieillesse augmente les difficultés de navigation sur Internet pour tout le monde.

Vous trouverez sur la page suivante une liste de sites consacrée aux standards de l'Internet et de l'accessibilité avec des conseils techniques qui permettent de les appliquer. Sachez que cette liste n'est pas exostive, je compte donc sur vous pour m'aider à l'enrichir.

Rédigé par Nicolas Fortin.

***à suivre***