Rendre Le Web Plus Accessible

pour que nous puissions tous en profiter

11 min readJul 6, 2021

Qu’est-ce que c’est l’accessibilité ?

L’accessibilité peut être considérée comme la « capacité d’accéder » et de bénéficier d’un système. Le sens considéré ici se réfère à la conception de produits, appareils ou services de manière à être utilisables par des personnes ayant le plus large éventail de capacités possible, opérant dans le plus large éventail de situations possible. Il s’agit de rendre les choses accessibles à tous (que l’on ait un handicap ou non).

L’objectif derrière l’accessibilité est de faciliter l’accès à notre application aux personnes handicapées ou ayant des besoins spécifiques. Cela passe par garantir un « accès direct »(sans assistance) et un « accès indirect » (en s’assurant de la compatibilité avec les outils d’aide aux personnes, type liseuses d’écran). Cependant, la recherche et le développement en matière d’accessibilité sont avantageux pour tous.

L’accessibilité ne doit pas être confondue avec la utilisabilité, qui est la mesure dans laquelle un produit peut être utilisé par des utilisateurs spécifiques pour atteindre des objectifs spécifiés avec efficacité et satisfaction dans un contexte d’utilisation spécifié.

Quel est l’impact ?

Tout le monde rencontre des barrières d’accessibilité lorsqu’il y a un décalage entre nos besoins et notre environnement. L’expérience de l’inadéquation peut être permanente, temporaire ou situationnelle.

Par exemple (1. n’utiliser qu’un seul bras | 2. ne pas entendre) :

Permanente : avoir un bras | être sourd
Temporaire : avoir une blessure au bras | avoir une infection de l’oreille
Situationnelle : porter des produits d’épicerie lourds | porter des écouteurs antibruit

Si vous concevez un produit, tel qu’un haut-parleur à commande vocale, les personnes à mobilité réduite et celles qui effectuent plusieurs tâches (cuisiner, conduire) peuvent également l’utiliser. C’est ce qu’on appelle l’effet Curb-cut (coupe-trottoir).

ℹ️ L’effet Curb-cut tire son nom des rampes d’accès (« Curb-cut » en anglais), ces zones du trottoir qui descendent jusqu’au niveau de la route. Elles ont été adoptées dans des villes du monde entier pour aider les personnes à mobilité réduite à monter et à descendre du trottoir. Cependant, de nombreuses personnes en bénéficient, y compris les cyclistes, les parents avec des poussettes, les voyageurs avec des valises à roulettes et à peu près n’importe qui d’autre avec un jeu de roues.

Comment les utilisateurs se servent des technologie d’assistance ?

Les technologies d’assistance (TA) sont des dispositifs, du matériel et des logiciels spécialisés qui vont au-delà de ce qui peut être accompli avec les produits traditionnels pour surmonter les obstacles à l’accessibilité.

Les fonctionnalités de personnalisation telles que le contraste élevé et les couleurs inversées peuvent aider les utilisateurs ayant une faible acuité visuelle et une faible sensibilité à la lumière. Lorsque les gens sont incapables de percevoir les informations visuelles avec des modifications, les lecteurs d’écran et les afficheurs braille peuvent émettre dans d’autres modalités. Les lecteurs d’écran convertissent les informations en sons et les afficheurs braille en informations tactiles.

Il est possible de modifier la façon dont les utilisateurs interagissent avec les appareils en modifiant la façon dont ils reçoivent les entrées. Par exemple, les utilisateurs qui subissent des tremblements peuvent frapper des touches involontairement, afin de pouvoir modifier la vitesse des touches et la durée de maintien. Les gens peuvent également utiliser le suivi de la tête, le regard oculaire et la commande vocale comme alternatives au clavier et à la souris.

Mais que peut bien être le WCAG ?

Pour aider les gens à réfléchir à ce qui est nécessaire pour rendre les sites plus accessibles, le World Wide Web Consortium (W3C) a créé les Web Content Accessibility Guidelines (WCAG).

