Conformité RGAA – Mise en pratique avec le HTML

/ Conseils / Par

Voici une synthèse claire, structurée et très pratique pour appliquer l’accessibilité directement dans votre code HTML.

L’accessibilité dans le HTML repose sur l’utilisation de balises sémantiques et d’attributs ARIA, essentiels pour respecter les WCAG et le RGAA.

Pour connaitre toutes les nouveautés 2025 sur l’accessibilité web, vous pouvez consulter notre article « L’Accessibilité Numérique : Une Porte Ouverte sur le Web pour Chacun »

1. Structurer correctement les titres (H1 → H6)

Objectif : permettre aux lecteurs d’écran de comprendre la hiérarchie de la page.

✔ Bon exemple

🌐
filename.html 
<h1>Accessibilité numérique en 2025</h1>
<h2>Pourquoi l’accessibilité devient obligatoire</h2>
<h3>Les obligations légales</h3>
<h3>Les échéances à respecter</h3>

<h2>Comment rendre un site accessible</h2>
<h3>Audit et analyse</h3>
<h3>Corrections techniques</h3>

❌ Mauvais exemple

🌐
filename.html 
<h1>Accessibilité</h1>
<p><strong>Pourquoi l’accessibilité devient obligatoire</strong></p>

2. Ajouter des balises ALT correctes pour les images

✔ Images informatives (doivent être décrites)

🌐
filename.html 
<img src="bouton-fermer.svg" alt="Fermer la fenêtre">
<img src="graphique-audit.png" alt="Graphique montrant le score d’accessibilité">

✔ Images décoratives (ne rien décrire)

🌐
filename.html 
<img src="fond-decoratif.png" alt="">

❌ Mauvais exemple (bloque le lecteur d’écran)

🌐
filename.html 
<img src="icone.png">

3. Assurer une navigation complète au clavier

✔ Ajouter un style pour l’indication du focus

🌐
filename.html 
<style>
:focus {
    outline: 3px solid #000; 
    outline-offset: 4px;
}
</style>

✔ Vérifier que tous les éléments interactifs sont des balises correctes

🌐
filename.html 
<a href="/contact">Nous contacter</a>
<button type="button">Ouvrir le menu</button>

❌ Mauvais exemple (inaccessible au clavier)

🌐
filename.html 
<div onclick="ouvrirMenu()">Menu</div>

4. Utiliser un HTML sémantique

Objectif : permettre aux technologies d’assistance de comprendre la structure.

✔ Exemple complet

🌐
filename.html 
<header>
    <nav>
        <ul>
            <li><a href="#intro">Introduction</a></li>
            <li><a href="#obligations">Obligations 2025</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</header>

<main>
    <section id="intro">
        <h1>Accessibilité numérique : comprendre les enjeux</h1>
        <p>Introduction du sujet...</p>
    </section>

    <section id="obligations">
        <h2>Obligations légales 2025</h2>
        <p>Explication...</p>
    </section>
</main>

<footer>
    <p>© 2025 - Déclaration d’accessibilité</p>
</footer>

5. Assurer des contrastes suffisants

Utiliser WCAG AA : ratio minimal 4.5:1.

✔ Exemple de bouton accessible

🌐
filename.html 
<button style="background:#0053b3; color:white; padding:12px 20px;">
    Envoyer
</button>

❌ Exemple inaccessible

🌐
filename.html 
<button style="background:#87cefa; color:white;">
    Envoyer
</button>

Couleurs trop claires = illisibles.

6. Construire des formulaires accessibles

✔ Exemple conforme

🌐
filename.html 
<form>
    <label for="email">Adresse email</label>
    <input id="email" type="email" name="email" required>

    <label for="message">Votre message</label>
    <textarea id="message" name="message"></textarea>

    <button type="submit">Envoyer</button>
</form>

❌ Mauvais exemple (placeholder ≠ label)

🌐
filename.html 
<input type="email" placeholder="Votre email">

Le placeholder disparaît → illisible pour un lecteur d’écran.

7. Rendre les tableaux accessibles

✔ Exemple conforme

🌐
filename.html 
<table>
    <caption>Calendrier des obligations d’accessibilité</caption>
    <thead>
        <tr>
            <th scope="col">Type de site</th>
            <th scope="col">Date de conformité</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Nouveaux sites</td>
            <td>28 juin 2025</td>
        </tr>
        <tr>
            <td>Sites existants</td>
            <td>28 juin 2030</td>
        </tr>
    </tbody>
</table>

→ caption, scope et thead améliorent la lecture audio.

8. Prévenir les crises d’épilepsie et les animations dangereuses

✔ Exemple conforme

🌐
filename.html 
<div class="banner" style="animation: none;">
    Promo spéciale
</div>

❌ Mauvais exemple

🌐
filename.html 
<div style="animation: flash 0.1s infinite;">Promo !!!</div>

Animations rapides = interdites.

9. Ajouter des sous-titres aux vidéos

✔ Exemple via <track>

🌐
filename.html 
<video controls>
    <source src="presentation.mp4" type="video/mp4">
    <track src="sous-titres.vtt" kind="subtitles" srclang="fr" label="Français">
</video>

10. Gérer les liens

✔ Liens explicites

🌐
filename.html 
<a href="/audit-accessibilite">Consulter l’audit d’accessibilité</a>

❌ Liens ambigus

🌐
filename.html 
<a href="#">Cliquez ici</a>

11. Ajouter une “skip link” (passer au contenu)

Indispensable pour les lecteurs d’écran et les utilisateurs clavier.

✔ À mettre juste après <body>

