Accessibilité Web: Aria, Focus, Focus Management

Qu'est-ce que l'accessibilité du Web et quelles fonctionnalités et pratiques devrions-nous utiliser? Parlons également des technologies d'assistance et de la gestion de la mise au point.

La création de plates-formes pour le Web a toujours été aussi simple que d'apprendre à écrire du HTML, d'ajouter l'apparence et la convivialité avec du CSS, puis, éventuellement, un peu de JavaScript ou tout autre script langue pour les fonctionnalités. Cependant, il y a plus de subtilités pour pouvoir accueillir des technologies d'assistance et un large éventail d'utilisateurs vivant avec un handicap.

Dans cette série en trois parties, nous examinerons les moyens d'améliorer l'état de applications modernes et aussi pour améliorer le Web pour le prochain milliard d'utilisateurs.

TL; DR

Dans cet article, nous visons à comprendre le concept d'accessibilité pour le Web et discuterons comment implémenter les fonctionnalités d'accessibilité dans les applications et aussi donner un aperçu des pratiques qui aident à encourager l'utilisateur des technologies d'assistance. Nous examinerons également le concept de gestion de la mise au point.

Prérequis

Avant d'aller plus loin, cet article suppose ce qui suit:

• Vous avez des connaissances en HTML
• Vous avez une compréhension de l'objet Document Modèle (DOM)

Mise en route

Rendre un projet Web accessible peut sembler écrasant, mais c'est vraiment aussi simple que d'implémenter une approche plus sémantique pour écrire du code pour permettre à tous les utilisateurs. Le fondement de ceci est le principe POUR qui guide la création de sites Web accessibles.

En termes simples, POUR signifie: Perceivable Operable, Compréhensible , Robuste.

Perceptible: Cela signifie que le Web doit être accessible aux sens (vision, toucher et audition), soit via le navigateur, soit via des technologies d'assistance comme lecteurs d'écran ou agrandisseurs d'écran.

Utilisable: Cela signifie que les utilisateurs peuvent interagir avec toutes les commandes et éléments interactifs à l'aide de la souris, du clavier ou d'un appareil fonctionnel. Nous examinerons la possibilité de rendre les plates-formes opérationnelles dans la section sur la gestion de la mise au point.

Compréhensible: Dans cet aspect, nous considérons l'utilisation du langage, qui comprend essayer autant que possible de réduire les fautes d'orthographe et les grammaire.

Robuste: Cela signifie avoir une cohérence sur le Web. Cela signifie que votre plate-forme doit fonctionner de la même manière sur toutes les plates-formes.

Pratique courante

Je souligne toujours le simple fait que la construction de plates-formes plus accessibles revient à écrire du HTML plus sémantique. Structurellement, le HTML sémantique est le point de départ clé vers de bonnes pratiques d'accessibilité. Lorsqu'un lecteur d'écran, ou tout autre appareil fonctionnel, scanne une page Web, il obtient des informations sur le modèle d'objet de document (DOM) ou la structure HTML de la page.

Remarque: aucun style ou JavaScript sera lu par un lecteur d'écran.

Maintenant, c'est vraiment simple, non? Cependant, la question se pose généralement: «Que signifie écrire du HTML sémantique?»

En termes simples, la sémantique du HTML met davantage l'accent sur la signification de chaque balisage plutôt que sur la définition de sa présentation ou de son apparence. des balises qui donnent plus de sens à ce qu'est réellement votre structure, par exemple en utilisant une balise nav lorsque vous parlez d'une navigation au lieu de battre un div dans un Nav.

Qu'est-ce que la gestion de la mise au point?

Le concept de la gestion de la mise au point est vraiment important pour comprendre comment les technologies d'assistance gèrent les éléments d'annonce dans le DOM ou même comment l'interaction se produit sur une plate-forme.

Une gestion de la mise au point bien planifiée est importante pour assurer un confort expérience utilisateur. Cela signifie déplacer le curseur d'une partie de l'application à une autre, afin d'aider les utilisateurs (principalement handicapés moteurs) à naviguer sur la plate-forme avec le clavier dans le flux prévu de l'application. Certains éléments sont implicites itly focusable, comme les éléments de formulaire et les éléments d'ancrage, alors que d'autres ne le sont pas, comme les balises p et h2 .

Que sont les éléments focalisables?

Les éléments HTML peuvent être focalisables s'ils ont une sémantique à eux. Comme indiqué ci-dessus, les éléments qui sont fondamentalement focalisables sont généralement des appels à l'action ou à la navigation, qui incluent l'entrée, la zone de texte, le bouton, les balises d'ancrage, etc.

D'un autre côté, les éléments non focalisables sont des éléments utilisés pour afficher certaines structures, telles que les balises div et p, h1-h6, etc. Ces éléments peuvent gagner une certaine focalisation en utilisant les étiquettes ARIA. Nous en parlerons dans une autre section.

Le focus se réfère au contrôle de l'écran de l'ordinateur qui reçoit l'entrée lorsque vous envoyez des informations. Ceci est généralement associé au clavier. Chaque fois que vous essayez de remplir un formulaire ou d'utiliser une partie spécifique d'une page Web, vous devez le mettre en évidence.

