Introduction aux applications Internet riches et accessibles

Accessible Rich Internet Applications (ARIA) est une spécification technique publiée par le World Wide Web Consortium (W3C) qui comble l'écart entre les interfaces dynamiques JavaScript-drivé et les technologies d'assistance telles que les lecteurs d'écran, les écrans braille et les logiciels de contrôle de la voix. Sans ARIA, les widgets complexes comme les dropdowns automatiques, les tableaux d'onglets, les vues arborescentes et les dialogues modales peuvent devenir invisibles ou ininintelligibles pour les utilisateurs qui comptent sur l'interaction non visuelle. JavaScript est le moteur qui rend ces interfaces dynamiques, mais il introduit également le risque de créer des contenus inaccessibles si les attributs ARIA ne sont pas gérés correctement.

La valeur fondamentale de l'ARIA réside dans sa capacité à ajouter rétroactivement une signification sémantique à des éléments HTML qui ne peuvent pas transmettre nativement leur rôle ou leur état. Par exemple, un style pour ressembler à un bouton reste un conteneur générique dans l'arborescence d'accessibilité à moins qu'il ne soit donné et une manipulation appropriée du clavier.

Cet article passe par la mise en œuvre pratique de l'ARIA avec JavaScript, couvrant les rôles, les états, les propriétés, la gestion dynamique des attributs, la mise au point et la manipulation du clavier, et les modèles communs.

ARIA Rôles, États et propriétés

Rôles : Définition du type de widget

Un rôle ARIA indique à la technologie d'assistance ce qu'un élément est censé faire. Par exemple, indique que l'élément est un panneau de contenu associé à un onglet. Les rôles se répartissent en plusieurs catégories : les rôles widgets (p. ex., , , , les rôles de structure de document (p. ex., , , ), et les rôles de repère (p. ex., , , . Lorsqu'un élément HTML natif fournit déjà la même sémantique, il est préférable d'utiliser l'élément natif plutôt que d'ajouter un rôle ARIA. Par exemple, utilisez au lieu de . Toutefois, lorsqu'aucun élément natif n'existe – tel qu'un arbre ou une combobox – les rôles ARIA deviennent indispensables.

États et propriétés: Attributs dynamiques

Les états ARIA sont des attributs qui changent en réponse à l'interaction des utilisateurs ou à la logique d'application.

  • – indique si un élément pliable est ouvert ou fermé.
  • – pour les boutons de bascule qui se verrouillent.
  • – utilisé dans les listes d'onglets, les listbox ou les grilles pour montrer quelle option est choisie.
  • – indique qu'un élément n'est pas actuellement opérationnel.

Les propriétés, par contre, tendent à être plus stables et à décrire les relations ou les étiquettes. Les exemples comprennent (points à l'ID d'un élément que contrôle le widget), (bient une étiquette visible à un widget), et (déclare qu'une région mettra à jour de façon dynamique et devrait être surveillée par la technologie d'assistance).

JavaScript est responsable de la synchronisation de ces attributs avec l'état DOM sous-jacent. Chaque fois qu'une action utilisateur ou un événement timed change l'interface utilisateur, les attributs ARIA correspondants doivent être mis à jour immédiatement.

Mise en œuvre de l'ARIA avec JavaScript: Patterns de base

Gestion dynamique des attributs

La tâche ARIA la plus simple est de basculer les attributs booléens. Le motif suivant est commun pour les menus extensibles, les widgets de divulgation et les panneaux d'accordéon:

const trigger = document.getElementById('expand-trigger');
const target = document.getElementById('expandable-content');

trigger.addEventListener('click', () => {
 const isExpanded = trigger.getAttribute('aria-expanded') === 'true';
 trigger.setAttribute('aria-expanded', !isExpanded);
 target.hidden = isExpanded;
});

Notez que l'attribut HTML est également toggled. Cela garantit que le contenu est vraiment supprimé de l'arborescence d'accessibilité quand il est effondré, pas seulement visuellement caché.

Pour les widgets plus complexes comme un panneau d'onglets, plusieurs attributs doivent être gérés ensemble. Lorsqu'un nouvel onglet est sélectionné, l'onglet précédemment sélectionné perd son et son panneau associé est caché, tandis que le nouvel onglet est gagné et son panneau devient visible. Le JavaScript doit également mettre à jour pour gérer le focus dans la liste des onglets.

Utilisation de pour le contenu dynamique

