Accessibilité Web pour les développeurs: astuces d'accessibilité

L'accessibilité Web est un élément de plus en plus important du développement Web. Dans la deuxième partie de cette série, nous discutons des types de handicap et de la manière de développer l'accessibilité pour chaque type d'utilisateur.

Lors de la mise en œuvre de la conformité de l'accessibilité (section 508, WCAG 2.0 et WAI). -ARIA) pour KendoReact notre suite de composants d'interface utilisateur natifs pour React, nous avons beaucoup appris sur le sujet. Avec cette série de blogs notre objectif est de familiariser vos collègues ingénieurs avec l’accessibilité du Web et de partager nos connaissances pratiques et nos meilleures pratiques.

La deuxième partie de cette série définit plus en détail le problème et divise la discussion en deux. les différents types de handicap et propose des idées pour rendre vos applications Web plus accessibles pour chaque type d'utilisateur.

Types de handicaps et meilleures pratiques d'accessibilité

Il existe quatre principaux types de handicap: auditif, visuel, moteur et déficiences cognitives. Chaque type comprend une multitude de conditions. Ils génèrent des défis différents lors de l'interaction avec le Web et nécessitent des approches différentes pour les résoudre. Explorons quelques-unes des meilleures pratiques concernant chaque type de handicap. Vous remarquerez que la plupart de ces pratiques ne concernent pas la technologie sous-jacente que nous utilisons, mais la manière dont nous concevons nos logiciels. Cela signifie que toutes les personnes impliquées dans le processus de développement peuvent contribuer à une meilleure accessibilité.

Handicap auditif (auditif)

Les déficiences auditives vont de la perte auditive légère à la surdité. Le meilleur moyen d’aider ces utilisateurs est d’éviter de s’en remettre au son pour transmettre des informations critiques. Au lieu de cela, ajoutez un autre support en parallèle pour le support. Par exemple, si vous utilisez la vidéo, assurez-vous qu'elle prend en charge les sous-titres avec des légendes complètes. Si vous utilisez l'audio, fournissez une transcription. Les sous-titres et les transcriptions doivent être complets et ne pas manquer de lignes critiques. Dans un paragraphe ultérieur, nous énumérerons des directives pour la lisibilité. Ils s’appliquent fortement aux sous-titres et aux transcriptions. De plus, assurez-vous que le bruit de fond est minimisé, de sorte que les informations transmises soient aussi audibles que possible.

Déficience visuelle – Basse vision

Le principal moyen de prendre en charge les problèmes de basse vision est de: avoir une interface lisible. Les éléments de l'interface utilisateur doivent être grands et clairs. Le texte est plus complexe, cependant, et dans un paragraphe ultérieur, nous énumérerons des directives de lisibilité. Ils sont conçus pour aider les personnes malvoyantes.

Le contraste est un autre aspect important. Un contraste élevé entre les éléments et les couleurs de l'interface utilisateur aidera les personnes malvoyantes. Il existe des outils disponibles pour examiner si le contraste est insuffisant pour les personnes atteintes de cette maladie. Vous trouverez ici les outils recommandés par la Web Accessibility Initiative (WAI) . Dans la plupart des modèles de page utilisés de nos jours, le contraste est en effet problématique. Vous trouverez ci-dessous un exemple de thème à contraste élevé conforme à WCAG. Un contraste aussi élevé ne fonctionnera pas bien avec les thèmes classiques et vous préférerez probablement ne pas sacrifier l’attrait visuel de votre site. Un bon compromis consiste à inclure un thème à contraste élevé en option sur votre site Web, à l'instar de l'option permettant de changer de langue.

Handicapés visuels – Cécité

Les personnes aveugles utilisent des lecteurs d’écran. Ces applications analysent le code HTML et le décrivent à l’utilisateur en utilisant le langage naturel. Le développement des lecteurs d’écran a ses spécificités, de sorte que En outre, le périphérique de saisie utilisé par un utilisateur aveugle fonctionnera différemment. L'utilisation d'une souris nécessite la vue. Une personne aveugle aura besoin d'un support complet du clavier.

Sight Disabilities – Colorblindness

Le daltonien n'est pas une maladie isolée. Il existe différents types de daltonisme. La deutéranomalie est une difficulté à percevoir la lumière verte et est la plus courante. Avoir de la difficulté à percevoir la lumière rouge est appelé protanomalie ss commun. Les spectres visibles de ces deux conditions sont quelque peu similaires et les conditions sont plus communément appelées daltonisme rouge-vert. La tritanomalie est un problème de perception des couleurs bleues et est très rare.

La gravité de chaque affection varie également. Elles peuvent aller d'un léger problème de perception à une incapacité totale à percevoir cette couleur. Nous utilisons le préfixe -nomalie lorsque la perception des couleurs est partiellement affectée et – nopia lorsqu'une couleur ne peut pas être perçue du tout. L'achromatopsie est la condition pour tout voir en niveaux de gris et est très rare. Gardez à l'esprit que l'explication donnée ici est assez simplifiée. Les changements dans la perception des couleurs n'affectent pas une seule couleur, mais tout le spectre visible.

Votre idée de départ peut être de choisir des couleurs que la plupart des personnes daltoniennes peuvent voir. Ce n'est pas idéal en raison des nombreuses variations du handicap, mais orange et bleu fonctionnent dans la plupart des cas. C'est l'une des raisons pour lesquelles Internet aime tellement le bleu.

Il existe des outils qui simulent l'apparence de votre site par les personnes daltoniens. Vous pouvez les utiliser pour détecter l’éventualité d’un problème, puis concevoir et ajouter des thèmes facultatifs pour les types problématiques de la condition. Cela nécessite néanmoins que votre utilisateur soit en mesure de trouver et de passer au thème correspondant.

