Accessibilité du site Premiers pas avec ARIA

En utilisant uniquement le langage HTML standard, les applications Web modernes peuvent verrouiller les utilisateurs ayant des besoins d'accessibilité. 

Le langage HTML est le langage de balisage prédominant en ligne. Il est utilisé par près de 83% des sites Web existants. Bien que certains changements aient eu lieu au cours des 25 années qui ont suivi sa création, de nouvelles versions, telles que HTML5 et AMP, laissent beaucoup à désirer, en particulier en ce qui concerne l’accessibilité. C'est là qu'intervient ARIA. Dans ce didacticiel, je vais vous expliquer ce qu'est l'ARIA, pourquoi il est utile pour votre site et comment l'ajouter à votre site..

Qu'est-ce que ARIA??

ARIA, également connu sous le nom de WAI-ARIA, représente les applications Internet riche accessibles de The Web Accessibility Initiative. Le cahier des charges complet est disponible ici. Notez que le document de spécification complet est assez dense. Il peut donc être judicieux de commencer par lire cet article et de consulter certaines des autres ressources que je lie ci-dessous.. 

Le but principal d'ARIA est de permettre une structure sémantique avancée au sein de HTML en contrepartie de la nature lourde de la syntaxe de HTML. En d'autres termes, HTML indique au navigateur où les choses se passent, et ARIA lui explique comment elles interagissent..

Qui est responsable d'ARIA?

ARIA est un projet hébergé par le W3C (World Wide Web Consortium). Le projet adhère aux mêmes normes de mise à jour et d'édition que ses autres initiatives. Ils fournissent également un référentiel GitHub de plusieurs tests que vous pouvez exécuter pour vous assurer que votre page fonctionne correctement..

Quel est le problème avec mon balisage de site actuel?

La plupart des sites dont la conception est structurée et bien conçue y parviennent assez bien en matière de technologies d’adaptation (lecteurs d’écran, par exemple). Cependant, avoir un utilisateur capable de comprendre comment utiliser votre site et de le rendre facile à utiliser sont des choses différentes. Les utilisateurs malvoyants représentent près de 2% de la population. Pour eux, cette différence peut signifier une économie de temps considérable et un travail de détective lorsque vous essayez d'exécuter des tâches de base en ligne. Cela peut faire la différence entre offrir aux visiteurs une expérience spectaculaire et leur offrir un labyrinthe de navigation..

Au-delà des moyens d’accessibilité traditionnels, ARIA s’intéresse aux technologies qui offrent de nouvelles approches en interaction standard. Un nombre croissant de systèmes vocaux, la navigation agrégée (comme les ordinateurs embarqués dans une voiture, par exemple) et d'autres innovations exploitent ARIA, tirant parti de ses capacités sémantiques accrues.

D'accord, mais que fait-il?

Dans l'ensemble, ARIA connecte les éléments entre eux de manière sémantique. Il fournit à l'utilisateur une signification supplémentaire en matière d'interaction. Voici quelques exemples concrets de son utilisation:

1. Association d'éléments non imbriqués: avec le langage HTML brut, le navigateur de l'utilisateur ne peut voir que les relations basées sur les relations parent / enfant. Dans certaines situations, cependant, nous pouvons souhaiter une série de boutons parallèles au contenu de la hiérarchie HTML. Avec ARIA, nous pouvons définir le type de contrôleur par bouton et les éléments qu’il contrôle ailleurs dans le document..
2. Déclarez des éléments interactifs: bien que le HTML fournisse une poignée d’éléments pour l’interactivité, ARIA en définit des dizaines d’autres, permettant ainsi une description plus fine de ce que chaque élément de votre page peut faire. En outre, elles peuvent être attribuées à des balises HTML qui ne seraient pas couramment utilisées à cette fin, mais qui pourraient avoir un sens dans votre cas particulier. Par exemple, vous pouvez utiliser le
3. balise pour une série de cases à cocher que vous préférez ne pas être composées d'éléments de formulaire.
4. Notifications de mise à jour de zone en direct: Une autre fonctionnalité fournie par ARIA est la définition d'une zone de contenu "en direct". Lorsqu'une zone de contenu est définie de cette manière, ARIA informera l'utilisateur de la modification du contenu de cet élément. Cela peut être utile pour s'assurer que les utilisateurs de basse vision savent que quelque chose a changé sur votre page..

Ajouter ARIA à vos pages Web

Nous avons parlé de ce que ARIA peut faire. Voyons maintenant quelques-uns des exemples les plus courants. Nous allons commencer chaque section par un bref énoncé de l'objectif que nous cherchons à atteindre, suivi d'un exemple de code expliquant comment y parvenir..

Création d'étiquetage alternatif avec ARIA