Lorsque le contenu change en dehors de la focalisation de l'utilisateur (p. ex., des mises à jour de flux de nouvelles ou une erreur de validation apparaissent), les lecteurs d'écran ne peuvent pas annoncer le changement à moins que la région ne soit marquée par . La propriété prend trois valeurs : (par défaut), (annonce au ralenti), et (interruption immédiate).

const liveRegion = document.getElementById('status-messages');
liveRegion.setAttribute('aria-live', 'polite');

function addMessage(text) {
 const p = document.createElement('p');
 p.textContent = text;
 liveRegion.appendChild(p);
}

Important : Le contenu doit être annexé ou supprimé dans la région en direct. Changer entièrement le HTML intérieur peut faire que le changement soit manqué par certains lecteurs d'écran. L'utilisation de ou fonctionne de façon fiable sur les navigateurs.

Gestion de la concentration avec JavaScript

Les utilisateurs de clavier se fient à un anneau de focus visible pour naviguer. Lorsqu'une boîte de dialogue modale s'ouvre, le focus doit être déplacé dans la boîte de dialogue et emprisonné là jusqu'à ce qu'elle se ferme. Lorsqu'un menu se ferme, le focus doit revenir à l'élément qui l'a déclenché. JavaScript gère ces transitions en appelant sur l'élément approprié et en définissant valeurs.

Exemple pour une boîte de dialogue modale :

function openDialog(dialogElement) {
 dialogElement.removeAttribute('hidden');
 dialogElement.setAttribute('aria-modal', 'true');
 dialogElement.setAttribute('role', 'dialog');
 // Focus the first focusable element inside the dialog
 const firstFocusable = dialogElement.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
 if (firstFocusable) {
 firstFocusable.focus();
 }
 // Store the previously focused element
 this.lastFocused = document.activeElement;
}

Le piégeage de la focalisation permet de ne faire que des cycles d'onglet ou de Maj+Tab à travers des éléments dans la boîte de dialogue. Ceci peut être réalisé en écoutant les événements de keydown sur la boîte de dialogue et en redirigeant la focalisation vers le premier ou le dernier enfant focalisable, le cas échéant.

JavaScript doit implémenter le comportement du clavier prévu pour chaque motif de widget. Les W3C="s ARIA Le Guide des pratiques d'écriture (APG)[ fournit des conventions clavier détaillées pour les motifs communs. Par exemple, une liste d'onglets s'attend à ce que la touche se déplace dans la liste d'onglets et en sort, tandis que les touches et naviguent entre les onglets individuels. Une combobox exige ] d'ouvrir la liste et de la fermer.

Un carrousel qui ne répond qu'aux clics de souris, à une liste de glisser-déposer qui ne fonctionne qu'avec le toucher, ou à un tooltip qui n'apparaît que sur hover exclut entièrement les utilisateurs de clavier et de lecteur d'écran. Les gestionnaires d'événements JavaScript doivent couvrir les déclencheurs de souris et de clavier. Par exemple, l'événement s'allume à la fois sur le clic de souris et sur la touche Entrée/Espace pour les éléments interactifs natifs comme . Mais si vous utilisez un comme bouton, vous devez écouter manuellement les événements et exécuter l'action sur Entrée ou Espace.

Toujours tester la navigation du clavier sans souris : s'assurer que tous les éléments interactifs sont accessibles via Tab, que l'ordre de mise au point logique correspond à la disposition visuelle, et qu'aucun piège de mise au point n'empêche de quitter le widget.

Modèles ARIA communs avec des exemples JavaScript

1. Accordéon accessible

Un accordéon est constitué de multiples widgets de divulgation, chacun contenant un titre avec un bouton et un panneau pliable. Attributs ARIA : sur le bouton, pointant vers le panneau, et sur le panneau pour le nom.

const accordionButtons = document.querySelectorAll('.accordion-button');
accordionButtons.forEach(btn => {
 btn.addEventListener('click', () => {
 const panel = document.getElementById(btn.getAttribute('aria-controls'));
 const expanded = btn.getAttribute('aria-expanded') === 'true';
 btn.setAttribute('aria-expanded', !expanded);
 panel.hidden = expanded;
 });
});

2. Combobox automatique

