ANNEXES
Annexe 1 - Comment marche l'Internet ?
Annexe 2 - Qui fait quoi dans l'Internet ?
Annexe 3 - Ergonomie sur le web
Annexe 4 - Document de conception-réalisation de ce site
Annexe 5 - Accès des sites web aux handicapés
Annexe 5
Accès des sites web aux personnes
handicapées
Accès des sites web aux personnes handicapées
Association de type loi 1901, Braillenet (1) est née en 1996, d'un projet auquel s'associent l'INSERM (Institut national de la santé et de la recherche médicale), l'ANPEA (Association Nationale des Parents d'Enfants Aveugles), la société Eurobraille (2), spécialisée dans la recherche et le développement d'appareils d'adaptation pour les personnes aveugles, la FAF (Fédération des Aveugles de France) (3), et l'université Pierre et Marie Curie.
Parmi les objectifs de Braillenet, on trouve la mise en place, dans les écoles, les universités et les centres de formation, de formations intégrant des personnes handicapées visuels pour leur permettre d'utiliser Internet, le développement de logiciels et de matériels, et le conseil aux réalisateurs de sites afin que leurs pages soient les plus accessibles possibles : l'association vous propose par exemple d'effectuer une évaluation de votre site (il y a trois niveaux d'étude, correspondant à trois tarifications).
Braillenet participe au projet international Web Accessibility Initiative (4), proche du W3C (World Wide Web Consortium).
Pour consulter les pages web, les utilisateurs aveugles utilisent des synthèses vocales ou des afficheurs braille (5). Ils passent par un navigateur spécifique, ou par un logiciel d'accès traduisant les navigateurs standards (6), qui retranscrira forcément votre page par fragments, et non dans sa totalité. Le logiciel déchiffre et retranscrit, ligne par ligne, tous les éléments de votre page, qu'il s'agisse d'images ou de texte. Il permet aussi une lecture synthétique en proposant "tous les liens" de la page, ou "tous les titres", afin que le lecteur puisse sélectionner directement celui qui l'intéresse. Pour cela, images, titres et liens doivent être les plus parlants possibles, tout à la fois précis et synthétiques (les synthèses vocales utilisent par exemple le texte sur lequel il est installé, pour annoncer un lien).
Il suffit de peu de choses pour rendre votre code et plus facilement consultable, et en particulier il convient de l'écrire selon les normes du W3C. Privilégiez pour cela les éditeurs de HTML qui vous laisse le contrôle du code écrit, et vous permettent de le modifier à la main, sans écraser vos modifications à l'enregistrement. Voici donc quelques-uns de leur conseils, qui concernent également un public de mal-voyants (comme les personnes âgées), ou avec un handicap d'apprentissage, ou un problème d'accès à la souris...
Tout élément visuel doit être accompagné d'un commentaire textuel
C'est le but de la balise <alt = "..."> qui devrait accompagner toute image (d'ailleurs "alt", c'est "alternative"... je viens de l'apprendre !). Sans <alt>, certains logiciels donnent le nom du fichier (quelque chose d'aussi plaisant et intéressant à savoir que "tetiere_docfinal_1.gif"). D'autres peuvent être paramétrés de manière à ignorer toutes les images accompagnées d'une balise donnée (par exemple <alt=" "> Plusieurs cas de figures sont à envisager :
- Votre maquette comprend des petites images (dites de décoration) pour la mise en page, genre filets, bout d'en-tête, image-espaceur... Il faut aussi les commenter, d'une balise du type : <alt = " ">, avec un espace entre les guillemets.
- Vous utilisez des images en guise de titre : le commentaire de l'image sera bien sûr le développé du titre, afin qu'il soit présent.
- Enfin, imaginez une courte phrase descriptive si vous placez des images d'illustration.
- Et bien sûr, si votre image supporte un lien, c'est l'endroit idéal pour décrire le contenu de la page-cible.
- Vous utilisez des "pictos" avec un lien dessus pour permettre d'effectuer une opération (une petite maison pour le retour à la page d'accueil, par exemple, ou une loupe pour le moteur de recherche). Vous aurez compris que la balise <alt> ne doit pas décrire l'image ("petite maison", "loupe") mais bien l'action qui en résulte ("Retour à la page d'accueil", "Moteur de recherche").
Pour terminer de vous convaincre, s'il en était besoin, je rappelle que le texte des balises <alt> est indexé par bon nombre de moteurs de recherche (pour le cas où vos titres sont sous la forme d'images).
Laissez le choix à votre lecteur pour les polices (couleur, taille) et la couleur de fond
Certains mal-voyants vont effectuer des modifications sur leur navigateurs, afin d'augmenter au maximum la taille des caractères (ne faites pas de tableaux trop étriqués). Ils modifieront les couleurs de fond, de caractères et de liens pour obtenir des caractères très clairs sur fond noir, bien plus visibles. Faites un test sur votre site, pour voir comment il se comporte.
Soignez la structure de votre texte, et séparez-la de sa représentation graphique
Pour la hiérarchie de vos titres, sous-titres, etc., utilisez les balises <H1>, <H2> (et respectez l'ordre), etc., qui seront repérées pour présenter la structure de votre texte (grand titre, titre, sous-titre...). Pour l'enrichissement typographique (police, couleur, taille, etc.), utilisez les feuilles de style (CSS).
N'utilisez pas trop de tableaux pour votre mise en page
En effet, vous obligez votre lecteur à lire d'abord toute la colonne de gauche, celle qui liste vos rubriques, le moteur de recherche, la liste de diffusion, votre e-mail, etc., avant d'accéder enfin au contenu de la colonne de droite. Une bonne idée, si vous avez beaucoup d'éléments répétitifs dans votre mise en page (une longue colonne de gauche, ou bien une lourde bannière de tête, composée de beaucoup d'images) : sur une petite image du genre "espaceur" (image minuscule, d'un pixel sur un pixel, qui sert à fixer les colonnes ou les hauteurs de cases, dans les tableaux de mise en page, en modifiant sa hauteur ou sa largeur), placez un lien vers un signet placé au début de votre espae informatif, c'est à dire après votre en-tête, votre navigation, votre bannière. La balise <alt> de l'espaceur indiquera "Accès rapide au contenu de la page", par exemple. De cette manière, votre lecteur handicapé visuel, après avoir demandé la liste des liens, cliquera immédiatement sur celui-ci pour arriver directement à l'information, s'évitant ainsi une lecture répétitive.
Soignez vos liens
Puisqu'il est possible de naviguer de lien en lien, faites en sorte que le texte sur lequel il s'appuie soit à la fois clair, compréhensible et pourtant concis (les afficheurs braille pas trop chers ne proposent que 20 caractères) : cela vaut la peine que l'on prenne quelques dizaines de seconde pour leur rédaction.
Audio, vidéo et autres flash
Prévoyez une transcription écrite des fichiers audio et vidéo, s'ils apportent une information supplémentaire. Permettez que l'on "saute", avant qu'elle se déclenche, l'animation flash de votre page d'accueil, d'un petit bouton avant qu'elle ne se déclenche qui donnerait accès à un accueil-bis et un sympathique texte de bienvenue.
Les cadres ("frames")
Si vous trouvez qu'ils sont vraiment nécessaires, donnez aux différents cadres des noms significatifs : non pas "cadre du haut", "cadre du milieu", mais "navigation", "contenu".
Les menus déroulants
Les menus déroulants servant à la navigation, réalisés à partir de javascripts, sont bien reconnus et retransmis par les logiciels d'accès à Windows. Mais là aussi, il faut penser à rédiger des textes alternatifs s'il y a des images (ceux-ci s'affichent fort bien sur les menus déroulants, sans gêner le déroulement ni la sélection d'un sous-menu).
Par contre, si votre lecteur mal-voyant modifie les préférences de son navigateur (couleurs de fond et de police), la couleur de fond de vos menus disparaît : il sera nécessaire, alors, de prévoir une version (utile également pour les navigateurs ne supportant pas les javascripts) où, en cliquant sur la première image du menu on accède à une page en HTML simple, proposant la liste des sous-rubriques.
Enfin, les navigateurs textuels ne gèrent pas les scripts : prévoir donc une version "noscript".
Encore quelques tests
"Bobby" étudie - gratuitement - votre HTML et vous délivre un rapport avec plein de "pan sur les doigts" quand il n'est pas conforme aux recommandations du W3C et de la WAI (7).
Le W3C vérifie la validité de votre code par rapport à la norme HTML 4.01 (8).
Notes
http://www.braillenet.jussieu.fr
http://www.eurobraille.fr/
http://www.faf.asso.fr/
(4) Web Accessibility Initiative :
http://www.w3.org/WAI/
Les recommandations de la WAI, publiées en mai 1999 et accessibles en ligne, en anglais, à l'adresse :
http://www.w3.org/TR/WAI-WEBCONTENT/
ont été traduites par le programme d'action gouvernemental pour la société de l'information :
http://archives.internet.gouv.fr/affichage.php?val=/francais//guide/w3c/w3c.html
Sur le site de La Documentation française, vous trouverez l'intégrale du rapport de M. Descargues sur "L'accessibilité des nouvelles technologies de l'information et de la communication aux personnes aveugles et malvoyantes".
http://www.ladocumentationfrancaise.fr/brp/notices/004001360.shtml
(5) Tout ceci étant réservé à une population aisée... Le logiciel permettant le transfert à l'afficheur braille et la synthèse vocale coûte entre 5 000 F et 14 000 F. Le lecteur braille, entre 30 000 et 100 000 F. Auquel il faut rajouter la formation à Windows, au logiciel et à l'Internet.
(6) Voyez le site de BrailleNet pour une liste complète.
http://www.cast.org/bobby/
http://validator.w3.org