Guide RGAA · Thème 7

Scripts

Les 5 critères du thème « Scripts » du RGAA 4.1, expliqués et accompagnés de pistes de correction et d'exemples de code.

Critère 7.1Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?

Ce que ça vérifie — Un composant riche construit en JavaScript (onglets, menu, fenêtre modale, sélecteur…) doit exposer aux technologies d'assistance son rôle, son nom, son état et ses propriétés, généralement via ARIA. Sans cela, un lecteur d'écran ne peut ni identifier ni piloter le composant.

Comment corriger — Utilisez l'élément HTML natif quand il existe ; sinon appliquez le motif de conception ARIA adapté (rôle approprié, états comme aria-expanded ou aria-selected, propriétés comme aria-controls) et donnez un nom accessible via un libellé visible, aria-label ou aria-labelledby. Maintenez ces attributs à jour en JavaScript à chaque changement d'état.

<button aria-expanded="false" aria-controls="menu1">Options</button>
<ul id="menu1" role="menu" hidden>
  <li role="menuitem">Modifier</li>
  <li role="menuitem">Supprimer</li>
</ul>

Critère 7.2Pour chaque script ayant une alternative, cette alternative est-elle pertinente ?

Ce que ça vérifie — Lorsqu'un script propose une alternative (contenu de remplacement, version sans script, mécanisme équivalent), cette alternative doit fournir la même information ou la même fonction que le script.

Comment corriger — Vérifiez que l'alternative est réellement équivalente et à jour : elle doit permettre d'accéder au même contenu ou d'accomplir la même tâche. Retirez ou corrigez toute alternative obsolète, trompeuse ou incomplète.

<noscript>
  <p><a href="/tableau-donnees.html">Consulter les données au format tableau</a></p>
</noscript>

Critère 7.3Chaque script est-il contrôlable par le clavier et par tout dispositif de pointage (hors cas particuliers) ?

Ce que ça vérifie — Toute fonctionnalité pilotée par script doit être utilisable à la fois au clavier et par tout dispositif de pointage (souris, écran tactile, stylet). Aucune action ne doit dépendre exclusivement de la souris.

Comment corriger — N'associez pas les comportements aux seuls événements souris (onmouseover, onmousedown) : utilisez des événements indépendants du dispositif comme click, keydown ou les événements de pointeur, et rendez les composants personnalisés focusables (tabindex) avec gestion des touches attendues (Entrée, Espace, flèches, Échap).

<!-- À éviter --> <div onmouseover="ouvrir()">Menu</div>

<!-- Recommandé -->
<button type="button" onclick="basculer()">Menu</button>

Critère 7.4Pour chaque script qui initie un changement de contexte, l’utilisateur est-il averti ou en a-t-il le contrôle ?

Ce que ça vérifie — Un script ne doit pas déclencher de changement de contexte non sollicité (soumission automatique, rechargement, ouverture de fenêtre, changement de focus imprévu) à la simple prise de focus ou saisie. L'utilisateur doit être averti au préalable ou en garder le contrôle.

Comment corriger — Déclenchez les changements de contexte sur une action explicite (bouton, validation) plutôt que sur focus ou change ; si un changement automatique est indispensable, prévenez l'utilisateur avant l'interaction. Évitez notamment la soumission d'un formulaire au seul changement d'une liste déroulante.

<!-- À éviter --> <select onchange="this.form.submit()">…</select>

<!-- Recommandé -->
<select id="tri">…</select>
<button type="submit">Valider le tri</button>

Critère 7.5Dans chaque page web, les messages de statut sont-ils correctement restitués par les technologies d’assistance ?

Ce que ça vérifie — Les messages de statut (confirmation, erreur, progression, résultats de recherche mis à jour) doivent être restitués par les technologies d'assistance sans que l'utilisateur ait à déplacer le focus vers eux.

Comment corriger — Placez ces messages dans une région live : role="status" (ou aria-live="polite") pour une information non urgente, role="alert" (ou aria-live="assertive") pour une alerte importante. Le conteneur doit être présent dans le DOM avant l'insertion du texte, puis rempli dynamiquement en JavaScript.

<div role="status" aria-live="polite">3 résultats trouvés.</div>
<div role="alert">Le champ e-mail est obligatoire.</div>

← Tous les thèmes du guide