Guide d'accessibilité Web pour les développeurs

Introduction à l'accessibilité

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 les sujets d’accessibilité fondamentaux et avancés. Avec cet article, notre objectif est de familiariser les collègues ingénieurs, quel que soit leur niveau, avec l'accessibilité Web et de partager nos connaissances pratiques et nos meilleures pratiques.

Selon la définition du W3C, accessibilité signifie que les sites Web, les outils et les technologies sont conçus et développés de manière à que les personnes handicapées peuvent les utiliser. Plus précisément, les utilisateurs peuvent: percevoir, comprendre, naviguer, interagir avec le Web et contribuer au Web.

Un bon exemple d'accessibilité est si vous pouvez utiliser votre site sans le regarder. Comment toutes les fonctionnalités et tous les détails que vous avez passés des heures à développer pourraient-ils fonctionner si vous ne pouviez pas utiliser votre vue pour consommer le contenu ou utiliser la souris pour interagir avec celui-ci? Imaginez plutôt que vous ayez besoin d'écouter un lecteur d'écran décrivant l'interface utilisateur et que la navigation ne s'effectue pas forcément à l'aide de la souris ou du clavier traditionnels.

Pourquoi l'accessibilité est souvent négligée

Bien qu'il existe de nombreuses raisons pour lesquelles l'accessibilité n'est pas. omniprésentes, même si, idéalement, il devrait l'être, il y a trois raisons qui ressortent:

Tout d'abord, il est difficile de prendre en compte quelque chose que vous ne comprenez pas bien. La plupart du temps, ce n’est pas la motivation qui nous manque, mais plutôt l’éducation sur la façon dont les handicaps empêchent les gens d’interagir avec notre site. Cela inclut le manque de connaissances sur les types de handicap existants et sur la manière de les gérer. Nous ne connaissons tout simplement pas les tenants et les aboutissants du problème.

Deuxièmement, rendre votre application accessible nécessite beaucoup de travail. En partant de la compréhension des prémisses des normes, vous devez suivre jusqu'à la conception des fonctionnalités nécessaires dans votre application. Ensuite, bien sûr, nous vérifions si votre approche a donné le résultat souhaité – et une grande partie des tests ne peut être effectuée que manuellement. Les pratiques décrites dans cet article faciliteront cet effort, mais nous parlons toujours d'un engagement sérieux.

Le troisième argument est celui de l'argument économique qui, à juste titre, domine le processus décisionnel moderne: dans la plupart des cas, une minorité de vos clients. (ou les utilisateurs) seraient affectés par un handicap, ce qui sert de justification pour reporter l'application de ces améliorations de l'accessibilité dans la prochaine version. Il est beaucoup plus facile pour une entreprise de justifier de concentrer ses efforts sur quelque chose qui profite à la majorité plutôt que de servir un sous-ensemble d'utilisateurs plus petit avec des améliorations qui peuvent donner l'impression que l'application n'a pas réellement progressé.

Pourquoi l'accessibilité est importante

Éthique [19659012] Les personnes handicapées sont confrontées quotidiennement à de nombreux défis. S'ils font partie de vos clients ou utilisateurs, leur permettre d'interagir avec votre application Web relève de la décence humaine.

Marché

Il existe des données selon lesquelles un milliard de personnes dans le monde et 20% du tous les internautes ont une forme de handicap. C’est toujours une minorité, mais elle compte beaucoup plus de personnes que la plupart d’entre nous ne le pensent.

Juridique

À mesure que la législation évolue dans ce domaine, il est de plus en plus probable que la loi oblige votre entreprise à: être accessible. Nous y reviendrons plus tard dans la section suivante.

Expérience utilisateur

Les directives d'accessibilité sont conçues pour aider les internautes à accéder à votre site Web et à l'utiliser plus facilement. En tant qu'effet secondaire, la plupart d'entre eux améliorent la convivialité et profitent directement à tous les utilisateurs, y compris les personnes non handicapées. Par exemple, un texte lisible aide non seulement les malvoyants mais tous les utilisateurs.

Ingénierie

Bon nombre des bonnes pratiques en matière d'accessibilité sont de bons principes d'ingénierie et de conception. C'est souvent le code mal écrit qui n'est pas accessible. Pour ceux d'entre nous qui aspirent à la maîtrise de notre métier, l'accessibilité consiste simplement à faire du bon travail.

Réputation

Avoir un site plus accessible que vos concurrents constitue un avantage concurrentiel. Cela peut également aider à créer de la bonne volonté envers votre marque.

SEO

Il existe un certain chevauchement entre les bonnes pratiques en matière de référencement et d'accessibilité Web. Par exemple, l'écriture de code HTML sémantique avec l'utilisation correcte d'attributs descriptifs tels que les étiquettes, la transcription vidéo, le sous-titrage des images et l'utilisation de balises de titre et d'en-tête améliorent à la fois le référencement naturel et l'accessibilité d'un site Web.

aller dans une direction où l'accessibilité devient une caractéristique obligatoire du Web. Aux États-Unis, l'accessibilité est régie par la loi intitulée Americans with Disabilities Act ( ADA ). De nombreux pays développés ont des lois similaires, par exemple, le Royaume-Uni a la Loi sur l'égalité de 2010 . Concrètement, ces lois obligent les organisations et les entreprises du secteur public à se conformer aux directives pour l’accessibilité aux contenus Web (WCAG) .

