Comment fournir sémantiquement une légende, un titre ou une étiquette pour une liste en HTML

Question

Quelle est la bonne façon de fournir une légende sémantique pour une liste HTML ? Par exemple, la liste suivante a un « titre »/« légende ».

Fruit

• Pomme
• Poire
• Orange

Comment le mot "fruit" doit-il être traité, de telle sorte qu'il soit associé sémantiquement à la liste elle-même ?

Answer 1

Bien qu'il n'y ait pas de légende ou d'élément de titre structurant votre balisage efficacement peut avoir le même effet. Voici quelques suggestions :

Liste imbriquée

<ul>
    <li>
        Fruit
        <ul>
            <li>Apple</li>
            <li>Pear</li>
            <li>Organge</li>
        </ul>
    </li>
</ul>

---

En-tête avant la liste

<hX>Fruit</hX>
<ul>
    <li>Apple</li>
    <li>Pear</li>
    <li>Orange</li>
</ul>

---

Liste des définitions

<dl>
  <dt>Fruit</dt>
  <dd>Apple</dd>
  <dd>Pear</dd>
  <dd>Orange</dd>
</dl>

Answer 2

Pour vous assurer que les lecteurs d'écran connectent la liste à un en-tête associé, vous pouvez utiliser aria-labelledby connecté à un en-tête avec un id comme ceci :

<h3 id="fruit-id">Fruit</h3>

<ul aria-labelledby="fruit-id">
  <li>Apple</li>
  <li>Pear</li>
  <li>Orange</li>
</ul>

Comme indiqué dans une réponse précédente, assurez-vous que votre niveau de titre suit l'ordre des titres dans votre document.

Answer 3

Il n'y a pas de balise de type légende pour une liste comme celle d'une table. Donc je lui donnerais juste un <Hx> (x en fonction de vos en-têtes précédemment utilisés).