Règles d'utilisation d'ARIA en HTML

Qu’est-ce qu’ARIA et quels sont les grands principes d’ARIA

L’accès à Internet est une condition préalable au succès d’une plate-forme. Malheureusement, de nombreux sites Web ont des barrières d’accessibilité qui rendent difficile ou impossible pour les utilisateurs ayant un handicap physique de voir et d’interagir avec tous les éléments du site Web. Si vous voulez que votre site soit vu par tous les utilisateurs et que vous obteniez plus de trafic et plus de conversions, vous devez investir votre temps et vos efforts pour améliorer l’accessibilité de vos pages Web.

Qu’est-ce que l’accessibilité à Internet ?

Si le site est accessible, il est conçu pour que les personnes handicapées puissent interagir avec celui-ci et visualiser l’ensemble du contenu. Il existe des normes spécifiques appelées Web Accessibility Initiative (WAI) développées par le W3C pour aider les propriétaires de sites Web à rendre leurs sites Web plus accessibles.

Qu’est-ce qu’ARIA ?

ARIA signifie Accessible Rich Internet Applications. ARIA est un ensemble d’attributs spéciaux publiés par le W3C qui peuvent être ajoutés aux éléments HTML pour rendre les pages Web et les applications plus accessibles aux personnes handicapées. Ces attributs ne fournissent pas de fonctionnalité. Ils fournissent des descriptions supplémentaires pour les technologies d’assistance (TA) telles que les lecteurs d’écran.

Principales fonctions d’ARIA

Les attributs ARIA comprennent les composants suivants : rôles, états et propriétés.

Les rôles

Les rôles définissent le type d’élément de l’interface utilisateur. Les rôles sont ajoutés via l’attribut role= »<ROLE TYPE> ». Après l’installation, le rôle ne change pas.

Rôles ARIA :

  • repère
  • widget
  • document
  • abstrait
Règles d'utilisation d'ARIA en HTML

Rôles phares de l’ARIA

Les rôles de point de repère facilitent la navigation en divisant la page en différentes sections, telles que la recherche, la bannière, la navigation, l’application, etc. De cette façon, le lecteur d’écran est en mesure d’annoncer le début et la fin de chaque rôle important qui aide les personnes handicapées à identifier les différentes parties d’une page Web.

Rôles Widget ARIA

Les rôles de widget sont utilisés pour donner un sens aux éléments de l’interface utilisateur tels que le lien, le bouton, la case à cocher, etc. Les attributs de widget permettent aux personnes utilisant AT d’interagir avec la page Web. Par exemple, ils peuvent ouvrir et fermer des onglets, remplir des formulaires, etc.

Documenter les rôles ARIA

Les rôles de document contiennent des descriptions des structures qui organisent le contenu de la page, telles que img, liste, ligne, barre d’outils, etc.

Rôles abstraits ARIA

Les rôles abstraits ne sont pas utilisés dans le code. Ce sont les attributs que le navigateur utilise pour donner aux rôles leur signification et leur concept, et pour aider à ajouter de nouveaux rôles.

États et propriétés

Les états (aria-grab, aria-disabled, aria-checked, etc.) et les propriétés (aria-label, aria-haspopup, aria-control, etc.) prennent en charge les rôles ARIA. Les états peuvent changer seuls ou en fonction de l’interaction de l’utilisateur, tandis que les propriétés ne changent généralement pas après la configuration.

Catégories d’états et de propriétés :

  • Attributs des widgets
  • Attributs de région en direct
  • Attributs de glisser-déposer
  • Attributs de relation

Vous pouvez en savoir plus sur chaque attribut ARIA sur la page ARIA W3C. https://www.w3.org/TR/wai-aria/

Améliorez l’accessibilité de votre site web !

Vous comprenez maintenant ce qu’est ARIA et comment il fournit des informations supplémentaires aux technologies d’assistance. En mettant en œuvre des stratégies ARIA, vous pouvez vous assurer que les personnes handicapées peuvent interagir avec votre site.