Share
Dans le monde complexe des applications Web, ARIA peut aider à améliorer l'accessibilité et la facilité d'utilisation de vos créations. Le langage HTML ne permet pas de gérer de nombreux types de relations entre les éléments de la page, mais ARIA convient parfaitement à presque tous les types de configuration possibles. Voyons ce qu'est ARIA, comment il peut s'appliquer à votre application Web et quelques recettes rapides que vous pouvez utiliser pour vos propres sites..
ARIA, également appelé WAI-ARIA, représente les applications Internet riches accessibles par la Web Accessibility Initiative. Cette initiative, mise à jour par le W3C, vise à fournir aux développeurs un nouvel ensemble de schémas et d'attributs permettant de rendre leurs créations plus accessibles. Il vise spécifiquement à combler les lacunes inhérentes au langage HTML. Si vous n'êtes pas au courant de ce qu'il fait déjà, vous devriez jeter un coup d'œil à notre guide d'introduction à ARIA. Vous pourriez également être intéressé par nos articles sur ARIA pour la page d'accueil et ARIA pour le commerce électronique.
En bref, cependant, ARIA a trois caractéristiques principales sur lesquelles nous allons nous concentrer:
Accentsconagua
aria-live Cet attribut donne aux lecteurs d’écran et aux autres appareils un écouteur lorsque le contenu de la page est modifié. Cela facilite la communication lorsque le contenu à l'écran change.Auparavant, nous avions envisagé d’ajouter ARIA aux éléments communs des pages de commerce électronique et des pages d’accueil de sites. Avec les applications Web, cependant, chacune d’elles diffère radicalement de la dernière. Les formulaires et les fonctions varient d'une application à l'autre et souvent même d'une version à l'autre de la même application. Pour cette raison, nous allons traiter ici nos implémentations comme des recettes dans un livre de recettes plutôt que comme une conversion en gros d'une page..
En ce qui concerne les applications Web, il est plus difficile de discerner l'intention d'un utilisateur dans un sens général. Avec le commerce électronique, quel que soit le site sur lequel vous vous trouvez, il est probable que les visiteurs cherchent à acheter un produit ou un service. Les applications Web remplissent diverses fonctions. Nous nous concentrerons donc sur la création de contrôles nuancés accessibles et conviviaux..
Entrons dans certains de ces types de contrôle.
Le premier contrôle que nous allons examiner est une valeur affichée mise à jour par une pression sur un bouton. Ces types de contrôles sont couramment utilisés lorsqu'un élément affiche une quantité pouvant être ajustée à l'aide de boutons intitulés '+' et '-', mais peut prendre de nombreuses formes, telles que des boutons fléchés vous permettant de parcourir les états prédéfinis.
Une implémentation standard peut laisser des lacunes dans la compréhension de l'utilisateur. On ignore quels éléments les boutons affectent, comment ils les affectent et quand la valeur de l'élément change.
Ci-dessous, nous allons utiliser ARIA pour créer une connexion entre les boutons et l’élément d’affichage de valeur à l’aide du bouton aria-contrôles attribut. Ensuite, nous allons clarifier l'utilisation des boutons en utilisant aria-label et HTML . Enfin, nous allons utiliser l'aria alerte rôle et la aria-live attribut de laisser notre utilisateur savoir quand la valeur est mise à jour.
Voyons à quoi ressemble ce code:
Lorsque vous équipez un site avec ARIA, il est courant d'utiliser "l'accessibilité progressive". L'idée sous-jacente à ce terme est que transformer un site ou une application Web en site Web entièrement accessible en une application de base est une tâche ardue. Pour traiter cela d'une manière qui continue d'avancer, vous pouvez implémenter de nouvelles fonctionnalités de manière progressive et itérative..
Pour une info-bulle avec un popup ou un modal associé, cela signifie que nous pouvons scinder le problème en deux étapes, en les déplaçant autant que possible. Dans ce cas, l'info-bulle dont nous parlons est l'image commune d'un petit point d'interrogation qui ouvre des informations supplémentaires lorsque vous la survolez..
Pour que les utilisateurs sachent que l'image du point d'interrogation est en fait une info-bulle, nous l'avons définie à l'aide d'un rôle approprié, tel que:
Il y a cependant quelques problèmes avec cette implémentation. Il se peut que les utilisateurs ne sachent toujours pas que le survol de l'info-bulle ouvre une fenêtre contextuelle contenant des informations supplémentaires. Voici comment nous pouvons ajouter cela à notre code:
Au lieu d'une info-bulle en survol, il est également courant qu'une application Web utilise des formulaires dans lesquels chaque entrée a sa propre info-bulle associée..
Sans balisage ARIA supplémentaire, il peut être difficile de déterminer les info-bulles qui s'appliquent à quelle entrée pour un utilisateur. Ne pas avoir cette relation en place peut rendre votre texte d'aide inutile dans certains cas.
Pour corriger cela, nous allons insérer nos infobulles dans leurs propres éléments. Chacun de ceux-ci peut être imbriqué près de son entrée associée, avoir ses relations établies avec ARIA, puis être déclenché avec JavaScript (ou simplement CSS si vous êtes rusé)..
Voici à quoi cela pourrait ressembler:
«Notre service est actuellement hors service», «Votre compte est suspendu» et les alertes d'état associées sont couramment utilisées parmi les applications Web et affichent des informations importantes pour les utilisateurs. Sans ARIA, ils peuvent se perdre dans les informations d’une page et causer divers problèmes..
Utiliser l'ARIA alerte rôle et la aria-live attribut, nous pouvons nous assurer que nos utilisateurs sont au courant de tous les problèmes rapidement une fois qu'ils arrivent sur une page.
Nous pouvons configurer ce type d’alerte de statut comme ceci:
Le système est hors ligne!
Enfin, examinons un autre élément de contrôle couramment utilisé dans les applications Web: la barre d’outils. Pour nos besoins, nous allons baliser une barre d’outils qui fonctionne de la manière suivante: notre application Web affiche une grande quantité de données, orientée dans un tableau. Au-dessus de ce tableau, notre barre d’outils comporte plusieurs boutons qui permettent aux utilisateurs de trier le tableau de différentes manières. Ces boutons incluent des options de tri classiques telles que De A à Z et Z à A.
Relationnellement, cela laisse quelques problèmes concernant l'accessibilité. Tout d’abord, il n’est pas clair que ces boutons affectent la table. Nous allons résoudre cela en utilisant le aria-contrôles attribut. Il n’est pas clair non plus que les boutons soient associés, ce qui peut être une information utile pour nos utilisateurs. Pour définir cela, nous allons utiliser le barre d'outils rôle. Enfin, un utilisateur ne sait pas nécessairement quel bouton a été pressé en dernier. Pour corriger cela, nous allons utiliser le aria-pressé attribut.
Lorsque vous utilisez le aria-pressé attribut, il est important de noter que vous devrez mettre à jour ces éléments au fur et à mesure que l'utilisateur interagit avec eux. Cela nécessitera probablement de changer les attributs via JavaScript ou jQuery.
Voici à quoi ressemble notre code de barre d’outils:
Avec cette poignée de nouveaux systèmes de contrôle et de relations à votre actif, vous êtes sur le point de rendre votre propre application Web entièrement accessible! Une fois que vous avez ajouté ces nouvelles annotations, réfléchissez à la manière dont vous pourriez appliquer ces attributs à d'autres parties de votre interface utilisateur pour optimiser la convivialité de votre création..
Y a-t-il des attributs, des rôles ou d'autres fonctionnalités d'ARIA que vous aimeriez connaître? Ou peut-être avez-vous des questions sur vos propres implémentations ou des corrections pour cet article? Entrez en contact en utilisant la section commentaire ci-dessous ou en balisant kylejspeaker sur Twitter!
