Tuto — Accessibilité d'une interface de chat (RGAA AA)

Public visé : développeur front qui construit l'UI du chatbot documentaire. Objectif : rendre l'assistant (specs/ia-chatbot.md) utilisable au clavier et au lecteur d'écran, conforme RGAA 4.1 AA.

Référence transverse : Accessibilité — interface utilisateur.

Pourquoi c'est un cas piégeux

Un chat met à jour la page dynamiquement (réponses qui arrivent, parfois en streaming). Sans précaution, un lecteur d'écran n'annonce pas ces changements, et le focus se perd. L'accessibilité doit être pensée dès la structure.

Checklist

Structure (landmarks)

• <main> pour la zone de conversation ; le formulaire de saisie dans un repère clair.
• Titres cohérents (un <h1> pour la page).

Saisie

• <label> explicite associé au champ (for/id), pas seulement un placeholder.
• Bouton d'envoi avec intitulé textuel (« Envoyer la question »), pas une icône seule.

Restitution des réponses

• La zone de réponses est une région live : aria-live="polite" (et aria-busy="true" pendant le calcul) → le lecteur d'écran annonce l'arrivée de la réponse.
• Chaque tour (question/réponse) est un bloc identifiable ; les sources sont des liens explicites (pas « cliquez ici »).

Clavier et focus

• Tout est utilisable au clavier ; ordre de tabulation logique.
• Focus visible sur le champ, le bouton, les liens de sources.
• Pas de piège clavier ; après envoi, le focus revient au champ (ou va à la réponse, de façon prévisible).

États

• Chargement : indiqué textuellement (pas seulement un spinner visuel).
• Erreur : message lié au champ (aria-describedby), compréhensible.

Streaming (si activé)

• Le flux progressif ne doit pas spammer le lecteur d'écran : annoncer la réponse une fois finalisée (ou par segments maîtrisés), pas caractère par caractère.

Amélioration progressive

L'UI doit fonctionner sans JavaScript : un form POST renvoie la réponse complète, rendue côté serveur. Le JS (streaming, confort) est un plus qui ne casse jamais l'usage de base — c'est aussi un atout d'accessibilité et de robustesse.

Pour aller plus loin

• Chatbot : specs/ia-chatbot.md
• Accessibilité UI (patterns ARIA, clavier) : accessibility/interface-utilisateur.md
• Politique d'accessibilité : accessibility.md