Définition

On entend par accessibilité, les fonctions qui rendent un lieu ou une information utilisable par le plus de personnes possibles en réduisant les inégalités d'accès à ce lieu ou le support d'information mis en jeu. Il s'agit de bien plus seulement de réduire l'effet des handicaps des uns et des autres, car il faut aussi tenir compte des différences de perception physiques (presbytie, daltonien, photosensibilité…) et intellectuelles (faiblesse cognitive…) des personnes et même penser aux difficultés d'utilisation des personnes moins habituées à la ‘culture’ du web (popup surgissant à la va-vite, mise-à-jour dynamique du contenu, cheminement peu clair…).

L'accessibilité est donc un processus dont les concepteurs des sites doivent se sentir les premiers clients.

Ce livre, montre clairement qu'il ne s'agit pas d'un processus mathématique, mais d'une cible vers laquelle il faut tendre en sachant bien qu'elle ne pourra jamais être finalement atteinte.

La norme et les référentiels

Il existe plusieurs normes qui se recouvrent en partie, se complète bien, et offre des approches plus ou moins pratiques :

Le standard Web Content Accessibility Guidelines (WCAG) élaboré par le groupe de travail Web Accessibility Initiative (WAI) du W3C : le site doit être pensé pour l'accessibilité dès le départ, et l'accessibilité doit participer au Design for all.
Le référentiel AccessiWeb proposé par l'association BrailleNet permet d'évaluer concrètement l'accessibilité du site en se basant sur les règles du WCAG et en donnant des formations et accès à des experts.
Le Référentiel Général d'Accessibilité pour les Administrations (RGAA) proposé par l'Administration Française reprend et explicite les règles du WCAG.

Le WCAG fourni un nombre important de règles, que l'on ne peut pas toutes mettre en place d'autant que certaines sont contradictoires dans leurs réalisations. Cette contradiction n'est pas le signe d'un problème de conception de ces règles; elles sont simplement le symbole de la complexité du sujet de l’ accessibilité (faut-il utiliser l'attribut alt ou title des images, réponse oui et non selon la version de HTML et/ou le contexte). D'ailleurs le 3ème niveau de conformité dit OR (AAA) est considéré comme inatteignable.

Le référentiel AccessiWeb est plus concret que le WCAG, et permet d'évaluer directement le site web. Il est le fruit d'une communauté qui fait évoluer ce référentiel. C'est sur ce référentiel que le livre se focalise principalement.

Partant aussi de la même base, le WCAG, et ayant bénéficié d'une partie du travail d'AccessiWeb, le RGAA est une réglementation plus figée que ce dernier.

Plus récemment, le groupe de travail WAI a défini la nouvelle norme WAI-ARIA (Accessible Rich Internet Applications suite) sans oublier la recommandation HTML5 qui intègre de nouvelles options concernant l'accessibilité (tags HTML5 accessiblity-friendly, roles & attributs signifiants).

AccessiWeb

Le but de l'accessibilité web est de rendre plus naturel la compréhension du site directement pour l'utilisateur avec ou sans le soutien d'outils spécifiques (navigateur audio pour les malvoyants, transcription texte pour les malentendants, ...). Ce n'est pas au site de fournir ces outils, mais il doit être directement interprétable par ces outils.

Images, cadres, couleurs

Pour les images porteuses d'information, il est conseillé de fournir une description de l'image (tags alt et title) qui puisse être suffisamment explicite si l'image n'est pas accessible (navigateur texte, malvoyant…).

Même chose pour les cadres iframe, qui sont très difficilement compréhensibles sans affichage visuel. L'attribut title avec une description adaptée devrait faire l'affaire.

Les couleurs doivent être bien choisies en tenant compte des problèmes de perception des couleurs (écran en niveau de gris seulement, daltonisme...), en pesant à travailler sur les contrastes (WCGA contrast checker). Il peut être judicieux de fournir une version purement descriptive de l'information en couleur (carte colorée -> information équivalente sous forme de liste textuelle), et penser aux pièges de l'information par la couleur (zone d'entrée en rouge en cas d'erreur de saisie -> mettre plutôt une '*').

Multimédia

Concerne les médias temporels pour lesquels il faut fournir une transcription texte (dire ce qui ne peut être vu) et/ou un sous-titrage (text-to-speech des dialogues). Soit en incrustant le texte dans la vidéo ou alors en utilisant des outils de type SMILE.

Les contrôles du media doivent être accessibles sans souris.

Tableaux

Les tableaux peuvent devenir un enfer à comprendre (notamment en audio pure). Les tags th et WAI-ARIA permettent de leur donner plus de sens.

Liens et scripts

Pour les liens, il y a 2 type de problèmes à réduire : - la compréhension du lien lui-même qui doit être explicite hors contexte (OK -> Enregistrer vos coordonnées, Cliquer ici -> lien sur l'information concernée). - les liens sur les images ou bouton, pour lesquels il faut ajouter une description texte (tag alt ou title selon le type).

Concernant les scripts, dans la même proposition que l'Adaptative Design il faut que le site soit compréhensible quand JavaScript est désactivé. Il faut faire attention aux scripts qui changent dynamiquement le contenu de la page de manière peu transparente (modification éloignée de la zone en cours d'interaction avec l'utilisateur, popup surgissant…), ce type de comportement étant déjà un problème y compris pour des personnes sans handicap flagrant.

Éléments obligatoires et structurants

Les éléments structurant vont être utilisés par les navigateurs spécifiques (ORCA pour l'audio…) et non par l'utilisateur du site web. Exemples :

le DOCTYPE doit correspondre au type de codage de la page (HTML4 transnational, HTML5…).
la langue et le codage du document doivent être indiqué (globalement et éventuellement par section). Voir l'attribut lang dans le tag html ou les div/section.
respecter l'ordre des tags : h1, h2… pour une même section.
distinguer la forme (généralement par CSS) du fond (tags HTML). La forme ne doit pas être considérée comme informative pour les outils alternatifs. Les nouveaux tags HTML header, section, figure/figcaption*... sont appréciables.

Formulaires

'or' Comme pour les liens, les boutons doivent avoir des intitulés claires.

Le champ des formulaires doivent être clair. Pour cela il faut utiliser les tags label.

Remarques importantes

Ce résumé est hyper réducteur de ce qu'il faut prendre en compte. Quid des personnes âgées peut habituer à l'outil informatique alors que l'interaction avec notre société passe de plus en plus à travers ces outils. Sans parler des handicaps moins connus et plus répandus que ce que l'on pense (vision tubulaire, handicap intellectuel, les troubles DYS...).

Ne pas oublier que la souris n'est pas utilisable par tous (physiquement ou psychologiquement). Il faut donc intégrer la navigation au clavier avec les touches TAB et ENTREE, éventuellement ESPACE, ESC, sans oublier les raccourcies par tag HTML5.

Tout comme le développement des sites en Mobile First, il existe un Accessibility First Step permettant de se faire rapidement une idée du niveau d'accessibilité d'un site.

Un livre à lire en profondeur, des formations à suivre et de l'évangélisation à poursuivre.

Merci d'avance pour tous.

Antoine