Structuration de l’information

31 janvier 2023

RGAA : Structuration de l’information

Utilisé les régions natives
Titrage du contenu
Listes
Citations
Cadres iframe et frame

Utilisé les régions natives

<header>

Obligatoire pour l’en-tête du document
Contenus d’introduction, peut contenir des titres, de la navigation
Une balise <header> peux être utiliser dans une <section>

<main>

Unique ou une seule balise est visible simultanément

<section>≠<div>

une <div> n'a pas de valeur sémantique
une <section> avec titre aria-label ou aria-labelledby : région déclarée dans les plans des lecteurs d'écran, ne pas en abusé car cela alourdit la page et complexifié inutilement le plan

<nav>

Réservé aux zones de navigation principale et secondaire

Les navigations secondaires comprennent :

menu de sous-rubrique
navigation dans les collections de pages
navigation dans les résultats de recherche
le Fil d'ariane
les liens d’évitement

Ne pas utiliser <nav> pour les listes de lien !

Le bouton "burger" doit être inclus dans l'élément <nav>
La navigation principale peut inclure le bouton burger et être inclus dans la même balise <nav>
Ou en cas de plusieurs <nav>, le bouton doit être dans une balise <nav> seul

<aside>

Optionnel
Contenus indirectement reliés au contenu principal, peuvent être consultés de manière indépendante

<footer>

Obligatoire pour le pied de page du document
Contenus de pied de page, d’articles ou de contenus regroupés par <section>

Titrage du contenu

Hiérarchie cohérente, de h1 à h6
Dans la version 4 du RGAA, la règle est plus souple
- il peux y avoir des saut entre les titre h2 h4
- ne pas avoir de h1 peut etre conforme dans certain cas
- avoir plusieurs h1 c'est conforme aussi
Uniquement les titres nécessaires, un texte ne gras n'est pas un titre
role="heading" aria-level="[level]" Permet de déclarer un titrage aux technologies d'assistance sans utiliser les balises sémantique, à utiliser en cas de conflit avec les équipe SEO par exemple
```
<h1>Accueil…</h1>
    <h2>Actualités…</h2>
        <h2 role="heading" aria-level="3">Où en est-on ?</h2>
        <h2 role="heading" aria-level="3">Ils arrivent bientôt !</h2>
```

Listes

Liste non ordonnée : ul li
Liste ordonnée : ol li
Liste de définition : dl dt/dd
C'est assez lourd pour les lecteurs d'écran, préféré de simples listes sauf pour la réalisation d'un glossaire
Pour une légende d'un schéma, une liste non ordonnée est plus adaptée
Un équivalant aux balises sémantiques :
```
<div role="list">

    <div role="term">Terme à définir…</div>
    <div role="definition"> Définition… </div>

    <div role="term">...</div>
    <div role="definition">...</div>

</div>
```

Si pas de possibilité de faire une liste sémantique :

role="list" équivalent à un ul
role="listitem" équivalent à un li

<div role="list">
    <div role="listitem">Favoriser l’information…</div>
    <div role="listitem">Permettre aux personnes…</div>
</div>

Les suites de liens doivent être structurées avec des listes.

Citations

Citation en ligne <q>, mal restitué par NVDA préféré la citation de bloc

Citation en bloc <blockquote>

<blockquote>
    <p>Aimer, ce n'est pas se regarder l'un l'autre, c'est regarder ensemble dans la même direction.</p>
    <cite>Antoine De Saint-Exupéry</cite>
</blockquote>

Cadres iframe et frame

Contenu pertinent, ajouté un title
```
<iframe title="Publicité"></iframe>
```
Pas de titre dans le cas de cadres techniques (Google Analytics, etc.) mais cacher avec aria-hidden="true".