Les quatre principes majeurs de l’accessibilité sont :

Perceptible (le contenu peut être présenté selon différentes modalités : vue, son et toucher)
Opérable (le contenu peut être interagi de différentes manières, pas seulement à l’aide d’une souris ou de gestes spécifiques)
Compréhensible (le contenu est prévisible, clair et aide les utilisateurs avec les interactions)
Robuste (le contenu est compréhensible par un vaste panel d’utilisateurs aux handicaps variés et par différents types d’outils d’assistance)

Quels que soient les changements technologiques, ces principes fondamentaux seront toujours valables. Dans chaque principe, il existe plusieurs lignes directrices, et dans chaque ligne directrice se trouvent des critères de réussite spécifiques et testables.

Mais tout comme le fait de respecter la loi ne garantit pas forcément un comportement éthique, suivre les règles d’accessibilité Web ne garantit pas pour autant un design inclusif. Cela permet juste de répondre aux exigences minimales.

Créer du contenu perceptible

Pour pouvoir percevoir les images, les icônes ou encore des graphiques, les personnes malvoyantes ont besoin de descriptions textuelles. Ces descriptions peuvent être ajoutées au code HTML et peuvent être lues par des technologies d’assistance.

Toutes les vidéos doivent être sous-titrées pour les utilisateurs qui ne peuvent pas entendre, et tout le contenu audio, comme les épisodes de podcast ou les enregistrements de réunion, doit comporter des transcriptions.

⏯ De nos jours, de nombreux lecteurs vidéo vous permettent d’ajouter automatiquement des sous-titres à votre contenu. Le problème avec les sous-titres automatiques est qu’ils ne suivent pas les meilleures pratiques pour créer une expérience de lecture facile. Ils n’incluent pas de ponctuation, ont souvent une orthographe incorrecte et parfois le texte est complètement faux. Donc, vérifiez toujours la qualité des sous-titres automatisés pour plus de précision, ajoutez de la ponctuation, ajustez les points de rupture si nécessaire et ajoutez des informations non vocales importantes à l’aide de crochets.

Une hiérarchie des titres est l’une des choses apparemment les plus simples, mais les plus importantes, que vous puissiez faire pour rendre votre contenu accessible.

Utilisez les bonnes balises de titre (h1, h2 etc.) dans votre code HTML,, afin que les utilisateurs de technologies d’assistance puissent parcourir la structure de la page et passer d’un titre à l’autre. C’est un moyen beaucoup plus efficace de naviguer. Une bonne hiérarchie des titres fonctionne comme une carte et aide les utilisateurs à comprendre rapidement la structure de votre contenu, à parcourir la page et à trouver les informations qu’ils recherchent.

Une autre chose importante à garder à l’esprit est que contrairement à la présentation visuelle, les technologies d’assistance doivent linéariser le contenu car, avec le son et le braille, une seule chose peut être communiquée à la fois. Lorsque le contenu est linéarisé, il doit toujours apparaître dans un ordre logique, de sorte que l’ordre du code doit correspondre à l’ordre visuel.

Enfin, vous ne devez jamais vous fier à un type spécifique de signal sensoriel.

Évitez les instructions telles que « appuyez sur le gros bouton bleu » ou « vous entendrez un bip une fois le test terminé », car ces instructions seraient inutiles pour les personnes qui ne peuvent percevoir ces signaux.

Assurez-vous que votre interface est opérationnelle

Chaque élément interactif du site doit pouvoir fonctionner avec un clavier, pas parce que toutes les personnes qui ne peuvent pas utiliser la souris ou les interactions tactiles seront des utilisateurs de clavier. L’utilisation du clavier se traduit bien par d’autres modes d’interaction alternatifs, et les interactions du lecteur d’écran sont souvent basées sur le clavier.

Le temps dont les gens ont besoin pour accomplir une tâche est très différent d’une personne à l’autre! Si vous avez un contenu en mouvement ou mis à jour automatiquement, donnez aux utilisateurs la possibilité de l’arrêter ou de le supprimer complètement.

