Structure du contenu

L'un des aspects les plus importants de l'accessibilité numérique est la structure sous-jacente de la page. Lorsque vous créez votre site Web ou votre application à l'aide d'éléments structurels au lieu de vous appuyer uniquement sur des styles, vous fournissez un contexte essentiel aux personnes qui utilisent des technologies d'assistance (AT), comme les lecteurs d'écran.

Les éléments structurels servent de contour au contenu à l'écran, mais ils servent également de points d'ancrage pour faciliter la navigation dans le contenu.

Lorsque vous utilisez des éléments HTML sémantiques, la signification inhérente de chaque élément est transmise à l'arborescence d'accessibilité et utilisée par l'AT, ce qui donne plus de sens au contenu que les éléments non sémantiques. Il peut arriver que vous deviez ajouter des attributs ARIA supplémentaires pour établir des relations ou améliorer l'expérience utilisateur globale. Toutefois, dans la plupart des cas, l'un des plus de 100 éléments HTML disponibles devrait fonctionner assez bien seul.

Bien que ce module se concentre sur les éléments structurels les plus utilisés, qui sont essentiels à l'accessibilité numérique, il existe certainement d'autres éléments et facteurs environnementaux à prendre en compte lors de la création de la structure de votre site Web ou de votre application. Ces exemples ne sont qu'une introduction au sujet, et ne sont pas exhaustifs.

Points de repère

Les utilisateurs d'AT s'appuient sur des éléments structurels pour obtenir des informations sur la mise en page globale de la page. Lorsque vous divisez de grandes régions de contenu, vous pouvez utiliser des rôles de repère ARIA ou les nouveaux éléments de repère HTML pour ajouter un contexte structurel à votre page.

Les repères permettent de s'assurer que le contenu se trouve dans des régions navigables. Nous vous recommandons de fournir au moins un repère par page.

Certaines ressources suggèrent de combiner les repères ARIA et HTML pour améliorer la couverture des technologies d'assistance. Bien que ce type de redondance ne devrait pas poser de problème à vos utilisateurs, testez les modèles à l'aide d'un lecteur d'écran pour en être sûr. En cas de doute, il est préférable d'utiliser par défaut uniquement les éléments de repère HTML les plus récents, car la compatibilité avec les navigateurs est très robuste.

Comparons les éléments de repère HTML tels qu'ils sont mappés à leurs rôles de repère ARIA correspondants.

Comparez maintenant des exemples de structure de contenu accessible.

<div>
    <div>...</div>
</div>

<div>
    <p>Stamp collecting, also known as philately, is
    the study of postage stamps, stamped envelopes,
    postmarks, postcards, and other materials relating
    to postal delivery.</p>
</div>

<div>
<p>© 2022 - Stamps R Awesome</p>
</div>

<header>
    <nav>...</nav>
</header>
<main>
    <section aria-label="Introduction to stamp collecting">
    <p>Stamp collecting, also known as philately, is
    the study of postage stamps, stamped envelopes,
    postmarks, postcards, and other materials relating
    to postal delivery.</p>
    </section>
</main>
<footer>
<p>© 2022 - Stamps R Awesome</p>
</footer>

Titres

Lorsqu'ils sont implémentés correctement, les niveaux d'en-tête HTML constituent un résumé succinct du contenu global de la page.

Vous pouvez utiliser six niveaux de titres. Le niveau d'en-tête 1 <h1> est utilisé pour les informations les plus importantes et les plus élevées de la page, et passe progressivement au niveau d'en-tête 6 <h6> pour les informations les moins importantes et les moins élevées.

La séquence des niveaux de titres est importante. Dans l'idéal, vous ne devez pas sauter de niveaux de titres, par exemple, en commençant une section par un <h1> et en la suivant immédiatement par un <h5>. À la place, vous devez passer à l'<h5> dans l'ordre. L'ordre des niveaux de titres est particulièrement important pour les utilisateurs d'AT, car c'est l'un de leurs principaux moyens de parcourir le contenu.

Pour vous aider à respecter la structure sémantique et l'ordre appropriés pour les titres, envisagez de dissocier vos styles CSS des niveaux de titres. Vous pouvez ainsi choisir plus librement les styles de titres tout en conservant l'ordre des niveaux de titres. Il est essentiel de ne pas utiliser uniquement des styles pour créer des titres, car ils ne sont pas considérés comme des titres par AT.

Lorsque nous créons de faux titres, la structure appropriée n'est pas transmise aux utilisateurs d'AT.

Les titres sont également utiles pour les personnes souffrant de troubles cognitifs et de déficit de l'attention. Il est important de rendre le contenu des titres pertinent pour les aider à comprendre ce qui est le plus important sur la page.

<div>
    <h3>Stamps</h3>
    <p>Stamp collecting, also known as philately, is the study of
  postage stamps, stamped envelopes, postmarks, postcards, and
  other materials relating to postal delivery.</p>
</div>

<div>
    <h3>How do I start a stamp collection?</h3>
  <h2>Equipment you will need</h2>
    <h4>...</h4>
  <h2>How to acquire stamps</h2>
    <h4>...</h4>
  <h2>Organizations you can join</h2>
    <h4>...</h4>
</div>

<header>
  <h1>Stamp collecting</h1>
</header>
<main>
    <section aria-label="Introduction to stamp collecting">
        <h2>What is stamp collecting?</h2>
        <p>Stamp collecting, also known as philately, is the study of
    postage stamps, stamped envelopes, postmarks, postcards, and
    other materials relating to postal delivery.</p>
    </section>

    <section aria-label="Start a stamp collection">
        <h2>How do I start a stamp collection?</h2>
    <h3>Required equiment</h3>
    <p>...</p>

    <h3>How to acquire stamps</h3>
    <p>...</p>

    <h3>Organizations you can join</h3>
        <p>...</p>
    </section>
