Agir

Les bonnes pratiques essentielles

La plupart des obstacles rencontrés sur le web viennent d'un petit nombre d'erreurs récurrentes. Voici les règles essentielles, thème par thème, avec des exemples et le critère RGAA correspondant.

Mis à jour le 22 octobre 2026 · Faits vérifiés auprès des sources officielles citées

1. Images

• Toute image porteuse d'information a une alternative textuelle RGAA 1.1 (nouvel onglet) qui transmet la même information, et non une simple description RGAA 1.3 (nouvel onglet).
• Une image décorative est ignorée par les technologies d'assistance, avec un attribut alt vide RGAA 1.2 (nouvel onglet).
• Une image complexe (graphique, schéma) est accompagnée d'une description détaillée, dans la page ou via un lien adjacent.

<img src="ventes.png">
<img src="separateur.svg" alt="image">

<img src="ventes.png"
  alt="Ventes 2025 : +12 % par rapport à 2024">
<img src="separateur.svg" alt="">

2. Couleurs et contrastes

• Une information n'est jamais transmise uniquement par la couleur RGAA 3.1 (nouvel onglet) : un champ en erreur porte aussi un message, un lien dans un texte est aussi souligné.
• Le texte a un contraste d'au moins 4,5:1 avec son arrière-plan, ou 3:1 s'il est de grande taille (au moins 24 px, ou 18,5 px en gras) RGAA 3.2 (nouvel onglet).
• Les composants d'interface et les éléments graphiques porteurs d'information (bordure d'un champ, icône, courbe) ont un contraste d'au moins 3:1 RGAA 3.3 (nouvel onglet).

3. Structure de la page

• La page a un titre pertinent dans la balise <title> RGAA 8.5 (nouvel onglet) RGAA 8.6 (nouvel onglet) et sa langue est déclarée RGAA 8.3 (nouvel onglet).
• Les titres h1 à h6 reflètent la hiérarchie réelle du contenu RGAA 9.1 (nouvel onglet) : on ne choisit pas un niveau pour sa taille visuelle.
• Les listes sont balisées comme des listes RGAA 9.3 (nouvel onglet).
• Les grandes zones sont identifiées : header, nav, main, footer RGAA 12.6 (nouvel onglet).

<div class="titre-xl">Nos offres</div>
<div class="titre-l">Offre Pro</div>

<h1>Nos offres</h1>
<h2>Offre Pro</h2>

4. Liens et boutons

• Chaque lien a un intitulé RGAA 6.2 (nouvel onglet) qui permet de comprendre sa destination, au besoin avec son contexte RGAA 6.1 (nouvel onglet).
• Un lien mène vers une autre page ou une autre section ; un bouton déclenche une action. Utilisez l'élément HTML adapté.
• Une icône seule doit avoir un nom accessible (texte masqué visuellement ou attribut aria-label).

<a href="/tarifs">Cliquez ici</a>
<a href="/panier"><svg>…</svg></a>

<a href="/tarifs">Voir les tarifs</a>
<a href="/panier" aria-label="Panier"><svg aria-hidden="true">…</svg></a>

5. Formulaires

• Chaque champ a une étiquette visible et reliée par le code RGAA 11.1 (nouvel onglet), dont l'intitulé est pertinent RGAA 11.2 (nouvel onglet). Un texte d'exemple (placeholder) ne remplace pas une étiquette.
• Les erreurs sont signalées clairement, avec un message qui indique comment corriger RGAA 11.10 (nouvel onglet).
• Les champs relatifs à l'utilisateur précisent leur finalité avec l'attribut autocomplete RGAA 11.13 (nouvel onglet).

<input type="email" placeholder="E-mail">

<label for="email">Adresse e-mail</label>
<input id="email" type="email"
  autocomplete="email">

6. Clavier et focus

• Tout ce qui se fait à la souris doit pouvoir se faire au clavier RGAA 7.3 (nouvel onglet).
• L'ordre de tabulation suit l'ordre logique de la page RGAA 12.8 (nouvel onglet) et aucun composant ne retient le focus prisonnier RGAA 12.9 (nouvel onglet).
• L'élément qui a le focus est visible RGAA 10.7 (nouvel onglet) : ne supprimez jamais le contour de focus sans le remplacer.
• Un lien d'évitement permet d'accéder directement au contenu principal RGAA 12.7 (nouvel onglet).

*:focus { outline: none; }

:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}

7. Multimédia et animations

• Les vidéos ont des sous-titres synchronisés RGAA 4.3 (nouvel onglet) ; les contenus audio ont une transcription RGAA 4.1 (nouvel onglet).
• Un son qui démarre automatiquement peut être arrêté RGAA 4.10 (nouvel onglet).
• Les contenus en mouvement ou clignotants (carrousels, animations) peuvent être mis en pause RGAA 13.8 (nouvel onglet).

8. Agrandissement et mise en forme

• Le texte reste lisible agrandi à 200 % RGAA 10.4 (nouvel onglet) : n'empêchez jamais le zoom.
• Le contenu s'adapte à une largeur de 320 px sans défilement horizontal RGAA 10.11 (nouvel onglet).
• L'utilisateur peut augmenter l'espacement du texte sans perte de contenu RGAA 10.12 (nouvel onglet).
• Les contenus qui apparaissent au survol ou au focus (infobulles, sous-menus) restent contrôlables RGAA 10.13 (nouvel onglet).

<meta name="viewport" content="width=device-width,
  maximum-scale=1, user-scalable=no">

<meta name="viewport"
  content="width=device-width, initial-scale=1">

9. Tableaux de données

• Les en-têtes de lignes et de colonnes sont déclarés avec th RGAA 5.6 (nouvel onglet), et chaque cellule est associée à ses en-têtes RGAA 5.7 (nouvel onglet).
• N'utilisez pas de tableau pour faire de la mise en page.

<table>
  <caption>Tarifs mensuels</caption>
  <tr><th scope="col">Offre</th><th scope="col">Prix HT</th></tr>
  <tr><th scope="row">Pro</th><td>29,90 €</td></tr>
</table>