WAI-ARIA est une spécification définissant la prise en charge des applications Web accessibles. Il définit un ensemble d'extensions de balisage (principalement sous forme d'attributs sur des éléments HTML5), que le développeur d'applications Web peut utiliser pour fournir des informations supplémentaires sur la sémantique des divers éléments de technologies d'assistance telles que les lecteurs d'écran. Bien sûr, pour que ARIA fonctionne, l'agent utilisateur HTTP qui interprète le balisage doit prendre en charge ARIA, mais la spécification est créée de manière à permettre aux agents d'utilisateur de bas niveau d'ignorer le balisage spécifique à ARIA sans affecter le fonctionnalité de l'application Web.
Voici un exemple tiré de la spécification ARIA:
<ul role="menubar">
<!-- Rule 2A: "File" label via aria-labelledby -->
<li role="menuitem" aria-haspopup="true" aria-labelledby="fileLabel"><span id="fileLabel">File</span>
<ul role="menu">
<!-- Rule 2C: "New" label via Namefrom:contents -->
<li role="menuitem" aria-haspopup="false">New</li>
<li role="menuitem" aria-haspopup="false">Open…</li>
...
</ul>
</li>
...
</ul>
Notez l'attribut role sur l'élément externe <ul>. Cet attribut n'affecte en aucune façon la manière dont le navigateur affiche le balisage à l'écran. Toutefois, les navigateurs prenant en charge ARIA ajouteront des informations d'accessibilité spécifiques à un système à l'élément d'interface utilisateur restitué, afin que le lecteur d'écran puisse l'interpréter comme un menu et le lire à voix haute avec suffisamment de contexte pour que l'utilisateur final puisse comprendre (par exemple, un code explicite). "menu" indice audio) et est capable d’interagir avec celui-ci (par exemple, la navigation vocale).
ARIA signifie Accessible Rich Internet Applications.
WAI-ARIA est une technologie incroyablement puissante qui permet aux développeurs de décrire facilement le but, l'état et d'autres fonctionnalités des interfaces utilisateur riches en images, de manière à ce que la technologie d'assistance puisse la comprendre. WAI-ARIA a finalement été intégré au brouillon actuel de la spécification HTML 5.
Et si vous vous demandez ce qu'est WAI-ARIA, c'est la même chose.
Veuillez noter que les termes WAI-ARIA et ARIA font référence à la même chose. Cependant, il est plus correct d'utiliser WAI-ARIA pour reconnaître ses origines dans WAI.
WAI = Initiative d'accessibilité Web
À première vue, ARIA est utilisé pour les technologies d'assistance et principalement pour la lecture à l'écran.
La plupart de vos doutes seront dissipés si vous lisez cet article
De quoi s'agit-il?
WAI-ARIA signifie "Initiative d'accessibilité du Web - Applications Internet riches accessibles" . Il s'agit d'un ensemble d'attributs permettant d'améliorer la sémantique d'un site Web ou d'une application Web afin d'aider les technologies d'assistance, telles que les lecteurs d'écran pour les aveugles, à donner un sens à certaines choses qui ne sont pas natives en HTML. Les informations exposées peuvent aller d’aussi simples que de dire à un lecteur d’écran que l’activation d’un lien ou d’un bouton vient d’afficher ou de cacher plus d’éléments, à des widgets aussi complexes que des systèmes de menus complets ou des arborescences hiérarchiques.
Pour ce faire, les rôles et les attributs d'état sont appliqués au balisage HTML 4.01 ou ultérieur, sans incidence sur la présentation ni sur les fonctionnalités du navigateur, mais fournissant des informations supplémentaires sur les technologies d'assistance.
Un élément essentiel de WAI-ARIA est l'attribut de rôle. Il indique au navigateur d'indiquer à la technologie d'assistance que l'élément HTML utilisé n'est pas ce que suggère le nom de l'élément, mais quelque chose d'autre. Bien qu’il ne s’agisse à l’origine que d’un élément div, cet élément div peut être le conteneur d’une liste d’éléments à remplissage automatique, auquel cas un rôle de "listbox" serait approprié. De même, une autre div qui est un enfant de cette div de conteneur, et qui contient un seul élément d’option, devrait alors avoir le rôle "option". Deux divs, mais à travers les rôles, sens totalement différent. Les rôles sont modélisés à partir des équivalents d'application de bureau couramment utilisés.
Une exception à cette règle concerne les rôles de repère de document, qui ne modifient pas le sens réel de l'élément en question, mais fournissent des informations sur cet emplacement particulier dans un document.
La deuxième pierre angulaire concerne les états et propriétés de WAI-ARIA. Ils définissent l'état de certains éléments natifs ou WAI-ARIA tels que, par exemple, si un élément est réduit ou développé, un élément de formulaire est requis, un menu contextuel est associé ou similaire. Celles-ci sont souvent dynamiques et changent de valeurs tout au long du cycle de vie d'une application Web et sont généralement manipulées via JavaScript.
Qu'est-ce que ce n'est pas?
WAI-ARIA n'est pas destiné à influencer le comportement du navigateur. Par exemple, contrairement à un élément de bouton réel, une div sur laquelle vous ajoutez le rôle de "bouton" ne vous permet pas de contrôler le clavier, un gestionnaire de clics automatique lorsque vous appuyez sur Space ou sur Entrée, ainsi que d’autres propriétés indigènes. bouton. Le navigateur lui-même ne sait pas qu'un div avec le rôle de "bouton" est un bouton, seule sa partie API d'accessibilité le sait.
En conséquence, cela signifie que vous devez absolument implémenter vous-même la navigation au clavier, la focalisation et d'autres modèles de comportement connus à partir d'applications de bureau. Vous pouvez trouver des techniques avancées d'ARIA Ici .
Quand ne devrais-je pas l'utiliser?
Oui, c’est exact, cette section vient en premier! Parce que la première règle d'utilisation de WAI-ARIA est la suivante: Ne l'utilisez pas sauf obligation absolue! Moins vous avez de WAI-ARIA, et plus plus vous pouvez compter sur l'utilisation de widgets HTML natifs, mieux c'est! Il y a quelques règles supplémentaires à suivre, vous pouvez les vérifier ici .
Qu'est-ce que ARIA?
ARIA est apparu comme un moyen de résoudre le problème d’accessibilité lié à l’utilisation d’un langage de balisage destiné aux documents, HTML, pour créer des interfaces utilisateur (UI). Le HTML comprend de nombreuses fonctionnalités pour traiter les documents (P, h3, UL, TABLE), mais uniquement des éléments d'interface utilisateur de base tels que A, INPUT et BUTTON. Windows et d'autres systèmes d'exploitation prennent en charge les API permettant à (Assistive Technology) AT d'accéder aux fonctionnalités des contrôles de l'interface utilisateur. Internet Explorer et d’autres navigateurs associent les éléments HTML natifs à l’API d’accessibilité, mais les contrôles html ne sont pas aussi riches que les contrôles courants sur les systèmes d’exploitation de bureau et ne suffisent pas pour les applications Web modernes. Les contrôles personnalisés peuvent étendre les éléments html Interface utilisateur nécessaire pour les applications Web modernes. Avant ARIA, le navigateur ne disposait d'aucun moyen pour exposer cette richesse supplémentaire à l'API d'accessibilité ou à AT. L'exemple classique de ce problème consiste à ajouter un gestionnaire de clics à une image. Il crée ce qui semble être un bouton cliquable pour un utilisateur de souris, mais il ne s'agit toujours que d'une image pour un clavier ou un utilisateur AT.
La solution consistait à créer un ensemble d'attributs permettant aux développeurs d'étendre le code HTML avec la sémantique de l'interface utilisateur. Le terme ARIA pour désigner un groupe d'éléments HTML dotés de fonctionnalités personnalisées et utilisant des attributs ARIA pour mapper ces fonctions aux API d'accessibilité est un "Widget. ARIA fournit également aux auteurs un moyen de documenter le rôle du contenu lui-même, ce qui permet à AT de créer d'autres mécanismes de navigation pour le contenu, beaucoup plus faciles à utiliser que la lecture du texte intégral ou la simple itération. une liste des liens.
Il est important de se rappeler que dans les cas simples, il est préférable d’utiliser des contrôles HTML natifs et de les styliser plutôt que d’utiliser ARIA. C’est ne pas réinventer les roues, ou les cases à cocher, si vous n’avez pas à le faire.
Heureusement, le balisage ARIA peut être ajouté aux sites existants sans modifier le comportement des utilisateurs habituels. Cela réduit considérablement les coûts de modification et de test du site Web ou de l'application.
J'ai posé une autre question concernant ARIA. Mais son contenu semble plus prometteur pour cette question. aimerait les partager
Qu'est-ce que ARIA?
Si vous vous efforcez de rendre votre site Web accessible aux utilisateurs ayant une variété d'habitudes de navigation et de handicaps physiques, vous reconnaîtrez probablement le rôle et les attributs aria- *. WAI-ARIA (Applications Internet riches accessibles) est une méthode qui permet de définir votre contenu et vos applications Web dynamiques de sorte que les personnes handicapées puissent l'identifier et interagir avec succès. Cela s'effectue par le biais de rôles définissant la structure du document ou de l'application, ou par le biais d'attributs aria- * définissant un rôle de widget, une relation, un état ou une propriété.
Il est recommandé dans les spécifications d’utiliser ARIA pour rendre les applications HTML5 plus accessibles. Lorsque vous utilisez des éléments HTML5 sémantiques, vous devez définir le rôle correspondant.
Et voyez ceci vidéo de votre tube pour ARIA live.