Que sont les attributs Aria en HTML et pourquoi sont-ils importants ?

Les concepteurs de sites Web qui découvrent HTML peuvent rencontrer un ensemble d'attributs inconnus. Préfixés du mot ARIA, ces attributs apparaissent partout sur le Web, mais leur objectif 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 un élément se rapporte à 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 l'acronyme de Accessible Rich Internet Applications. Dans le HTML moderne, en particulier les applications riches en JavaScript, il n'est pas toujours immédiatement évident, en fonction de la syntaxe, quel rôle les éléments individuels jouent.

La difficulté à discerner les rôles peut être un problème lorsque les utilisateurs consultent le site à l'aide d'outils d'accessibilité tels que les lecteurs d'écran. En l'absence du code HTML sémantique approprié, votre 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 pour vous de résoudre ce problème consiste à 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 aident à 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 pourraient autrement ne pas être facilement disponibles.

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 permettre au document d'avoir un sens d'une manière non visuelle.

Par exemple, considérons un site dont la navigation principale est composée d'un élément enveloppé dans un élément plutôt qu'un élément:

<divclasse="nav">
<ul>
<li>Maisonli>
<li>Boutiqueli>
<li>À proposli>
ul>
div>

Vous pouvez utiliser les attributs ARIA pour aider les utilisateurs à naviguer. Ajout des attributs role et aria-label au L'élément permet au lecteur d'écran et aux technologies d'assistance de savoir où se trouve votre menu.

<divclasse="nav">
<ulrôle="la navigation"label-aria="Principal">
<li>Maisonli>
<li>Boutiqueli>
<li>À proposli>
ul>
div>

Bien que dans la plupart des cas, vous deviez utiliser les éléments appropriés, cela n'est pas toujours possible dans les limites de ce que vous faites. 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 scénario, vous pouvez créer un ensemble personnalisé d'éléments pour afficher votre barre de progression. Pour un lecteur d'écran, cependant, ces éléments ressembleront à un désordre confus; il ne sera pas en mesure de fournir des informations utiles aux visiteurs de votre site.

En définissant le rôle du wrapper sur barre de progression, et en ajoutant aria-valuenow, aria-valuemin, et aria-valuemax attributs au wrapper, vous pouvez toujours indiquer la progression.

À l'ère moderne, la création de sites Web accessibles est plus importante que jamais. Il y a plusieurs bibliothèques de composants React conçues avec l'accessibilité à l'esprit.

Non seulement un site Web accessible peut vous aider à vous classer dans plusieurs moteurs de recherche majeurs, mais il garantit également que vous ne coupez pas un groupe d'utilisateurs potentiels de votre base d'utilisateurs.

L'ajout des attributs ARIA appropriés à votre site vous aidera à vous assurer que vous présentez les informations à tous les utilisateurs. Le résultat final sera un site qui accueille tous les publics et présente une expérience aussi proche que possible de la même chose à tous.

Quels attributs ARIA dois-je utiliser?

Il existe de nombreux attributs différents que vous devriez utiliser sur votre site. En général, ces attributs appartiennent à deux catégories différentes. Le premier concerne les attributs de widget qui décrivent généralement un élément interactif personnalisé.

L'autre catégorie dont vous devez être conscient est celle des attributs de relation. Ce sont des attributs qui transmettent des informations aux technologies d'assistance sur la façon dont un élément particulier se rapporte 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 simple est le plus grand nombre possible. Partout où l'élément que vous utilisez ne décrit pas le rôle que l'élément remplit, vous devez utiliser l'attribut role.

Si vous avez un champ avec une étiquette, ce champ doit avoir le aria-labelledby attribut. Tant que les attributs que vous utilisez ont du sens, vous ne faites que rendre votre site plus accessible en les ajoutant.

Les attributs de widget sont la catégorie beaucoup plus large. Il 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 label-aria. Cet attribut applique une étiquette à l'élément sur lequel vous la placez, qui n'est visible que pour les technologies d'assistance.

Une autre paire commune d'attributs ARIA qui entrent dans cette catégorie sont aria-caché et aria désactivé. Ceux-ci peuvent communiquer l'état actuel d'un élément et si un lecteur d'écran doit le lire à l'utilisateur. Ceci est utile pour une variété d'appareils 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 avec d'autres éléments qui l'entourent. Le plus courant d'entre eux est l'attribut de rôle. Le rôle spécifie à quoi sert un élément dans un site.

Si vous réglez le rôle attribuer à la navigation, il sera immédiatement identifié comme wrapper de navigation.

Certains attributs de relation définissent la relation entre un élément et d'autres éléments qui l'entourent. Le aria-labelledby L'attribut, par exemple, montre quel élément agit comme une étiquette pour cet élément. Cela peut être utile lors de l'utilisation de mises en page qui ont un sens visuellement mais qui ont des étiquettes pour des contrôles de formulaire spécifiques après eux dans le flux de documents.

Bien qu'il y ait moins d'attributs de relation que d'attributs de widget, ces attributs ont souvent une plus grande 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 des attributs ARIA dans votre code HTML

Les attributs ARIA ont un objectif simple et nécessaire sur votre site Web. Ils servent à garantir que le site est accessible à tous les utilisateurs, indépendamment de l'utilisation de logiciels d'accessibilité. Pour les utilisateurs handicapés, le fait d'avoir ces attributs sur votre site peut rendre le site utilisable.

La méthode préférée pour travailler avec la technologie d'assistance consiste à utiliser les éléments sémantiques appropriés. Lorsque cela n'est pas possible, cependant, les attributs ARIA permettent de travailler librement sans que vos utilisateurs ne perdent du contenu.