Vous ne devez pas penser uniquement à vos clients et utilisateurs. Si votre organisation compte 50 employés ou plus, vous devez vous assurer de tenir compte des personnes handicapées. Cela signifie également que vos outils Web internes devront également être accessibles.

De plus, si vous êtes un contractant travaillant pour le gouvernement, vous devez vous conformer à la section 508 de la loi sur la réhabilitation . Outre ce qui précède. En vertu de la loi, tous les services du gouvernement des États-Unis doivent respecter l'article 508.

Ces lois ne sont pas simplement une indication de bonnes intentions. De plus en plus de cabinets d’avocats intentent des actions en justice sur la base de la législation sur l’accessibilité. Progress a publié un article détaillé sur le sujet intitulé « L'accessibilité et le droit ."

Types de handicaps et meilleures pratiques d'accessibilité

Il existe quatre types principaux de handicaps – l'audience vue 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 compte la 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 permettant d’examiner si le contraste est suffisant 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 – Blindness

Les personnes aveugles utilisent des lecteurs d'écran. Ces applications analysent le code HTML et le décrivent à l'utilisateur en langage naturel. Le développement pour les lecteurs d'écran a ses spécificités, de sorte qu'une section ultérieure de l'article se concentrera exclusivement sur eux. le périphérique d'entrée avec lequel un utilisateur aveugle travaillera sera différent.Utiliser une souris nécessite de la vue.Un aveugle aura besoin d'un support complet du clavier.

Déficiences visuelles – daltonisme

Le daltonisme ne constitue pas non plus une seule condition – il Il existe différents types de daltonisme. N'oubliez pas que les explications suivantes sont assez simplifiées. Le deutéranomalie est la difficulté à percevoir la lumière verte et est la plus courante. Ayant des difficultés à percevoir la lumière rouge s'appelle protanomalie et est un peu moins 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 condition varie également – ils 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. 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 comportant une limite de temps – toutes ces actions sont: difficile 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. La règle générale est que vous devez concevoir un site Web pour qu'un utilisateur puisse l'utiliser confortablement avec un clavier uniquement et avec une souris uniquement.

Troubles cognitifs liés à la maladie de la mobilité et à la surcharge sensorielle (exemple – épilepsie) [19659012] Plusieurs schémas peuvent provoquer le mal des transports ou une surcharge sensorielle. Ce sont généralement des effets rapides tels que tremblements, lumières vives, clignotements rapides (trois fois par seconde ou plus rapidement). La répétition de mouvements, rapides ou non, peut causer les mêmes problèmes. Un bon exemple de mouvement lent mais répétitif sur une page est une animation de flocons de neige qui tombent, comme on le voit 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 suivre le principe de Goldilocks – trop peu ne suffira pas, mais ajoutez-en trop et certains utilisateurs seront distraits. Évitez les contraintes de temps qui pourraient exercer une pression inutile sur l'utilisateur.

Déficience cognitive – Dyslexie

La dyslexie est un type de déficience qui rend difficile la lecture pour certaines personnes: les personnes dyslexiques peuvent confondre les lettres ou les voir pivoter ou s'agglomérer. . Dans les paragraphes suivants, nous allons énumérer les directives de lisibilité.

Conseils pour la lisibilité

Une bonne lisibilité garantit que votre site Web sera accessible à un certain nombre de personnes handicapées: sous-titres et transcriptions lisibles. d’aide aux personnes malentendantes et un texte lisible en général seront utiles aux personnes malvoyantes ou souffrant de 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.

Introduction à la technologie d'assistance

La technologie d'assistance est terme comprenant tous les logiciels et matériels conçus pour aider les personnes handicapées: bâtonnets buccaux, baguettes serre-tête, gros trackballs, claviers spécialisés, logiciels de reconnaissance vocale, loupes, lecteurs d’écran, écrans braille, appareils auditifs, logiciels dotés d'interfaces en langage naturel, entre autres: certains améliorent une technologie existante, d'autres offrent un moyen alternatif d'interagir avec un ordinateur.

Most assistive Les technologies fonctionnent au niveau du système d’exploitation et les développeurs Web n’ont rien à faire de plus pour leur permettre de fonctionner correctement. Cependant, avec les lecteurs d'écran, les choses ont tendance à être un peu plus compliquées. Ce que les lecteurs d’écran font, en substance, c’est d’analyser le code HTML, puis de le décrire et de l’expliquer en utilisant le langage naturel. La qualité de cette description vocale dépend directement de la qualité du code. Les lecteurs d’écran sont donc une préoccupation majeure pour les développeurs Web qui cherchent à rendre leurs sites Web plus accessibles. Dans les paragraphes suivants, nous examinerons certaines des meilleures pratiques lors de l'optimisation de nos ressources Web pour les lecteurs d'écran.

Optimisation pour les lecteurs d'écran

Écrire un code sémantique

La meilleure pratique pour aider les lecteurs d'écran à bien faire leur travail est écrire du code HTML sémantique, c’est-à-dire écrire du code HTML valide, appliquer les meilleures pratiques et utiliser les éléments en fonction de leur destination. Par exemple, si quelque chose ressemble et se comporte comme un bouton, faites-en un bouton, pas un