Voici une règle simple : ne pas avoir d’effets de clignotements à plus de trois flashs par seconde, car cela peut déclencher des crises chez certaines personnes.

Rendez votre site compréhensible

La lisibilité est la facilité avec laquelle vous pouvez reconnaître les lettres et les distinguer. La lisibilité est la facilité de lecture des mots dans une phrase ou un paragraphe.

Certaines polices ont des lettres qui se ressemblent beaucoup, telles que la lettre majuscule O et le chiffre 0, ou les lettres minuscules g et q. Les polices lisibles peuvent être particulièrement utiles pour les utilisateurs ayant des difficultés de lecture, mais elles permettent à tout le monde de lire et de comprendre plus facilement le texte.

Une façon de tester une police sur l’ambiguïté des caractères consiste à utiliser le test Il1. Essayez-le par vous-même! Choisissez quelques caractères que vous utilisez et tapez la lettre majuscule I, la lettre minuscule l et le chiffre 1 côte à côte. Les polices lisibles seront conçues de manière à faciliter la différenciation de ces caractères. Dans les polices à faible lisibilité, les caractères peuvent sembler pratiquement identiques.

Vous pouvez améliorer la lisibilité et la lisibilité en choisissant des polices avec des ouvertures et des compteurs ouverts, en vous assurant qu’il y a suffisamment d’espace autour du texte et que le trait est uniforme.

Les lecteurs d’écran ont besoin de savoir quelle langue ils lisent pour pouvoir la prononcer correctement. Il aide également les navigateurs à afficher les bons caractères alphabétiques. Définissez la langue de votre contenu par programmation, à la fois pour la page HTML entière et les paragraphes de texte qui apparaissent dans une langue différente (pour ces morceaux de texte séparément).

Répétez régulièrement les éléments (comme la navigation) d’une page à l’autre. S’il y a des éléments qui remplissent une fonction similaire, ils doivent être étiquetés, avoir la même apparence et se comporter de la même manière.

Les éléments visuels importants doivent avoir un contraste suffisant avec l’arrière-plan.

Les designers trouvent souvent que les exigences d’accessibilité relatives aux couleurs sont restrictives et craignent de ne pas pouvoir utiliser des couleurs ou des combinaisons spécifiques s’ils souhaitent rendre leurs créations accessibles. S’il est vrai que les exigences d’accessibilité posent certaines contraintes, elles ne limitent jamais les couleurs que vous pouvez utiliser dans votre palette, mais uniquement la façon dont vous les utilisez.

Quelles que soient les couleurs que vous utilisez dans votre travail, assurez-vous qu’au moins certaines combinaisons ont un contraste suffisamment élevé. Les WCAG 2.1 exigent un rapport de contraste entre le texte et l’arrière-plan d’au moins 4,5: 1 pour le texte normal et de 3: 1 pour le texte grand (18 pt) et gras (14 pt) au niveau AA.

⁉️ Avez-vous déjà rempli un formulaire qui a été retourné avec un tas de champs surlignés en rouge, mais aucune explication pourquoi? Cela peut être très frustrant. Essayez d’être aussi précis que possible sur les informations que les utilisateurs doivent saisir.

La couleur peut être efficace pour attirer l’attention de l’utilisateur sur des zones spécifiques de la page et pour aider les utilisateurs à identifier différents types d’informations en un coup d’œil. Cependant, les indices de couleur ne sont pas utiles aux utilisateurs aveugles ou qui perçoivent la couleur différemment. Bien que vous ne devriez pas hésiter à utiliser la couleur, pour concevoir de manière inclusive, vous devez vous assurer que des indices supplémentaires sont également disponibles.

N’utilisez la couleur que comme signal secondaire pour communiquer des informations.

Créez un contenu Web robuste

