WhatZeWeb

La question de l'accessibilité est devenu un sujet incontournable, que l'on parle de transports, d'espaces publics, du monde du travail, de la santé, et de tout un tas d'autres domaines, y compris du numérique.
L'objectif de l'accessibilité est de permettre une vie ordinaire à tous les citoyens. 

Qu'est-ce que l'accessibilité numérique ? 

Dans le domaine du Web, l'accessibilité est un ensemble de règles définies pour garantir une utilisation optimale à tous les utilisateurs, quel que soit leur handicap.
Un site accessible, c'est un site qui permet, par exemple, de naviguer sans utiliser la souris, de personnaliser l'affichage du site selon ses besoins, d'utiliser les synthèses vocales.

Pourquoi est-ce important ?

Comme expliqué précédemment, l'enjeu est d'offrir un confort d'utilisation minimal à tous les utilisateurs.
De la même façon qu'il est impensable, aujourd'hui, de proposer un site qui ne serait pas adapté à une utilisation sur smartphone, cela semblerait aberrant de mettre à l'écart un nombre important de visiteurs.

Le WCAG et les différents niveaux

Le W3C a donc publié, dans le cadre de la Web Accessibility Initiative (WAI),  le WCAG (Web Content Accessibility Guidelines) 2.0, qui définit quatre grands principes et un certain nombre de directives et règles à respecter, classées par niveau, pour garantir une utilisation la meilleure possible.
Ces principes sont regroupés et expliqués sur le site w3.org

Ces grands principes sont :
- perceptible : les informations présentes sur le site doivent être perceptibles, c'est-à-dire qu'elles ne peuvent être invisibles pour tous les sens des utilisateurs
- utilisable : les utilisateurs doivent pouvoir utiliser l'interface (il ne peut y avoir des interactions qu'aucun visiteur ne pourrait effectuer)
- compréhensible : les utilisateurs doivent être en mesure de comprendre les informations et le fonctionnement de l'interface
- robuste : le contenu doit être suffisamment robuste pour rester accessible malgré les évolutions technologiques et doit pouvoir être interprété par un grand nombre d'agents utilisateur.

Les différents niveaux d'accessibilité d'un site Web vont du niveau A à AAA. 

Les directives

Directive 1.1 : Alternatives textuelles

L'objectif de cette directive est de garantir que tout le contenu non textuel peut également être disponible sous forme de texte.
Pour remplir cet objectif, on peut, par exemple utiliser les aria-label, les attributs alt sur les images, fournir des alternatives textuelles aux émoticônes.

Directive 1.2 : Support temporel

Le but de cette directive est de fournir un accès à des médias (audio, vidéo, combinés ou avec interaction) synchronisés et basés sur le temps.
Dans les critères de réussite, on trouve, par exemple, la présence de sous-titres, de légendes, l'utilisation de la langue des signes, etc.

Directive 1.3 : Adaptable

Il s'agit ici de créer un contenu pouvant être présenté de plusieurs manières sans perdre d'informations essentielles. Il s'agit, par exemple, de modifier le format de présentation lorsque le contenu est lu par un lecteur d'écran, ou encore d'adapter la manière dont on signale les champs obligatoires dans un formulaire. L'utilisation d'éléments sémantiques est également une bonne piste (aria, role, nav, etc.).
Il est également important, pour respecter cette directive, de fournir un "ordre de lecture" (par exemple, si le contenu est présenté sous forme de colonnes) et de ne pas s'appuyer que sur des caractéristiques sensorielles (taille, couleur, son, etc) pour permettre la compréhension.

Directive 1.4 : Distinguable

Il est essentiellement question de contraste ici : entre la couleur d'une police et la couleur de fond, ou entre les sons de premier plan et les bruits de fond.
Pour la taille des polices utilisées, elle doit être au minimum de 14pt (sauf pour les textes en gras) et le texte doit pouvoir être redimensionné jusqu'à 200% sans perte de contenu.

