En créant du contenu numérique, nous sommes habitués à nous concentrer sur l'utilisateur moyen. Ainsi, près d'un tiers de la population russe est ignoré - il s'agit des personnes handicapées, des personnes âgées ainsi que de ceux qui ont temporairement des besoins spéciaux. Dans l'article précédent, nous avons parlé de notre
approche de l'adaptation des services numériques à Sberbank .
Lors de la Journée internationale des personnes handicapées, nous avons décidé de partager
les directives d'accessibilité numérique avec la communauté professionnelle. Dans cet article, vous constaterez qu'il est important de connaître le gestionnaire, le concepteur et le développeur lors de la conception d'une interface accessible.
Recommandations générales pour les managers
Pour imaginer l'expérience utilisateur des personnes handicapées, essayez des programmes pour simuler différents types de
daltonisme , de mauvaise vision et d'
autres troubles . Pour mieux comprendre le fonctionnement des personnes aveugles avec l'interface vocale, les programmes d'accès à l'écran (
VoiceOver sur MacOS ,
VoiceOver sur iOS ,
TalkBack sur Android ,
NVDA ou
JAWS pour Windows) conviennent.
Inclure l'accessibilité dans le processus de développement dès le début:
- Dites à l'équipe qu'il est important de créer et d'évaluer une expérience utilisateur en fonction des exigences d'accessibilité.
- Vérifiez chaque mise à jour et nouvelle fonctionnalité pour les besoins des personnes handicapées.
- Chaque sprint, effectuez des tests automatisés avec les développeurs pour détecter rapidement les erreurs courantes et combinez-les avec des tests personnalisés pour répondre aux exigences d'accessibilité.
- Effectuez régulièrement des tests manuels des produits: il y aura alors peu de corrections au stade final;
- Avant que le produit ne soit vendu pendant au moins trois semaines, effectuez un test final avec un expert en accessibilité.
Que faire au designer
La liste des astuces pour les designers est bien plus. Certains conseils sont généraux et utiles pour l'interface en principe.
Exigences pour les éléments structurels et la gestion des pages
- La conception doit être telle que l'utilisateur trouve rapidement et facilement les informations clés.
- Tout le contenu et la conception doivent s'intégrer dans la structure logique des titres: cela aide beaucoup les utilisateurs aveugles et les personnes âgées.
- Les utilisateurs doivent pouvoir naviguer sur le site de plusieurs manières: à travers la table des matières, le plan du site, les liens entre les pages et la recherche.
- Le lecteur d'écran ne fonctionne pas bien avec les objets contextuels, il est donc préférable de ne pas utiliser les fenêtres modales.
- Les styles doivent être utilisés correctement. Les en-têtes de niveau 1 sur la mise en page doivent être des en-têtes H1 dans le code. Inversement, ce qui n'est pas un titre de premier niveau ne doit pas être marqué comme titre H1.
Une mise à l'échelle appropriée de la page facilitera également la lecture à partir de n'importe quel support électronique et facilitera la perception du contenu malvoyant. La meilleure solution dans ce cas est une mise en page adaptative. Lorsque la mise en page est prête, faites une vérification: augmentez l'écran à 200% en utilisant les raccourcis clavier «Cmd +» ou «Ctrl +».
(Exemple de mise à l'échelle incorrecte)
(Un bon exemple de mise à l'échelle)
Le contrôle du clavier est un véritable salut pour les personnes souffrant de troubles musculo-squelettiques et de la motricité, ainsi que pour les utilisateurs aveugles qui utilisent le lecteur d'écran pour naviguer sur Internet. Pour un accès correct depuis le clavier, vous devez contrôler les points suivants:
- L'utilisateur doit pouvoir sélectionner et activer n'importe quel élément interactif de la page à l'aide des touches Tab, espace et flèches.
- Pour les utilisateurs voyants, il est important que les éléments interactifs aient des états visibles et familiers: focus, survol, actif et visité.
- Pour les utilisateurs aveugles, une fonction est importante qui vous permet d'accéder au contenu principal - ignorez les publicités avec des éléments de navigation et accédez immédiatement aux informations principales, ce qui réduit la quantité de contenu inutile à écouter.
- L'utilisateur s'attend également à ce que le focus entre les éléments change dans un ordre logique: généralement c'est de gauche à droite et de haut en bas.
- Lorsque la mise en page du site est prête, vérifiez avec la touche Tab, est-elle partout visible lorsque vous contrôlez à partir du clavier où se trouve le focus?
Pour certains utilisateurs, la définition de la
zone de clic de l'élément
est extrêmement importante. Il y a des personnes atteintes de troubles du système musculo-squelettique et de la motricité. Il leur est difficile de se rapprocher ou de se rapprocher les uns des autres, de travailler avec le site / l'application d'une seule main. Pour fournir à ces utilisateurs une interface, vous devez:
- Assurez-vous que vous pouvez accéder aux commandes de base avec vos pouces et vos mains gauche et droite, même sur les gros téléphones.
- Définissez des zones de clic d'au moins 44 pixels CSS. Ainsi, il atteindra simplement un adulte moyen avec une taille de doigt d'environ 10 mm. Les icônes sont souvent plus petites, vous devez donc agrandir la zone qui les entoure.
- Éléments cliquables séparés avec un espace de 8 pixels.
Contenu du site / application
Tous les textes du site doivent être lisibles. Voici ce que vous pouvez faire pour cela:
- Évitez le cléricalisme, les termes spécifiques et les phrases abstruses, remplis de toutes sortes de virages;
- Essayez de raccourcir les paragraphes - il sera plus facile de les afficher sur les appareils mobiles;
- Utilisez des phrases courtes autant que possible.
- Si vous devez utiliser des termes, expliquez-les. S'il y en a trop, compilez un glossaire.
- Lorsque vous utilisez des abréviations ou des acronymes pour la première fois, déchiffrez-les.
- Essayez de ne pas utiliser des idiomes, car les personnes qui parlent la langue des signes, ainsi que les utilisateurs ayant une déficience mentale, peuvent les prendre au pied de la lettre;
- Gardez une trace de la disposition du clavier et des fautes de frappe, car leur présence complique grandement le travail des lecteurs d'écran.
En plus de la lisibilité du texte lui-même, il est important que sa conception aide à sa perception. Pour ce faire:
- Assurez-vous que le rapport de contraste minimum est de 4,5: 1, pour le texte agrandi, vous pouvez réduire le contraste à 3: 1. Les exceptions sont les logos, les éléments qui jouent un rôle décoratif et les contrôles inactifs;
- Utilisez une taille de police suffisante pour une lecture confortable: le minimum pour le texte principal est de 16 pixels.
- Choisissez une police lisible, bien lisible quelle que soit l'échelle, suffisamment grande dans la taille sélectionnée, prenant en charge tous les caractères et styles nécessaires, avec des paramètres constants pour les formes de lettres et des lettres uniques qui ne peuvent pas être confondues.
- Ne vous fiez pas à la couleur comme seul moyen visuel pour transmettre des informations, car il y a des personnes daltoniennes parmi vos utilisateurs. Utilisez les caractères gras, les étoiles, les icônes, la typographie, le texte, marquez les champs obligatoires, etc.
Les graphiques ne doivent être utilisés que lorsqu'il est impossible de gérer un seul texte. Si oui, alors:
- Assurez-vous que tous les graphiques sont accompagnés d'une description brève et compréhensible.
- Choisissez des icônes familières - par exemple, une poubelle pour supprimer des informations.
- Lorsque vous superposez du texte sur une image, n'oubliez pas le contraste: utilisez un arrière-plan uni ou assombrissez l'image;
- Fournissez une brève description de la visualisation des données pour plonger l'utilisateur dans son contexte.
- Fournissez suffisamment de contraste entre les données présentées pour que les personnes daltoniennes puissent distinguer les couleurs.
- Créez un autre formulaire pour le contenu qui ne peut pas être représenté sous forme de texte. Par exemple, une recherche ATM peut être implémentée à la fois via une carte et via une table ou une liste;
- Le captcha est l'un des plus gros problèmes pour les aveugles. Si vous ne pouvez pas le refuser, faites une autre façon de le percevoir, par exemple le son.
- Assurez-vous qu'aucun élément de votre conception ne clignote plus de trois fois par seconde, car les éléments animés du site peuvent conduire des personnes atteintes de certains types de troubles à une crise d'épilepsie.
Les légendes d'éléments, les liens et les
instructions doivent être rendus logiquement justifiés afin que, par exemple, un utilisateur aveugle comprenne pourquoi ils sont nécessaires dans une situation particulière et ce qui se passe lorsque vous cliquez dessus.
- Par le nom du bouton Créer un compte, contrairement au bouton Terminer, l'utilisateur comprend clairement ce qui se passera à l'étape suivante.
- Si un clic mène au téléchargement d'un document, écrivez-le directement. Au lieu de «Cliquez ici», écrivez «Télécharger le rapport».
- Les liens doivent être saisis dans le texte afin qu'ils fassent partie de la phrase. Cette approche sera plus pratique pour les aveugles et pour les voyants.
- Assurez-vous que les instructions peuvent être suivies par une personne sans audition ni vision: ne faites aucune référence à la forme, à la taille, à la disposition visuelle ou au son.
Les conseils contextuels remplissent une fonction auxiliaire importante, réduisant le risque d'erreurs lors du remplissage d'un formulaire sur le site. Assurez-vous de les avoir. Et n'oubliez pas:
- Vérifiez que tous les éléments d'entrée ont des noms d'étiquette clairs qui restent visibles même après avoir rempli le champ.
- Avertissez l'utilisateur à l'avance du format des données: date, téléphone, TIN, etc. Lorsque VERR MAJ est activé, c'est une bonne tonalité pour vous le rappeler.
- Informez l'utilisateur de l'apparition de nouvelles informations dans le processus de remplissage du formulaire.
- Recherchez les instructions qui aident l'utilisateur à corriger l'erreur.
Conseils aux développeurs Web
Les personnes aveugles interagissent avec l'interface à l'aide de programmes d'accès à l'écran / lecteur d'écran qui reproduisent en voix ce qui est affiché à l'écran. La disponibilité de l'interface pour l'utilisateur du lecteur d'écran dépend principalement du développeur. Si le curseur du lecteur d'écran est sur le bouton, le nom du bouton du développeur et le type de cet élément du système d'exploitation tomberont dans le bloc de sortie des messages vocaux. L'utilisateur aveugle comprend donc ce qu'est cet élément et comment l'utiliser.
Puisque le développeur est engagé dans la
navigation , voici les recommandations qui s'y rapportent:
- Fournissez une transition logique entre les pages. Lorsque la page se charge depuis longtemps, le visiteur voyant du site le comprend sans difficulté, mais l'utilisateur aveugle doit être averti que le chargement est en cours;
- Lors de la mise à jour ou du déplacement vers une nouvelle page, assurez-vous que le focus tombe immédiatement sur le premier élément - le bouton de retour ou le titre de la page. Cela permettra à l'utilisateur aveugle de savoir que la page a été mise à jour et de comprendre où il est arrivé;
- Lorsque la page ne se recharge pas et que seul le contenu des conteneurs change, vous devez informer l'utilisateur que le contenu a changé.
- Fournit une transition de mise au point logique entre les éléments: généralement, cela passe de gauche à droite ou de haut en bas.
- Séparez chaque élément de la page, car sinon une personne aveugle ne comprendra pas à quel champ telle ou telle signature fait référence.
- Utilisez des éléments avec des liens pour une navigation rapide des utilisateurs sur la page;
- Ajoutez le lien «Passer au contenu principal» à l'en-tête de la page. Cela vous aidera à vous déplacer plus rapidement sur la page. Une option peut être initialement masquée, mais devrait devenir visible lorsque le focus tombe dessus.
- Élaborez des éléments de base de base définis soit par des marqueurs sémantiques en HTML5, soit en utilisant des rôles ARIA.
Concernant les questions de
logique et de structure , alors:
- Utilisez les attributs du contenu - section, article, côté - pour diviser le contenu de la page en blocs logiques.
- Assurez-vous que les en-têtes sont cohérents avec la structure de la page.
- Utilisez les niveaux d'en-tête H1 - H6: H1 pour le plus haut niveau, H6 pour le plus bas. Ne sautez pas les niveaux de cap.
- Fournir différentes façons de rechercher du contenu: plan du site, recherche de site.
Pour que tous les utilisateurs soient à l'aise, vous devez:
- Essayez d'utiliser des contrôles natifs comme le bouton .
- Vérifiez que les composants d'interface personnalisés sont accessibles aux utilisateurs de lecteurs d'écran.
- Indiquez dans le code le type d'élément, son état (valeur), son nom et l'infobulle de tout élément d'interface qui attend une action de l'utilisateur du lecteur d'écran.
- Vérifiez si les types d'éléments sont définis correctement. En règle générale, le type d'éléments natifs est correctement déterminé par défaut, et pour les éléments personnalisés ou plus complexes, le type peut être déterminé de manière incorrecte, puis il doit être déterminé indépendamment.
- Utilisez des tableaux pour les données tabulaires - ils seront ensuite disponibles pour le lecteur d'écran.
- Signez tout élément d'interface visible par les voyants et précieux pour le lecteur d'écran. Si l'élément n'a pas de valeur pour le lecteur d'écran, alors sa "visibilité" pour l'utilisateur doit être désactivée. La légende de l'image permet à l'utilisateur aveugle de comprendre ce qui y est affiché. Les signatures des images dans le code sont importantes pour les utilisateurs ayant une connexion Internet lente.
- Décrire les champs de saisie à l'aide d'étiquette, d'attributs de titre ou d'étiquette aria;
- Utilisez pour la liaison d'attributs et une classe spéciale pour les technologies d'assistance si vous souhaitez définir un élément comme source d'étiquette pour un autre élément.
Les tests automatisés aident à trouver les erreurs d'accessibilité, et les tests utilisateurs aident à vérifier l'adaptation de l'interface aux besoins des personnes ayant des besoins spéciaux, donc ces deux types doivent être combinés.
Une vérification automatisée rapide peut être effectuée de plusieurs manières:
Et voici l'algorithme de test utilisateur avec des utilisateurs aveugles:
- Vérifiez que le lecteur d'écran frappe les éléments et exprime tout ce dont vous avez besoin, y compris les étiquettes, les conseils et les erreurs.
- Assurez-vous que le contenu est lu dans le bon ordre: étiquette vers le champ, en-têtes vers le contenu, etc.
- Vérifiez que le code indique la langue correcte et que le lecteur d'écran prononce les mots sans accent.
- Assurez-vous que les boutons et les liens ont une description qui vous permet de comprendre où mènera un clic dessus.
Vous pouvez trouver d'autres recommandations pour les développeurs Web et mobiles
sur le guide d'accessibilité numérique .
Nous voulons que l'environnement numérique soit adapté au maximum aux personnes ayant des besoins spéciaux, y compris les personnes malentendantes, visuelles, motrices et ayant des difficultés à percevoir les informations.
Nous espérons qu'avec nos recommandations, l'audience de votre site / application sera reconstituée par des utilisateurs reconnaissants ayant des besoins spéciaux. Nous serons heureux de répondre aux questions dans les commentaires.