Publié le : 1 octobre 2026Mise à jour le : 2 octobre 2026

Accessibilité, HTML et ARIA

Pour la MJC, un parcours accessible permet de choisir une séance, de remplir le formulaire, de corriger une erreur et de comprendre le résultat. Vérifiez ces actions au clavier et avec un lecteur d’écran (screen reader), en plus de l’affichage.

Votre objectif

Repérer ce qui empêche une personne d’utiliser la page, choisir le HTML adapté et tester la correction. Vous vérifierez aussi les informations reçues par les technologies d’assistance (assistive technologies), comme les lecteurs d’écran.

Reconnaître une barrière

Un élément a le focus lorsqu’il reçoit les actions du clavier. Son contour visible permet de le repérer. Un contacteur (switch) est un dispositif qui permet de commander l’interface avec un geste adapté.

Ces situations peuvent se combiner. Un simulateur montre un effet visuel, sans reproduire l’expérience complète d’une personne. Lors d’un test utilisateur, observez les obstacles du produit sans demander aux participants de révéler un handicap. Exemples d’usages, W3C.

“Je passe parfois 1 heure à remplir un questionnaire et, arrivée à la fin, je ne peux pas cocher la case de consentement qui n’est pas accessible au clavier.”

Virginie, 49 ans, comédienne, malvoyante de naissance. Baromètre de l’accessibilité numérique 2023, page 22.

Une seule case que Tab n’atteint pas suffit à bloquer toute la démarche.

Le RGAA

Le RGAA, Référentiel général d’amélioration de l’accessibilité, est le référentiel officiel français. Sa version 4.1.2 comprend 106 critères répartis en 13 thématiques, des images à la consultation. Chaque critère se vérifie par des tests, avec une méthodologie et des cas particuliers. Dans ce cours, chaque exigence renvoie à un critère RGAA, par exemple critère 3.2 pour le contraste du texte.

Le RGAA transpose les niveaux A et AA des WCAG 2.1, les recommandations internationales du W3C. Un score Lighthouse ne mesure pas la conformité au RGAA. Au 1er octobre 2026, le site officiel annonce RGAA 5 pour fin 2026. Référentiel officiel.

“No ARIA is better than Bad ARIA.”

« Mieux vaut ne pas utiliser ARIA que de l’utiliser incorrectement. »

Avant d’utiliser ARIA, lisez W3C, Read Me First (en anglais). La page MDN « ARIA » (en français) reprend ce principe et fournit la formulation française citée ici.

Commencer par le HTML

<!-- Une destination -->
<a href="ateliers.html">Voir les ateliers</a>

<!-- Une action -->
<button type="submit">Réserver ma séance</button>

<!-- Un champ nommé -->
<label for="email">Adresse e-mail (obligatoire)</label>
<input id="email" name="email" type="email" required>

Pour choisir entre lien et bouton, demandez-vous si l’on va quelque part. Un lien mène à une page ou à un fichier. Un bouton déclenche une action : envoyer, ouvrir une aide, supprimer. Un <a href="#" onclick="supprimer()"> est annoncé “lien” et ne réagit pas à Espace. Un bouton qui change de page avec location.href ne s’ouvre pas dans un nouvel onglet.

Un div onclick="..." ne fournit pas le comportement clavier d’un bouton. Ajouter role="button" décrit un rôle, mais ne programme ni l’activation ni le focus. Un tabindex="0" le rend atteignable, mais ne suffit toujours pas. Utilisez le bouton natif.

Structurez la page avec des titres h1 à h6, des listes et des régions (landmarks) comme main et nav. Agrandir un paragraphe p ne le transforme pas en titre pour un lecteur d’écran. Pour notre page, gardez un seul h1. C’est une convention de l’exercice, pas une obligation universelle du RGAA.

Un lien s’active avec Entrée. Un bouton natif s’active avec Entrée ou Espace. Tab parcourt les éléments interactifs, pas tous les textes. Évitez les tabindex positifs, qui modifient artificiellement l’ordre de tabulation (tab order). Comportement des boutons, W3C.

<p class="grand-titre">Réserver un atelier</p>
<div role="button" tabindex="0" onclick="reserver()">Réserver</div>

<h1>Réserver un atelier</h1>
<button type="submit">Réserver</button>

Nom, rôle, état

