Structure du contenu

L'un des aspects les plus importants de l'accessibilité numérique de la page. Lorsque vous créez votre site Web ou votre application éléments structurels en ne s'appuyant que sur les styles, vous donnez un contexte critique aux personnes utilisant technologies (TA), 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 à chaque élément est transmise à l'arborescence d'accessibilité et utilisés par la TA, donnant plus de sens au contenu que les éléments non sémantiques. Vous devrez peut-être ajouter des attributs ARIA supplémentaires pour créer ou pour améliorer l'expérience utilisateur globale, mais dans la plupart l'un des plus de 100 éléments HTML devraient fonctionner seuls.

Bien que ce module se concentre sur les éléments structurels les plus utilisés, à l'accessibilité numérique, il y a certainement d'autres éléments et facteurs environnementaux à prendre en compte lors de l’intégration de la structure à votre site Web ou l'application. Ces exemples ne sont pas exhaustifs, mais constituent une introduction au sujet.

Points de repère

Les utilisateurs de TA s'appuient sur des éléments structurels pour leur donner des informations sur le la mise en page globale de la page. Lorsque vous segmentez de grandes zones de contenu, vous pouvez utilisez des rôles de point de repère ARIA ou des éléments de point de repère HTML plus récents pour ajouter un contexte structurel à votre page.

Les points de repère garantissent que le contenu se trouve dans des zones navigables. Nous vous recommandons de fournir au moins un point de repère par page.

Certaines ressources suggèrent de combiner les points de repère ARIA et HTML. pour offrir une meilleure couverture des TA. Bien que ce type de redondance ne devienne pas causer des problèmes à vos utilisateurs, testez les schémas à l'aide d'un lecteur d'écran pour en être sûr. En cas de doute, mieux vaut n'utiliser par défaut que la version HTML la plus récente éléments emblématiques, comme le compatibilité avec les navigateurs, robustes.

Comparons les points de repère HTML en tant que mappés sur leur et les rôles de point de repère ARIA correspondants.

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 correctement implémentés, les niveaux de titres HTML qui forment un résumé succinct du contenu global de la page.

Il existe six niveaux de titre que nous pouvons utiliser. Le niveau de titre 1 <h1> est utilisé pour les informations les plus importantes et les plus importantes de la page, en les déplaçant progressivement vers titre de niveau 6 <h6> pour les informations les plus basses et les moins importantes.

L'ordre des niveaux de titre est important. Idéalement, vous ne sauterez pas les niveaux de titre, par exemple, commencer une section par le signe <h1> et ajouter immédiatement en la suivant avec une <h5>. Vous devez passer à <h5> dans commande. L'ordre des titres est particulièrement important pour les utilisateurs TA car c'est l'un de leurs principaux moyens de naviguer dans les contenus.

Pour vous aider à respecter la structure sémantique et l'ordre appropriés pour les en-têtes, pensez à dissocier vos styles CSS des niveaux de titre. Cela vous permet Plus de flexibilité dans les styles de titre tout en conservant l'ordre au niveau des titres. Il est essentiel que vous n'utilisiez pas de styles seuls pour créer des titres, car ils ne sont pas vus par les TA comme titre.

Lorsque nous falsifions les en-têtes, la structure appropriée n'est pas transmise aux utilisateurs TA.

Les titres sont également utiles pour les personnes souffrant de déficit cognitif ou d'attention. les troubles du sommeil. Il est important que le contenu du titre 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

Listes HTML sont un moyen de regrouper sémantiquement des éléments similaires les uns aux autres, ce qui leur donne ce qui veut dire, un peu comme votre liste de courses ou cette liste interminable de tâches que vous continuer à ignorer.

Il existe trois types de listes HTML:

• a commandé <ol>
• <ul> non ordonnée
• description <dl>

Élément de liste <li> est utilisé pour représenter un élément dans une liste numérotée ou non, tandis que l'élément terme descriptif <dt> et définition Les éléments <dd> peuvent figure dans la liste des descriptions.

S'ils sont correctement programmés, ces éléments peuvent informer les utilisateurs non voyants des TA la structure visible 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. En tant qu'utilisateur parcourt la liste, le TA lit chaque élément de la liste à voix haute et indique son numéro dans la liste (élément 1 sur 5, élément 2 sur 5, etc.).

Le regroupement d'éléments dans des listes aide également les personnes voyantes qui ont des capacités cognitives et les troubles de l'attention et les personnes souffrant de troubles de la lecture, car le contenu des listes est généralement mis en forme pour avoir plus d'espaces blancs visuels et le contenu est précis.

<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érentes méthodes éléments. Les tableaux peuvent être très complexes en structure, mais lorsque vous vous en tenez à les règles sémantiques de base, elles sont assez accessibles sans nécessiter beaucoup d'intervention.

Mise en page

Dans les débuts d'Internet, les tableaux de mise en page étaient l'élément HTML principal utilisées pour construire des structures visuelles. Aujourd'hui, nous utilisons un mélange de sémantiques et des éléments non sémantiques tels que des <div> et des points de repère pour créer des mises en page.

Bien que l'époque de la création de tableaux de mise en page soit presque révolue, il y a des moments où des tableaux de mise en page sont toujours utilisés, par exemple dans les e-mails visuellement attrayants, les newsletters et publicitaires. Dans ce cas, les tables utilisées uniquement pour la mise en page ne doivent pas utilisent des éléments structurels qui véhiculent des relations et ajoutent du contexte, comme <th> ou <caption>.

Les tableaux de mise en page doivent également être masqués pour les utilisateurs AT avec l'ARIA rôle présentation ou é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 AT, table de données et tous ses éléments doivent être exposées. La structure des tables de données est essentielle pour transmettre des et complexes aux utilisateurs.

Lorsqu'un tableau est structuré correctement, des relations se créent entre la colonne les en-têtes et les lignes et les données du tableau. Si la structure est incorrecte, il reste à l'utilisateur de déchiffrer la signification et le contexte des informations contenues dans la tableau.

Selon la complexité du tableau, former des relations via le code est accompli de différentes manières. La première étape pour rendre un tableau accessible est pour baliser les cellules d’en-tête avec <th> et 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 à transmettre le sens et les 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>