Structuration de l'information avec le RGAA
Les critères du référentiel général d'amélioration de l'accessibilité
Les éléments multimédias sont une partie importante du contenu de certains sites web. Afin de respecter les critères du Référentiel général d’amélioration de l’accessibilité, vous devez vous assurer de rendre l’ensemble de vos médias accessibles aux internautes en situation de handicap ou de fracture numérique. Voici les éléments à prendre en considération, et les solutions pour proposer un contenu multimédia accessible.
1. La structuration de l'information
Les titres sont généralement formalisés par des balises <hn>, qui vont de <h1> à <h6>. Ces balises HTML permettent de mettre en forme votre contenu, de l’organiser en plusieurs sections, et de hiérarchiser ces parties et sous-parties entre elles.
Si ces balises <hn> sont très importantes pour votre référencement naturel, elles jouent aussi un rôle important dans l’accessibilité de votre site web.
Note : Utiliser aria-label ou aria-labelledby risque fort de masquer le contenu de votre en-tête pour les technologies d’assistance, car les lecteurs d’écran vont lire à la place l’étiquette au lieu de l’en-tête.
Des attributs WAI-ARIA en alternatives aux balises <hn>
Vous pouvez structurer un contenu en utilisant un attribut WAI-ARIA role="heading" associé à un attribut WAI-ARIA aria-level.
Par exemple :
<h1>Titre de niveau 1</h1>=<div role="heading" aria-level="1">Titre de niveau 1</div><h2>Titre de niveau 2</h2>=<div role="heading" aria-level="2">Titre de niveau 2</div>- etc.
Ces alternatives sont déconseillées dans une stratégie SEO : privilégiez toujours des balises <hn> pour structurer votre contenu dans une démarche d’optimisation de votre référencement naturel.
Par contre, les attributs role="heading" sont conformes au référentiel RGAA.
Les règles de conformité du RGAA en termes de hiérarchisation des titres sont les mêmes qu’en référencement naturel.
- Vous débutez par une balise
<h1> - En ordre descendant, vous évitez de sauter plusieurs niveaux (mais vous pouvez évidemment utiliser une balise de même niveau) ;
- En ordre ascendant, vous pouvez sauter plusieurs niveau.
Exemple de structure conforme :
<h1>Titre de niveau 1</h1><h2>Titre de niveau 2</h2><h3>Titre de niveau4</h3><h4>Titre de niveau 4</h4><h4>Titre de niveau 4</h4>
<h2>Titre de niveau 2</h2><h3>Titre de niveau 2</h3>
<h2>Titre de niveau 2</h2>
Cette hiérarchie entre les balises de titres est conforme, car on commence bien par une balise </h1> et on ne saute aucun niveau en ordre descendant.
Exemple de structure non conforme :
<h1>Titre de niveau 1</h1><h3>Titre de niveau3</h3>
<h2>Titre de niveau 2</h2><h4>Titre de niveau 4</h4>
Cette hiérarchie entre les balises de titres est conforme, car si on commence bien par une balise </h1>, on saute à différentes reprises plusieurs niveaux (de <h1> à <h3> et de <h2>à <h4>.
Avoir une bonne structure de titres, c’est bien. Mais avoir des titres pertinents, c’est encore mieux !
Les recommandations du référentiel général pour l’amélioration de l’accessibilité concordent ici avec les recommandations générales pour le SEO :
- Des titres porteurs d’informations ;
- Des titres qui structurent le contenu ;
- Des titres qui ne servent pas uniquement à mettre en forme une partie du contenu.
Par exemple, utiliser une balise <h2> ou <h3> pour agrandir un texte de chapô n’est pas conforme au RGAA.
Vous devez vérifier que chaque passage de texte qui constitue un titre manifeste du point de vue de la mise en forme et de la mise en page est bien annoncé par une balise balise de titre (<hn> ou role="heading").
C’est un point un peu plus délicat vis-à-vis du SEO, où on a tendance à minimiser la sémantique de certains passages qui pourraient être considérés comme des titres, mais qu’on demande de mettre en forme à l’aide de balises
2. La structuration du document
- Balise
<header>ou attributrole="banner": zone d’en-tête du site ; - Balise
<nav>ou attributrole="navigation": zones de navigation au sein du site ; - Balise
<main>ourole="main": zone de contenu principal (balise ou attribut unique au sein d’une page) ; - Balise
<footer>ourole="contentinfo": zone de pied de page.
Vous devez respecter ces conditions pour être conforme aux RGAA :
- Avoir une balise
<main>unique dans une page ; - Avoir une balise
<header>qui précède la balise<main>; - Avoir une balise
<footer>qui suit la balise<main>.
Au sein de la balise <main>, vous pouvez avoir plusieurs balises <section> ou <article>, qui contiennent chacune un <header> et un <footer>.
Le glossaire du RGAA précise que Les liens de pied de page renvoyant vers les mentions légales, plan du site et autres informations concernant le site ne sont pas considérés comme un menu de navigation principal.
Vous ne devez donc pas utiliser de balise <nav> sur ces liens. Par contre, les règles de la structuration des listes s’appliques.
Astuces et tutoriels sur l'accessibilité Web
3. La structuration des listes
Les listes doivent forcément être structurées avec les bonnes balises HTML ou les attributs WAI-ARIA équivalents :
- Balises HTML
<ol>ou<ul>, puis<li>pour chaque item ; - Attribut WAI-ARIA
role="list", puis attributsrole="listitem"pour chaque item.
<dl> , puis par des balises <dt> ou <dd> pour chaque item. Exemples de listes conformes et non conformes
✅ Liste conforme
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>...</li>
</ul>
❌ Liste non conforme
<p>
- item 1<br>
- Item 2<br>
- ...
</p>
Une liste de description peut par exemple être utilisée pour donner des définitions :
<dl>
<dt>RGAA</dt>
<dd>Référentiel général d'amélioration de l'accessibilité. Il permet de vérifier la conformité d'un service aux normes internationales[cite: 4, 105].</dd>
<dt>Landmark</dt>
<dd>Rôle WAI-ARIA permettant d'indiquer les zones principales du document, comme le menu ou le contenu principal[cite: 2601, 2602].</dd>
<dt>Alternative textuelle</dt>
<dd>Texte court associé à une image pour en transmettre l'information aux personnes ne pouvant pas la voir[cite: 2159, 2214].</dd>
</dl>
Si ce n’est pas clairement énoncé, plusieurs éléments des critères et du glossaire du RGAA soulignent l’importance de structurer vos menus de navigation avec des listes :
- Un menu et une barre de navigation sont définis comme
une liste de liens permettant une navigation spécifique
; - Le glossaire précise également que
la suite des liens d’un menu de navigation est une liste de liens non ordonnée
.
4. La structuration des citations
- Une citation courte est entourée par des balises
<q></q>; - Une citation longue est délimitée par des balises
<blockquote>.
Le RGAA ne fixe pas de limite précise sur le nombre de caractères . Vous pouvez utiliser <q> pour une citation au sein d’un paragraphe, et <blockquote> quand la citation n’est pas incluse dans un paragraphe.