Ceci est important pour les utilisateurs qui préfèrent naviguer sur la plate-forme avec le clavier en utilisant l'onglet et touches shift ou qui ont une sorte de handicap moteur.

Focus Helpers

Maintenant que nous avons une idée de ce que signifie la gestion de la concentration, la question est de savoir comment mettre en œuvre et réaliser cela, et comment naviguer dans le focus sur les éléments.

Pour réaliser la gestion de focus, nous utilisons quelques attributs impressionnants. Comme tabindex et ARIA, parlons donc de ces éléments.

Utilisation de Tabindex (-1, 0, 1)

The way focus rings savoir comment naviguer dans l'ordre de tabulation consiste à utiliser ce qu'on appelle l'index de tabulation des éléments. Naturellement, les éléments focalisables peuvent ne pas avoir besoin d'un tabindex donc nous l'utilisons principalement avec des éléments non focalisables.

Un élément avec un tabindex peut être classé en trois valeurs: [19659008] Tabindex sur 0

Tabindex = 0 [19659003] Avoir un tabindex de 0 permet aux éléments qui n'ont pas de possibilité de focalisation sémantique de pouvoir apparaître dans l'arborescence DOM d'accessibilité. Cela signifie que si un div a un tabindex de 0, il est accessible par tabulations, ce qui lui donne la possibilité de mise au point .

Tabindex de -1 [19659003] Lorsqu'un élément a une valeur négative (ne doit pas nécessairement être -1), il le retire de l'arborescence DOM d'accessibilité. Vous vous demandez peut-être pourquoi vous souhaitez supprimer un élément de l'arborescence DOM d'accessibilité. Un bon cas d'utilisation serait de basculer les liens inutiles qui précèdent le contenu principal pour donner aux gens la possibilité de partir du contenu principal de la page.

Cela peut également être réalisé avec les liens Ignorer.

Tabindex sur> 1

Lorsque le tabindex est défini sur 1, il déplace l'élément vers le haut de l'arborescence DOM d'accessibilité. Cela en fait le premier élément focalisable de la page

Remarque: Les outils de test comme AX peuvent avoir un problème avec tabindex et les signaler comme un problème, donc si vous n'avez pas à utiliser un tabindex il serait préférable d'utiliser les balises sémantiques prédéfinies.

Rôles

Le concept d'avoir des rôles avec des balises HTML est principalement utilisé pour créer une meilleure expérience pour les technologies d'assistance. Un lecteur d'écran fournit une représentation auditive d'une arborescence DOM à un utilisateur (principalement des utilisateurs malvoyants). Dans ce cas, le lecteur d'écran définirait le rôle, le nom, l'état et / ou la valeur de l'élément. Le rôle est ce que fait l'élément, par ex. est-ce un bouton radio? Est-ce un texte modifiable? Est-ce un bouton?

A partir de l'exemple de code ci-dessus, nous pouvons voir le rôle du div comme bouton. Bien que ce ne soit pas conseillé (car la balise bouton serait préférable), cela fournit une explication sémantique de l'élément.

Autre exemple:

 
   Trip

Ce que les lecteurs d'écran prononcent est: «Trip, selected, radio button.»

ARIA

ARIA (Accessible Rich Internet Applications) nous permet d'exprimer une plus large gamme de commandes non accessibles être accessible. Par exemple, en utilisant l'exemple de bouton radio que nous avons ci-dessus, si nous voulions avoir plus de contrôle sur le style du bouton radio, nous devrons le modifier un peu, peut-être comme ceci:

   abonnez-vous à nos services

Maintenant, le code ci-dessus peut afficher une case à cocher personnalisée, mais dans l'arborescence DOM d'accessibilité, il n'existe pas et c'est un problème pour les lecteurs d'écran. Bien qu'il annoncera le texte à l'intérieur du div, il ne vous indiquera pas le rôle ou l'état. Comment résoudre ce problème?

Utilisation d'ARIA

ARIA utilise le rôle pour ajouter une sémantique supplémentaire. Pour l'afficher, nous allons modifier l'exemple de code ci-dessus.

   abonnez-vous à nos services

Une autre implémentation très fascinante d'ARIA est sa capacité à aider à générer des modèles d'interface utilisateur plus expressifs, en utilisant des valeurs comme aria-extended = "true" et en ajoutant également des rôles qui expriment ce que font ces attributs. Nous pouvons également utiliser des valeurs comme aria-label = "" pour donner à un élément sa propre étiquette de nom (cela peut être utilisé sur tous les éléments).

Pour obtenir plus d'informations sur ARIA, consultez le site officiel documentation .

Remarque: ARIA modifie l'arborescence d'accessibilité. Il ne fait pas ce qui suit:

• Modifier l'apparence de l'élément
• Modifier le comportement de l'élément
• Ajouter focusablitiy
• Ajouter la gestion des événements clavier

Conclusion

Dans cet article, nous avons tenté de comprendre les bases de l'accessibilité pour le Web et a également examiné certains principes d'accessibilité. J'espère que nous mettrons ces pratiques en jeu lors de la création d'applications pour permettre un meilleur Web pour tous. Bon codage! 😄