Introduction aux aria

Le langage HTML a été initialement conçu pour créer des pages de texte statiques. JavaScript fournit des composants   dynamiques qui n’existent pas dans le langage HTML natif. Les Accessible Rich Internet Applications (ARIA) offrent aux développeurs des fonctions d’accessibilité qui ne sont pas disponibles dans le langage HTML à lui seul.

Les ARIA sont un ensemble d’attributs (propriétés des balises HTML) qui rend le contenu et les applications Web plus accessibles. Lorsqu’il n’est pas pratique d’utiliser le langage HTML sémantique, les ARIA peuvent communiquer de l’information et des interactions sémantiques aux technologies d’assistance . Les ARIA communiquent de l’information sémantique sur les widgets   (éléments de l’interface utilisateur [IU]), les structures (relations) et les comportements en matière de technologies d’assistance. Une expérience accessible correcte dépend de l’utilisation appropriée de cet outil; une mauvaise utilisation des ARIA peut conduire à des expériences médiocres ou inutilisables.

Les attributs ARIA peuvent rendre le langage HTML non sémantique, comme les balises <div>, plus accessible lorsque le code natif ou la technologie sous-jacente ne peuvent pas le faire. Supposons, par exemple, que vous utilisiez une bibliothèque ou un cadre de travail externe qui utilise une balise <div> comme bouton. Il peut être plus facile d’ajouter une balise ARIA telle que ‘role= » button »’ au composant, plutôt que de réécrire les fonctions et les styles existants. Considérez cette approche avec prudence, car vous devrez également confirmer que le JavaScript approprié est en place pour rendre l’élément accessible (p. ex., assurez-vous qu’il est saisissable et définissez des gestionnaires d’interactions pour les interactions de clic et d’appui sur des touches).

Si vous avez l’intention d’améliorer l’accessibilité du langage HTML avec des balises ARIA, veuillez consulter les pratiques de création et les exemples détaillés ci-dessous. Pour résumer la première règle des ARIA : Si vous pouvez utiliser des attributs HTML ou sémantiques, faites-le. Une autre expression courante est que de bonnes ARIA valent mieux qu’aucune ARIA, mais qu’il vaut mieux n’avoir aucune ARIA que de mauvaises ARIA.

Exemples d’utilisation des ARIA

Points de repère

• Les points de repère définissent les sections d’une page Web, ce qui aide les utilisateurs de lecteurs d’écran à explorer la page. Les points de repère peuvent être définis comme des éléments HTML ou avec des rôles ARIA : Un point de repère <header> (en-tête) peut être remplacé, si nécessaire, sur n’importe quel élément (comme une balise <div>) en ajoutant role= »banner ».
• Un point de repère <aside> (de côté) peut être remplacé par role= »complementary ».
• Un point de repère <footer> (pied de page) peut être remplacé par role= »contentinfo ».

Rôles ARIA et JavaScript

Certains cadres de travail JavaScript génèrent des pages Web avec un code non sémantique, par exemple un élément <div> au lieu d’un <button> (bouton). L’ajout de l’ARIA role= »button » améliorera la signification sémantique de la balise <div>.

Lorsque JavaScript est utilisé pour créer des composants spéciaux qui n’existent pas nativement dans le HTML, il peut être nécessaire de leur attribuer un rôle ARIA pour définir ce qu’ils sont. Par exemple :

• Un accordéon sera déployé et replié à l’aide d’un bouton doté de cet attribut : aria-expanded= »true »/ »false ».
• Un ensemble d’onglets dans une page Web aura besoin des ARIA role= »tablist », role= »tab », et role= »tabpanel ».

Vous trouverez d’autres exemples sur le site des pratiques de création ARIA (en anglais seulement).

Étiquettes

Il existe plusieurs façons d’étiqueter un bouton, en plus de l’utilisation du texte à l’écran, par exemple :

• Un attribut « aria-label » avec un texte précisant l’étiquette, par exemple, aria-label= »continue ».
• Un attribut aria-labelledby peut désigner un texte existant à l’écran comme étiquette.
• Un attribut aria-describedby peut pointer d’un champ de saisie vers une erreur en ligne pour les relier de manière sémantique (importante). Un lecteur d’écran annonce automatiquement l’erreur lorsque l’utilisateur passe au champ de saisie.

La « live region » ARIA

Une « live region » ARIA est une section d’une page Web dans laquelle les lecteurs d’écran annoncent automatiquement si le contenu change de façon dynamique après le chargement initial de la page. La « live region » fournit des messages d’état importants. Voici quelques exemples de codes :

• role= »alert » ou aria-live= »assertive » indique au lecteur d’écran d’interrompre un message en cours pour annoncer un changement de contenu dynamique.
• aria-live= »polite » indique au lecteur d’écran d’annoncer la « live region » mise à jour après avoir annoncé le contenu actuel.

aria-hidden

L’attribut aria-hidden= »true » indique aux lecteurs d’écran d’ignorer un élément et de ne pas l’annoncer. Le code aria-hidden peut être utile pour le contenu affiché à l’écran, mais qui peut prêter à confusion pour un utilisateur de lecteur d’écran.

Par exemple :

• Une icône placée à côté d’un texte redondant (comme une icône de corbeille avec le mot « Supprimer » à côté), car l’utilisateur n’a pas besoin que les deux soient annoncés.
• Le contenu d’arrière-plan qui est grisé lorsqu’une fenêtre contextuelle occupe la page. Lorsqu’une fenêtre contextuelle occupe la page, l’utilisateur d’un lecteur d’écran ne peut pas lire la page d’arrière-plan.