avril 18, 2024

Accessibilité web

Ou l'art de rendre un site web accessible à tous.

L’accessibilité web vise à garantir que les sites web et les applications en ligne soient accessibles à tous, y compris aux personnes handicapées, en offrant une expérience utilisateur équitable et inclusive.

De manière générale, l’accessibilité web peut être pensé de 3 points de vue qui doivent fonctionner ensemble :

Le contenu web : Tous les composants d’un site doivent être pensés en terme d’accessibilité (les textes, les images, formulaires, éléments multimédia ainsi que les ancres de code, les scripts, les applications, etc.)
Les outils pour accéder au web : les logiciels doivent être adaptés eux-aussi (navigateurs avec des interfaces graphiques, des lectures de contenus par voix, les navigateurs sur mobile, les lecteurs multimédia, les plugins
et autres technologies d’assitance)
Les outils pour générer du contenu web : les éditeurs de code, les outils de conversion de documents, les systèmes de gestion de contenus, les blogs, les scripts de base de données)

Nous ne nous pencherons dans cet article que sur le point de vue du contenu web et laissons les sujets des logiciels, que ce soit pour accéder au contenu ou pour en générer, pour d’autres articles.

Normes et directives

Les WCAG (Web Content Accessibility Guidelines) sont des normes internationales développées par le W3C (World Wide Web Consortium) qui fournissent des recommandations détaillées pour rendre le contenu web accessible à tous et donc aux personnes handicapées. Les WCAG sont organisés en quatre principes fondamentaux : Perceptibilité, Utilisabilité, Compréhensibilité et Robustesse (dont l’acronyme en anglais est POUR), avec des critères de succès spécifiques pour chaque principe.

Perceptibilité : Ce principe concerne la présentation de l’information de manière à ce qu’elle soit perceptible par tous les utilisateurs, indépendamment de leurs capacités sensorielles. Les critères de succès associés à ce principe incluent :
- Les textes Alternatifs : Toutes les images non textuelles doivent être accompagnées d’un texte alternatif qui décrit le contenu de l’image pour les utilisateurs aveugles ou malvoyants. C’est aussi le cas pour les boutons, icônes et autres éléments gaphiques comme les diagrammes.
- Un contraste minimum : Le texte et les images de texte doivent avoir un rapport de contraste suffisant par rapport à l’arrière-plan pour assurer une lisibilité optimale pour les utilisateurs ayant une vision réduite. La couleur ne doit pas être le seul moyen de véhiculer de l’information ni d’identifier des éléments.
- Aucune information ne doit être perdue si l’utilisateur augmente la taille des textes et les contenus audios ne doivent pas être trop forts et doivent pouvoir être arrêtés et redémarrés facilement.
Utilisablilité : Ce principe concerne la facilité d’utilisation du contenu, en permettant à tous les utilisateurs d’interagir de manière efficace avec le site web. Les critères de succès associés à ce principe incluent :
- La navigation clavier : Toutes les fonctionnalités du site doivent être accessibles au clavier, permettant aux utilisateurs de naviguer et d’interagir sans utiliser de souris.
- Un temps suffisant : Les utilisateurs doivent avoir suffisamment de temps pour lire et utiliser le contenu sans qu’il ne change ou ne se mette à jour automatiquement de manière inattendue.
- Éviter les pièges au clavier : Les utilisateurs doivent pouvoir naviguer sur le site sans se retrouver coincés dans des éléments qui ne peuvent être déplacés ou échappés avec le clavier.
- La navigabilité : Les contenus doivent être correctement organisés pour que les utilisateurs puissent naviguer facilement, trouver le contenu qu’ils cherchent et repérer où ils se trouvent rapidement sur le site.
  Ceci implique une clarté dans les titres, plusieurs façons de se rendre sur une même page, une exposition claire de la structure du site et de la page où se trouve l’utilisateur.
- Les saisies d’entrée : Différents types de saisie peuvent être utilisés en dehors du clavier. On retrouve les écrans tactiles, la reconnaissance de la voix ou encore la reconnaissance gestuelle. En conséquence, les gestes ne doivent pas être trop exigeant en terme de dextérité, les composants doivent être conçus pour éviter les activations accidentelles et doivent être assez gros pour permettre l’activation tactile.
Compréhensibilité : Ce principe concerne la présentation de l’information de manière à ce qu’elle soit compréhensible par tous les utilisateurs, indépendamment de leur niveau de compétence ou de leur expérience.
Les critères de succès associés à ce principe incluent :
- La lisibilité : Le texte doit être écrit de manière claire et simple, évitant les jargons et les terminologies complexes qui pourraient être difficiles à comprendre pour certains utilisateurs.
- La prévisibilité : Les fonctionnalités du site doivent être cohérentes et prévisibles, permettant aux utilisateurs de prédire le comportement du site et de naviguer efficacement.
Robustesse : Ce principe concerne la fiabilité et la robustesse du contenu, en veillant à ce qu’il fonctionne correctement sur une variété de technologies et de dispositifs.
Le contenu doit ainsi être compatible avec une gamme de technologies d’assistance, de navigateurs et de dispositifs, garantissant ainsi une accessibilité maximale pour tous les utilisateurs.

