L’attribut aria-expanded est une propriété WAI-ARIA utilisée pour indiquer si un élément interactif contrôle actuellement un conteneur repliable qui est développé ou replié. En appliquant cet attribut à des éléments tels que des boutons ou des liens qui déclenchent un menu, un accordéon ou un panneau masqué, vous informez les utilisateurs de technologies d’assistance de l’état du contenu avec lequel ils interagissent. Une utilisation correcte garantit que les lecteurs d’écran annoncent si une section est ouverte ou fermée, permettant aux utilisateurs de naviguer sur votre site web en toute confiance.
Quel est le rôle de aria-expanded dans la conception web moderne ?
Selon les spécifications W3C WAI-ARIA, aria-expanded indique si un élément interactif contrôle un conteneur repliable actuellement développé ou replié. Lorsqu’un utilisateur clique sur un bouton qui bascule un menu de navigation masqué, le lecteur d’écran doit savoir si ce menu est actuellement visible ou masqué. Sans cet attribut, le navigateur ne fournit pas de signal programmatique concernant l’état de basculement, laissant les utilisateurs de technologies d’assistance deviner si leur action a réussi à ouvrir la section souhaitée. Cet état doit être basculé dynamiquement par JavaScript chaque fois que l’utilisateur interagit avec le contrôleur.
Comment implémenter aria-expanded correctement
L’implémentation nécessite à la fois un balisage statique et des mises à jour dynamiques. Vous définissez l’état initial du composant dans votre HTML, en le réglant généralement sur ‘false’ si le contenu est masqué par défaut. Lorsque l’utilisateur clique sur le déclencheur, votre script doit mettre à jour la valeur de l’attribut à ‘true’ à mesure que le contenu devient visible. Il s’agit d’un modèle courant pour les composants d’accordéon, les bascules de menu mobile et les filtres déroulants présents sur les pages de produits e-commerce. Assurez-vous toujours que l’élément déclencheur est accessible au focus et que le changement d’état est immédiat.
Quand devez-vous utiliser aria-expanded par rapport à d’autres attributs ?
Choisir entre aria-expanded et d’autres états implique de comprendre ce que l’élément contrôle. Utilisez aria-expanded spécifiquement lorsque l’élément est un contrôleur qui modifie la visibilité d’un conteneur. Ne l’utilisez pas pour les éléments qui ne contrôlent pas la visibilité d’une région séparée. Par exemple, un simple bouton qui ouvre une nouvelle page ne doit pas utiliser cet attribut. Utilisez-le plutôt pour des modèles d’interface utilisateur qui modifient le modèle d’objet de document dans le même contexte de page.
| Attribut | Cas d’utilisation principal | Élément cible |
|---|---|---|
| aria-expanded | Sections repliables | Boutons/Liens |
| aria-hidden | Masquer le contenu | Conteneurs/Divs |
| aria-haspopup | Déclencheurs de menu | Boutons/Divs |
Comment Alien Road applique aria-expanded dans nos flux de travail
Chez Alien Road, nous intégrons l’accessibilité dans notre processus de conception-construction dès l’étape initiale du wireframe. Lorsque nous construisons un accordéon ou une navigation personnalisée pour un client, nous documentons les exigences de changement d’état dans nos fichiers de spécification de projet. Pendant la phase de développement, nos ingénieurs écrivent des fonctions JavaScript qui mappent l’événement de clic d’un élément d’interface utilisateur à la mise à jour de la valeur aria-expanded de ce même élément. Nous effectuons des vérifications manuelles à l’aide de lecteurs d’écran pour vérifier que l’état est annoncé correctement. Cela garantit que chaque composant interactif répond aux normes d’accessibilité de base avant que le site ne soit mis en ligne pour nos clients.
Erreurs courantes lors de l’utilisation de aria-expanded
Une erreur fréquente est d’oublier de mettre à jour l’attribut lorsque l’utilisateur interagit avec l’interface. Si le bouton indique ‘expanded=true’ mais que le contenu est visuellement masqué, l’expérience utilisateur devient confuse. Une autre erreur consiste à appliquer l’attribut à des éléments statiques qui ne déclenchent aucune expansion. Assurez-vous que votre script gère les cas limites, tels que la fermeture d’un menu ouvert lorsque l’utilisateur clique en dehors de la zone active. Cela évite que l’état ne se désynchronise avec la représentation visuelle de la page.
- Utilisez toujours les valeurs booléennes correctes : ‘true’ ou ‘false’.
- Assurez-vous que votre JavaScript met à jour l’attribut sur l’élément déclencheur, et non sur le conteneur.
- Vérifiez que l’élément de contrôle peut recevoir le focus de manière native, comme une balise de bouton.
- Testez votre implémentation avec un lecteur d’écran pour confirmer l’annonce du changement d’état.
Pourquoi l’état du contrôleur est-il important ?
L’état du contrôleur fournit un contexte à l’utilisateur concernant le résultat de son interaction. Si un utilisateur appuie sur une touche pour ouvrir un menu, l’attribut aria-expanded l’informe que l’action a réussi et qu’il y a maintenant une nouvelle section de contenu à explorer. Sans cela, l’utilisateur pourrait supposer que la page ne répond pas ou est cassée. En maintenant l’attribut précis, vous créez une expérience fiable qui permet à tous les visiteurs de naviguer dans votre contenu sans avoir besoin d’une confirmation visuelle de la transition.
Quels modèles d’interface utilisateur nécessitent aria-expanded ?
Plusieurs modèles d’interface utilisateur s’appuient sur cet attribut pour maintenir l’accessibilité. Les accordéons sont l’exemple le plus courant, où plusieurs en-têtes contrôlent la visibilité de leur contenu de corps respectif. Les menus déroulants dans les barres de navigation utilisent également fréquemment cela pour indiquer la présence de sous-menus. De plus, les panneaux de filtres sur les sites e-commerce utilisent souvent cela pour gérer la visibilité des critères de recherche. Dans un compte typique que nous gérons, nous voyons ces modèles sur les pages de listes de produits où les utilisateurs doivent affiner leurs recherches.
- Accordéons : Basculer la visibilité des blocs de contenu.
- Menus de navigation : Indiquer si les sous-menus sont visibles.
- Filtres : Gérer l’affichage des critères de recherche de la barre latérale.
- Boîtes de dialogue modales : Gérer l’état d’expansion du déclencheur.
Par où commencer cette semaine
Commencez par auditer vos éléments interactifs les plus fréquemment utilisés sur votre site web. Identifiez tous les boutons ou liens qui basculent la visibilité d’un autre contenu. Vérifiez si ces éléments ont actuellement l’attribut aria-expanded correctement attribué et mis à jour dynamiquement. Si vous trouvez des éléments qui manquent de ces attributs, mettez à jour vos scripts pour les gérer en conséquence. Pour les sites plus importants, concentrez-vous d’abord sur la navigation principale et sur tous les widgets de filtre ou d’accordéon, car ceux-ci ont le plus d’impact sur la navigation des utilisateurs et l’accessibilité globale du site.
Foire aux questions
Dois-je utiliser aria-expanded sur un lien ?
Oui, vous pouvez utiliser aria-expanded sur un lien, mais il est généralement préférable d’utiliser un élément de bouton si l’action est purement un basculement d’état d’interface utilisateur. Les liens sont généralement destinés à la navigation vers une nouvelle URL. Si vous devez utiliser un lien pour une action de basculement, assurez-vous qu’il est entièrement accessible et que l’attribut aria-expanded reflète correctement l’état actuel du conteneur associé.
Est-ce que aria-expanded gère automatiquement le masquage du contenu ?
Non, aria-expanded ne contrôle pas la visibilité réelle de l’élément. Il communique seulement l’état à la technologie d’assistance. Vous devez toujours utiliser CSS, tel que display: none ou visibility: hidden, pour masquer physiquement le contenu de l’écran. L’attribut agit simplement comme une étiquette pour décrire l’état actuel de ce conteneur aux utilisateurs qui dépendent des lecteurs d’écran.
Quelle valeur dois-je utiliser s’il n’y a pas d’état étendu ?
Si un élément ne contrôle pas une région repliable, vous ne devez pas du tout utiliser l’attribut aria-expanded. Appliquez-le uniquement aux éléments qui servent de déclencheurs pour du contenu qui peut être basculé entre des états visibles et masqués. Inclure l’attribut sur des éléments non repliables peut prêter à confusion pour les utilisateurs de lecteurs d’écran en impliquant une fonctionnalité qui n’existe pas réellement.
Comment tester l’implémentation de aria-expanded ?
Pour tester votre implémentation, utilisez un lecteur d’écran tel que NVDA ou VoiceOver. Naviguez vers l’élément déclencheur et observez comment le lecteur d’écran annonce l’état. Lorsque vous activez le déclencheur, le lecteur d’écran doit mettre à jour son statut pour indiquer que la section est maintenant développée. Si l’annonce ne change pas, votre JavaScript échoue probablement à mettre à jour correctement la valeur de l’attribut pendant l’interaction.
Continuer la lecture : Conception et développement web · Conception web