Comment utiliser ARIA dans le HTML de votre site WordPress

L'un des principaux objectifs du développement Web est de créer une expérience utilisateur attrayante. Vous le ferez souvent en incluant des fonctionnalités interactives et des éléments visuels époustouflants sur votre site Web. Cependant, ces aspects ne sont pas nécessairement accessibles à tous les visiteurs potentiels, en particulier ceux qui comptent sur les lecteurs d'écran.

Heureusement, un système est en place pour aider tous vos utilisateurs à profiter des résultats de votre travail acharné. L'intégration d'applications Internet riches accessibles (ARIA) dans le code HTML de votre site ne demande qu'un petit effort supplémentaire et peut être très rentable. Cet article vous présentera ARIA et comment l'utiliser. Allons-y!

Une introduction à ARIA : qu'est-ce que c'est et pourquoi vous pouvez l'utiliser

En bref, ARIA est un moyen de spécifier les attributs du HTML afin que les lecteurs d'écran puissent les identifier avec précision, puis les transmettre aux visiteurs. Il s'agit d'un aspect clé du développement Web accessible et permet de créer des expériences plus précises pour les utilisateurs de lecteurs d'écran.

En effet, l'incorporation d'ARIA dans votre code HTML influence la façon dont les navigateurs modifient vos pages Web pour les lecteurs d'écran. Ce contenu modifié est présenté dans une arborescence d'accessibilité, et ARIA se charge d'y traduire vos éléments HTML.

Par exemple, disons que vous avez une page avec une case à cocher et que vous avez utilisé ARIA dans votre code HTML. ARIA indiquera au lecteur d'écran d'informer l'utilisateur qu'il y a une case à cocher sur la page, et indiquera si elle est cochée ou non. Le HTML natif ne peut pas le faire tout seul.

Pensez à la fréquence à laquelle vous utilisez le Web, non seulement dans votre travail, mais dans votre vie de tous les jours. Imaginez maintenant si une grande partie du Web était inutilisable pour vous. Vous auriez accès à moins de ressources pour l'éducation, l'emploi, les soins de santé, l'information, la communication et même le divertissement.

L'utilisation des meilleures pratiques pour un développement Web accessible est une façon de faire votre part pour faire d'Internet un lieu d'égalité des chances pour tous, quel que soit l'âge ou les capacités. Ceci est considéré comme un droit humain fondamental par les Nations Unies, et c'est un objectif qui mérite d'être poursuivi pour son propre mérite.

Si cela ne suffit pas à vous investir dans l'utilisation d'ARIA, vous pouvez également noter que le développement accessible est également utile d'un point de vue commercial. Il chevauche les meilleures pratiques d'optimisation des moteurs de recherche et augmente la portée de votre site Web. De plus, dans certains cas, c'est requis par la loi. En d'autres termes, il existe de nombreuses raisons de prendre quelques mesures simples pour rendre votre site plus accessible.

Comment utiliser ARIA dans le HTML de votre site WordPress (3 pratiques clés)

Nous vous recommandons vivement de continuer à vous renseigner sur ARIA et l'accessibilité du Web au-delà de la portée de cet article. Vous pouvez notamment envisager de tester l'accessibilité actuelle de votre site.

Cela dit, il n'y a vraiment que trois choses que vous devez savoir pour commencer à utiliser ARIA dans le code HTML de votre site WordPress. Apprendre les pratiques ci-dessous devrait vous fournir une base solide.

1. Utiliser ARIA avec le HTML sémantique

Avant de discuter de la façon d'appliquer ARIA à votre code HTML, il est important de noter quand il est approprié de l'utiliser. Bien que le HTML natif à lui seul ne permette pas un contenu Web accessible, certains éléments sémantiques rendent ARIA inutile ou entreront en conflit avec ARIA s'il n'est pas utilisé correctement.

Les éléments sémantiques – tels que <header> , <figure> et <nav> – décrivent le but de leur HTML. Incorporer ARIA dans ces éléments serait redondant, puisque le HTML sémantique implique déjà le rôle de l'élément (nous parlerons plus en détail des rôles ARIA dans un instant).

De plus, certaines règles s'appliquent à l'utilisation d'ARIA, afin d'empêcher les développeurs de l'utiliser d'une manière qui entre en conflit avec le HTML sémantique. Le World Wide Web Consortium (W3C) dispose d'un tableau utile qui répertorie les éléments HTML sémantiques ayant des rôles ARIA implicites :