Votre solution la plus efficace consiste à ne pas vous fier uniquement à la couleur pour transmettre des informations cruciales. Vous pouvez concevoir le problème en utilisant des formes, des symboles, des animations et d'autres moyens créatifs.

Incapacités motrices

Actions rapides et / ou répétitives, actions nécessitant la tenue d'un bouton, actions avec limites de temps – toutes ces tâches sont difficiles pour les personnes ayant une déficience motrice et peut causer une douleur physique. Vous devez les éviter, mais ce n'est pas si simple. L'exemple suivant illustre pourquoi: imaginez que vous avez un curseur qui vous oblige à maintenir un bouton enfoncé. Votre solution consiste peut-être à laisser le curseur bouger en appuyant sur une touche, mais si le pas est trop petit, le résultat sera une action répétitive qui n’apportera guère d’amélioration. En règle générale, vous devez concevoir un site Web pour qu'un utilisateur puisse l'utiliser de manière pratique avec un clavier uniquement et avec une souris uniquement.

Déficiences cognitives liées à la maladie de la mobilité et à la surcharge sensorielle (par exemple, l'épilepsie) [19659007] Plusieurs schémas peuvent causer le mal des transports ou une surcharge sensorielle. Ce sont généralement des effets rapides tels que tremblements, lumières vives, clignotements rapides (3 fois / seconde ou plus rapide). La répétition de mouvements, rapides ou non, peut causer les mêmes problèmes. Un bon exemple de mouvement répétitif mais lent sur une page est une animation de chutes de neige que nous voyons souvent pendant les vacances d'hiver. Les changements brusques utilisant des transitions flashy dans le contenu d'une page sont également problématiques; nous devons plutôt utiliser des transitions en douceur. Une bonne pratique consiste à éviter les effets problématiques, mais si vous souhaitez les utiliser, autorisez les utilisateurs à les désactiver par compromis.

Déficiences cognitives – Difficultés d'apprentissage

La ​​simplicité est la clé. Rendez vos scénarios simples, rendez votre interface simple et sans encombrement. Utilisez un langage simple, évitez les mots compliqués. Fournissez toujours des instructions claires avec des informations concises. La quantité d'informations doit être juste – trop peu ne suffira pas, ajoutez-en trop et certains utilisateurs seront distraits. Évitez les contraintes de temps qui peuvent exercer une pression inutile sur l'utilisateur.

Déficience cognitive – Dyslexie

La ​​dyslexie est un type de handicap qui rend la lecture difficile pour certaines personnes: les personnes dyslexiques peuvent confondre les lettres, les voir pivoter ou se regrouper. . Dans les prochains paragraphes, nous énumérerons des directives pour la lisibilité. Ils s’appliquent fortement pour relever les défis de la dyslexie.

Conseils de lisibilité

Une bonne lisibilité garantit que votre site Web sera accessible à un certain nombre de personnes handicapées: des sous-titres et des transcriptions lisibles aideront les personnes malentendantes et malentendants. le texte en général sera utile aux personnes ayant une vision basse ou une dyslexie. Une règle empirique consiste à utiliser une police sans empattement simple et propre dans une taille de police importante.

L'espace compte. Par exemple, les longues lignes sont difficiles à lire, appliquez donc une limite de 70 caractères par ligne. Pour les sous-titres, la limite recommandée est de 35 caractères. Prévoyez suffisamment d'espace pour que les personnages puissent respirer – un espacement de ligne de 1,5x convient. En ce qui concerne l'espace, le texte en majuscules est difficile à lire, utilisez donc des majuscules. La vitesse de lecture est également importante, aussi ne faites pas avancer le texte automatiquement ou dans le cas de sous-titres – conservez-les à l'écran pendant au moins 0,3 seconde par mot.

Le contraste est un élément clé du puzzle. Les images de fond obscurcissent généralement le texte. Les bonnes polices ont une bordure entourant les lettres pour améliorer le contraste, mais il est même préférable d'éviter complètement les images d'arrière-plan et de fournir un arrière-plan solide qui contraste bien avec le texte.

Le secteur des technologies de l'information a créé des polices spécialisées gratuites, impressionnantes et optimisées. pour la lisibilité. Vous pouvez envisager certains d'entre eux. Opendyslexic et Inter en sont de bons exemples

Conclusion

L'accessibilité est un problème difficile à résoudre, principalement en raison du grand nombre de scénarios offrant des solutions individuelles. Mais même si vous connaissez tous les types de handicaps, il est toujours très difficile de garder à l’esprit autant de variables indépendantes et de proposer une solution qui fonctionne pour tous. La bonne nouvelle est que, dans la plupart des cas, l’accessibilité n’est pas liée à des implémentations technologiques complexes, mais peut être résolue en s’appuyant sur des principes de conception simples. Dans KendoReact nous essayons de les suivre autant que possible.

Dans la prochaine partie de cette série, nous allons partager avec vous notre expérience avec les lecteurs d'écran et vous proposer quelques astuces supplémentaires.

The Whole Series

• 1ère partie : Article d'introduction sur l'accessibilité du Web qui tente de déterminer en quoi consiste l'accessibilité et son importance.
• Partie 3: Meilleures pratiques techniques. Cette partie est techniquement orientée et se concentre sur le travail avec les lecteurs d’écran. (à venir)
• Partie 4: Plus de pratiques optimales et de ressources. Nous passons ici en revue plus de pratiques pour organiser notre flux de travail et explorons plus avant comment rendre cette tâche décourageante facile à gérer. (à venir)