Handicap et nouvelles technologies
Selon les chiffres de l’INSEE, les personnes en situation de handicap représentent 31,4% de la population française, soit environ 18,9 millions de personnes. La définition du handicap utilisée par cet étude est large et inclut des situations de handicap, plus ou moins incapacitantes, momentanées ou permanentes. Le vieillissement de la population ne fera qu’accentuer cette tendance car dans la population âgée de plus de 60 ans, la proportion grimpe à 75% de personnes en situation de handicap.
Pour cette population, les outils informatiques apportent parfois une amélioration du niveau de vie telle que ces personnes peuvent effectuer des tâches en autonomie complète, qui leurs seraient totalement impossibles autrement (communication, achats, démarches administratives, etc.).
Différents handicaps produisent différentes difficultés, mais dans l’ensemble les déficiences visuelles sont les plus difficiles à traiter pour le web. Depuis qu’il est possible de produire des effets graphiques à l’aide de couleurs et d’images, il est tentant d’en user (et d’en abuser) mais pour une tranche de la population, ces choix graphiques passent inaperçus ou pire, viennent compliquer l’appréhension du contenu du site.
Suivant le niveau de handicap de la personne, la lecture sur écran peut être difficile ou nécessiter une augmentation de la taille de la police, et la navigation à la souris peut être totalement impraticable. Parmi les dispositifs d’aide au non-voyants, les principaux sont les logiciels de revue d’écran et les plages braille. Les déficients visuels doivent se représenter mentalement les différentes zones de la page et leur parcours sur le site web sans l’aide des graphismes. Pour ceux-là tout particulièrement, le fait que les documents soient correctement structurés apporte un énorme plus.
Structure sémantique, ordre source, accessibilité et référencement
Lors de sa création, le langage HTML était destiné à des parutions scientifiques, documents très structurés et obéissants à une hiérarchie généralement imposée. Son utilisation à d’autres fins et en particulier l’ajout de graphisme pour rendre ces documents plus attractifs s’est fait au détriment du sémantisme des balises, et par leur détournement (les tableaux en particulier, mais pas uniquement[1]).
Les principales balises structurantes sont : les titres (H1-H6), les
listes (UL, OL, DL), et les éléments de formulaire (LABEL,
INPUT, SELECT, BUTTON, TEXTAREA). Utilisées correctement, elles
permettent de donner aux éléments du document des relations et fonctions
qui les rendent interprétables pour des logiciels. Ces logiciels
(logiciels d’aide à la navigation, moteurs de recherche) peuvent alors
les analyser et les transformer, classer les données présentées et les
présenter sous une autre forme.
En particulier, les logiciels d’aide à la navigation permettent de lister les titres du document, dégageant ainsi autant de sections, ainsi que les liens contenus dans le document, permettant de cibler la navigation interne au site et le chemin éventuellement parcouru dans le site.
Les formulaires et les tableaux sont deux zones fréquemment
inaccessibles alors que des mécanismes simples existent afin de les
rendre utilisables par des personnes non-voyantes ou ayant des
difficultés motrices. Dans le premier cas, il faut associer
structurellement les étiquettes aux éléments du formulaires auxquelles
elles font référence en utilisant la balise LABEL. Dans le deuxième
cas, il faut préciser la valeur et la portée des cellules d’un tableau
en utilisant la balise TH pour les cellules d’en-tête et l’attribut
scope pour associer les valeurs à leur en-tête. Il est important
également d’utiliser la balise CAPTION afin de présenter un résumé des
tendances mises en avant par le tableau, qui ne sera pas utile qu’aux
non-noyants mais également au reste des visiteurs.
Il est important de mentionner qu’utiliser l’ordre navigation - contenu principal – contenu secondaire dans le code source offre de nombreux avantages.
- Le chargement du site est optimisé (le contenu est reçu et affiché en premier).
- Le site est plus agréable à utiliser pour les handicapés (les contenus secondaires moins pertinents n’ont pas à être passés à chaque nouveau chargement de page).
- Et enfin, les sites dont le contenu principal vient rapidement dans le code source (dans les 50 premières lignes environ) et varie d’une page à l’autre sont généralement mis en avant par les moteurs de recherche.
Les améliorations apportées à un site en vue d’une plus grande accessibilité profitent généralement aux moteurs de recherche car ceux-ci ne peuvent se fier qu’aux balises structurantes et au contenu textuel. Tout contenu accessible uniquement avec Javascript ou un dispositif de pointage est fondamentalement inaccessible pour ces applications, ainsi que le contenu des images non précisé dans le texte alternatif. Les robots d’indexation (« crawlers ») des moteurs de recherche sont souvent décrits comme aveugles, manchots, et sans aucun support Javascript.
Grâce aux CSS, il est facile de modifier l’ordre d’apparition des éléments du code source et de masquer un contenu textuel ayant une alternative graphique ou visuelle, ceci afin d’offrir à tous les visiteurs un confort adapté à leurs capacités et aux possibilités de leur navigateur.
Séparation contenu / présentation / comportement
L’utilisation de feuilles de styles permet de rassembler les informations graphiques dans un fichier ou groupe de fichiers distincts, qu’il est ensuite simple de mettre à jour pour modifier l’apparence du site complet. Les fichiers HTML en sont également considérablement allégés.
Suivant le même principe, il est possible de dissocier la composante
comportement (Javascript) du contenu (HTML), et de l’associer au
contenu de la même manière que les styles CSS. La sélection d’éléments
en fonction de leurs attributs id ou class et de leur position dans
le document permet d’associer des comportements à des situations et
d’intercepter certaines actions utilisateurs.
De cette manière, les utilisateurs disposant de Javascript accèdent à un site ou une application entièrement fonctionnels, les autres ayant tout de même accès aux fonctionnalités de base. Les interactions entre scripts sont par ailleurs bien plus faciles à détecter et corriger, et le code HTML gagne en lisibilité, en taille, et en facilité de maintenance.
Ergonomie, conception d’interfaces, aide à l’utilisateur
Les immenses possibilités graphiques d’Internet et la volonté de se démarquer poussent de nombreux concepteurs de sites web à proposer des interfaces innovantes. Les visiteurs sont obligés de s’orienter dans un espace aux dimensions invisibles, dont les repères sont souvent différents à dessein.
Avec la multiplication des applications en lignes et des possibilités d’interaction toujours plus complexes, il devient nécessaire d’indiquer, de manière explicite ou implicite, les moyens d’interaction avec l’application, et de laisser aux visiteurs un temps d’adaptation.
Pour guider les utilisateurs dans leur découverte de l’application, il est possible d’utiliser des libellés explicatifs, de rédiger quelques lignes visibles à un endroit stratégique, ou encore de rédiger un manuel d’aide. Ce dernier point, bien qu’encore peu couramment associé à l’idée d’un site web n’en est pourtant pas moins utile.
En particulier, les applications sur Internet gagnant en complexité, rendent cette aide parfois bien nécessaire, d’autant plus que parmi les mécanismes traditionnels du logiciel de bureau, tous ne sont pas systématiquement disponibles ou fonctionnent différemment. Le glisser-déposer par exemple, quand il est implémenté, n’est pas forcément enregistré implicitement.
Les manuels d’ergonomie recommandent généralement de se conformer aux pratiques les plus répandues, et de ne s’en éloigner que si cela apporte réellement une valeur ajoutée (vision ou manipulation plus pratique des données, par exemple). Ressentie parfois comme une frustration par les graphistes ou développeurs, l’ergonomie apporte pourtant aux logiciels et sites web un confort auquel les utilisateurs sont fortement favorables, et l’idéal consiste à combiner les recommandations ergonomiques et la créativité de l’équipe pour mettre en avant les possibilités du site ou de l’application.
[1] Citons par exemple les titres utilisés pour mettre un
texte en gras, ou encore les balises SPAN stylées et utilisées à la
place d’une balise plus appropriée.