Aller au contenu principal
Design & Contenu19 mars 20268 min

Rédaction web accessible : techniques pour un contenu clair

En Bref : L'essentiel à retenir

  • Le langage clair utilise des phrases courtes (15-20 mots), des mots simples et une structure sujet-verbe-complément pour une compréhension maximale.
  • Les titres et sous-titres créent un plan navigable permettant aux lecteurs d'écran de sauter directement aux sections pertinentes.
  • Le niveau de lecture cible est celui d'un collégien (12-14 ans) pour toucher le public le plus large, y compris les non-natifs.
  • Le WCAG critère 3.1.5 recommande de fournir des alternatives simplifiées pour les contenus complexes dépassant le niveau secondaire.
RédactionContenuLangage clairRGAAAccessibilité

L'accessibilité web ne se limite pas au code. Un contenu mal rédigé peut exclure autant d'utilisateurs qu'une interface inaccessible. Voici comment écrire pour tous vos lecteurs, quelle que soit leur situation.

Pourquoi la rédaction accessible compte

Le contenu web est lu par des publics très divers :

ProfilBesoin rédactionnel
Troubles cognitifsPhrases simples, structure claire
DyslexieMots courants, pas de jargon
Non-natifsVocabulaire accessible, pas d'idiomes
Lecteurs pressésInformations essentielles en premier
Personnes âgéesClarté, pas d'implicite
Lecteurs d'écranTitres, structure sémantique

[!NOTE] Le critère WCAG 3.1.5 recommande un niveau de lecture équivalent au secondaire inférieur (12-14 ans) pour les contenus publics.

Les principes du langage clair

1. Phrases courtes

Visez 15 à 20 mots par phrase maximum. Une idée par phrase.

CODE
❌ Mauvais :
La société, qui a été fondée en 2010 et qui compte aujourd'hui
plus de 500 employés répartis dans 12 pays, propose des solutions
innovantes dans le domaine de l'accessibilité numérique.

✅ Bon :
La société a été fondée en 2010. Elle emploie aujourd'hui plus de
500 personnes dans 12 pays. Elle propose des solutions
d'accessibilité numérique.

2. Mots simples et courants

Préférez les mots du quotidien :

ÉvitezPréférez
ImplémenterMettre en place
OptimiserAméliorer
PrérequisConditions nécessaires
ConceptualiserImaginer, prévoir
FinaliserTerminer
InitierCommencer

3. Voix active

La voix active est plus directe et plus facile à comprendre :

CODE
❌ Passif :
Le formulaire doit être rempli par l'utilisateur.

✅ Actif :
Remplissez le formulaire.

4. Structure sujet-verbe-complément

Évitez les inversions et les constructions complexes :

CODE
❌ Complexe :
Après avoir validé votre commande, vous sera envoyé un email de confirmation.

✅ Simple :
Validez votre commande. Vous recevrez un email de confirmation.

Structurer le contenu

Hiérarchie des titres

Les titres créent un plan navigable. Les utilisateurs de lecteurs d'écran les utilisent pour explorer la page.

CODE
<h1>Titre de la page</h1>
  <h2>Section principale</h2>
    <h3>Sous-section</h3>
    <h3>Autre sous-section</h3>
  <h2>Deuxième section</h2>

Règles :

  • Un seul <h1> par page
  • Pas de saut de niveau (h2 vers h4)
  • Titres descriptifs (pas "Section 1")

[!TIP] Testez : si on ne lit que les titres, comprend-on le contenu de la page ?

Paragraphes courts

Un paragraphe = une idée. Visez 3 à 5 phrases maximum.

Les blocs de texte trop longs découragent la lecture, surtout sur écran.

Listes à puces

Les listes aèrent le contenu et facilitent le repérage :

CODE
<!-- Pour des éléments non ordonnés -->
<ul>
  <li>Premier point</li>
  <li>Deuxième point</li>
</ul>

<!-- Pour des étapes ou un ordre -->
<ol>
  <li>Première étape</li>
  <li>Deuxième étape</li>
</ol>

Rédiger des liens accessibles

Intitulés explicites

Le texte du lien doit indiquer sa destination, même hors contexte :

CODE
❌ "Cliquez ici pour en savoir plus"
✅ "Consultez notre guide sur l'accessibilité web"

❌ "En savoir plus"
✅ "En savoir plus sur les critères RGAA"

Éviter les liens ambigus

