Notez que WAI-ARIA est antérieur à HTML5 et ne l'exige pas, bien que les attributs ARIA ne soient considérés comme valides que par un validateur HTML5 ou par rapport à une DTD étendue ARIA. Cependant, le brouillon HTML5 interdit actuellement certaines constructions WAI-ARIA.
Alohci
Je l'ai vu dans le HTML de Facebook.
Sorter
Réponses:
213
WAI-ARIA est une spécification définissant la prise en charge des applications Web accessibles. Il définit un tas d'extensions de balisage (principalement sous forme d'attributs sur des éléments HTML5), qui peuvent être utilisées par le développeur d'applications Web pour fournir des informations supplémentaires sur la sémantique des divers éléments aux technologies d'assistance comme 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 utilisateurs de niveau inférieur d'ignorer le balisage spécifique ARIA en toute sécurité sans affecter la fonctionnalité de l'application Web.
Voici un exemple de la spécification ARIA:
<ulrole="menubar"><!-- Rule 2A: "File" label via aria-labelledby --><lirole="menuitem"aria-haspopup="true"aria-labelledby="fileLabel"><spanid="fileLabel">File</span><ulrole="menu"><!-- Rule 2C: "New" label via Namefrom:contents --><lirole="menuitem"aria-haspopup="false">New</li><lirole="menuitem"aria-haspopup="false">Open…</li>
...</ul></li>
...</ul>
Notez l' roleattribut sur l' <ul>élément extérieur . Cet attribut n'affecte en aucune façon la façon dont le balisage est rendu à l'écran par le navigateur; cependant, les navigateurs qui prennent en charge ARIA ajouteront des informations d'accessibilité spécifiques au système d'exploitation à l'élément d'interface utilisateur rendu, afin que le lecteur d'écran puisse l'interpréter comme un menu et le lire à haute voix avec suffisamment de contexte pour que l'utilisateur final puisse le comprendre (par exemple, une explicite "menu" indice audio) et est capable d'interagir avec lui (par exemple, la navigation vocale).
Quelle est la différence entre l'attribut data et aria?
JackMahoney
55
ariaest spécifiquement pour l'accessibilité et ne doit pas être utilisé pour stocker des données aléatoires. dataconcerne les données aléatoires que l'application doit associer au nœud.
Franci Penov
2
Veuillez garder à l'esprit: role="menu"et "menuitem"sont corrects pour APPS (= logiciel avec des menus comme File > Openou Edit > Copy to clipboard. Pour un site Web classique, il est probablement préférable de rester à l'habituel <ul>(= liste de rôles par défaut) car vous ne fournissez que des liens vers d'autres pages Web et aucune fonction comme "enregistrer" ou "copier / coller". Si vous utilisez, role="menu"vous devez également ajouter un support pour naviguer dans le menu avec les touches fléchées de votre clavier comme les menus logiciels / applications habituels
Oops D'oh
62
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 visuellement riches - d'une manière qui peut être comprise par la technologie d'assistance. WAI-ARIA a finalement été intégré dans le projet de travail 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 se réfèrent à la même chose. Cependant, il est plus correct d'utiliser WAI-ARIA pour reconnaître ses origines dans WAI.
WAI = Web Accessibility Initiative
À première vue, ARIA est utilisé pour les technologies d'assistance et principalement la lecture d'écran.
La plupart de vos doutes seront levés si vous lisez cet article
WAI-ARIA signifie «Web Accessibility Initiative - Accessible Rich Internet Applications» . Il s'agit d'un ensemble d'attributs pour aider à améliorer la sémantique d'un site Web ou d'une application Web pour aider les technologies d'assistance, telles que les lecteurs d'écran pour les aveugles, à comprendre certaines choses qui ne sont pas natives de HTML. Les informations exposées peuvent aller de quelque chose d'aussi simple 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 entiers ou des arborescences hiérarchiques.
Ceci est réalisé en appliquant des rôles et des attributs d'état au balisage HTML 4.01 ou version ultérieure qui n'a aucune incidence sur la mise en page ou les fonctionnalités du navigateur, mais fournit des informations supplémentaires pour les technologies d'assistance.
Une pierre angulaire 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 réellement ce que le nom de l'élément suggère, mais quelque chose d'autre. Bien qu'il ne soit à l'origine qu'un élément div, cet élément div peut être le conteneur d'une liste d'éléments d'auto-complétion, auquel cas un rôle de «listbox» serait approprié à utiliser. De même, un autre div qui est un enfant de ce div de conteneur, et qui contient un seul élément d'option, devrait alors avoir le rôle d '«option». Deux divs, mais à travers les rôles, une signification totalement différente. Les rôles sont modélisés d'après les équivalents d'applications de bureau couramment utilisés.
Une exception à cela est les rôles de repère de document, qui ne changent pas la signification réelle de l'élément en question, mais fournissent des informations sur cet endroit particulier dans un document.
Les deuxièmes pierres angulaires sont les états et propriétés WAI-ARIA. Ils définissent l'état de certains éléments natifs ou WAI-ARIA tels que si quelque chose est réduit ou développé, un élément de formulaire est requis, quelque chose a un menu contextuel attaché ou similaire. Celles-ci sont souvent dynamiques et changent leurs 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. Contrairement à un véritable élément de bouton, par exemple, un div sur lequel vous versez le rôle de "bouton" ne vous donne pas la focalisation du clavier, un gestionnaire de clic automatique lorsque vous appuyez sur Espace ou Entrée, et d'autres propriétés indigènes à un 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 fait.
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 des applications de bureau. Vous pouvez trouver quelques techniques avancées ARIA ici .
Quand ne dois-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 que si vous le devez absolument! Moins vous disposez de WAI-ARIA et plus vous pouvez compter sur l'utilisation de widgets HTML natifs, mieux c'est! Il y a d'autres règles à suivre, vous pouvez les consulter ici .
ARIA a émergé comme un moyen de résoudre le problème d'accessibilité de l'utilisation d'un langage de balisage destiné aux documents, HTML, pour créer des interfaces utilisateur (UI). 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 qui permettent à (technologie d'assistance) AT d'accéder aux fonctionnalités des contrôles d'interface utilisateur. Internet Explorer et d'autres navigateurs mappent 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 sont pas suffisants pour les applications Web modernes Les contrôles personnalisés peuvent étendre les éléments html pour fournir les riches Interface utilisateur nécessaire pour les applications Web modernes. Avant ARIA, le navigateur n'avait aucun moyen d'exposer cette richesse supplémentaire à l'API d'accessibilité ou à AT. L'exemple classique de ce problème est l'ajout d'un gestionnaire de clics à une image. Il crée ce qui semble être un bouton cliquable pour un utilisateur de souris, mais n'est toujours qu'une image pour un clavier ou un utilisateur AT.
La solution était de créer un ensemble d'attributs qui permettent aux développeurs d'étendre HTML avec la sémantique de l'interface utilisateur. Le terme ARIA pour un groupe d'éléments HTML qui ont des fonctionnalités personnalisées et utilisent 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, à son tour, permet à AT de construire des mécanismes de navigation alternatifs pour le contenu qui sont beaucoup plus faciles à utiliser que la lecture du texte intégral ou la simple itération sur une liste de 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. Ce n'est pas réinventer des roues ou des cases à cocher, si vous n'êtes pas obligé.
Heureusement, le balisage ARIA peut être ajouté aux sites existants sans changer le comportement des utilisateurs traditionnels. Cela réduit considérablement le coût de modification et de test du site Web ou de l'application.
J'ai lancé une autre question concernant ARIA. Mais son contenu semble plus prometteur pour cette question. aimerait les partager
Qu'est-ce que l'ARIA?
Si vous vous efforcez de rendre votre site Web accessible aux utilisateurs ayant différentes habitudes de navigation et handicaps physiques, vous reconnaîtrez probablement le rôle et les attributs aria- *. WAI-ARIA (Accessible Rich Internet Applications) est une méthode permettant de définir votre contenu Web dynamique et vos applications afin que les personnes handicapées puissent l'identifier et interagir avec succès avec lui. Cela se fait via des rôles qui définissent la structure du document ou de l'application, ou via des attributs aria- * définissant un widget-rôle, une relation, un état ou une propriété.
L'utilisation d'ARIA est recommandée dans les spécifications pour rendre les applications HTML5 plus accessibles. Lorsque vous utilisez des éléments HTML5 sémantiques, vous devez définir leur rôle correspondant.
Petite correction: Lorsque vous utilisez des éléments HTML5 sémantique, vous devez seulement définir leur rôle correspondant si la sémantique de l'élément que vous avez choisi ne fournissent pas suffisamment d' informations. En d'autres termes, si vous avez un élément nav, il n'est pas nécessaire d'ajouter role = "navigation", car le rôle est déjà clair dans le choix de l'élément. Mais si vous avez un élément d'entrée pour la recherche sur le site, vous devez ajouter le rôle = « rechercher » parce que des éléments d'entrée sont utilisés pour beaucoup de choses autres que la recherche, ce qui marque jusqu'à cette entrée spécifique comme ayant le rôle de la recherche.
Réponses:
WAI-ARIA est une spécification définissant la prise en charge des applications Web accessibles. Il définit un tas d'extensions de balisage (principalement sous forme d'attributs sur des éléments HTML5), qui peuvent être utilisées par le développeur d'applications Web pour fournir des informations supplémentaires sur la sémantique des divers éléments aux technologies d'assistance comme 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 utilisateurs de niveau inférieur d'ignorer le balisage spécifique ARIA en toute sécurité sans affecter la fonctionnalité de l'application Web.
Voici un exemple de la spécification ARIA:
Notez l'
roleattribut sur l'<ul>élément extérieur . Cet attribut n'affecte en aucune façon la façon dont le balisage est rendu à l'écran par le navigateur; cependant, les navigateurs qui prennent en charge ARIA ajouteront des informations d'accessibilité spécifiques au système d'exploitation à l'élément d'interface utilisateur rendu, afin que le lecteur d'écran puisse l'interpréter comme un menu et le lire à haute voix avec suffisamment de contexte pour que l'utilisateur final puisse le comprendre (par exemple, une explicite "menu" indice audio) et est capable d'interagir avec lui (par exemple, la navigation vocale).la source
ariaest spécifiquement pour l'accessibilité et ne doit pas être utilisé pour stocker des données aléatoires.dataconcerne les données aléatoires que l'application doit associer au nœud.role="menu"et"menuitem"sont corrects pour APPS (= logiciel avec des menus commeFile > OpenouEdit > Copy to clipboard. Pour un site Web classique, il est probablement préférable de rester à l'habituel<ul>(= liste de rôles par défaut) car vous ne fournissez que des liens vers d'autres pages Web et aucune fonction comme "enregistrer" ou "copier / coller". Si vous utilisez,role="menu"vous devez également ajouter un support pour naviguer dans le menu avec les touches fléchées de votre clavier comme les menus logiciels / applications habituelsARIA signifie Accessible Rich Internet Applications.
Et si vous vous demandez ce qu'est WAI-ARIA, c'est la même chose.
WAI = Web Accessibility Initiative
À première vue, ARIA est utilisé pour les technologies d'assistance et principalement la lecture d'écran.
La plupart de vos doutes seront levés si vous lisez cet article
http://www.w3.org/TR/aria-in-html/
la source
Qu'Est-ce que c'est?
WAI-ARIA signifie «Web Accessibility Initiative - Accessible Rich Internet Applications» . Il s'agit d'un ensemble d'attributs pour aider à améliorer la sémantique d'un site Web ou d'une application Web pour aider les technologies d'assistance, telles que les lecteurs d'écran pour les aveugles, à comprendre certaines choses qui ne sont pas natives de HTML. Les informations exposées peuvent aller de quelque chose d'aussi simple 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 entiers ou des arborescences hiérarchiques.
Ceci est réalisé en appliquant des rôles et des attributs d'état au balisage HTML 4.01 ou version ultérieure qui n'a aucune incidence sur la mise en page ou les fonctionnalités du navigateur, mais fournit des informations supplémentaires pour les technologies d'assistance.
Une pierre angulaire 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 réellement ce que le nom de l'élément suggère, mais quelque chose d'autre. Bien qu'il ne soit à l'origine qu'un élément div, cet élément div peut être le conteneur d'une liste d'éléments d'auto-complétion, auquel cas un rôle de «listbox» serait approprié à utiliser. De même, un autre div qui est un enfant de ce div de conteneur, et qui contient un seul élément d'option, devrait alors avoir le rôle d '«option». Deux divs, mais à travers les rôles, une signification totalement différente. Les rôles sont modélisés d'après les équivalents d'applications de bureau couramment utilisés.
Une exception à cela est les rôles de repère de document, qui ne changent pas la signification réelle de l'élément en question, mais fournissent des informations sur cet endroit particulier dans un document.
Les deuxièmes pierres angulaires sont les états et propriétés WAI-ARIA. Ils définissent l'état de certains éléments natifs ou WAI-ARIA tels que si quelque chose est réduit ou développé, un élément de formulaire est requis, quelque chose a un menu contextuel attaché ou similaire. Celles-ci sont souvent dynamiques et changent leurs 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. Contrairement à un véritable élément de bouton, par exemple, un div sur lequel vous versez le rôle de "bouton" ne vous donne pas la focalisation du clavier, un gestionnaire de clic automatique lorsque vous appuyez sur Espace ou Entrée, et d'autres propriétés indigènes à un 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 fait.
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 des applications de bureau. Vous pouvez trouver quelques techniques avancées ARIA ici .
Quand ne dois-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 que si vous le devez absolument! Moins vous disposez de WAI-ARIA et plus vous pouvez compter sur l'utilisation de widgets HTML natifs, mieux c'est! Il y a d'autres règles à suivre, vous pouvez les consulter ici .
la source
Qu'est-ce que l'ARIA?
ARIA a émergé comme un moyen de résoudre le problème d'accessibilité de l'utilisation d'un langage de balisage destiné aux documents, HTML, pour créer des interfaces utilisateur (UI). 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 qui permettent à (technologie d'assistance) AT d'accéder aux fonctionnalités des contrôles d'interface utilisateur. Internet Explorer et d'autres navigateurs mappent 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 sont pas suffisants pour les applications Web modernes Les contrôles personnalisés peuvent étendre les éléments html pour fournir les riches Interface utilisateur nécessaire pour les applications Web modernes. Avant ARIA, le navigateur n'avait aucun moyen d'exposer cette richesse supplémentaire à l'API d'accessibilité ou à AT. L'exemple classique de ce problème est l'ajout d'un gestionnaire de clics à une image. Il crée ce qui semble être un bouton cliquable pour un utilisateur de souris, mais n'est toujours qu'une image pour un clavier ou un utilisateur AT.
La solution était de créer un ensemble d'attributs qui permettent aux développeurs d'étendre HTML avec la sémantique de l'interface utilisateur. Le terme ARIA pour un groupe d'éléments HTML qui ont des fonctionnalités personnalisées et utilisent 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, à son tour, permet à AT de construire des mécanismes de navigation alternatifs pour le contenu qui sont beaucoup plus faciles à utiliser que la lecture du texte intégral ou la simple itération sur une liste de 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. Ce n'est pas réinventer des roues ou des cases à cocher, si vous n'êtes pas obligé.
Heureusement, le balisage ARIA peut être ajouté aux sites existants sans changer le comportement des utilisateurs traditionnels. Cela réduit considérablement le coût de modification et de test du site Web ou de l'application.
la source
J'ai lancé une autre question concernant ARIA. Mais son contenu semble plus prometteur pour cette question. aimerait les partager
Qu'est-ce que l'ARIA?
Si vous vous efforcez de rendre votre site Web accessible aux utilisateurs ayant différentes habitudes de navigation et handicaps physiques, vous reconnaîtrez probablement le rôle et les attributs aria- *. WAI-ARIA (Accessible Rich Internet Applications) est une méthode permettant de définir votre contenu Web dynamique et vos applications afin que les personnes handicapées puissent l'identifier et interagir avec succès avec lui. Cela se fait via des rôles qui définissent la structure du document ou de l'application, ou via des attributs aria- * définissant un widget-rôle, une relation, un état ou une propriété.
L'utilisation d'ARIA est recommandée dans les spécifications pour rendre les applications HTML5 plus accessibles. Lorsque vous utilisez des éléments HTML5 sémantiques, vous devez définir leur rôle correspondant.
Et regardez cette vidéo tube pour ARIA en direct.
la source