Tout d’abord, vous devez vous assurer qu’il n’y a pas d’erreurs de validation dans votre balisage. Des erreurs de balisage telles que des identifiants en double ou des balises de début et de fin erronées peuvent empêcher les technologies d’assistance de communiquer correctement les informations.

Deuxièmement, assurez-vous que tous les éléments du site, en particulier les composants personnalisés, ont des rôles, des états et des propriétés attribués.

Comment gérer les tests d’accessibilité ?

L’accessibilité est un travail d’équipe! Chaque personne dans une organisation doit faire sa part pour s’assurer que les produits répondent aux exigences d’accessibilité. Cela inclut les développeurs, les designers, les chefs de produit, les créateurs de contenu et les testeurs d’assurance qualité. Tout le monde n’a pas besoin d’être un expert en accessibilité, mais chacun doit savoir quelles considérations d’accessibilité s’appliquent à son rôle. Les concepteurs visuels doivent vérifier leur contraste de couleur et choisir des polices accessibles. Les designers d’interface utilisateur doivent être conscients des différentes modalités d’interaction. Les développeurs doivent s’assurer qu’ils utilisent un balisage accessible. Les créateurs de contenu doivent vérifier que leurs matériaux sont clairement structurés et fournir des descriptions pour les images. Les chefs de produit doivent définir les exigences d’accessibilité lors de la planification d’un projet et vérifier qu’elles sont respectées.

Il est préférable de tester l’accessibilité au fur et à mesure et de l’aborder comme un processus itératif.

Vérificateurs automatisés

Il existe de nombreux outils de test automatisés, mais la plupart d’entre eux identifieront les mêmes types de problèmes. Les outils de test automatisés sont très limités. L’interprétation des résultats exigera toujours un jugement humain.

Voici quelques outils que vous pouvez essayer :

Lighthouse (Chrome)
Axe (Chrome)
WAVE (Chrome and Firefox)
HeadingsMap (Chrome)
Nu Html Checker
TPG Colour Contrast Analyser
VoiceOver (Utilisateurs Mac uniquement)
NVDA screen reader (Utilisateurs PC uniquement)

Rapport basé sur WCAG

Pour tous les problèmes détectés par les vérificateurs automatisés, assurez-vous de les parcourir manuellement avant de les inclure dans votre rapport.

Si vous évaluez un site dans son ensemble, il peut être utile d’organiser vos résultats en fonction des critères de réussite des WCAG. Vous pouvez créer une table avec les colonnes suivantes:

Nom et numéro du critère de succès : identifiez le critère par son nom et son numéro de référence, et incluez un lien vers le document WCAG pour plus de commodité.
État général : répond aux exigences / nécessite des correctifs mineurs / nécessite des correctifs majeurs
Commentaires : des détails sur vos résultats ainsi que des exemples spécifiques, des captures d’écran et des recommandations dans la mesure du possible. En cas de doute, décrivez le problème que vous rencontrez et qui, selon vous, pourrait être touché.

Et ensuite ?

Idéalement, nous penserons à l’accessibilité dès le début du processus de conception et le communiquerons à toutes les équipes. En réalité, les designers ne pensent toujours pas assez à l’accessibilité. Les développeurs implémentent des modèles basés sur des conceptions visuelles sans nécessairement avoir suffisamment d’informations sur le comportement prévu. Les propriétaires de produits ne savent pas toujours ce qu’il faut rechercher pour déterminer s’ils ont quelque chose qui est accessible.

La réflexion sur l’accessibilité doit se faire dans plusieurs rôles et départements différents, la communication est donc essentielle ! Les meilleures solutions varieront en fonction du projet, de l’organisation et du degré de collaboration entre les départements. Autant que possible, essayez d’intégrer ce travail aux processus et pratiques déjà en place.

Si vous souhaitez approfondir ce sujet, je vous suggère fortement de suivre le cours Concevez Un Contenu Web Accessible @ OpenClassrooms.com

Il s’agit d’un cours simple de six heures qui fera de vous un expert de l’accessibilité pour le web 💪