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 donnez un contexte essentiel aux personnes utilisant des technologies d'assistance (TA), telles que des 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 au sein du contenu.
Lorsque vous utilisez des éléments HTML sémantiques, la signification inhérente à chaque élément est transmise à l'arborescence d'accessibilité et utilisée par la requête de traduction, ce qui donne plus de sens au contenu que les éléments non sémantiques. Dans certains cas, vous devez ajouter des attributs ARIA pour créer 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 couramment utilisés et essentiels à l'accessibilité numérique, il existe certainement d'autres éléments et facteurs environnementaux à prendre en compte lorsque vous construisez la structure de votre site Web ou application. Ces exemples sont une introduction au sujet plutôt que des exemples exhaustifs.
Points de repère
Les utilisateurs de TA s'appuient sur des éléments structurels pour leur donner des informations sur la mise en page globale de la page. Lorsque vous coupez de vastes zones de contenu, vous pouvez utiliser des rôles de repère ARIA ou les nouveaux éléments de repère HTML pour ajouter du contexte structurel à votre page.
Ils garantissent que le contenu se trouve dans des régions navigables. Nous vous recommandons de fournir au moins un point de repère par page.
Certaines ressources suggèrent de combiner des points de repère ARIA et HTML pour fournir une meilleure couverture de TA. Bien que ce type de redondance ne pose pas de problèmes pour vos utilisateurs, testez les schémas à l'aide d'un lecteur d'écran pour vous en assurer. En cas de doute, il est préférable de n'utiliser par défaut que les éléments HTML les plus récents, car la compatibilité avec les navigateurs est particulièrement élevée.
Comparons les éléments de repère HTML mappés avec leurs rôles de repère ARIA équivalents.
| Élément de repère HTML | Rôle de repère ARIA |
|---|---|
<header> |
bannière |
<aside> |
complémentaire |
<footer> |
informations sur le contenu |
<nav>
|
navigation |
<main> |
principal |
<form> 1 |
ce formulaire |
<section> 1 |
region |
Comparons 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>
Headings
Lorsqu'ils sont implémentés correctement, les niveaux d'en-tête HTML forment un aperçu succinct du contenu global de la page.
Il y a six niveaux d'en-tête que nous pouvons utiliser. Le <h1> de niveau de titre 1 est utilisé pour les informations les plus importantes et les plus importantes de la page. Il passe progressivement au niveau de titre 6 <h6> pour les informations les plus basses et les moins importantes.
L'ordre des niveaux des titres est important. Idéalement, vous ne devez pas ignorer les niveaux de titre. Par exemple, vous devez commencer une section avec un élément <h1> et la suivre immédiatement avec un élément <h5>. À la place, vous devez passer à <h5> dans l'ordre. L'ordre de titre est particulièrement important pour les utilisateurs de TA, car il s'agit de l'un de leurs principaux moyens de naviguer dans le contenu.
Pour vous aider à respecter la structure et l'ordre sémantiques appropriés pour les en-têtes, envisagez de dissocier vos styles CSS des niveaux de titre. Vous bénéficiez ainsi de plus de flexibilité pour les styles de titre, tout en conservant l'ordre au niveau du titre. Il est essentiel que vous n'utilisiez pas uniquement les styles pour créer des en-têtes, car ils ne sont pas considérés par les TA comme des en-têtes.
Lorsque nous falsifions les en-têtes, la structure appropriée n'est pas transmise aux utilisateurs de TA.
Les titres sont également utiles pour les personnes souffrant de troubles cognitifs et de déficit d'attention. Il est important que le contenu de l'en-tête ait un sens 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 semblables les uns aux autres en leur donnant un sens inhérent, un peu comme votre liste de courses ou cette liste de tâches sans fin que vous ignorez sans cesse.
Il existe trois types de listes HTML:
L'élément de liste <li> permet de représenter un élément dans une liste ordonnée ou non, tandis que le terme de description <dt> et les éléments de définition <dd> se trouvent dans la liste de descriptions.
S'ils sont correctement programmés, ces éléments peuvent informer les utilisateurs non voyants de la structure de la liste. Lorsqu'une TA rencontre une liste sémantique, elle peut indiquer à l'utilisateur le nom de la liste et le nombre d'éléments qu'elle contient. Au fur et à mesure que l'utilisateur navigue dans la liste, l'AT lira chaque élément de la liste à voix haute et indiquera quel numéro il se trouve dans la liste (élément 1 sur cinq, élément 2 sur cinq, etc.).
Le regroupement d'éléments dans des listes aide également les personnes voyantes qui souffrent de troubles cognitifs et de l'attention, ainsi que celles souffrant de troubles de la lecture. En effet, le contenu des listes est généralement stylisé pour avoir plus d'espaces blancs et que le contenu est pertinent.
<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.
Selon l'objectif de la table, vous utiliserez différents éléments structurels sémantiques. La structure des tables peut être très complexe, mais lorsque vous respectez les règles sémantiques de base, elles sont relativement accessibles sans beaucoup d'intervention.
Mise en page
Aux débuts d'Internet, les tables de mise en page étaient le principal élément HTML utilisé pour créer des structures visuelles. Aujourd'hui, nous utilisons une combinaison d'éléments sémantiques et non sémantiques, tels que des <div> et des points de repère, pour créer des mises en page.
Bien que la création de tables de mise en page soit révolue, il arrive que des tables de mise en page soient encore utilisées, par exemple dans les e-mails visuellement attrayants, les newsletters et les publicités. Dans ce cas, les tables utilisées 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 AT avec le rôle de présentation ARIA ou l'état aria caché.
<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 à une table de mise en page, qui doit être masquée pour les utilisateurs AT, une table de données et tous ses éléments doivent être exposés. La structure des tables de données est essentielle pour transmettre des informations simples et complexes aux utilisateurs.
Lorsqu'un tableau est correctement structuré, des relations se créent entre les lignes et les en-têtes de colonne, et les données de la table. Lorsqu'elles sont mal structurées, l'utilisateur doit déchiffrer le sens et le contexte des informations de la table.
Selon la complexité de la table, la création de relations via le code s'effectue de différentes manières. Pour rendre un tableau accessible, la première étape consiste à baliser les cellules d'en-tête avec <th> et les cellules de données avec des éléments <td>.
Pour les tableaux plus complexes, vous devrez peut-être utiliser d'autres éléments de tableau HTML tels que <rowgroup>, <colgroup>, <caption> et scope pour transmettre un 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>