Un aperçu de la norme ARIA Web et de l'accessibilité des applications HTML
Un Web véritablement ouvert et inclusif a besoin de technologies permettant aux utilisateurs handicapés qui utilisent des technologies d'assistance de profiter d'un contenu Web dynamique et d'applications Web modernes. Les normes Web d'accessibilité du W3C visent à alimenter le Web avec des applications ARI (Rich Internet Access) accessibles que les utilisateurs handicapés peuvent utiliser efficacement..
ARIA est l’une des nombreuses normes et directives en matière d’accessibilité publiées par le Web Accessibility Initiative (WAI). Il fournit un balisage supplémentaire qui peut être facilement inséré dans des documents HTML. WAI-ARIA est une solution multiplate-forme, multi-appareils, qui cible la plate-forme Web ouverte. Ne pensez donc pas seulement aux sites Web, mais également aux jeux, au divertissement numérique, aux soins de santé, aux applications mobiles et à d'autres types d'applications..
Dans cet article, nous verrons comment ajouter de l'accessibilité à vos documents HTML à l'aide des normes WAI-ARIA..
Le cadre ARIA
La syntaxe de HTML ne permet pas toujours aux développeurs de décrire les éléments correctement, d'identifier leurs rôles et de spécifier les relations entre eux. Bien que ce soit rarement un problème pour les visiteurs en possession de leurs sens, cela peut empêcher les utilisateurs de technologies d'assistance de comprendre ce qui se passe à l'écran et d'explorer leurs options..
C’est le point où ARIA vient à notre aide, car il est possible de définir la fonction de différents éléments à l’aide de: rôles marquants, et décrire leur nature avec Attributs préfixés par aria. Les attributs préfixés par Aria ont deux types: Propriétés qui décrivent les caractéristiques les moins susceptibles de changer tout au long du cycle de vie d'une page, et États qui fournissent des informations sur les choses qui peuvent fréquemment changer en raison de l'interaction de l'utilisateur.
Rôles de Landmark
Rôles de repère sont les formes les plus connues du modèle de rôles d'ARIA (les autres rôles sont les rôles abstraits, les rôles de widget et les rôles de structure de document). Les rôles de Landmark permettent aux développeurs d’identifier régions perceptibles sur la page Web à laquelle les utilisateurs de technologies d'assistance peuvent vouloir accéder rapidement.
Il existe 8 types de rôles de repère ARIA, qui doivent être ajoutés en tant qu'attributs aux balises HTML associées..
rôle =”bannière”
Le rôle de bannière est destiné à être utilisé principalement pour du contenu lié à l'ensemble du site, pas seulement à des pages individuelles. Il est généralement ajouté en tant qu'attribut à l'en-tête principal du site pour le logo et d'autres informations importantes sur l'ensemble du site. Il est important que vous ne puissiez utiliser le rôle de bannière qu'une seule fois dans des documents HTML ou des applications..
rôle =”principale”
Le rôle de repère principal est lié au contenu principal du document. Il ne peut pas être utilisé plus d'une fois sur une page HTML. Il suit généralement le Le rôle de navigation est destiné à être utilisé pour indiquer une zone contenant des éléments de navigation tels que des liens et des listes sur un site.. Le rôle de repère complémentaire décrit le contenu supplémentaire lié au contenu principal du site. Il doit être placé au même niveau dans la hiérarchie du DOM que Le rôle contentinfo informe les agents utilisateurs de la présence d'une région où se trouvent différents types de métadonnées, telles que des informations de copyright, des déclarations légales et des déclarations de confidentialité. Il est généralement utilisé pour le pied de page d'un site.. Le rôle de repère de formulaire indique un formulaire en attente de saisie de l'utilisateur. Pour les formulaires de recherche, vous devez utiliser Le rôle de recherche est assez explicite, il est destiné à aider les technologies d'assistance à identifier la fonctionnalité de recherche d'un site Web.. Vous pouvez utiliser le rôle de repère d'application pour une région que vous souhaitez déclarer en tant qu'application Web plutôt qu'en tant que document Web. Il n'est pas recommandé de l'inclure dans les sites Web traditionnels, car cela suggère aux technologies d'assistance de passer du mode de navigation normal au mode de navigation des applications. Vous ne devez utiliser ce rôle de repère que très soigneusement. Tandis que les rôles vous permettent de définir la signification des balises HTML, les états et les propriétés fournissent à l'utilisateur des informations supplémentaires sur la manière d'interagir avec elles. Les deux états et propriétés sont marqués avec Attributs préfixés par aria avec la syntaxe aria-*. Les attributs ARIA les plus connus sont probablement la propriété aria-required et l'état aria-vérifié. Aria-required est un propriété car c’est une caractéristique permanente d’un élément d’entrée (c’est-à-dire que l’utilisateur doit le remplir), alors qu’aria-check est un Etat parce qu'une case à cocher peut fréquemment changer sa valeur en raison de l'interaction de l'utilisateur. Les états et les propriétés prennent parfois des valeurs de jeton (un ensemble limité de valeurs prédéfinies). Par exemple, la propriété aria-live peut avoir 3 valeurs différentes: de, poli, assertif. La syntaxe dans cet exemple ressemble à ceci: Dans d’autres cas, les valeurs des attributs préfixés par aria sont représentées par des cordes, Nombres, entiers, Références d'identité ou vrai faux valeurs. Utilisez des attributs de relation pour indiquer des relations entre différents éléments de votre site, qui ne peuvent pas être autrement déterminées à partir de la structure du document. Par exemple le Une fois que vous avez défini un rôle de repère ARIA pour une zone perceptible sur votre page HTML, les technologies d'assistance peuvent être très utiles si vous modifiez les états et les propriétés des éléments enfants préfixés par ARIA en fonction des événements se produisant à l'écran. Cela peut être crucial lorsque les utilisateurs doivent interagir avec le site, par exemple en remplissant un formulaire ou en exécutant une requête de recherche.. La règle générale en matière de conception d'accessibilité est que l'état actuel de l'interface utilisateur doit toujours être perceptible par les technologies d'assistance. Par exemple, si l'utilisateur choisit une option dans un formulaire, celle-ci doit également apparaître sélectionnée pour les technologies d'assistance. Ceci peut être facilement réalisé en utilisant l'état sélectionné par aria avec la syntaxe suivante: La directive sur les pratiques de création WAI-ARIA du W3C peut vous donner de nombreuses autres bonnes idées sur la manière d’harmoniser correctement les interfaces visuelles et accessibles de votre site.. L'utilisation de rôles et d'attributs ARIA peut parfois être redondante. Lorsque vous utilisez des balises sémantiques de HTML5 telles que Par exemple, il est inutile d’utiliser le forme rôle déterminant pour définir le Donc, si vous avez déjà ajouté le caché Attribut HTML à une entrée de formulaire, il est inutile d'ajouter le aria-caché l'état, comme le navigateur l'inclut par défaut.. Ce dernier a été ajouté aux spécifications du W3C dans le but de cartographier les principale ARIA rôle de repère pour un élément HTML sémantique. rôle =”la navigation”
rôle =”complémentaire”
role = "main". Les articles liés, les articles populaires et les derniers commentaires sont des exemples typiques de contenu complémentaire autonome.rôle =”contentinfo”
rôle =”forme”
role = "search" au lieu.rôle =”chercher”
rôle =”application”
États et propriétés
La syntaxe des attributs préfixés par Aria
Comment utiliser les états et les propriétés ARIA
1. Construire des relations entre des éléments avec des attributs de relation
aria-labelledby propriété identifie l'élément qui étiquette l'élément en cours.aria-labelledby - parmi beaucoup d'autres choses - peut relier les en-têtes aux régions marquantes ARIA de la manière suivante:Ceci est une rubrique
Contenu principal… 2. Synchronisez les états et les propriétés avec le cycle de vie de l'élément
3. Match le visuel et les interfaces accessibles
.N'abusez pas d'ARIA
ou , Les navigateurs Web modernes ajoutent par défaut la sémantique ARIA appropriée. Dans ce cas, il n’a aucun sens de définir séparément les rôles de référence ARIA. élément. À la place du la syntaxe, il suffit parfaitement d'utiliser juste . Il est également superflu d'utiliser les attributs natifs de HTML avec l'attribut ARIA approprié..