Pour utiliser un contrôle, une personne doit pouvoir connaître son nom (accessible name), son rôle et les états utiles. Pour un composant piloté par JavaScript, le RGAA le vérifie avec le critère 7.1 : le test 7.1.1 demande que le nom, le rôle, la valeur et les changements d’état soient transmis aux technologies d’assistance. Sa méthodologie cite justement le bouton qui affiche ou masque une zone de contenu. Avec <button aria-expanded="false">Afficher l’aide</button>, le lecteur d’écran peut annoncer “Afficher l’aide, bouton, réduit”. Les mots et leur ordre varient selon le lecteur d’écran et ses réglages.

• Le nom “Afficher l’aide” vient du texte visible.
• Le rôle “bouton” vient de la balise button.
• L’état fermé vient de aria-expanded="false".

Une description ajoute une précision, comme le format attendu ou une erreur. Le navigateur regroupe ces informations dans son arbre d’accessibilité (accessibility tree), une représentation de la page destinée aux technologies d’assistance. Inspectez cet arbre, puis testez ce que le lecteur d’écran annonce.

<label for="courriel">Adresse e-mail</label>
<input id="courriel" type="email" aria-describedby="aide-email">
<p id="aide-email">Exemple : prenom@exemple.fr</p>

Ici, le nom est “Adresse e-mail”. Le format est une description. aria-describedby ne remplace pas un label.

Quand utiliser aria-label

Privilégiez le texte visible et les associations HTML natives. Un bouton textuel clair n’a généralement pas besoin d’ARIA. Un bouton composé uniquement d’une icône peut avoir un aria-label qui décrit son action.

<button type="button" aria-label="Fermer l’aide">
  <span aria-hidden="true">×</span>
</button>

Le rôle bouton est déjà fourni par HTML. Il est inutile d’écrire “bouton Fermer l’aide”. Une icône ambiguë peut aussi nécessiter un texte visible pour aider les personnes qui voient l’écran.

Si une image est le seul contenu du bouton et qu’aucun attribut ARIA ne remplace son nom, son alt fournit le nom du bouton. Écrivez l’action, alt="Rechercher", pas le dessin, alt="Loupe". RGAA, critère 11.9.

Le piège à repérer

<button aria-label="Supprimer">Recommencer</button>

<button type="button">Recommencer</button>

<h2 id="titre-contact">Contacter la MJC</h2>
<form aria-labelledby="titre-contact">
  <!-- Champs avec leurs propres labels -->
</form>

Un état qui change

ARIA décrit l’état. Votre JavaScript doit le mettre à jour à chaque clic.

<button type="button" aria-expanded="false"
  aria-controls="aide">
  Aide sur l’adresse e-mail
</button>
<p id="aide" hidden>Exemple : prenom@exemple.fr</p>

bouton.addEventListener('click', () => {
  const ouvert = bouton.getAttribute('aria-expanded') === 'true';
  bouton.setAttribute('aria-expanded', String(!ouvert));
  aide.hidden = ouvert;
});

aria-expanded doit toujours correspondre à ce qui est affiché. aria-controls pointe vers l’identifiant du panneau. hidden cache le panneau à tout le monde. Sans JavaScript, <details> et <summary> gèrent cet état à votre place.

Gardez un intitulé neutre, comme “Aide sur l’adresse e-mail”. Changer aussi le texte du bouton n’est pas une non-conformité, mais le lecteur d’écran peut annoncer “Masquer l’aide, développé”, ce qui est redondant. Access42, afficher et masquer une zone, RGAA, critère 7.1, motif disclosure, W3C.

Images, couleurs et zoom

Le texte alternatif (alt text), porté par l’attribut alt, dépend du rôle de l’image dans la page :

• Une image informative demande un texte qui transmet l’information utile.
• Une décoration utilise alt="" pour être ignorée par les lecteurs d’écran.
• Une image seule dans un lien ou un bouton doit en décrire la destination ou l’action.
• Un graphique demande souvent une description détaillée ou un tableau en complément.

La même photo peut être informative dans une page et décorative dans une autre. Vérifiez le sens de son alternative, pas seulement sa présence. Le RGAA vérifie l’alternative d’une image porteuse d’information (1.1), l’image décorative ignorée (1.2), la pertinence de l’alternative (1.3) et la description détaillée (1.6). Pour une image seule dans un lien, voyez le test 6.1.2. RGAA, thématique Images.

Mesurez le contraste du texte (critère 3.2) : au moins 4,5:1 pour le texte courant et 3:1 pour le grand texte, soit au moins 24 px, ou 18,5 px en gras. Les composants d’interface et les éléments graphiques porteurs d’information demandent au moins 3:1 (critère 3.3). L’information ne doit pas être donnée uniquement par la couleur (critère 3.1). Les cas particuliers se lisent dans chaque critère. RGAA, thématique Couleurs.

