Penser de manière équivalente

Ceci est le deuxième de deux articles sur la manière dont l'accessibilité numérique est informée par l'équivalence. Auparavant nous avons découvert les biais sous-jacents qui informent la création de produits numériques, ce qui n'est pas une expérience équivalente, les effets aggravants d'une conception et d'un code inaccessibles et les puissantes forces de motivation pour faire mieux.

cet article, je vais discuter d'apprendre à adopter un état d'esprit équivalent et inclusif. Je fournirai également des moyens pratiques et robustes d'améliorer vos sites Web et applications Web en fournissant des solutions aux obstacles courants et courants cités par les personnes que j'ai interrogées.

Établissement d'une norme

Les directives d'accessibilité du contenu Web (WCAG) décrit dans les moindres détails comment créer des expériences numériques accessibles. Bien qu'il s'agisse d'un document long et dense, il est incroyablement complet – au point où il a été codifié en tant que norme internationale . Depuis plus de 10 ans, nous avons une définition canonique mondialement acceptée de ce qui constitue utilisable.

Comment le ferais-je?

Si vous avez besoin d'un peu d'aide pour construire le cadre mental initial auquel les WCAG parviennent, une question Je me demande toujours quand je fais quelque chose: "Comment pourrais-je l'utiliser si …" C'est une question qui vous amène à vérifier tous les biais qui pourraient vous affecter en ce moment.

Des exemples pourraient être :

• Comment pourrais-je l'utiliser si …
• … Je ne vois pas l'écran?
• … Je ne peux pas bouger mes bras?
• … Je suis sensible à l'animation clignotante et stroboscopique?
• … L'anglais n'est pas ma langue principale?
• … J'ai un budget limité pour la bande passante?
• … J'ai défini une grande taille de type par défaut ?
• … et ainsi de suite.

Concentrez-vous sur ces quatre paramètres pour améliorer la convivialité de votre conception Web:

1. Visuel – permet de voir facilement
2. Auditif – pour qu'il soit facile à entendre
3. Moteur – facilite l'interaction avec
4. Cognitive – simplifiez la compréhension

→ Les objectifs d'accessibilité sont également des objectifs d'utilisabilité.

– Alex ? (@alexmuench) 30 janvier 2020

Une introduction en douceur

Si vous recherchez une ressource plus accessible sur la façon de creuser dans ce que les WCAG couvrent, les Principes de conception inclusifs seraient un excellent point de départ. Les sept principes qu'il décrit correspondent tous au critère de succès WCAG .

Apprenez des personnes qui l'utilisent réellement

Vous n'avez pas à croyez-moi. Voici quelques problèmes courants cités par les personnes que j'ai interrogées et comment les résoudre:

Orientation

Titres

Les éléments de titre sont extrêmement importants pour maintenir une expérience équivalente et accessible.

Quand a construit avec habileté et soin les éléments de titre permettent aux utilisateurs de lecteurs d'écran de déterminer rapidement le contenu d'une page ou de consulter et d'accéder à un contenu correspondant à leurs intérêts. Cela équivaut à la façon dont quelqu'un pourrait rapidement survoler défilant jusqu'à ce que quelque chose qui semble pertinent apparaisse.

Justin Yarbrough exprime des éléments de titre mal écrits comme une préoccupation, et il n'est pas seul.

Le sondage auprès des lecteurs d'écran de WebAIM cite les titres comme moyen le plus important de trouver des informations. Cette enquête mérite d'être étudiée, car elle fournit des informations précieuses sur la façon dont les personnes handicapées utilisent réellement la technologie d'assistance.

Points de repère

En plus des éléments de titre, une autre façon de déterminer la structure et la disposition globales sont repères . Les repères sont des rôles implicitement décrits par les éléments de section HTML utilisés pour aider à décrire la composition globale de la page principale ou des zones de vue.

Voici ce que Justin a à dire:

«Si j'essaie simplement de trouver le contenu principal, je vais d'abord essayer le Q JAWS touche de raccourci pour voir si une région principale est configurée. Sinon, je suis juste plus ou moins coincé à essayer de numériser la page pour la trouver en flèches à travers la page. »

Tout comme la façon dont nous pourrions utiliser un nom de groupe de calques« navigation principale »dans notre fichier de conception, ou un nom de classe de c-nav-primary dans notre CSS, il est important que nous utilisions également un élément de sectionnement nav pour décrire notre navigation principale sur le site (ainsi que toute autre navigation le page ou vue contient).

