Qu'est ce que l'accessibilité web ?

L’accessibilité web est donc un concept bien plus large que l'adapatation des pages web à des utilisateurs dont la vision est réduite. 

Quelques grands principes de l'accessibilité web

En conception de site web, nos consultants AMOA appliquent des méthodes de "conception universelle" (Universal Design) dérivées de l'architecture dont les principes peuvent être résumés ainsi : 

- ne pas désavantager des utilisateurs par rapport aux autres

- offrir une flexibilité d'utilisation et une tolérence à l'erreur

- garder une simplicité intuitive et une information claire

- permettre un minimum d'efforts et offrir un confort d'utilisation

Un site web accessible pourra, entre autres :

• - être exploré et compris par un algorithme d’un moteur de recherche comme Google
• - être consulté depuis une connexion à faible bande passante
• - être lisible pour des utilisateurs ayant des troubles de la vision courant comme le daltonisme et n’utilisant pas de lecteur d’écran
• - être lu depuis un téléphone avec un écran cassé et un reflet de soleil,
• - être compris par des utilisateurs ayant des troubles de la mémoire ou de la concentration
• - être utilisé par des utilisateurs n’ayant aucune expérience du web

De nombreuses bonnes pratiques d’accessibilité sont techniquement simples à mettre en oeuvre. La difficulté pour les implémenter réside dans le fait que cela nécessite l’implication de toute l'équipe du projet : designers, développeurs et aussi les contributeurs. On retrouve encore une fois un des avantages de travailler avec un consultant web externe qui assurera une transversalité des bonnes pratiques.

Si vous n'êtes pas encore convaincu par la nécessité de concevoir et développer des pages web accessibles, il faut également noter que l’accessibilité web recoupe largement les problématiques de référencement naturel (SEO) : si votre site est optimisé pour être compris et utilisé par un lecteur d’écran, il sera aussi très bien lu par Google et le trafic qu’il aiguillera vers votre site sera d’autant plus qualifié. 

Un exemple d'accessibilité web : les images

Une bonne pratique d'accessibilité web est l'utilisation des balises alt des images pour renseigner une métadonnée qui décrit l'image. En effet, en respectant cette convention d'accessibilité les lecteurs d'écran des personnes malvoyantes ou bien les moteurs de recherche comme Google ou Bing peuvent comprendre de quoi l'image parle. Et oui, les moteurs de recherche peuvent maintenant analyser les images de façon satisfaisante pour dire ce qu’elles représentent, mais ils se trompent encore assez régulièrement et ne peuvent pas interpréter des images ironiques par exemple. Le nom donné à l’image est lui aussi significatif et pris en compte par les lecteurs d’écrans comme par les moteurs de recherche.

Pour l'illustrer, voici quelques exemples d’analyses d’images par Google Vision. Une version de l’algorithme de reconnaissance visuelle est disponible en ligne (ici) et nous avons fait 3 tests : 

1) Le test de la mangue

Au lieu de voir une mangue, Google voit des doigts…

 (crédit photo)

2) La scène du barbier

Par contre Google comprend bien la scène du barbier, scène de vie pas si ordinaire de nos jours mais il avertit que la scène peut être violente, on comprend bien pourquoi, mais dommage ce n’est évidemment pas le cas.

(crédit photo) 

3) Les bulles

Quant aux images plus abstraites (des bulles de savons en gros plan) Google y voit de l’eau.

(crédit photo) 

Donc résumons la problématique d’accessibilité d’une image d’une page web passe par : 

• - un bon nommage => c’est le boulot du designer web ou du contributeur
• - une implémentation de la balise alt dans le code html => c’est le boulot du développeur web
• - un renseignement de la balise alt avec une formulation pertinente du contenu de l’image => c’est le boulot du contributeur

Voilà pourquoi en général les balises alt sont rarement renseignées. Elles sont pourtant très utiles et peu coûteuses à mettre en place.

Pour en savoir plus sur notre offre de conseil web : 

Notre offre de consulting web

Accessibilité web : élargissez votre audience !

Prenons le cas des textes. 

La taille de la police est bien entendu un facteur important d’accessibilité pour les personnes mal voyantes mais avec la dizaine de million de lunettes de vues vendues chaque année en France, on peut également penser à ceux qui ont oublié leurs binocles à la maison… En travaillant l’accessibilité de votre site web, vous élargissez votre audience. 

De même pour le contraste entre la couleur de fond de la page et la couleur de la fonte. Il doit être suffisant pour assurer une bonne lecture quel que soit l'écran. Environ vingt pourcent de la population masculine est atteinte de daltonisme plus ou moins fortement et pour prendre en compte ces défauts de visions très répandus il suffit d’utiliser des couleurs éloignées au niveau du spectre lumineux.

Troisième exemple très courant de bonne pratique d'accessibilité : la compatibilité mobile en lecture et en écriture. Les petits écrans doivent pouvoir afficher le site de façon optimale pour qu'on puisse lire mais aussi cliquer avec nos doigts qui sont bien moins précis qu'une souris. Ainsi certain moteurs de recherche pénalisent le référencement mobile d'un site si les boutons ne sont pas assez espacés et qu'il est difficile de cliquer sans équivoque sur l'un ou l'autre.

Comment savoir si un site web est accessible ?

La conformité aux règles d'accessibilité s'évalue sur de nombreux critères définis par la norme WCAG 2.0. La norme est progressive, il existe 3 niveaux que l'on peut atteindre en suivant les règles énoncées dans le document de référence : https://www.w3.org/Translations/WCAG20-fr/

Vous pouvez testez rapidement l’accessibilité d’un site web avec des outils en ligne comme http://wave.webaim.org.

Le W3C référence une série d’outils plus ou moins en libre accès : https://www.w3.org/WAI/ER/tools/

Pour aller plus loin vous pouvez nous contacter pour une audit de votre site !

Notre offre de consulting web

Documents de références :

https://fr.wikipedia.org/wiki/Web_Accessibility_Initiative

https://www.w3.org/Translations/WCAG20-fr/

Merci à Yomex Owo pour l'illustration