</main>

Listes

Les listes HTML permettent de regrouper sémantiquement des éléments similaires, en leur donnant un sens inhérent, comme votre liste de courses ou cette liste de tâches sans fin que vous continuez d'ignorer.

Il existe trois types de listes HTML:

• Commande : <ol>
• unordered <ul>
• description <dl>

L'élément <li> est utilisé pour représenter un élément dans une liste ordonnée ou non, tandis que les éléments <dt> et <dd> sont disponibles dans la liste de description.

Lorsqu'ils sont correctement programmés, ces éléments peuvent informer les utilisateurs d'AT non voyants sur la structure visible de la liste. Lorsqu'une AT rencontre une liste sémantique, elle peut indiquer à l'utilisateur le nom de la liste et le nombre d'éléments qu'elle contient. Lorsque l'utilisateur parcourt la liste, l'AT lit à voix haute chaque élément de la liste et indique son numéro dans la liste (élément 1 sur 5, élément 2 sur 5, etc.).

Regrouper des éléments dans des listes aide également les personnes voyantes qui souffrent de troubles cognitifs et de troubles de l'attention, ainsi que celles qui ont des troubles de la lecture, car le contenu des listes est généralement conçu pour avoir plus d'espace négatif visuel et est concis.

<div>
  <p>How do I start a stamp collection?</p>
  <p>Equipment you will need</p>
    <div>
      <p>Small tongs with rounded tips</p>
      <p>Stamp hinges</p>
      <p>Stockbook or albumn</p>
      <p>Magnifying glass</p>
      <p>Stamps</p>
    </div>
</div>

<div>
  <h1>How do I start a stamp collection?</h1>
  <h2>Equipment you will need</h2>
  <ol>
    <li>Small tongs with rounded tips</li>
    <li>Stamp hinges</li>
    <li>Stockbook or albumn</li>
    <li>Magnifying glass</li>
    <li>Stamps</li>
  </ol>
</div>

Tables

En HTML, les tableaux sont généralement utilisés pour organiser les données ou la mise en page.

En fonction de l'objectif du tableau, vous utiliserez différents éléments structurels sémantiques. La structure des tableaux peut être très complexe, mais si vous respectez les règles sémantiques de base, ils sont assez accessibles sans trop d'intervention.

Mise en page

Au début d'Internet, les tables de mise en page étaient l'élément HTML principal utilisé pour créer des structures visuelles. Aujourd'hui, nous utilisons un mélange d'éléments sémantiques et non sémantiques tels que des <div> et des repères pour créer des mises en page.

Bien que la création de tableaux de mise en page soit presque révolue, il arrive que des tableaux de mise en page soient encore utilisés, par exemple dans des e-mails, des newsletters et des annonces visuellement riches. Dans ce cas, les tableaux utilisés uniquement pour la mise en page ne doivent pas utiliser d'éléments structurels qui transmettent des relations et ajoutent du contexte, tels que <th> ou <caption>.

Les tables de mise en page doivent également être masquées pour les utilisateurs d'AT avec le rôle de présentation ARIA ou l'état aria-hidden.

<table>
  <caption>My stamp collection</caption>
  <tr>
    <th>[Stamp Image 1]</th>
    <th>[Stamp Image 2]</th>
    <th>[Stamp Image 3]</th>
  </tr>
</table>

<table role="presentation">
  <tr>
    <td>[Stamp Image 1]</td>
    <td>[Stamp Image 2]</td>
    <td>[Stamp Image 3]</td>
  </tr>
</table>

Données

Contrairement à un tableau de mise en page, qui doit être masqué pour les utilisateurs d'AT, un tableau de données et tous ses éléments doivent être exposés. La structure des tableaux de données est essentielle pour transmettre des informations simples et complexes aux utilisateurs.

Lorsqu'une table est structurée correctement, des relations se créent entre les en-têtes de colonnes et les lignes, ainsi que les données de la table. Lorsqu'elle n'est pas structurée correctement, l'utilisateur doit déchiffrer le sens et le contexte des informations du tableau.

Selon la complexité de la table, la création de relations via du code se fait de différentes manières. La première étape pour rendre un tableau accessible consiste à marquer les cellules d'en-tête avec des éléments <th> et les cellules de données avec des éléments <td>.

Pour les tableaux plus complexes, vous devrez peut-être utiliser des éléments de tableau HTML supplémentaires tels que <rowgroup>, <colgroup>, <caption> et scope pour transmettre du sens et des relations.

<table>
  <tr>
    <td>Animal</td>
    <td>Year</td>
    <td>Condition</td>
  </tr>
  <tr>
    <td>Bird</td>
    <td>1947</td>
    <td>Fair</td>
  </tr>
  <tr>
    <td>Lion</td>
    <td>1982</td>
    <td>Good</td>
  </tr>
  <tr>
    <td>Horse</td>
    <td>1978</td>
    <td>Mint</td>
  </tr>
</table>

<table>
  <caption>My stamp collection</caption>
  <tr>
    <th>Animal</th>
    <th>Year</th>
    <th>Condition</th>
  </tr>
  <tr>
    <td>Bird</td>
    <td>1947</td>
    <td>Fair</td>
  </tr>
  <tr>
    <td>Lion</td>
    <td>1982</td>
    <td>Good</td>
  </tr>
  <tr>
    <td>Horse</td>
    <td>1978</td>
    <td>Mint</td>
  </tr>
</table>