L’accessibilité correspond aux règles permettant un usage optimal d’une page web. Celles-ci portent sur la lisibilité, la navigation et sur l’ensemble des fonctionnalités mises en œuvre. Par extension, elle désigne l’optimisation d’une page web pour les personnes souffrant d’un handicap visuel ou auditif. Le succès d’une page web va ainsi dépendre de trois facteurs complémentaires : l’interface utilisateur (User Interface, UI) relative au design ; l’expérience utilisateur (User Experience, UX) ; et le contenu. Pour l’utilisateur, ces trois éléments sont indissociables et leur optimisation participe à un confort optimal.
Aussi appelée « usabilité » (du terme anglais « usability »), l’accessibilité se fonde sur des principes de bon sens, qui ont notamment été théorisés par Jakob Nielsen (Danemark). Son bureau de recherche étudie de longue date cette problématique et publie régulièrement des recommandations en la matière. L’accessibilité web fait l’objet de recommandation du W3C, l’organisme international de standardisation du web. Celles-ci s’articulent en quatre principes généraux :
Principe 1 : perceptible – L’information et les composants de l’interface utilisateur doivent être présentés à l’utilisateur de façon à ce qu’il puisse les percevoir.
Règle 1.1 Les équivalents textuels : proposer des équivalents textuels à tout contenu non textuel qui pourra alors être présenté sous d’autres formes selon les besoins de l’utilisateur : grands caractères, braille, synthèse vocale, symboles ou langage simplifié.
Règle 1.2 Média temporel : proposer des versions de remplacement aux médias temporels.
Règle 1.3 Adaptable : créer un contenu qui puisse être présenté de différentes manières sans perte d’information ni de structure (par exemple avec une mise en page simplifiée).
Règle 1.4 Distinguable : faciliter la perception visuelle et auditive du contenu par l’utilisateur,notamment en séparant le premier plan de l’arrière-plan.
Principe 2 : utilisable – Les composants de l’interface utilisateur et de navigation doivent être utilisables.
Règle 2.1 Accessibilité au clavier : rendre toutes les fonctionnalités accessibles au clavier.
Règle 2.2 Délai suffisant : laisser à l’utilisateur suffisamment de temps pour lire et utiliser le contenu.
Règle 2.3 Crises : ne pas concevoir de contenu susceptible de provoquer des crises.
Règle 2.4 Navigable : fournir à l’utilisateur des éléments d’orientation pour naviguer, trouver le contenu et se situer dans le site.
Principe 3 : compréhensible – Les informations et l’utilisation de l’interface utilisateur doivent être compréhensibles.
Règle 3.1 Lisible : rendre le contenu textuel lisible et compréhensible.
Règle 3.2 Prévisible : faire en sorte que les pages apparaissent et fonctionnent de manière prévisible.
Règle 3.3 Assistance à la saisie : aider l’utilisateur à éviter et à corriger les erreurs de saisie.
Principe 4 : robuste – Le contenu doit être suffisamment robuste pour être interprété de manière fiable par une large variété d’agents utilisateurs, y compris les technologies d’assistance.
Règle 4.1 Compatible : optimiser la compatibilité avec les agents utilisateurs actuels et futurs, y compris les technologies d’assistance.
Any Surfer est une organisation active dans l‘accessibilité du web. Elle liste les raisons rendant un site inaccessible :
- Lorsqu’il y a du mouvement sur une page (par exemple un diaporama), on peut avoir des difficultés à se concentrer sur la lecture du contenu de la page
- Les contenus de type audio ou vidéo ne sont d’aucune utilité aux personnes sourdes ou malentendantes, à moins d’être également disponibles en format texte.
- De mauvais contrastes ou des polices de caractère difficilement lisibles peuvent rendre la lecture de votre site impossible pour des personnes malvoyantes, mais aussi pour les personnes dyslexiques.
- Lorsque l’information est mise à disposition comme document Word, l’accès à l’information est limité aux personnes qui ont la possibilité de les ouvrir et de les télécharger.
- Certaines technologies, comme Flash (abandonné par Adobe), ne sont pas toujours supportées par tous les appareils.
Les principes d’une page accessible/usable pourraient être résumés comme suit : temps de chargement rapide, étiquetage de la navigation clair et sans équivoques, navigation clairement visible, contrastes suffisants, lisibilité des textes (taille de la typographie et interlignages adéquats), adaptativité de l’interface à tous les types d’écran (Google pénalise d’ailleurs désormais les sites qui ne sont pas « responsive »), informations claires et compréhensibles, liens facilement identifiables, structuration des contenus en paragraphe.
Sur le plan cognitif, plus une page web est complexe, moins elle sera jugée plaisante par son visiteur : si sur le plan de l’UI l’esthétique sera appréciée de manière relative, sur celui de l’UX, il semble donc plus facile de faire l’unanimité. Voir à ce propos : Predicting users’ first impressions of website aesthetics with a quantification of perceived visual complexity and colorfulness.
Exemple de grille d’évaluation de l’accessibilité d’une page web
| Principe | Oui/Non |
|---|---|
| Le son / la vidéo ne démarre pas automatiquement et est contextualisé/e par du texte. | |
| La page web contient des métadonnées pertinentes et complètes. | |
| Les contrastes entre le texte et le fond de l’écran (background) est suffisant = le texte est lisible sans efforts. | |
| La taille des caractères est suffisante = le texte est lisible sans efforts. | |
| Les liens, boutons et tous les éléments interactifs sont identifiés comme tels et ne prêtent pas à confusion avec le texte du site. | |
| Il y a un changement d’état au survol d’une zone interactive. | |
| Les liens ont du sens. | |
| La navigation est claire et sans équivoques. | |
| Si des icônes sont utilisées, sont-elles signifiantes ? | |
| Le texte est suffisamment aéré, il comporte des intertitres et autres éléments graphiques permettant de rythmer la lecture = le texte est structuré de manière sémantique. | |
| Les titres sont clairs et ne prêtent pas à confusion. | |
| Chaque zone distincte de texte comporte un titre. | |
| La taille des images est suffisante pour en percevoir le contenu. | |
| Les images sont légendées. | |
| Les images sont étiquetées (attribut ALT). | |
| Les infographies et tableaux sont compréhensibles. | |
| Les infographies et tableaux comportent un titre. | |
| Les fenêtres pop-up (modales) ne s’affichent pas automatiquement. | |
| Le contenu est compréhensible par quelqu’un qui ne peut distinguer les couleurs. | |
| Il n’y a pas de perte d’informations en diminuant la taille de l’écran. | |
| Le W3C propose également une liste de questions en matière d’évaluation de l’accessibilité d’une interface | |