Cela garantit que l'intention est maintenue tout au long de la conception, à la mise en œuvre et à l'utilisation. La même notion s'applique à aux autres éléments de coupe HTML qui créent des repères pour la technologie d'assistance.

Contrôles étiquetés

Brian Moore nous parle de «champs de formulaire sans étiquette ou au moins un qui n'est pas associé par programme, donc il ne lit rien. "

C'est un autre problème frustrant commun .

Fournir un valide pour / le pairage d'attribut id crée une association programmatique entre les entrées de formulaire et l'étiquette qui décrit ce qu'il fait . Et quand je dis label je veux dire l'élément label . Pas une div cliquable un espace réservé aria-label ou une autre solution fragile et / ou surmenée . Les éléments label sont une solution éprouvée qui bénéficie d'un support large et profond pour l'accessibilité.

De plus, un élément label ne doit pas être utilisé par lui-même, disons pour une étiquette sur un diagramme. Cela peut sembler contre-intuitif au début, mais je vous en prie, soyez indulgent.

 Votre nom 



 Cornea 
 Pupille 
 Lens 
 Retina 
 Optic Nerve 

Les mêmes types de technologies d'assistance qui permettent à une personne de sauter aux titres et aux repères leur permettent également de passer aux étiquettes d'entrée. Pour cette raison, on s'attend à ce que lorsqu'un élément label soit présent, il y ait également une entrée correspondante à laquelle il est associé.

Descriptions alternatives

Si vous avez une vision faible ou inexistante, et / ou ont du mal à comprendre une image, L'attribut alt de HTML (et non l'attribut title ) fournit un mécanisme pour comprendre à quoi sert l'image. Le même principe s'applique pour fournir des légendes pour le contenu vidéo et audio comme podcasts .

Kenny Hitt mentionne que quand:

«… quelqu'un publie quelque chose sur Twitter, si c'est juste une image sans étiquette, je ne prends même pas le temps de participer à la conversation. Lorsque vous commencez chaque conversation en demandant ce qu'il y a dans l'image, cela fait vraiment dérailler les choses. était d'activer une option enfouie dans la sous-section d'un menu de préférences. Comparez cela à une plate-forme comme Mastodon où la fonctionnalité est activée par défaut.

Soren Hamby mentionne Stitcher une application de podcast populaire. «L’intégration était constituée de nombreux graphiques à thème, mais le texte de remplacement pour chacun d’entre eux était« non sélectionné »et pour la même image avec une vérification, il était sélectionné. Je pense qu'il serait raisonnable pour eux de dire «genre de science-fiction sélectionné» […] c'est une si petite chose mais cela fait toute la différence. »

S'assurer que le contenu de description alternative est concis et descriptif est tout aussi important que y compris la possibilité de l'ajouter. Daniel Göransson développeur de Axess Lab a un excellent article sur la façon de les écrire efficacement .

Des fonctionnalités robustes et accessibles peuvent également faire partie de critères d'évaluation, ainsi qu'une excellente méthode pour fidéliser la clientèle. Soren mentionne qu'ils sont «souvent le facteur décisif, surtout entre les services». En particulier, ils citent les descriptions audio de Netflix.

ARIA

Un article de Daniel Göransson sur les descriptions alternatives mentionne le fait de ne pas trop décrire les choses. Cela inclut des informations telles que c'est une image, qui est le photographe, et le bourrage de mots clés.

Le même principe s'applique pour Accessible Rich Internet Applications (ARIA) . ARIA est un ensemble d'attributs conçus pour étendre le HTML afin de combler les lacunes entre le contenu interactif et la technologie d'assistance. Lorsque ARIA est utilisé pour remplacer complètement HTML, cela conduit souvent à une expérience sur-décrite.

Brian explique: «Il semble y avoir une perception selon laquelle plus d'ARIA corrige l'accessibilité et cela peut aider, mais trop lit soit de mauvaises choses ou parle juste beaucoup trop. Si le texte à l'écran d'un ou deux mots convient à tout le monde, il convient également aux utilisateurs de lecteurs d'écran. Nous n'avons pas besoin d'une phrase entière ou de deux descriptions de boutons ou de liens, c'est-à-dire que la «politique de confidentialité des liens» est bien meilleure que quelque chose comme «ce lien ouvrira notre politique de confidentialité, ce lien s'ouvrira dans une nouvelle fenêtre» lorsque le texte du lien à l'écran est une «politique de confidentialité». »

