Un design system accessible
Nous sommes tous différents, nous naissons avec des capacités et des incapacités.
Au cours de notre vie, nos capacités peuvent aussi changer, à la suite d’un accident, d’une maladie ou simplement en prenant de l’âge.
Pour autant, nous avons toutes et tous besoin d’avoir accès au même niveau d’information, aux mêmes services numériques tout au long de notre vie.
Il est donc essentiel que les services numériques ne soient pas un frein à l’accès à l’information mais bien au contraire une opportunité.
En France, en 2021, une personne sur sept, âgée de 15 ans ou plus, est en situation de handicap dans son usage des services numériques. En prenant en compte l’accessibilité numérique dans le Design System NEO, nous nous assurons que les composants soient accessibles au plus grand nombre.
Bien que les composants de NEO, le design système du Groupe BPCE soient accessibles, ils ne garantissent pas l’accessibilité d’un service numérique produit fini. En effet, la mise en accessibilité d’un ensemble de composant peut être différente suivant les contextes. Il est donc nécessaire de porter une attention particulière au respect des règles d’accessibilité tout au long de la production d’un service numérique.
La mise en œuvre de l’accessibilité numérique implique la prise en compte des normes d’accessibilité. À ce titre, le Design System NEO a été rendu accessible sur la base du référentiel français le Référentiel Général d’Amélioration de l’Accessibilité (RGAA 4.1.2), des standards internationaux WCAG 2.1 et de la norme européenne EN 301 549 (en).
Qu'est-ce que l'accessibilité numérique
L’accessibilité numérique est un ensemble de règles et de bonnes pratiques qui couvrent notamment les aspects fonctionnels, graphiques, techniques et éditoriaux.
Le suivi de ces règles et bonnes pratiques permet de s’assurer que les contenus et services numériques soient accessibles aux personnes en situation de handicap.
Dans une conception plus générale, l’accessibilité numérique recouvre la mise à disposition des ressources numériques aux individus quels que soient leur matériel, leur logiciel, leur langue, leur culture, leur localisation géographique et leurs aptitudes physiques et mentales.
Un service numérique accessible permet par exemple de :
- personnaliser son affichage via le système d’exploitation et/ou le navigateur (agrandissement ou rétrécissement des caractères, changement de la typographie, modification des couleurs, arrêt des animations, etc.) ;
- naviguer à l’aide de technologies d’assistance comme une synthèse vocale ou une plage braille ;
- naviguer sans utiliser la souris, avec le clavier uniquement, des contacteurs ou via un écran tactile ;
- consulter les vidéos et les contenus audio à l’aide de sous-titres et/ou de transcriptions ;
- Etc.
Préconisation de Conformité au RGAA
Dans le cadre de l'amélioration de l'accessibilité de nos parcours digitaux, nous préconisons initialement d'atteindre au minimum un état de conformité partielle au RGAA ("Conformité partielle" selon le Référentiel Général d'Amélioration de l'Accessibilité).
Ce seuil, correspondant à 50% des critères respectés, marque un premier pas vers une accessibilité accrue. Cependant, il est recommandé de viser au delà de 50%.
La conformité est établie à la suite d’un audit qui permet de calculer un taux de conformité. Ce taux est le résultat du pourcentage de critères RGAA respectés sur le nombre de critères applicables sur l’ensemble des pages testées lors de l’audit.
Il est essentiel de ne pas confondre conformité et accessibilité, le taux n’est pas un niveau d’accessibilité (service utilisable par les personnes handicapées) mais un indicateur qui permet de mesurer les progrès d’un service.
Une « conformité partielle » avec au minimum 50% des critères validés n’indique en aucun cas un niveau d’accessibilité à 50% d’un service.
En savoir plus sur le taux de conformité
C’est pourquoi, il est essentiel de vérifier que les contenus et les fonctionnalités soient perçus et utilisables par les personnes handicapées et qu’aucune non-conformité ne soit bloquante.
Quelques exemples de non-conformités bloquantes :
- L’absence d’alternative textuelle aux images porteuses d’informations.
- Éléments de formulaire dépourvus d’étiquettes, de format et d’erreur de saisie si nécessaire.
- Impossibilité de contrôler au clavier les éléments interactifs.
- Contenus non perceptibles visuellement avec des contrastes trop faibles.
- Absence de visibilité de la prise de focus.
- Etc.
Les images
Il existe deux types d’images :
- les images qui véhiculent de l’information ;
- les images décoratives.
Fournir une alternative à une image qui véhicule de l’information est essentiel pour les utilisateurs qui ne perçoivent pas les contenus visuels. C’est le cas par exemple des personnes aveugles ou malvoyantes. Un lecteur d’écran pourra accéder à cette alternative et la restituer à l’utilisateur.
À contrario, les images décoratives ne doivent pas être restituées aux technologies d’assistance comme un lecteur d’écran pour ne pas produire de bruit inutile.
Les textes intégrés aux images ne peuvent être personnalisés, les personnes dyslexiques par exemple ont besoin de personnaliser les textes pour mieux les lire.
À retenir :
- apporter des alternatives aux images porteuses d’information ;
- s’assurer que les images décoratives ne sont pas restituées aux technologies d’assistance ;
- ne pas inclure de texte dans les images porteuses d’informations.
Plus d’informations : AcceDe Web – Images et icônes
Les Couleurs
Les couleurs sont une question importante pour les personnes qui ne les perçoivent pas du tout, en particulier les personnes aveugles, les personnes malvoyantes et les personnes souffrant de déficiences de la vision des couleurs (Daltonisme, Achromatopsie, par exemple).
Ne transmettez pas l’information uniquement par la couleur et utilisez des contrastes de couleurs suffisants.
La couleur est parfois le seul moyen de transmettre l’information. Par exemple, dans un formulaire, les champs obligatoires sont en rouge et les champs facultatifs en noir. Une personne qui ne peut pas distinguer visuellement ces couleurs n’aura pas accès à cette information. Il est nécessaire de toujours prévoir d’autres moyens comme par exemple, un texte ou une forme mais également dans le code pour les technologies d’assistance, afin que toutes les personnes, quelle que soit leur capacité de perception, puissent accéder à cette information.
Une autre question liée à la couleur concerne les contrastes. Pour une personne qui rencontre des difficultés à percevoir les contrastes, certains textes, éléments d’interface ou éléments graphiques porteurs d’informations peuvent être impossibles à lire ou percevoir si leur couleur n’est pas suffisamment contrastée par rapport à la couleur de fond.
À retenir :
- ne pas donner l’information uniquement par la couleur et prévoir d’autres moyens visuels et programmatiques ;
- avoir des contrastes suffisants pour la lisibilité des textes, des éléments d’interface et des éléments graphiques porteurs d’informations.
Plus d’informations : AcceDe Web – Couleurs
Comment assurer un contraste suffisant
Le rapport de contraste est mesuré entre les couleurs d’avant plan et d’arrière-plan. Il est compris entre 1:1 et 21:1.
Une multitude d’outils permettent de mesurer le rapport de contraste entre deux couleurs. Voici quelques outils :
Texte sans effet de graisse
- Inférieur à 24px : le rapport de contraste est d’au moins 4,5:1.
- Supérieur ou égal à 24px : le rapport de contraste est d’au moins 3:1.
Texte avec effet de graisse
- Inférieur à 18,5px : le rapport de contraste est d’au moins 4,5:1.
- Supérieur ou égal à 18,5px : le rapport de contraste est d’au moins 3:1.
Plus d’informations : AcceDe Web – Assurer un contraste suffisant entre les textes et l’arrière-plan
Contraste des éléments non textuels, des composants d’interface et des éléments graphiques porteurs d’informations
Un composant d’interface est un élément avec lequel l’utilisateur peut interagir comme par exemple une case à cocher, un bouton radio, un chevron ouvrant un sous-menu, un champ de formulaire…
Les éléments graphiques véhiculant de l’information peuvent prendre différentes formes comme une image, une icône, des graphiques…
Le rapport de contraste doit être au moins de 3:1 pour l’ensemble des informations visuelles nécessaires à l’utilisateur pour identifier un contrôle et savoir l’utiliser et également les différents états indiqués uniquement par la couleur.
Plus d’informations : AcceDe Web – Assurer un contraste suffisant entre les éléments graphiques informatifs et interactifs avec leur arrière-plan
Ne pas donner l'information uniquement par la forme, la taille ou la position
Comme pour les couleurs, l’absence d’alternative à l’information donnée par la forme, la taille ou la position peut rendre un contenu incompréhensible pour les personnes aveugles et malvoyantes.
Les cas sont très variés, une information donnée par une icône dans un tag, une ligne de tableau sélectionnée par une bordure, un système de nuage de tags qui indique la pertinence d’un mot par la taille des caractères…
Il est donc nécessaire de fournir le même niveau d’information à tous. Pour s’en assurer, l’information visuelle doit également être apportée dans le code pour que les technologies d’assistance comme un lecteur d’écran par exemple puissent la restituer.
La navigation au clavier
De nombreuses personnes en situation de handicap n’utilisent pas le pointeur de la souris pour interagir avec les contenus. C’est par exemple le cas pour les personnes aveugles, malvoyantes ou encore les personnes ayant une déficience motrice qui peuvent utiliser un clavier seul ou coupler à un lecteur d’écran ou une plage Braille, une reconnaissance vocale ou encore un système de suivi oculaire par exemple.
Pour toutes ces personnes, l’utilisation d’une interface par le clavier est cruciale. Ils ont besoin par exemple :
- de voir la prise de focus sur les éléments interactifs ;
- de pouvoir contrôler l’ensemble des éléments interactifs au clavier ;
- d’afficher et pouvoir contrôler au clavier les éléments qui apparaissent au survol de la souris comme une infobulle par exemple ;
- de ne pas rencontrer de piège au clavier ;
- que le focus soit déplacé au bon endroit lors d’un changement de contexte.
Plus d’informations : AcceDe Web – Navigation au clavier
Visibilité du focus
Les personnes ayant une déficience motrice, naviguent essentiellement d’élément interactif en élément interactif. S’il n’est pas possible de visualiser la prise de focus, il devient compliqué de naviguer et d’interagir avec les éléments. Pour ces raisons la prise de focus doit être visible sur l’ensemble des éléments interactifs et doit également être suffisamment contrastée avec son arrière-plan.
Pour information, le Design System NEO intègre une prise de focus avec une double bordure visuelle pour garantir un contraste suffisant sur l’ensemble des composants et notamment sur l’arrière-plan de chaque élément interactif. Il est donc conseillé de ne pas supprimer la prise de focus et de ne pas la modifier.
Plus d’informations : AcceDe Web – Garantir la visibilité de la prise de focus au clavier
Gérer le focus clavier
Par défaut, le Design System NEO gère le déplacement du focus uniquement par composant. Cependant, il est parfois nécessaire de le gérer d’un composant à un autre ou à la suite d’une action dans un composant qui pourrait provoquer un changement de contexte. La gestion du focus se fait de façon logique en fonction des besoins des utilisateurs.
Par exemple lorsqu’une fenêtre modale ou un panel est ouvert, il est nécessaire de déplacer la prise de focus sur le contenu le plus logique dans la fenêtre. Cela dépend du contexte de la fenêtre modale. Si la fenêtre modale présente une information textuelle structurée avec des titres, des paragraphes, des listes, le focus doit être déplacé sur le premier élément de contenu ou sur le conteneur. Si la fenêtre contient uniquement des boutons permettant un choix, le focus doit être déplacé sur l’élément le plus fréquemment utilisé. Lors de la fermeture de la fenêtre modale, le focus doit être déplacé sur l’élément qui a permis d’ouvrir la fenêtre. Si ce bouton a été supprimé à la suite de l’ouverture de la fenêtre modale, alors le focus est déplacé sur un autre élément logique dans le flux de navigation.
À retenir :
- pas de perte de focus à la suite d’une action ;
- déplacer le focus de façon logique ;
- conserver un ordre de déplacement du focus cohérent entre les contenus ;
- ne pas créer de piège au clavier qui pourrait bloquer la navigation.
La personnalisation de l'interface par les utilisateurs
Les personnes malvoyantes ou encore les personnes dyslexiques par exemple ont besoin de personnaliser l’interface pour pouvoir lire et interagir avec les contenus. Concrètement ces personnes ont besoin :
- d’agrandir ou réduire les textes ;
- de renforcer les contrastes ;
- de personnaliser les propriétés d’espacement des textes.
Par conséquent les interfaces doivent pouvoir s’adapter et proposer les mêmes informations et fonctionnalités.
Par exemple :
- lors de l’agrandissement des caractères jusqu’à 200% les contenus doivent être lisibles et fonctionnels ;
- en responsive à 320px de large, les contenus sont présents sans perte d’information ou de fonctionnalité et sans barre de défilement horizontale ;
- lors de la personnalisation des propriétés d’espacement des textes, les contenus doivent être lisibles et fonctionnels ;
- ne pas brider la possibilité de changer l’orientation de l’affichage (portrait, paysage).
Plus d’informations :
Des labels pertinents
Les éléments interactifs permettant de réaliser des actions comme des liens, des boutons, des champs de formulaire doivent posséder un nom qui permet de comprendre la fonction et l’action de l’élément.
Les personnes aveugles, malvoyantes naviguant avec un lecteur d’écran ou encore les personnes à mobilité réduite qui utilisent une reconnaissance vocale pour naviguer ont besoin que les éléments d’interaction soient pertinents.
Par conséquent un élément interactif doit :
- posséder un nom accessible pertinent et descriptif, c’est à dire que l’on comprenne l’action et la fonction de l’élément interactif ;
- ne pas être vide, sans nom accessible ;
- être visible.
Plus d’informations :
Structurer le contenu par des titres
L’utilisation de titres pertinents permet de structurer un contenu en partie et fournit à l’utilisateur un plan du document qui lui permet de naviguer de titre en titre pour se déplacer plus rapidement dans le contenu de la page.
La structure de titres doit être logique et exhaustive :
- les éléments de titre doivent être balisés avec les balises `<h1>` à `<h6>` ;
- un titre doit être pertinent et décrire la section de contenu qui le suit ;
- éviter les sauts de titres, assurer vous qu’un titre de niveau 2 ne soit pas suivi par un titre de niveau 4 par exemple ;
- ne choisissez pas un titre par sa forme mais par son niveau hiérarchique.
Plus d’informations : AcceDe Web – Utiliser correctement la hiérarchie des titres
Ordre des contenus compréhensibles et logiques
L’ordre des contenus dans le code est important et doit correspondre à l’ordre visuel des contenus. Les personnes aveuglent, malvoyantes ou encore dyslexiques qui utilisent un lecteur d’écran ont besoin que le contenu soit restitué dans un ordre cohérent et logique.
Plus d’informations :
Donner le contrôle sur les animations et des sons déclenchées automatiquement
Les contenus en mouvement et les sons déclenchés automatiquement peuvent être très perturbants et empêcher la lecture des contenus. Les personnes aveugles et malvoyantes utilisant une synthèse vocale rencontreront de grandes difficultés si un son recouvre la voix de la synthèse vocale. Un contenu en mouvement qu’il n’est pas possible d’arrêter peut empêcher la lecture d’une page pour une personne ayant un déficit de l’attention.
Pour chaque son et contenu en mouvement déclenché automatiquement, prévoir un moyen comme un bouton permettant d’arrêter et de le relancer celui-ci. Idéalement ne jamais proposer de déclenchement automatique de son et d’animation.
Plus d’informations :
Prévoir des gestes simple
Les personnes déficientes motrices peuvent ne pas être dans la capacité de réaliser des gestes précis et complexes comme par exemple le glissement du doigt dans une direction dans un carrousel pour faire défiler les panneaux.
Pour chaque geste complexe, prévoir une alternative via un geste simple. Un geste simple se caractérise par un simple clic, une pression au doigt, un double clic ou une double pression ou encore une pression prolongée.