Mise en pratique

Une structuration sémantique de qualité peut être conçue en utilisant des balises HTML de manière stratégique pour organiser le contenu de manière logique et hiérarchique. Cela implique l’utilisation de balises sémantiques telles que <header>, <nav>, <main>, <footer>, etc. pour clarifier la structure et le sens du contenu, tout en améliorant la compréhension pour les utilisateurs et les moteurs de recherche.
Le site de la BBC utilise ces balises sémantiques HTML pour organiser clairement son contenu. Par exemple, le <header> contient le logo et le menu de navigation, tandis que le <footer> contient des liens vers les sections du site et des informations sur l’entreprise. Cette structuration facilite la navigation et la compréhension du contenu pour les utilisateurs.

Il est également important d’assurer une lisibilité optimale en utilisant des combinaisons de couleurs avec un contraste suffisant entre le texte et l’arrière-plan. Cela garantit que le texte est facilement lisible, en particulier pour les utilisateurs ayant une vision réduite. Les lignes directrices en matière de contraste, telles que celles définies par le WCAG, doivent être respectées pour garantir une accessibilité maximale.
L’entreprise Dropbox utilise pour son site des combinaisons de couleurs avec un contraste élevé entre le texte et l’arrière-plan, ce qui rend le texte facilement lisible même pour les utilisateurs ayant une vision réduite. Les couleurs utilisées sont également conformes aux directives en matière de contraste du WCAG, garantissant une accessibilité maximale pour tous les utilisateurs.

Dans le cadre de la perceptabilité, on fournira des alternatives textuelles pour les médias non textuels tels que les images, les médias audio et vidéo, ainsi que les graphiques et les infographies. Cela se fait en utilisant des attributs alt pour les images, des sous-titres pour les médias audio et vidéo, et des descriptions textuelles pour les graphiques. Ces alternatives permettent aux utilisateurs aveugles ou malvoyants d’accéder au contenu de manière équitable.
Wikipedia fournit des alternatives textuelles pour les médias non textuels tels que les images. Chaque image est accompagnée d’une description textuelle grâce à l’attribut alt, permettant aux utilisateurs aveugles ou malvoyants de comprendre le contenu de l’image même s’ils ne peuvent pas la voir.

Pour répondre aux critères d’utilisabilité, il est nécéssaire d’assurer une navigation claire et cohérente en utilisant des éléments interactifs bien conçus. Cela comprend l’utilisation de liens descriptifs, de titres significatifs, de menus déroulants accessibles au clavier et d’étiquettes explicites pour les formulaires. Ces pratiques améliorent l’expérience utilisateur en permettant une navigation intuitive et en réduisant les obstacles à l’interaction.
Le gouvernement britannique assure sur son site internet une navigation claire et cohérente en utilisant des éléments interactifs bien conçus. Les liens sont descriptifs et facilement repérables, les titres sont significatifs et les formulaires sont dotés d’étiquettes explicites. Cette approche facilite la navigation et l’interaction pour tous les utilisateurs.

Pour finir et s’assurer d’un résultat satisfaisant, il est conseiller d’effectuer des tests d’accessibilité réguliers en utilisant des outils d’évaluation automatique et en effectuant des audits manuels. Ces tests permettent d’identifier et de corriger les problèmes d’accessibilité, en assurant que le site est conforme aux normes et réglementations en matière d’accessibilité. Impliquer idéalement des utilisateurs handicapés dans le processus de test permet d’obtenir des retours précieux sur l’accessibilité réelle du site.
Google Accessibility met en œuvre des tests et des audits réguliers pour garantir l’accessibilité de son site web. Ils utilisent des outils d’évaluation automatique et effectuent des audits manuels pour identifier et corriger les problèmes d’accessibilité. De plus, ils sollicitent régulièrement les retours des utilisateurs handicapés pour améliorer continuellement l’accessibilité de leur site.

En respectant les WCAG et en mettant en œuvre les critères de succès associés à chaque principe, les concepteurs peuvent garantir que leur site web est accessible à tous, offrant ainsi une expérience utilisateur inclusive et équitable pour les personnes handicapées. Cela peut également aider les entreprises à se conformer aux réglementations en matière d’accessibilité et à renforcer leur réputation en tant qu’organisations socialement responsables.