Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

ARIA : rôle application

Le rôle application indique aux technologies d'assistance qu'un élément et tous ses enfants doivent être traités comme une application de bureau, et qu'aucune technique d'interprétation HTML traditionnelle ne doit être utilisée. Ce rôle ne doit être utilisé que pour définir des applications web très dynamiques et proches d'une application de bureau. La plupart des applications web mobiles et de bureau ne sont pas considérées comme des applications dans ce contexte.

html
<div role="application" aria-label="…">…</div>

En spécifiant le rôle application, cela indique que cet élément div et tous ses descendants doivent être traités comme faisant partie d'une application de bureau.

Description

Le rôle application de structure de document, indique aux technologies d'assistance que cette partie du contenu web contient des éléments qui ne se conforment à aucun autre élément HTML connu ni à aucun widget WAI-ARIA. Toute interprétation spéciale des structures HTML et des widgets doit être suspendue, et le contrôle doit être entièrement remis au navigateur et à l'application web pour gérer l'interaction par la souris, le clavier ou le toucher.

Dans ce mode, l'auteur·ice du site est entièrement responsable de la gestion de toutes les saisies clavier, de la gestion du focus et des autres interactions, et ne peut pas supposer que les technologies d'assistance effectueront un traitement de leur côté.

Si l'application web englobée par le rôle application contient des parties qui doivent être traitées comme du contenu web normal, un rôle document ou article doit être utilisé pour contenir ce contenu.

Contexte

Pour des raisons historiques, notamment sous Windows, les lecteurs d'écran et certaines autres technologies d'assistance (TA) ont traditionnellement récupéré l'intégralité du contenu web depuis le navigateur d'un coup une fois le chargement terminé. Les technologies d'assistance construisent leur propre représentation qui a le plus de sens pour qu'un·e utilisateur·ice malvoyant·e consomme le contenu. Cela est souvent appelé document virtuel, mode navigation, ou des termes similaires. Le document est simplifié en une vue à une seule colonne. Un modèle d'interaction clavier est généré, très similaire à un traitement de texte où les utilisateur·ice·s peuvent lire ligne par ligne, phrase par phrase ou paragraphe par paragraphe. La technologie d'assistance lit toutes les informations sémantiques comme les liens, titres, contrôles de formulaire, tableaux, listes ou images.

En outre, un ensemble de soi-disant touches de navigation rapide a été établi au fil des ans, permettant aux utilisateur·ice·s malvoyant·e·s de parcourir rapidement une page via un type d'élément particulier. Ces éléments incluent généralement les titres, champs de formulaire, listes, tableaux, liens, graphiques ou zones repères.

Pour que tout cela fonctionne, les technologies d'assistance interceptent presque toutes les saisies clavier et les consomment elles-mêmes, ne laissant rien passer au navigateur ou à un autre agent utilisateur. Pour interagir avec une page web, un ensemble standard de widgets est reconnu et, en appuyant sur une touche particulière (souvent la touche Entrée), ce mode est désactivé. Le mode lecteur d'écran, souvent appelé mode formulaire ou mode focus, laisse à nouveau toutes les saisies clavier passer au navigateur. Échap est la méthode la plus courante pour revenir en mode navigation, mais dans une section application spécifique, certains lecteurs d'écran peuvent nécessiter d'autres touches pour quitter ce mode volontairement. Par exemple NUM + avec JAWS.

Le rôle application est conçu pour fournir un moyen aux widgets qui ne font pas partie de l'ensemble standard d'être accessibles pour une interaction directe dans les technologies d'assistance qui utilisent à la fois les modes navigation et focus pour interagir avec le contenu web. La plupart des widgets courants ont des comportements d'interaction clavier attendus. Pour cette raison, une expérience clavier personnalisée créée par un auteur web pourrait créer une expérience confuse.

Rôles, états et propriétés WAI-ARIA associés

document, article

