Table des matières
A – AA
Durée : 6 minutes
Testez-vous!
Principe
Pour rendre votre module clair et accessible à tous, il est essentiel d’utiliser les bons éléments proposés par l’outil : titres, listes, tableaux, paragraphes…
Il ne s’agit pas seulement de soigner l’apparence, mais de donner du sens à l’information : une structure adaptée rend la lecture et la navigation plus faciles, pour tout le monde, y compris avec un lecteur d’écran.
Explication audio (transcription disponible)
Transcription
Quand on parle de sémantique, on fait le lien avec l’histoire du web.
Tim Berners-Lee, inventeur du web, a créé un langage le HTML dont l’objectif n’était pas seulement d’afficher du texte, mais de structurer l’information de façon universelle, compréhensible par les machines, les navigateurs, et les technologies d’assistance.
Aujourd’hui, sans toucher au code, chaque fois que vous choisissez un bloc “Titre”, “Liste” ou “Tableau” dans votre outil, vous faites un choix sémantique qui a un vrai impact sur la navigation clavier, la lecture par un lecteur d’écran, et la conformité aux standards.
L’enjeu n’est pas de devenir développeur, mais de saisir que ce sont ces petits choix sémantiques qui rendent votre contenu plus accessible et plus compréhensible, pour tous les utilisateurs, avec ou sans outil d’assistance.
À vérifier
- Utiliser les fonctions natives de l’outil pour structurer le contenu : titres, sous-titres, listes à puces/numérotées, tableaux, citations, etc.
- Ne jamais simuler un titre par du gras, de la couleur ou une taille de police différente : appliquer le style dédié.
- Utiliser des listes à puces/numérotées pour des éléments liés (éviter les paragraphes avec des tirets ou des symboles en début de ligne).
- Utiliser les tableaux uniquement pour présenter des données tabulaires (pas pour la mise en page), et renseigner les entêtes.
- Ne jamais placer de texte essentiel dans une image (sauf exception justifiée : logo ou schéma clé avec alternative).
Pour qui ?
- Utilisateurs de lecteurs d’écran
- Toute personne “scannant” rapidement un module
- Équipes amenées à relire ou faire évoluer le contenu
Pourquoi c’est important ?
Parce qu’un contenu structuré avec les bons éléments est beaucoup plus facile à lire et à parcourir, aussi bien pour les apprenants que pour les personnes utilisant des aides techniques.
Cela permet de garantir que chacun accède rapidement à l’information dont il a besoin, de rendre la navigation fluide, et de simplifier la relecture ou la mise à jour du module par l’équipe.
Comment réussir
- Utilisez systématiquement les blocs natifs proposés par l’outil (Titre, Texte, Liste, Tableau…), sans détourner leur usage.
- Appliquez les styles (“Titre 1”, “Titre 2”, “Liste à puces”) au lieu de la mise en forme manuelle.
- Pour chaque niveau de titre (“Titre 1”, “Titre 2”…), vous pouvez créer autant d’apparences que nécessaire (taille, couleur, style), selon les besoins du module. Par exemple, un “Titre 1” peut être plus petit qu’un “Titre 2” selon le contexte : l’essentiel est de respecter la hiérarchie logique.
- Pour les tableaux, renseignez systématiquement les entêtes.
- Après export (PDF, web…), vérifiez que la structure sémantique est bien conservée.
Comprendre la sémantique
Pourquoi parle-t-on de sémantique ? (culture Web et accessibilité)
La notion de “sémantique” vient du web : Tim Berners-Lee, inventeur du HTML, a posé comme principe que chaque bloc (titre, liste, tableau, citation, etc.) devait porter une signification précise, comprise par tous : humains, navigateurs et aides techniques.
Aujourd’hui, la structure sémantique reste la base des standards d’accessibilité. Le W3C, organisme qu’il a fondé, définit encore les standards du Web et de l’accessibilité à travers le WCAG. Elle permet aux technologies d’assistance, comme les lecteurs d’écran, de restituer le contenu de façon cohérente et logique.
Vous n’avez pas besoin de coder, mais comprendre cette logique aide à mieux concevoir vos modules : chaque fois que vous choisissez un bloc, vous faites un choix sémantique qui influence directement la navigation clavier, la lecture par un lecteur d’écran et la conformité WCAG.
Ce qu’un lecteur d’écran lit grâce à la sémantique
Un lecteur d’écran ne se “contente” pas de lire le texte affiché : il s’appuie sur la structure pour guider la navigation et rendre l’information accessible.
Visualiser la sémantique en un clin d’œil
La structure sémantique d’un module ne se voit pas à l’écran, mais elle existe bien : chaque bloc inséré (titre, liste, tableau…) devient une balise dédiée dans le code HTML. Ce sont ces informations que les lecteurs d’écran utilisent pour naviguer et comprendre le contenu.
Pour s’en rendre compte, il suffit par-exemple d’ouvrir l’inspecteur de code (F12 sur la plupart des navigateurs) : vous verrez alors les balises qui structurent le contenu bien au-delà de l’apparence visuelle.
Par exemple, ci-dessous, le titre de niveau 1 dans Rise360 est bien associé à une balise sémantique <h1>.
Quelques exemples concrets (ce que « lit » un lecteur d’écran) :
- Une liste à puces
<ul>de 3 éléments<li>:
Le lecteur d’écran annonce : “Liste à puces, trois éléments” - Un titre de niveau 2
<h2>:
Annoncé comme “Titre niveau 2” pour guider la navigation - Un tableau structuré
<table>:
Les entêtes facilitent la compréhension des données croisées - Un bloc citation <quote> :
“Citation : …” est lu systématiquement
Quand la sémantique est contournée : exemple concret
Il arrive qu’on détourne certains blocs pour des raisons pratiques de mise en page… mais cela a un impact sur la façon dont les lecteurs d’écran annoncent le contenu, ce qui peut désorienter l’utilisateur.
Exemple de contournement : citation dans Rise 360
À défaut de bloc standard adapté, sur Rise360, il est pratique d’utiliser et détourner le bloc “Citation” pour placer une image à côté d’un texte.
Ce type de contournement, sans être « grave », reste à éviter, car il brouille la lecture pour les utilisateurs de lecteurs d’écran.
Ce qui est annoncé par le lecteur d’écran :
- « Citation : Bienvenue dans ce module ! Découvrez les clés de l’accessibilité numérique à chaque étape de la conception. »
- « Légende : durée 10 minutes ».
Cette annonce peut surprendre un apprenant qui utilise un lecteur d’écran, pouvant s’attendre à une vraie citation accompagnée de son auteur (ce dernier est désigné par le lecteur d’écran comme « légende »).
Usage sémantique correct du bloc citation dans Rise360
Voici un exemple concret où le bloc « Citation » remplit sa fonction d’origine.
Ce qui est annoncé par le lecteur d’écran :
- « Citation : Le pouvoir du Web est son universalité. Qu’il soit accessible par n’importe qui, quel que soit son handicap est un de ses aspects essentiels ».
- « Légende : Tim Berners-Lee ».
À retenir
- Structurer le contenu avec les bons blocs (titres, listes, tableaux…) permet aux lecteurs d’écran de restituer l’information de façon logique et cohérente.
- Chaque contournement ou usage détourné (par manque d’options dans l’outil) peut fausser la compréhension à l’oral : soyez vigilants à l’impact sur les utilisateurs et limitez ce genre de détournement si l’accessibilité est prioritaire.
- Une structure sémantique solide facilite la navigation, l’évolution du module, et la conformité aux standards (WCAG).
- Signalez les limites des outils auteurs qui vous obligent à des pratiques de contournement, à votre équipe ou directement à l’éditeur, pour améliorer l’accessibilité à la source.
Pour aller plus loin
- Visualisez la structure : utilisez des outils comme l’inspecteur de code (F12) pour explorer le code.
- Visitez la fiche 3. Arborescence cohérente pour un approfondir l’arborescence des titres et l’utilisation de l’outil HeadingMap permettant de visualiser leur structure.
- Pour ceux qui veulent creuser, il existe tout un univers de ressources sur le langage HTML et l’accessibilité web. Découvrir comment fonctionne le HTML “en coulisses” permet de comprendre la logique des balises, même sans être développeur.
- Blog Access42 : des articles de fond sur l’accessibilité numérique.
- Formation HTML par Ronan HELLO
- Blog La Lutine du Web (accessibilité Web)
Suivre ma progression :
Ce point est lu & terminé.