Plusieurs liens "En savoir plus" sur une page sont confusants pour les lecteurs d'écran.

Si le design impose un lien court, complétez avec du texte masqué :

CODE
<a href="/guide-rgaa">
  En savoir plus
  <span class="visually-hidden">sur les critères RGAA</span>
</a>

Consultez notre guide sur le texte masqué accessible.

Alternatives textuelles

Images

Chaque image porteuse d'information doit avoir un texte alternatif :

CODE
<!-- Image informative -->
<img src="graphique.png"
     alt="Évolution des ventes : +15% en 2025, +22% en 2026">

<!-- Image décorative -->
<img src="decoration.png" alt="">

Abréviations et acronymes

Développez les sigles à leur première occurrence :

CODE
<p>Le <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr>
définit les règles d'accessibilité en France.</p>

Contenus complexes

Pour les graphiques, tableaux de données ou infographies :

  1. Fournissez une description textuelle du contenu essentiel
  2. Proposez les données dans un format alternatif (tableau accessible)
  3. Ajoutez une synthèse pour les contenus longs

Éviter le jargon et les idiomes

Jargon technique

Expliquez les termes spécialisés ou proposez un glossaire :

CODE
<p>L'audit vérifie la conformité au <a href="/glossaire#rgaa">RGAA</a>
(référentiel d'accessibilité français).</p>

Expressions idiomatiques

Les idiomes et métaphores peuvent être incompréhensibles pour :

  • Les personnes avec troubles cognitifs
  • Les non-francophones
  • Les systèmes de traduction automatique
CODE
❌ "Mettre la charrue avant les bœufs"
✅ "Commencer dans le mauvais ordre"

❌ "C'est du gâteau"
✅ "C'est facile"

Instructions claires

Pour les formulaires

Expliquez ce qui est attendu :

CODE
<label for="email">
  Adresse email
  <span class="hint">(format : nom@domaine.fr)</span>
</label>
<input type="email" id="email">

Pour les actions

Dites exactement quoi faire :

CODE
❌ "Procédez à la validation"
✅ "Cliquez sur le bouton valider"

Messages d'erreur

Expliquez le problème ET la solution :

CODE
❌ "Erreur champ invalide"
✅ "Le numéro de téléphone doit contenir 10 chiffres. Exemple : 01 23 45 67 89"

Outils de vérification

Test de lisibilité

Plusieurs outils calculent le niveau de lecture :

  • Hemingway Editor : gratuit, analyse en anglais
  • Readable : multilingue, payant
  • Scolarius : spécifique au français

Formule de Flesch-Kincaid

Plus le score est élevé, plus le texte est facile :

ScoreNiveau
90-100Très facile (CM1)
60-70Standard (collège)
30-50Difficile (études supérieures)
0-30Très difficile (expert)

Visez un score de 60-70 pour les contenus grand public.

Contenus multilingues

Si votre site est traduit :

  1. Indiquez la langue de la page : <html lang="fr">
  2. Marquez les passages en langue étrangère : <span lang="en">feedback</span>
  3. Évitez le franglais non nécessaire
CODE
<p>Envoyez-nous vos <span lang="en">feedbacks</span>.</p>
<!-- Mieux : -->
<p>Envoyez-nous vos retours.</p>

Checklist rédaction accessible

  • Phrases courtes (15-20 mots)
  • Vocabulaire courant
  • Voix active privilégiée
  • Titres hiérarchisés (h1-h6)
  • Paragraphes aérés
  • Liens explicites
  • Acronymes développés
  • Pas d'idiomes complexes
  • Instructions claires
  • Alternatives pour contenus visuels

Critères RGAA concernés

CritèreExigence
8.3Langue de la page indiquée
8.4Changements de langue signalés
9.1Information structurée par titres
6.1Intitulé des liens explicite
1.1Alternative textuelle des images

Conclusion

La rédaction accessible bénéficie à tous vos lecteurs, pas seulement aux personnes handicapées. Un contenu clair, bien structuré et sans jargon améliore l'expérience utilisateur, le référencement et les conversions. Investissez dans la qualité rédactionnelle dès la conception de vos contenus.

Analysez la structure de vos contenus avec RGAA Checker : notre outil vérifie les titres, les liens et les alternatives textuelles de vos pages.

Votre site est-il conforme ?

Ne prenez pas de risques avec l'accessibilité. Lancez un audit complet de votre site en quelques minutes et obtenez un rapport détaillé des corrections à apporter.