En ce qui concerne l’étiquetage alternatif, la plupart des développeurs connaissent le alt attribut couramment utilisé sur Mots clés. Cette balise sert un objectif important: décrire l'image à laquelle elle est attachée pour une accessibilité accrue (ou comme tactique de référencement commune, selon votre perspective).. 

ARIA fournit un attribut similaire appelé aria-label pouvant être attaché à n’importe quel élément HTML, améliorant l’accessibilité non seulement des images, mais également des sections de site, des contrôles de formulaire, etc. Voici un exemple de ce à quoi cela ressemble:

    
Une description textuelle de l'image, visible à l'écran

Définition d'éléments d'interface utilisateur spécifiques à ARIA

Le langage HTML fournit déjà un certain nombre d'éléments pour la création de pages Web, mais leur objectif principal est généralement de définir une zone de manière générique et de présenter à l'utilisateur la structure du site. ARIA fournit quelques dizaines d’éléments supplémentaires plus centrés sur la façon dont un élément est utilisé, tels qu’un minuteur, une info-bulle ou une barre de progression..

Un exemple d'utilisation ici est une info-bulle que vous pourriez trouver sur un formulaire. Il y a plusieurs façons de créer un lien, allant d'un lien qui déclenche du JavaScript à un élément qui crée un modal lors du survol. La pièce manquante ici est que, malgré la manière dont cela pourrait fonctionner pour les utilisateurs malvoyants, les utilisateurs malvoyants pourraient même ne jamais savoir que l'info-bulle existe.

Vous pouvez définir une info-bulle en utilisant ARIA comme ceci:

Définitions ARIA disponibles

Pour développer ces éléments d'interface utilisateur, voici une brève liste des "rôles" les plus intéressants pouvant être définis. La liste complète est disponible dans le document de spécification référencé..

• chercher
• bannière
• présentation
• barre d'outils
• statut
• élément du menu
• bûche
• dialogue
• lien

Établissement de relations en dehors de la structure parent / enfant

Maintenant développons un point dont nous avons parlé plus tôt: la structure forcée du HTML. Bien que la relation parent / enfant soit utile pour décider de la manière dont les choses doivent être ordonnées, elle n’est pas suffisante lorsque des liens plus significatifs sont nécessaires. Un exemple de ceci est des éléments frères. Certaines bibliothèques ont ajouté la possibilité de traverser les frères et soeurs ou d'autres formes de relations d'éléments, mais cela se produit généralement en JavaScript ou dans une autre langue en dehors du balisage..

ARIA nous donne la possibilité de définir ces relations directement dans le balisage, facilitant ainsi le regroupement d'éléments de menu, la création d'une navigation non standard et l'attachement de contrôles aux zones d'éléments difficiles à réaliser normalement..

Jetons un coup d'œil à la façon dont nous pourrions utiliser ceci pour connecter des contrôles à une zone de contenu:

 
 Le contenu de votre tutoriel 

Cet extrait dit que le nextbutton.jpg image est un bouton, qui est un contrôle pour le tutoriel div au dessous de.

Création d'éléments "en direct" dans ARIA

La dernière fonctionnalité d’ARIA que nous allons aborder ici est la aria-live attribut. Bien que la plupart des autres fonctionnalités d’ARIA traitent ici des connexions sémantiques, celle-ci traite directement de l’idée de donner aux utilisateurs des notifications de changements de contenu ou d’éléments..

Pour beaucoup de malvoyants, il n'est peut-être pas évident que leur interaction avec votre site ait entraîné une modification ailleurs sur la page. Cela peut être particulièrement vrai pour les changements subtils, tels que les petits textes de texte qui peuvent changer mais qui restent relativement de la même longueur. En utilisant cet attribut, chaque fois que le contenu est modifié dans l'élément défini, votre utilisateur en sera informé..

Nous pouvons ajouter cet attribut à un élément comme ceci:

 Contenu qui met à jour, à savoir. directions guidées 

Faire du Web un meilleur endroit pour tous les utilisateurs

Avec un peu plus de 2% de la population américaine portant une forme de label de vision basse, l'amélioration de l'accessibilité de votre site peut augmenter considérablement la portée de votre site. Pour ceux dont les sites atteignent plusieurs pays, ce nombre devient encore plus grand. En plus de l'accessibilité, ARIA fournit également un moyen d'utiliser votre site avec des interfaces autres que des navigateurs. Un certain nombre d'appareils basés sur la voix offrent déjà une assistance..

Implémenter ARIA aide vos utilisateurs et peut aider votre trafic, alors allez-y!

Ai-je oublié des détails ou avez-vous d'autres questions? Laissez un commentaire ci-dessous!

Si vous souhaitez plonger dans la documentation ARIA complète ou essayer l'outil de test officiel, consultez les liens ci-dessous:

• Pratiques de création ARIA
• Document complet de spécification ARIA
• Exemple de rapport d'outil de test