Faites deux tests : agrandissez le texte à 200 % (critère 10.4), puis réduisez la largeur de la fenêtre à 320 px CSS (critère 10.11). Le contenu doit se réorganiser sans perte d’information ni défilement horizontal. Les tableaux de données, les images et les graphiques font partie des cas particuliers qui peuvent défiler dans les deux directions.

Cette réorganisation s’appelle le reflow. Un zoom navigateur à 400 % sur une fenêtre de 1280 px donne la même largeur de 320 px. RGAA, critère 10.11.

44 × 44 px est un objectif de confort pour nos boutons. RGAA 4.1.2 ne fixe pas de taille minimale pour les cibles cliquables.

<!-- Illustration décorative, information déjà présente dans le texte -->
<img src="illustration.webp" alt="">

<!-- L’image est le seul contenu du lien -->
<a href="/ateliers/photo/">
  <img src="photo.webp" alt="Découvrir l’atelier photo">
</a>

Formulaires et messages

Gardez des libellés visibles, des consignes avant la saisie et des erreurs écrites qui expliquent la correction. Le placeholder ne remplace pas le label : il disparaît dès qu’on tape et il est souvent trop pâle. Il peut seulement ajouter un exemple.

Un contour rouge seul ne suffit pas. Associez l’erreur au champ, signalez l’état invalide quand il existe et retirez cet état après correction.

<label for="email">Adresse e-mail</label>
<input id="email" type="email" autocomplete="email"
  aria-invalid="true" aria-describedby="email-err">
<p id="email-err">Il manque le @. Exemple : prenom@exemple.fr</p>

En arrivant sur le champ, vérifiez que le lecteur d’écran restitue “Adresse e-mail”, l’état invalide et le message. L’ordre et les mots employés peuvent varier selon l’outil. RGAA, critères 11.1, 11.10 et 11.11. autocomplete="email" permet le remplissage automatique, demandé par le critère 11.13 pour les champs qui concernent l’utilisateur.

Pour une confirmation ajoutée sans recharger la page, prévoyez une zone role="status" avant d’y insérer le message. C’est une région live (live region) : ses mises à jour peuvent être annoncées sans déplacer le focus. Avec ce rôle, l’annonce attend généralement que le lecteur d’écran ait fini de parler (polite).

Pour un message qui signale une erreur ou propose une suggestion sans déplacer le focus, le RGAA demande role="alert". Son annonce peut interrompre la lecture (assertive). Évitez une annonce à chaque frappe. aria-live="off" désactive ce mode d’annonce automatique, sans masquer le contenu au lecteur d’écran. RGAA, critère 7.5.

Pour un disclosure, un bouton qui affiche et masque un contenu, commencez par <details><summary>…</summary>…</details>. Pour une boîte de dialogue (dialog, ou modale), étudiez <dialog> avant de réinventer un composant. ARIA renseigne la sémantique, il ne crée pas les interactions. Principes ARIA.

<fieldset>
  <legend>Votre séance</legend>
  <label><input type="radio" name="seance" value="mercredi"> Mercredi à 14 h</label>
  <label><input type="radio" name="seance" value="samedi"> Samedi à 10 h</label>
</fieldset>

<details>
  <summary>Que faut-il apporter à l’atelier photo ?</summary>
  <p>Votre téléphone suffit. La MJC prête le reste du matériel.</p>
</details>

Médias, mouvement et compréhension

Une vidéo de cours doit pouvoir être comprise sans entendre sa bande-son. Les sous-titres (captions) restituent la parole et les sons utiles. Une transcription (transcript) permet de relire le contenu. Si une information nécessaire n’existe qu’à l’image, décrivez-la à l’oral ou prévoyez l’alternative adaptée au média. Les exigences précises dépendent du type de média et des cas particuliers. Le RGAA demande par exemple des sous-titres synchronisés (critère 4.3) et une transcription textuelle ou une audiodescription (critère 4.1). RGAA, thématique Multimédia.

Évitez les animations automatiques qui concurrencent la lecture. Quand un contenu bouge ou clignote, vérifiez que l’utilisateur peut l’arrêter, selon le critère 13.8 du RGAA. Respecter prefers-reduced-motion est utile, mais ne suffit pas à vérifier tous les critères liés au mouvement.

Pour réduire l’effort de compréhension, donnez une consigne par étape, utilisez des libellés stables et écrivez des erreurs qui indiquent quoi corriger. Gardez les consignes indispensables visibles. Réservez les disclosures aux explications complémentaires.