2.2 - Accès universel
2.2 - Accès
universel
Pour œuvrer dans le sens d'un accès universel à votre site, d'autres paramètres que ceux purement logiciels (voir la section précédente) sont également à prendre en compte :
- la taille de l'écran : les configurations peu chères comprennent un petit écran 17 pouces et une carte vidéo qui ne proposent comme amplitude maximum de la fenêtre du navigateur qu'un rectangle de 600 x 800 pixels (18) ;
- la carte graphique : les moins chères offrent une palette de milliers couleurs, au lieu des millions de couleurs offertes par les plus récentes ;
- un courant de recherche vise à rendre le web accessible aux handicapés (19) : or seules les pages de textes sont accessibles intégralement grâce à un synthétiseur de voix, à la navigation à la voix ou par l'utilisation du braille ;
- les différences entre les Mac et les PC sous Windows : les couleurs à l'écran sont plus claires sur les Mac, plus sombres sur les PC sous Windows ; les typos sont plus petites sur les Macs que sur les PC sous Windows.
Une fois posée la nécessité de réaliser un site accessible à tous, et si vous y adhérez, voici quelques conseils pratiques, à consulter tout en apprenant vos balises HTML.
- En achetant votre manuel HTML, vérifiez qu'il précise bien, pour chaque balise ou chaque effet spécial, sa compatibilité avec les différentes versions des navigateurs. Actuellement, on peut estimer que, dans les pays du Nord, la grande majorité des versions installées comprennent la version 3.2 du HTML. Pour être complètement sûr et viser près de 100% du public mondial, vous pouvez vous contenter de la version 2.0. De cette manière, vous n'obligerez pas vos lecteurs à télécharger la dernière version de leur navigateur.
- Ne liez jamais une information ou un niveau d'information importants à une technique qui ne soit pas accessible à tous (ou qui sera dépassée dans un an, tout va très vite sur Internet...). Les éléments proposés par les plug-ins ne peuvent être que des enjolivements, et non des informations indispensables.
- Si vous décidez d'utiliser des effets côté client non perceptibles par tous les navigateurs, veillez donc à proposer des solutions alternatives (plus simples techniquement), de manière à ce que l'information fournie grâce à ces effets soit quand même disponible (c'est ce que les anglophones appellent "dégrader avec grâce", to degrade gracefully). (20) Quelques exemples dans les paragraphes qui suivent.
- Certains sites offrent, en guise de page d'accueil, une grande image dont certaines zones sont sensibles et proposent un lien lorsque le curseur les survole : ce sont les "cartes cliquables". Or il existe des visiteurs qui coupent le chargement d'image (nous verrons plus loin pourquoi) : ils ne verront donc qu'un écran vide, en arrivant sur la page d'accueil. Si vous pensez utiliser cette technique, rajoutez absolument les mêmes liens sous la forme de liens placés sur du texte (navigation "texte seul"), même en tout petit sous l'image (21).
- Même problème lorsque les boutons de navigation des pages intérieures sont sous forme d'images, d'animation, de menu déroulant ou de javascripts type "onMouseover" : proposez une version "texte seul" de la navigation, incluse dans le gabarit des pages. (22)
- Réfléchissez bien avant d'utiliser des "frames" (pour ma part je ne les aime guère) ; il serait judicieux de réaliser en parallèle une version "no frame" pour les navigateurs ne pouvant pas lire cette technique (Netscape 1, Mosaic 1 et 2, Lynx). La structure du site doit faciliter la mise à jour automatique du contenu des deux versions ("frame" et "no frame"), ou bien vous pouvez utiliser le langage WML.
- Idem bien sûr pour les sites utilisant des javascripts, qui doivent être accompagnés d'une version "no script". Evitez de toutes façon ces gadgets qui plantent trop souvent les ordinateurs et obligent à une reconnexion à l'Internet : on lasse ainsi très rapidement le lecteur. Si vous décidez que la technique des menus déroulants est indispensable pour alléger votre navigation, réfléchissez à une alternative pour les navigateurs ne lisant pas le javascript, comme une page intermédiaire de navigation proposant le contenu du menu déroulant avec ses liens, installée sur l'item supérieur du menu déroulant, celui qui est toujours visible, par exemple. De toutes façons testez les effets des javascripts sur tous les navigateurs : vous aurez certainement des surprises ;
- Les feuilles de style sont intéressantes, car elles séparent la structure du texte de sa mise en forme. Malheureusement, elles ne sont pas comprises par tous les navigateurs. Par défaut, vous devez veiller à ce qu'elles soient remplacées par les balises classiques de niveaux de titre (H1, H2, H3, etc.). Si vous décidez qu'une partie de texte doit être mise en valeur, n'utilisez pas qu'une feuille de style (par exemple, mettant le texte en rouge) : doublez-la avec une balise classique (comme <b> pour gras).
- Pensez à écrire, pour chaque image, la mention <alt="..."> et à la rédiger avec soin. Elle s'affiche à la place de l'image lorsque votre visiteur coupe sur son navigateur le chargement d'images, et doit lui permettre de décider si l'illustration est suffisamment porteuse de sens pour être visualisée. La version 4 de Netscape, par exemple, affiche le message "Alt" pendant le chargement de l'image, pour faire patienter le lecteur. Cette mention est particulièrement utile pour les handicapés visuels.
- Vous pouvez utiliser la technique des GIF animées (une succession d'images qui rendent le mouvement à la manière d'un dessin animé) pour proposer de petites animations, c'est très simple et visualisé par le plus grand nombre. Mais sachez que ceux de vos lecteurs qui ne pourront voir l'animation, garderont à l'écran la première image de celle-ci. Soignez-la ! Après une période d'engouement il y a deux ans, on estime maintenant que les GIFs animées sont lourdes (le poids de l'image multiplié par le nombre de celles-ci) et qu'elles attirent fortement l'attention du lecteur pour le lasser très rapidement : peu de bonnes causes méritent un tel traitement...
- Une des seules manières d'organiser de manière fixe vos éléments à l'écran, pour tenter une mise en page autre que la simple succession de lignes verticales, consiste en les installer dans les cases d'un tableau dont les bords sont invisibles. Testez votre mise en plage sur plusieurs navigateurs, car Netscape et Internet Explorer, pour ne citer qu'eux, ne gèrent pas les tableaux de la même manière. Sachez aussi que les tables ralentissent l'affichage des pages, car votre navigateur doit calculer les lignes et les colonnes pour y installer les éléments qu'il a déjà téléchargé. Evitez d'imbriquer des tables dans des tables dans des tables, et morcelez les longs tableaux afin que votre navigateur puisse rapidement afficher le contenu du premier écran.
- Lorsque vous utilisez des tables à largeur fixe pour installer votre mise en page, ou bien des feuilles de style pour positionner dans l'absolu vos éléments, évitez donc d'accoucher d'un site visible uniquement sur un écran 21 pouces (on en voit moins, actuellement, mais trop encore). Personne n'utilisera l'échelle horizontale de son navigateur pour lire la fin de vos phrases, ou tout du moins pas plus de 3 lignes. J'ai entendu un jour une utilisatrice se plaindre de ce qu'elle n'avait pas un ordinateur assez bien, pour consulter le web, puisque son écran (de 15 pouces) ne lui permettait pas de voir les sites en entier ! Ces sites grandiloquents ont été conçus pour n'être vu que par le Big Boss (et Big Financeur, par la même occasion), au chaud, dans son bureau... Souvenez-vous pour votre part que les ordinateurs peu chers vendus actuellement au grand public comme étant multimédias n'ont qu'un écran de 15 ou 17 pouces. Dans la section sur les gabarits, vous trouverez des astuces pour contrôler la taille de vos fenêtres, mais aussi pour vous assurer qu'on peut imprimer vos pages web directement sur du papier A4.
- A l'heure du choix des couleurs pour vos liens, le fond des pages, vos boutons de navigation et autres illustrations, et afin qu'elles ne soient pas dénaturées sur des cartes graphiques ne proposant que 256 couleurs, pensez à piocher dans la palette de 216 couleurs communes aux écrans PC et Mac (23).
2.2.1 - Les tests
Je recommanderais deux types de tests, à deux niveaux de réalisation : les tests techniques de compatibilité, à effectuer sur les gabarits, et les tests humains de navigabilité, à réaliser sur la version "bêta" du site, la version d'essai avant l'installation définitive.
Lorsque vous aurez conçu vos gabarits et votre page d'accueil, pensez à les visualiser sur toute une palette de navigateurs : Netscape (dans ses différentes versions : Netscape 1, par exemple, vous permettra de contrôler la version "no frame" évoquée plus loin), Internet Explorer (idem pour les versions), Lynx (sur Unix et VMS), Opera, Amaya, etc. Cette tâche, qui nécessite de nombreux outils différents, tournant sur des plate-formes variées, peut (doit) être effectuée par des amis informaticiens. Vous pouvez vous contenter, pour plus de 90 % de vos futurs lecteurs, de tester votre site sur les version 2 à 5 de Netscape et d'Internet Explorer : la note (24) vous indique où récupérer de vieilles versions).
En ce qui concerne l'ordinateur lui-même, si votre carte graphique le permet, testez avec différentes résolutions d'écran (640x480 ; 800x600 ; 1024x768) et avec différentes palettes (256 couleurs, milliers de couleur, millions...). Modifiez la luminosité de l'écran pour vérifiez que le contraste est suffisant dans les deux cas (écran trop clair ou trop sombre). Faites varier la taille des polices utilisées pour le texte, et la taille de l'écran du navigateur (pour voir comment réagissent les tables de mise en page).
Lorsque votre site est terminé, ou - si vous êtes plus prudent - lorsque vous avez réalisé les pages principales et des exemples des pages secondaires, avec la navigation définitive, il est temps de définir un panel de testeurs. Choisissez des amis, ou des membres de l'association, que vous considérez comme des utilisateurs "lambda" : ils n'ont pas la dernière génération d'ordinateur, ni la dernière version du système d'exploitation ou des navigateurs, ni la collection complète des plug-ins, et ne maîtrisent pas toutes les arcanes de la navigation sur le web. Installez le site chez votre hébergeur, ne communiquez l'adresse qu'à ces amis et demandez-leur de s'y promener. C'est là que survient l'étape la plus difficile pour tout concepteur : il faut absolument que vous acceptiez leurs remarques, et que vous les preniez en compte. Car la vérité est souvent douloureuse : ce ne sont pas eux qui sont des imbéciles, des attardés, des béotiens (ou tout autre qualificatif que votre honneur blessé pourra vous suggérer), mais votre site qui est mal conçu et qu'il vous faut corriger. Deux cadres pour ces testeurs : soit ils font ça chez eux, tout seuls, et ils vous communiquent leur verdict (avantages : vous ne les influencez pas, et ils utilisent leur configuration habituelle) (25) ; soit vous êtes avec eux. Dans ce dernier cas, demandez-leur d'exprimer à haute voix ce qu'ils ressentent (manques, hésitations, plaisirs...) durant la navigation, et ne les interrompez pas. Vous pouvez également leur donner des tâches précises à réaliser, choisies pour leur exemplarité ou leur importance (l'obtention d'une certaine information, par exemple), et noter quels difficultés ils rencontrent, et combien de temps il leur faut.
Pour tester la validité de vos liens, une fois votre site achevé et mis en ligne, demandez à votre fournisseur s'il fournit ce service de vérification et possède un petit logiciel qui examine les liens proposés et s'assure qu'ils existent toujours, sont correctement écrits, etc. Vous pouvez vous abonner à ce service par Internet, en cherchant sur un annuaire la liste des "linkcheckers" (26). Si vous avez un ami avec une machine sous Unix, demandez-lui d'installer Checkbot ou Linkbot (27), deux logiciels libres qui effectuent ce petit travail fort utile, et même périodiquement si vous lui demandez. Cette aide automatique est particulièrement appréciable, surtout si vous proposez et renouvelez constamment une liste de liens conséquente.
Il existe enfin un petit logiciel, nommé Bobby (28) (comme les policiers anglais), qui peut vous aider dans vos tests. C'est un outil qui, en analysant le code source de vos pages web, vérifie qu'il est correct et qu'il permet l'accès aux personnes handicapées, d'une part, et indique les versions compatibles des navigateurs, d'autre part. Vous indiquez l'URL de la page que vous voulez vérifiez, et il vous affiche son rapport. La dernière version de Bobby calcule également la rapidité de chargement des images de la page (voir à ce sujet le par. suivant), sur la base d'un (humble mais répandu) modem de 28,8 kilobits par seconde (kbps).
Complétez cette section :
- Pour en savoir plus sur les gabarits, cf. par. 5.3 - Gabarits.
- Le WML est abordé au par. 2.1.3 - Du côté de chez l'auteur
- L'annexe 3 - Ergonomie sur le web développe également le thème des tests-utilisateurs.
- Pour l'accessibilité aux handicapés, voyez l'annexe 5 - Accès des sites aux personnes handicapées.
- Les feuilles de style sont abordées plus longuement dans le par. 2.1.1 - Du côté de chez le client.
Notes
(18) Certains lecteurs du web possèdent un écran plus grand, mais accélèrent leur navigation en ouvrant plusieurs petites fenêtres, ce qui leur permet de consulter un site d'un côté tandis qu'un autre se charge. Sous Windows, modifiez la résolution de l'écran (dans les préférences d'affichage), pour les tests.
(19) En France, le site de BrailleNet vous propose des informations, mais également un audit de l'accessibilité de vos pages aux mal- et non-voyants, ou encore une sensibilisation, pour les webmestres et les équipes de mise à jour :
http://www.braillenet.org/
Voir également l'annexe 5 - Accès des sites web aux personnes handicapées
(20) Voir le site de la FEDEL (Fédération des élus locaux), un bon exemple qui propose deux versions selon les capacités de la machine client : un sommaire "conventionnel, navigateurs 3.x" et un autre "multimédia, navigateurs 4.x + extensions multimédia" :
http://www.fedel.org
(21) Voir la page d'accueil du site de la Bibliothèque Gustav Mahler :
http://www.bgm.org
(22) Voir le site du Musée des Augustins, à Toulouse. Testez la page d'accueil en autorisant, puis en coupant les Javascripts :
http://www.augustins.org/
(23) Vous trouverez cette palette, ainsi que des explications sur son utilité et son utilisation, sur le site de Linda Weinman (en anglais) :
http://www.lynda.com/hex.html
ou sur le site "Big Nose Bird" (en anglais) :
http://bignosebird.com/safecol.shtml
(24) Voir, pour les anciennes versions des navigateurs, le site http://browsers.evolt.org/
(25) Des amis avaient, pour ce faire, créé une liste de travail, sur courrier électronique, regroupant leurs "testeurs", afin de discuter ensemble des améliorations à apporter à une version d'essai de leur site.
Computers and Internet > Information and Documentation > Data Formats > HTML > Validation and Checkers
(27) Le site de Checkbot (en anglais) :
http://www.xs4all.nl/~graaff/checkbot/
(28) Le site de Bobby (en anglais) :
http://bobby.watchfire.com/bobby/html/en/index.jsp