Les comboboxes nécessitent une entrée texte (), une popup listbox ([), et des options ([). JavaScript doit gérer et ] comme l'utilisateur navigue avec des touches fléchées. Le guide MDN combobox fournit une référence de mise en œuvre approfondie.

3. Boîte de dialogue modale

Une boîte de dialogue modale utilise et . Lorsqu'elle est ouverte, le reste de la page doit être inerte, le focus piégé à l'intérieur et appliqué aux conteneurs de la sœur. La touche Escape ferme la boîte de dialogue.

Mise à l'essai des ARIA

Les outils de développement de navigateur comprennent maintenant des panneaux d'accessibilité qui montrent l'arborescence d'accessibilité calculée. L'extension axe DevTools du navigateur détecte les violations comme les attributs ARIA manquants, l'utilisation incorrecte des rôles et les erreurs de gestion de focus. De plus, les lecteurs d'écran comme NVDA, JAWS et VoiceOver offrent des modes de test. Testez chaque transition d'état : ouvrez une boîte de dialogue, fermez-la, sélectionnez-la dans une liste et vérifiez que les annonces ont un sens.

Une autre pratique essentielle est de tester avec le clavier seulement: onglet à travers tous les contrôles interactifs, utiliser les touches fléchées dans les tabulations et les comboboxes, et de s'assurer qu'aucun élément ne devient inaccessible. ARIA seul ne garantit pas l'accessibilité; la combinaison des attributs corrects, les gestionnaires de clavier, et la logique de focus est ce qui rend une application vraiment utilisable.

Meilleures pratiques pour la production-Ready ARIA avec JavaScript

  • Préférence aux éléments HTML natifs sur les rôles ARIA chaque fois que possible. Un natif est intrinsèquement focalisable, cliquable et transmet son rôle à la technologie d'assistance.
  • Gardez les attributs ARIA en synchronisation avec l'état DOM à tout moment. Utilisez un motif JavaScript cohérent – tel qu'une petite fonction utilitaire – pour mettre à jour les attributs et l'état visuel ensemble.
  • Utiliser avec prudence. Appliquer enlève un élément et tous ses enfants de l'arbre d'accessibilité. Ceci est utile pour cacher du contenu hors écran ou des éléments décoratifs, mais il ne devrait jamais être appliqué aux éléments focalisables (autrement les utilisateurs de lecteurs d'écran peuvent rencontrer un --ghost.
  • Gérer la mise au point explicitement chaque fois que l'interface utilisateur change considérablement. Après une fermeture modale, retourner la mise au point au bouton déclencheur. Après avoir sélectionné un élément de menu, retourner la mise au point au bouton de menu. La méthode JavaScript=s doit être appelée après la mise à jour DOM, souvent enveloppée dans ou un court délai pour s'assurer que l'élément est rendu.
  • Fournir des étiquettes claires pour chaque élément interactif.Utiliser lorsqu'aucune étiquette visible n'est présente, ou préférer associer une étiquette existante au widget. De même, utiliser pour joindre des descriptions ou des instructions plus longues à des widgets complexes.
  • Testez avec les utilisateurs réels qui comptent sur la technologie d'assistance. Les outils automatisés ne captent qu'environ 30 à 40 % des problèmes d'accessibilité.

Pièges fréquents à éviter

Une erreur fréquente est d'appliquer un rôle ARIA à un élément sans fournir aussi l'interaction prévue du clavier. Par exemple, donner à un mais ne pas ajouter et un gestionnaire de touches pour Enter/Space. Un autre utilise pour les mises à jour de routine, qui peuvent surcharger les utilisateurs d'écran en interrompant leur tâche actuelle.

Un ne devrait contenir que des enfants avec , et chaque onglet doit contrôler un correspondant]. La violation de ces règles peut entraîner des technologies d'assistance à mal interpréter la structure.

Enfin, évitez les changements dynamiques qui se produisent sans initiation de l'utilisateur. Les attributs et la focalisation ARIA ne devraient être mis à jour qu'en réponse aux actions de l'utilisateur ou à l'état d'application des changements que l'utilisateur attend.

Conclusion

L'ARIA fournit l'échafaudage sémantique qui transforme les conteneurs HTML génériques en widgets reconnaissables, tandis que JavaScript les met en valeur avec un comportement dynamique, la navigation au clavier et la gestion de l'état. Chaque attribut—, , et d'autres— doit être maintenu en cohérence avec l'interface visuelle.

En suivant les modèles et les meilleures pratiques décrits ici, les développeurs peuvent créer des applications Web qui fonctionnent pour tous : les utilisateurs de touches, de souris, de claviers, de lecteurs d'écrans et de commandes vocales. L'accessibilité n'est pas une réflexion après-vente; elle fait partie intégrante du processus de développement JavaScript. Pour plus de détails, consultez le W3C ARIA Authoring Practices Guide[ et la documentation MDN ARIA[, qui offrent des références faisant autorité pour chaque rôle et attribut.