Utilisé pour indiquer les parties de l'application qui doivent être traitées comme du contenu web normal

aria-activedescendant

Utilisé pour gérer le focus à l'intérieur de l'application.

aria-label

Utilisé pour fournir le nom de l'application ou la fonction du widget exposé.

aria-describedby

Utilisé pour référencer l'ID d'un élément qui contient des instructions supplémentaires pour la navigation ou l'utilisation de cet élément.

aria-roledescription

Utilisé pour donner à l'application un texte de rôle plus descriptif que les lecteurs d'écran peuvent énoncer. Celui-ci doit être localisé.

aria-disabled

Indique qu'un élément est visible mais désactivé

aria-errormessage

Référence l'élément qui fournit le message d'erreur pour l'élément sur lequel il est défini

aria-expanded

Si défini sur true, l'élément de regroupement détenu ou contrôlé par cet élément est développé, ou false s'il est réduit.

aria-haspopup

Indique qu'il existe un élément contextuel, tel qu'un menu ou une boîte de dialogue, qui peut être déclenché par l'élément.

Interactions clavier

L'interaction clavier est entièrement sous le contrôle de l'auteur·ice du site et peut correspondre à n'importe quoi associé au widget particulier implémenté. Dans une application de présentation, par exemple, un widget pourrait être créé qui utilise les touches fléchées pour positionner des éléments sur la diapositive, et utilise un retour audio via une région ARIA en direct pour communiquer la position et le statut de chevauchement avec d'autres objets. Le focus est géré via aria-activedescendant.

Les touches Tab, Espace et Entrée, ainsi que Échap, doivent être gérées par l'application. La seule exception est si le focus est défini sur un widget standard à l'intérieur de l'application qui prend en charge la navigation clavier du navigateur, par exemple un élément input.

Fonctionnalités JavaScript requises

keyPress

Utilisé pour gérer les saisies clavier et contrôler le focus

Click, Touch

À gérer en fonction de votre widget

Modification des valeurs d'attributs

aria-activedescendant est utilisé pour gérer le focus dans le conteneur de l'application. À définir en réponse aux événements clavier ou autres événements de l'application qui modifient le focus ou le point d'interaction.

Note : Le rôle application n'a pas de widget HTML associé et est donc totalement libre. L'auteur de l'application doit assumer l'entière responsabilité d'éviter que les utilisateur·ice·s restent bloqués dans un piège de focus à l'intérieur d'un élément dont ils ne peuvent pas sortir. Tous les aspects de l'interaction, y compris le retour au contenu web normal dans d'autres parties de la page, doivent être gérés. À utiliser avec discernement et prudence, et pensez à tester !

Exemples

Quelques applications web notables qui utilisent ou ont utilisé correctement le rôle application sont :

  • Google Docs, Sheets et Slides
  • Les éditeurs web WYSIWYG CKEditor et TinyMCE, comme celui utilisé sur le Mozilla Developer Network
  • Certaines parties de Gmail

Problèmes d'accessibilité

Une utilisation incorrecte du rôle application peut retirer involontairement l'accès à certaines informations d'une page web, soyez donc très attentif à son usage. Réfléchissez bien à si vous en avez réellement besoin et si vous ne pouvez pas simplement utiliser un ensemble d'autres widgets connus pour accomplir la même tâche.

Si utilisé, le rôle application doit être ajouté au conteneur commun le plus bas possible, et non sur l'élément <body>, par exemple. Assurez-vous également de tester ce que vous avez écrit avec des technologies d'assistance, pour vérifier que cela fonctionne comme prévu.

Spécifications

Specification
Accessible Rich Internet Applications (WAI-ARIA)
# application

Ordre de priorité

Appliquer le rôle application fera que cet élément et tous ses descendants seront traités comme du contenu applicatif, et non comme du contenu web. Tout mécanisme de lecture que les technologies d'assistance pourraient avoir pour le contenu web ne s'appliquera pas.

Voir aussi