Les concepteurs de sites web qui découvrent le langage HTML peuvent être confrontés à un ensemble d’attributs qui ne leur sont pas familiers. Préfixés par le mot ARIA, ces attributs apparaissent partout sur le web, mais leur fonction peut être un mystère pour les nouveaux utilisateurs.
Les attributs ARIA jouent un rôle important dans l’accessibilité de vos sites web. Ils décrivent à la fois le contenu d’un élément donné et la manière dont cet élément est lié à une page ou aux autres éléments qui l’entourent.
L’ajout de ces attributs essentiels à votre site contribuera à garantir que tous les visiteurs bénéficient de la même expérience, quelle que soit la technologie qu’ils utilisent.
Que sont les attributs ARIA ?
ARIA est un acronyme pour Accessible Rich Internet Applications (applications Internet riches accessibles). Dans le langage HTML moderne, et en particulier dans les applications riches en JavaScript, le rôle des différents éléments n’est pas toujours évident à déterminer en fonction de la syntaxe.
La difficulté à discerner les rôles peut poser un problème lorsque les utilisateurs consultent le site à l’aide d’outils d’accessibilité tels que les lecteurs d’écran. En l’absence d’un code HTML sémantique approprié, l’utilisateur final peut ne pas être en mesure de naviguer sur un site lorsqu’il utilise des outils d’accessibilité.
Bien que la meilleure façon de résoudre ce problème soit d’utiliser les éléments sémantiques appropriés en HTML5, ce n’est pas toujours pratique ou possible. C’est là qu’interviennent les attributs ARIA sur les éléments HTML. Ces attributs permettent de définir le rôle et les attributs de votre élément d’une manière que les outils d’accessibilité sont capables de traiter.
Pourquoi les attributs ARIA sont-ils importants ?
En bref, les attributs ARIA permettent aux utilisateurs handicapés d’utiliser votre site web. Ces rôles et attributs définissent des informations supplémentaires sur divers éléments de votre site qui, autrement, ne seraient pas facilement accessibles.
Il existe une grande variété d’attributs ARIA que vous pouvez attribuer. Vous devez les utiliser partout où un contexte supplémentaire est nécessaire pour que le document ait un sens d’une manière non visuelle.
Prenons l’exemple d’un site dont la navigation principale est composée de <ul> ; enveloppé dans un élément <div> ; plutôt qu’un élément <nav> ; élément :
<div class="nav">
<ul>
<li>Home</li>
<li>Shop</li>
<li>About</li>
</ul>
</div>
Vous pouvez utiliser les attributs ARIA pour aider les utilisateurs à naviguer. En ajoutant les attributs role et aria-label à l’élément <ul> ; permet aux lecteurs d’écran et aux technologies d’assistance de savoir où se trouve votre menu.
<div class="nav">
<ul role="navigation" aria-label="Main">
<li>Home</li>
<li>Shop</li>
<li>About</li>
</ul>
</div>
Si, dans la plupart des cas, vous devez utiliser les éléments appropriés, cela n’est pas toujours possible compte tenu des contraintes de votre activité. Si, par exemple, votre site nécessite l’utilisation d’une barre de progression, mais que vous souhaitez un design que la barre standard ne permet pas.
Dans ce cas, vous pourriez créer un ensemble d’éléments personnalisés pour afficher votre barre de progression. Cependant, pour un lecteur d’écran, ces éléments ressembleront à un fouillis ; il ne sera pas en mesure de fournir des informations utiles aux visiteurs de votre site.
En définissant le rôle du wrapper à barre de progressionet en ajoutant aria-valuenow, aria-valueminet aria-valuemax dans le wrapper, vous pouvez toujours indiquer la progression.
À l’ère moderne, la construction de sites web accessibles est plus importante que jamais. Il existe plusieurs bibliothèques de composants React construites avec l’accessibilité à l’esprit.
Non seulement le fait d’avoir un site web accessible peut vous aider à vous positionner dans les principaux moteurs de recherche, mais il vous permet également de ne pas exclure un groupe d’utilisateurs potentiels de votre base d’utilisateurs.
L’ajout des attributs ARIA appropriés à votre site vous permettra de présenter les informations à tous les utilisateurs. Le résultat final sera un site qui accueillera tous les publics et offrira à chacun une expérience aussi proche que possible de la réalité.
Quels attributs ARIA dois-je utiliser ?
Il existe un grand nombre d’attributs différents que vous devriez utiliser sur votre site. En général, ces attributs se répartissent en deux catégories. La première est celle des attributs de widget, qui décrivent généralement un élément interactif personnalisé.
L’autre catégorie que vous devez connaître est celle des attributs de relation. Il s’agit d’attributs qui transmettent aux technologies d’assistance des informations sur la manière dont un élément particulier est lié au reste du site ou à d’autres éléments.
Lorsqu’il s’agit de déterminer quels attributs ARIA vous devriez inclure, la réponse est simple : autant que possible. Partout où l’élément que vous utilisez ne décrit pas le rôle qu’il remplit, vous devez utiliser l’attribut role.
Si vous avez un champ avec une étiquette, ce champ doit avoir l’attribut aria-labeledby attribut. Tant que les attributs que vous utilisez ont un sens, vous ne faites que rendre votre site plus accessible en les ajoutant.
Attributs des widgets
Les attributs de widgets constituent la catégorie la plus importante. Elle contient la plupart des attributs ARIA que vous devrez ajouter à un site standard. Dans l’exemple précédent de la barre de progression personnalisée, aria-valuenow, aria-valuemin et aria-valuemax sont tous des attributs de widget. Ils décrivent l’état ou les états possibles de l’élément sur lequel ils se trouvent.
Il existe de nombreux attributs différents que vous pouvez utiliser pour décrire l’état d’un élément. L’un des plus courants est aria-label. Cet attribut applique à l’élément sur lequel il est placé une étiquette qui n’est visible que par les technologies d’assistance.
Une autre paire courante d’attributs ARIA entrant dans cette catégorie est la suivante aria-caché et aria-disabled. Ces éléments peuvent communiquer l’état actuel d’un élément et indiquer si un lecteur d’écran doit le lire à l’utilisateur. Ceci est utile pour une variété de dispositifs différents avec leurs propres lecteurs d’écran.
Attributs de relation
Contrairement aux attributs de widget, les attributs de relation donnent aux technologies d’assistance des indications sur la relation et l’utilisation d’un élément par rapport aux autres éléments qui l’entourent. L’attribut de rôle est le plus courant. Le rôle spécifie l’utilité d’un élément dans un site.
Si vous définissez l’attribut rôle attribut à navigationil sera immédiatement identifié comme une enveloppe de navigation.
Certains attributs de relation définissent la manière dont un élément est lié aux autres éléments qui l’entourent. L’attribut aria-labeledby par exemple, indique l’élément qui joue le rôle d’étiquette pour cet élément. Cela peut s’avérer utile lors de l’utilisation de mises en page qui ont un sens visuel, mais qui sont suivies d’étiquettes pour des contrôles de formulaires spécifiques dans le flux de documents.
Bien qu’il y ait moins d’attributs de relation que d’attributs de widget, ces attributs ont souvent plus d’importance. Ils peuvent souvent décrire le flux et le contrôle d’un document et donner des détails supplémentaires sur la façon dont un utilisateur peut naviguer sur votre site.
Ces attributs sont particulièrement importants lorsque vous concevez des formulaires et des éléments de navigation sur votre site.
Pourquoi il est si important d’inclure les attributs ARIA dans votre HTML
Les attributs ARIA ont une fonction simple et nécessaire sur votre site web. Ils permettent de s’assurer que le site est accessible à tous les utilisateurs, indépendamment de l’utilisation d’un logiciel d’accessibilité. Pour les utilisateurs handicapés, la présence de ces attributs sur votre site peut rendre le site utilisable.
La méthode préférée pour travailler avec des technologies d’assistance consiste à utiliser les éléments sémantiques appropriés. Toutefois, lorsque cela n’est pas possible, les attributs ARIA permettent de travailler librement sans que les utilisateurs ne perdent de contenu.
