L'accessibilité numérique
Brouillon publié le 2 mars 2025 sous licence CC BY-SA 4.0, par Yannick A.
L'accessibilité numérique est un enjeu primordial car nous sommes tous à moment donné en situation de handicap. Il est donc important de s'assurer que les sites web et applications soient accessibles à tous.
En plus d'améliorer l'expérience utilisateur des personnes en situation de handicap, l'accessibilité profite également aux utilisateurs qui ne le sont pas, en proposant des interfaces plus sobres, avec une bonne taille de texte, un bon contraste et une navigation simplifiée.
Aussi, n'oublions pas que les personnes en situation de handicap peuvent éprouver certaines difficultés dans leur quotidien, il est donc de notre ressort à nous, acteurs du numérique, de s'assurer de ne pas leur créer de barrières supplémentaires.
Si quelques concepts peuvent être difficiles à appréhender ou à mettre en œuvre, la plupart d'entre eux peuvent être compris et mis en œuvre avec un peu d'effort. C'est l'ampleur du projet et les dépendances externes qui peuvent faire apparaitre les plus grandes difficultés. Aussi, il faut faire preuve de rigueur dans la durée et s'assurer que le projet reste toujours accessible au plus grand nombre.
Avant de creuser le comment mettre en œuvre l'accessibilité numérique, il est important de définir et de comprendre quelques concepts.
Qu'est-ce que l'accessibilité ?
L'accessibilité peut se définir ainsi :
Conception de produits, d'équipements, de programmes et de services nécessaires à toute personne en incapacité permanente ou temporaire pour se déplacer et accéder librement et en sécurité à son logement, ainsi qu'à tous les lieux public / activité.
https://www.monparcourshandicap.gouv.fr/glossaire/accessibilite
Qu'est-ce que l'accessibilité numérique ?
L'accessibilité numérique peut se définir ainsi :
L'accessibilité numérique consiste à rendre les contenus et services numériques compréhensibles et utilisables par les personnes en situation de handicap.
Qu'est-ce que le handicap ?
Le handicap peut se définir ainsi :
Constitue un handicap, toute limitation d'activité ou restriction de participation à la vie en société subie dans son environnement par une personne en raison d'une altération substantielle, durable ou définitive d'une ou plusieurs fonctions physiques, sensorielles, mentales, cognitives ou psychiques, d'un polyhandicap ou d'un trouble de santé invalidant.
Source de l'image : L’accessibilité numérique et le design inclusif - Ippon.
Le handicap peut être permanent (suite à une maladie ou a un accident par exemple), temporaire (suite à une blessure ou une maladie), situationnel (suite à une situation de handicap temporaire) ou dû au vieillissement.
Le handicap finit donc par toucher tout le monde, plus ou moins longtemps, plus ou moins gravement, plus ou moins tardivement.
À quels besoins répondre ?
Pour qu'un site web soit accessible, il faut répondre notamment aux besoins suivants :
-
Problèmes de vue, notamment la vue floue, le daltonisme et la perte partielle ou totale de la vue.
-
Problèmes de mobilité, notamment le tremblement des mains ou la perte de mobilité des mains ou des bras.
-
Problèmes d'audition, notamment la perte partielle ou totale de l'audition.
-
Problèmes cognitifs, notamment la perte partielle ou totale de la mémoire, les troubles de l'attention et les troubles de l'apprentissage.
Comment mettre en place l'accessibilité sur le web ?
À défaut de pouvoir répondre à tous les usages numériques, nous allons ici nous concentrer sur le web. Néanmoins la plupart des concepts s'adaptent à des usages plus larges.
Avoir un texte de taille suffisante
Les problèmes de vue étant les plus fréquents (source ?), le premier point à prendre en compte est la taille du texte. Un texte trop petit peut être difficile à lire. Il est donc important de s'assurer que le texte puisse être lu facilement par n'importe qui. Pour le texte, il est conseillé une taille minimale de 16px (source ?). Si jamais le texte doit être plus petit pour certaines raisons, il est déconseillé d'aller en dessous de 12px (source ?).
Facilité de mise en œuvre : facile. Il faut s'assurer qu'aucun texte ne soit trop petit.
Respecter un contraste suffisant
En continuité avec le point précédent, il est important de s'assurer que les contrastes soient suffisants pour que les textes et autres contenus soient lisibles. Un texte avec trop peu de contraste peut être difficile à lire.
Exemple d'outil qui permet de vérifier le contraste entre deux couleurs (le fond et le texte) : Contrast Checker - WebAIM.
Il est conseillé de respecter un contraste minimum AA, et si possible AAA (source ?).
Aussi, il convient d'utiliser des couleurs qui s'affichent correctement pour les personnes daltoniennes. Il faut donc veiller à ce que les couleurs choisies s'adaptent à ces besoins.
Aussi, il faut s'assurer que la couleur n'est jamais le seul moyen de différencier des éléments. Dans le cas d'un graphique par exemple, il est possible d'utiliser différentes couleurs, mais il faut associer à chaque couleur un motif de sorte à pouvoir distinguer les informations autrement que par la couleur.
Source de l'image : https://developer.squareup.com/blog/accessible-colors-for-data-visualization/.
À noter qu'en CSS il existe la caractéristique média @media (prefers-contrast: more) { ... } qui permet d'augmenter le contraste spécifiquement pour les utilisateurs ayant indiqué une préférence pour un contraste plus élevé. Ainsi, si jamais l'interface doit respecter certaines contraintes de design par exemple, il est alors possible d'utiliser cette caractéristique média pour augmenter le contraste seulement pour les utilisateurs ayant indiqué une préférence pour un contraste plus élevé.
Facilité de mise en œuvre : facile. Il faut s'assurer que les contrastes sont respectés.
Ne placer les évènements click que sur les éléments interactifs
Les évènements click et équivalents doivent être placés uniquement sur les balises suivantes : <a>, <button>, <input type="button">, <input type="submit">, <input type="reset">, <summary> et <select>.
Pourquoi ? car seuls ces éléments sont interactifs. Les autres ne peuvent pas être cliqué par un utilisateur qui utilise un clavier ou un lecteur d'écran, ce qui casse l'accessibilité.
Facilité de mise en œuvre : facile. Il faut s'assurer que seuls les éléments interactifs ont des évènements click.
Renseigner correctement l'attribut alt aux images
L'attribut alt d'une image permet de décrire le contenu de l'image. Si l'image est purement illustrative, l'attribut alt reste à renseigner, mais avec une valeur vide (alt=""). Si l'image apporte de l'information, il est nécessaire soit de décrire son contenu (par exemple « Une table avec un ordinateur au centre »), soit de fournir une alternative textuelle.
Facilité de mise en œuvre : facile. Il faut s'assurer que les images ont un attribut alt approprié.
Mettre en avant les éléments qui ont le focus
Il est important de mettre en avant les éléments qui ont le focus pour faciliter la navigation. Les personnes naviguant au clavier peuvent avoir du mal à identifier l'élément actif. Il est donc important de mettre en avant l'élément qui a le focus.
En CSS, il est possible d'utiliser la pseudo-classe :focus (active dès qu'un élément a le focus) ou :focus-visible (active uniquement lorsque l'utilisateur navigue au clavier*) pour mettre en avant les éléments qui ont le focus.
Facilité de mise en œuvre : facile.
* C'est un peu plus complexe en réalité.
Mettre en places des sous-titres et transcriptions pour les vidéos
Si l'un de vos contenus est une vidéo, il est nécessaire de fournir des sous-titres et une transcription.
Facilité de mise en œuvre : complexe. Il est nécessaire de retranscrire les vidéos et d'associer un temps à chaque dialogue.
S'assurer que chaque lien est assez gros et a assez de marge par rapport aux autres liens
Pour s'assurer que le lien puisse être cliqué facilement par un pouce ou par une personne avec une mobilité réduite, il est recommandé d'utiliser une taille de police de 16px minimum et d'ajouter une marge de plusieurs pixels entre les liens.
Facilité de mise en œuvre : facile.
Mettre en place un lien d'évitement
https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/lien-d-evitement/
Facilité de mise en œuvre : facile.
Utiliser au maximum des balises sémantiques
Par exemple <strong> plutôt que <b>, ou bien utiliser <header> ou <footer> plutôt que <div>. Définir la langue de la page.
Facilité de mise en œuvre : facile.
Utiliser les attributs ARIA
https://developer.mozilla.org/fr/docs/Web/Accessibility/ARIA
Facilité de mise en œuvre : moyen.
S'assurer que chaque élément de formulaire a un label
Utiliser un label pour les éléments, pas un placeholder. Et associer le label à l'élément du formulaire.
Facilité de mise en œuvre : facile.
S'assurer de l'ordre des éléments de focus
@todo
Facilité de mise en œuvre : moyen.
Activer les animations seulement pour les utilisateurs qui le veulent
Il est important de ne mettre en place les animations et transitions seulement pour les personnes qui le veulent.
Certaines personnes sont sensibles aux animations et préfèrent les désactiver. Il est donc important de permettre aux préférences de ces utilisateurs.
On conseille de partir du principe que les animations sont désactivées par défaut et de les activer uniquement pour les utilisateurs qui le veulent. En CSS, on utilise la caractéristique média @media (prefers-reduced-motion: no-preference) { ... } pour cela.
Facilité de mise en œuvre : facile.
S'assurer que le lien définisse où il va
Éviter « cliquez ici » ou « cliquez sur moi ». Préférer plutôt « Visitez notre page de contact » ou « Contactez-nous ».
Facilité de mise en œuvre : facile.
Utiliser CSS au maximum plutôt que JavaScript
Utiliser CSS au maximum plutôt que JavaScript pour assurer que le contenu est accessible et que les utilisateurs peuvent naviguer facilement sur le site.
Facilité de mise en œuvre : facile.
Ne pas écrire de texte en majuscules
@todo
Facilité de mise en œuvre : facile.
Proposer des options d'accessibilité
Par exemple votre site peut proposer de modifier la taille du texte, de changer le contraste ou bien de lire le contenu à haute voix.
Évitez cependant les extensions qui promettent de rendre votre site accessible sans effort. La vraie accessibilité ne peut être faite qu'à la source.