La première colonne spécifie un élément HTML, tandis que la seconde répertorie le rôle implicite. Si l'élément a un rôle implicite répertorié, vous n'avez pas besoin d'inclure un rôle ARIA supplémentaire pour lui. La troisième colonne répertorie les rôles que chaque élément HTML peut avoir, selon les meilleures pratiques.

2. Ajout de rôles aux balises HTML

Une fois que vous êtes sûr que l'élément HTML sur lequel vous travaillez nécessite l'utilisation d'ARIA, vous pouvez passer à l'utilisation de « rôles » et « attributs ». Vous avez peut-être déjà une idée de ce que font les rôles ARIA à partir de la section précédente. Ils spécifient le type d'élément contenu dans la balise et indiquent le but de l'élément.

Ainsi, par exemple, si vous vouliez créer une alerte pour informer les utilisateurs qu'ils doivent installer une mise à jour, vous utiliseriez le rôle « alerte » comme ceci :

 <div role="alerte">
<p>Veuillez installer la dernière mise à jour !</p>
</div>

Comme nous l'avons expliqué précédemment, vous n'avez pas besoin d'attribuer un rôle si l'élément est sémantique et implique le rôle, et vous ne devez pas attribuer un nouveau rôle à un élément qui entre en conflit avec son rôle implicite. Cependant, vous devez également noter que vous ne pouvez appliquer qu'un seul rôle à chaque élément.

Pensez-y de cette façon - un rôle définit ce qu'est un élément. Un élément ne peut pas être deux choses à la fois, vous devez donc choisir le rôle qui le décrit le mieux. Cela dit, lorsque vous en avez besoin, vous pouvez choisir d'imbriquer un élément dans un élément avec un rôle différent.

Par exemple, si vous vouliez ajouter l'alerte ci-dessus à votre en-tête, cela pourrait ressembler à ceci :

 <header><div role="alerte">
<p>Veuillez installer la dernière mise à jour !</p>
</div></header>

Plutôt que de déclarer qu'un seul élément est à la fois un en-tête et une alerte, cela indique clairement qu'il y a une alerte contenue dans l'en-tête.

3. Inclusion d'attributs dans les états et propriétés des notes

Les attributs sont le deuxième élément qui composent ARIA. Ils diffèrent des rôles en ce qu'ils disent aux lecteurs d'écran quelque chose d'important sur un élément particulier, plutôt que de définir ce qu'est cet élément. Il existe deux types d'attributs ARIA :

• Les États partagent des informations concernant des fonctionnalités susceptibles de changer lorsqu'un utilisateur interagit avec eux. Par exemple, cela peut inclure des cases à cocher ou des boutons radio.
• Les propriétés signalent des caractéristiques qui sont peu susceptibles de changer pendant l'utilisation. Un élément qui étiquette un autre élément, ou le niveau hiérarchique auquel un élément est situé, sont tous deux des propriétés.

Les deux sont faciles à repérer, car ils commencent toujours par aria- suivi de l'état ou de la propriété spécifique utilisée. Par exemple, l'état utilisé pour informer un lecteur d'écran qu'une case à cocher est remplie par défaut est aria-checké, comme dans cet exemple :

 <span role="case à cocher" 
aria-checked="true"
tabindex="0">
</span>

De même, la propriété utilisée pour noter quand un élément en étiquette un autre est aria-labelledby. Vous pouvez appliquer cet attribut à une image, par exemple, pour indiquer la légende qui lui est associée :

 <figure aria-labelledby="operahouse_1" role="groupe">
<img src="operahousesteps.jpg" alt="L'opéra de Sydney">
<figcaption>Nous avons vu l'opéra <cite>Barbier de Séville</cite> ici !</figcaption>
</figure>

Nous vous recommandons de consulter la liste des rôles, états et propriétés autorisés du W3C pour voir plus d'exemples d'attributs que vous pouvez utiliser.

Conclusion

En matière de développement Web, la création de contenu accessible n'est peut-être pas la première chose à laquelle vous pensez. Cependant, en suivant les meilleures pratiques d'accessibilité du Web et en incorporant ARIA HTML dans votre site, vous pouvez jouer un rôle en rendant le Web accessible à tous.

Voici trois pratiques clés pour utiliser ARIA sur votre site WordPress :

1. Utilisation d'ARIA avec du HTML sémantique.
2. Ajout de rôles aux balises HTML.
3. Y compris les attributs pour noter les états et les propriétés.

Vous avez des questions sur l'utilisation d'ARIA sur votre site WordPress ? Faites-nous savoir dans la section commentaires ci-dessous!

Vignette de l'article EgudinKa / shutterstock.com