Directive 2.1 : Accessible au clavier

Cette directive nous indique que toutes les fonctionnalités doivent être disponibles à partir d'un clavier. L'exemple le plus courant est le fait de pouvoir naviguer d'un champ de formulaire au suivant avec la touche tabulation.

Directive 2.2 : Assez de temps

Il s'agit ici de donner suffisamment de temps aux utilisateurs pour lire et utiliser le contenu. Prenons par exemple un slider affichant les titres des derniers articles publiés sur un blog. L'utilisateur doit pouvoir augmenter le délai avant chaque changement, ou le mettre en pause afin d'avoir suffisamment de temps pour lire ces titres.

Directive 2.3 : Convulsions

Les flashs et autres visuels clignotants peuvent déclencher des crises épileptiques chez certaines personnes. Cette directive, dans ses grandes lignes, nous indique donc qu'il faut au maximum éviter ces éléments visuels et que le seuil à ne pas dépasser est de 3 clignotements par seconde.

Directive 2.4 : Navigable

Cette directive nous explique qu'il faut fournir les moyens d'aider les utilisateurs à naviguer sur le site, à trouver le contenu qu'ils recherchent facilement. 
Les méthodes les plus courantes sont le fil d'ariane, pour indiquer à l'utilisateur où il se trouve, et les entêtes de navigation. Il est également conseillé de limiter le nombre de liens par page.

Directive 3.1 : Lisible

Le contenu textuel doit être lisible et compréhensible. On trouve dans cette directive une liste assez longue de techniques, comme utiliser le langage le plus clair et le plus approprié au contexte, éviter le texte centré, ou en italique, utiliser des illustrations (images, symboles, etc.) ou des exemples pour clarifier le sens, etc.

 

Les outils pour vérifier l'accessibilité de son site

Il existe de nombreux outils pour vérifier le niveau d'accessibilité - et les points à corriger - d'un site. Je ne vous en présenterai que deux ici : Wave et achecker.

Wave est une extension disponible pour les navigateurs Chrome et Firefox.

Comme vous pouvez le voir sur cette capture d'écran (ici, un diagnostic du site Wave par Wave), en lançant Wave, un panneau va s'ouvrir et vous lister les différentes erreurs, alertes et autres informations de votre site web. Côté site, vous pouvez voir que des éléments ont été ajoutés, pour mettre en avant les attributs alt, les liens, les niveaux de titres, etc.
 

ACkecker (Accessibility Checker) quant à lui, vous permet de tester une page via son URL, ou en uploadant (ou collant) le code HTML. Il est possible de modifier le niveau de vérification (niveau A à AAA) et de valider en même temps le code HTML et CSS.

AChecker va générer un rapport (que vous pourrez exporter) recensant toutes les erreurs, alertes et problèmes potentiels rencontrés sur votre site.

 

En résumé

Il est devenu indispensable de se soucier de l'accessibilité lors de nos développements de sites, d'applications et de logiciels, pour ne plus laisser "sur le côté" un grand nombre d'utilisateurs.

Si on regarde de plus près, il s'agit en fait de replacer l'utilisateur au coeur du développement, de se mettre à sa place.

Sans chercher absolument et systématiquement à atteindre le niveau AAA, certaines bonnes pratiques très simples peuvent être mises en place :

1. S'assurer d'un bon niveau de contraste
2. Ne pas oublier l'attribut alt pour nos images
3. Utiliser au maximum des balises sémantiques
4. S'assurer que la navigation au clavier est cohérente et aisée
5. Faire en sorte que les éléments "spécifiques" sont facilement identifiables, comme les liens
6. Utiliser une police lisible, avec une taille suffisante
7. Rédiger un contenu de qualité, en cohérence avec le contexte

Pour des informations plus précises sur l'ensemble des bonnes pratiques et lignes directrices de l'accessibilité web, je vous invite vivement à consulter le site de l'initiative WAI du W3C.