🌐
filename.html 
<a href="#contenu" class="skip-link">Aller au contenu</a>

<style>
.skip-link {
    position:absolute;
    left:-999px;
    top:auto;
    background:#000;
    color:#fff;
    padding:10px;
}
.skip-link:focus {
    left:10px;
    top:10px;
}
</style>

12. Faire des boutons réels (pas des faux liens)

Indispensable pour les lecteurs d’écran et les utilisateurs clavier.

✔ Bon

🌐
filename.html 
<button type="button">Ouvrir le menu</button>

❌ Mauvais

🌐
filename.html 
<a onclick="ouvrirMenu()">Menu</a>

13. Ajouter ARIA uniquement si nécessaire

Indispensable pour les lecteurs d’écran et les utilisateurs clavier.

✔ Bon

🌐
filename.html 
<button aria-expanded="false" aria-controls="menu">Menu</button>

❌ ARIA inutile (pollution)

🌐
filename.html 
<p role="heading" aria-level="1">Titre</p>

Toujours privilégier le HTML natif.

Attribut / Rôle ARIAUtilitéExemple correctQuand l’utiliser
role= »button »Indique à un lecteur d’écran qu’un élément se comporte comme un boutonhtml<br><div role="button" tabindex="0">Ouvrir</div>Lorsque l’on utilise un élément non interactif comme bouton (déconseillé, mieux vaut <button>)
role= »navigation »Déclare une zone de navigation principalehtml<br><nav role="navigation"> ... </nav>Rarement nécessaire sur <nav> (déjà sémantique), utile sur des divs
role= »banner »Identifie l’en-tête principal du sitehtml<br><header role="banner"></header>Si <header> contient le branding principal
role= »contentinfo »Identifie le pied de page du sitehtml<br><footer role="contentinfo"></footer>Pour signaler des infos sur le site
role= »main »Indique la zone principale du contenuhtml<br><main role="main"></main>Souvent inutile car <main> est déjà sémantique
role= »complementary »Contenu complémentaire (sidebar, encadrés)html<br><aside role="complementary"></aside>Pour les blocs secondaires
role= »alert »Annonce un message important immédiatementhtml<br><div role="alert">Erreur lors de l’envoi.</div>Pour les erreurs formulaires, messages critiques
role= »status »Message non bloquant, lu automatiquementhtml<br><div role="status">Sauvegarde réussie.</div>Notifications discrètes
role= »dialog »Indique une fenêtre modalehtml<br><div role="dialog" aria-modal="true"> ... </div>Pour les pop-ups, modales
role= »search »Indique une zone de recherchehtml<br><div role="search"> ... </div>Pour un formulaire de recherche dans un bloc non sémantique
aria-labelDonne un nom accessible à un élémenthtml<br><button aria-label="Ouvrir le menu">☰</button>Pour les icônes, boutons sans texte
aria-labelledbyAssocie un élément à un autre pour son nomhtml<br><div aria-labelledby="titre1"><h2 id="titre1">Infos</h2></div>Pour regrouper plusieurs labels
aria-describedbyFournit une description supplémentairehtml<br><input aria-describedby="help"><span id="help">8 caractères min.</span>Formulaires, champs complexes
aria-hidden= »true »Cache un élément aux lecteurs d’écranhtml<br><span aria-hidden="true">★</span>Icônes décoratives
aria-expandedIndique si un menu ou accordéon est ouverthtml<br><button aria-expanded="false" aria-controls="menu">Menu</button>Menus déroulants, accordéons
aria-controlsLien avec l’élément contrôléhtml<br><button aria-controls="menu">Menu</button>Pour relier un toggle à son contenu
aria-live= »polite » / « assertive »Indique comment les lecteurs d’écran doivent annoncer un changementhtml<br><div aria-live="polite">Mise à jour…</div>Données dynamiques (AJAX, recherche)
aria-modal= »true »Indique qu’une modale empêche l’accès au reste de la pagehtml<br><div role="dialog" aria-modal="true"> ... </div>Fenêtres modales
aria-checkedÉtat d’une case à cocher ou switchhtml<br><div role="checkbox" aria-checked="false"></div>Composants personnalisés
aria-selectedIndique l’élément sélectionné dans une listehtml<br><li role="option" aria-selected="true">Option A</li>Listes, onglets
aria-required= »true »Indique qu’un champ est obligatoirehtml<br><input aria-required="true">Champs formulaires
aria-invalid= »true »Indique qu’un champ contient une erreurhtml<br><input aria-invalid="true">Formulaires invalides

Notes essentielles pour utiliser ARIA correctement

  • Toujours privilégier le HTML natif avant ARIA
    Exemple : utilisez <button> au lieu de <div role="button">.

  • ARIA ne rend pas un élément interactif
    Si vous utilisez role="button", vous devez ajouter aussi :

    • le focus clavier (tabindex="0")

    • les événements clavier Enter / Space

  • Ne jamais utiliser ARIA si l’équivalent HTML existe déjà
    Exemple : inutile d’ajouter role="navigation" sur <nav>.

FAQ

Les attributs ARIA améliorent l’accessibilité en fournissant des informations supplémentaires aux lecteurs d’écran lorsque les balises HTML ne suffisent pas.

L’accessibilité repose sur les balises sémantiques, les attributs ARIA, un contenu structuré, des labels sur les formulaires et un contraste suffisant.

ARIA n’est pas obligatoire, mais il est recommandé lorsque le HTML ne permet pas de décrire un comportement ou un état d’interface.

On utilise des outils comme Wave, aXe, Lighthouse ou le lecteur d’écran NVDA pour vérifier la conformité WCAG/RGAA.

Publications similaires