La première règle d'utilisation d'ARIA nous conseille de ne l'utiliser que lorsqu'un élément natif ne suffit pas. Vous n'avez pas besoin de décrire ce qu'est votre composant interactif ou comment il fonctionne, de la même manière que vous n'avez pas besoin d'inclure le mot "image" dans votre description alternative.

À condition que vous utilisiez l'élément HTML natif approprié, la technologie d'assistance s'occupera de tout cela pour vous. Faire plus, plus solidement, avec moins d'effort?

Contrairement à la plupart de HTML, CSS et JS, le succès de ARIA implémenté est contextuel, variable et largement invisible. Malgré cela, nous semblons étouffer ARIA sur tout sans prendre la peine de vérifier non seulement si cela fonctionne réellement, mais aussi ce qu'en pensent les gens qui l'utilisent réellement . [19659005] La prise en charge d'ARIA est fragmentée entre les systèmes d'exploitation, les navigateurs et les offres de technologies d'assistance, toutes leurs versions respectives et toutes les permutations possibles des trois. Autrement dit, écrire ARIA et croire qu'il fonctionnera comme prévu ne suffit pas.

S'il est mal configuré et / ou sur-appliqué, ARIA peut casser . Il peut ne pas signaler une fonctionnalité réelle, annoncer la mauvaise fonctionnalité et (avec précision ou inexactitude) décrire de manière excessive une fonctionnalité. De toute évidence, ces expériences ne sont pas équivalentes.

La ​​représentation est importante . Pour mieux comprendre le fonctionnement du code ARIA que vous avez écrit, je vous recommande d'embaucher des personnes pour vous le dire. Voici quatre de ces services qui font exactement cela:

Contraste

Contraste des couleurs

Le contraste des couleurs est un autre problème courant, dont la gravité semble souvent être minimisée. Si je peux parier une supposition, c'est parce qu'il est facile d'oublier que la vision des autres peut être différente de la vôtre. Quoi qu'il en soit, c'est une préoccupation qui affecte une large partie de la population mondiale et nous devons traiter le problème avec le sérieux qu'il mérite.

L'enquête Click-Away Pound Survey nous dit que tout en haut les problèmes rencontrés par les utilisateurs ayant des besoins d'accès, de contraste et de lisibilité constituent le cinquième problème le plus important. En plus de cela, il a augmenté comme une préoccupation, passant de 44% des répondants en 2016 à 55% en 2019.

Nous vivons à une époque où il y a plus de ressources de vérification du contraste des couleurs que je ne peux. compter. Des produits comme Stark peuvent aider les concepteurs à auditer leurs conceptions avant leur traduction en code. Des outils comme la grille de contraste d'Eightshape et Le constructeur de palette de couleurs accessibles d'Atul Varma vous permettent de créer vos systèmes de conception avec des combinaisons de couleurs robustes et accessibles hors de la porte.

La chose quelque peu ironique sur le contraste des couleurs est de savoir comment, ah, il est visible. Alors que certains des problèmes d'accessibilité précédents sont invisibles – cachés comme code sous-jacent – le contraste est un problème assez simple.

La plupart du temps, le contraste est un scénario binaire, dans la mesure où vous pouvez ou ne pouvez pas voir le contenu. Ainsi, la prochaine fois que vous vérifierez votre site Web ou votre application Web avec un vérificateur d'accessibilité automatisé tel que Hache de Deque ne soyez pas si rapide pour minimiser les erreurs de contraste de couleur qu'il rapporte.

Contraste élevé

Il existe des solutions technologiques pour les situations où même des taux de contraste des couleurs satisfaisants ne sont pas suffisants, à savoir mode couleurs inversées et Mode contraste élevé . De nombreux participants que j'ai interviewés ont mentionné utiliser ces modes d'affichage au cours de leur utilisation quotidienne de l'ordinateur.

Pourvu que vous utilisiez du HTML sémantique, ces deux modes n'ont pas besoin de beaucoup d'efforts pour que le développement fonctionne correctement. L'important est de vérifier ce que vous construisez dans ces deux modes pour vous assurer que tout fonctionne comme prévu.

En quête de perfection

Pour citer Léonie Watson

«Accessibilité ne doit pas être parfait, il doit juste être un peu meilleur qu'hier. »

En comprenant à la fois pourquoi et comment améliorer vos expériences d'accessibilité numérique de manière à éliminer directement les obstacles communs, vous pouvez offrir des expériences significatives et agréables à tous.

Pour en savoir plus

Merci à Brian Moore, Damien Senger, Jim Kiely, Justin Yarbrough, Kenny Hitt et Soren Hamby pour avoir partagé leurs idées et leurs expériences.

(ra, il)