web-dev-qa-db-fra.com

Quelle serait la meilleure méthode pour coder en-tête/titre pour <ul> ou <ol>, comme nous avons <légende> dans <table>?

Quelle serait la meilleure méthode pour coder l'en-tête/le titre de <ul> ou <ol>? Comme si nous avions <caption> dans <table>, et nous ne voulons pas les mettre en gras.

Est-ce correct?

<p>heading</p>
<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

Ou les en-têtes doivent-ils toujours être utilisés?

<h3|4|5|6>heading</h3|4|5|6>
<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>
cssxhtmlaccessibilityscreen-readerswcag
50
Jitendra Vyas

Toujours utiliser des balises de titre pour les titres. L'indice est dans le nom :)

Si vous ne voulez pas qu’ils soient audacieux, changez leur style avec CSS. Par exemple:

HTML:

<h3 class="list-heading">heading</h3>

<ul> 
    <li>list item </li>
    <li>list item </li>
    <li>list item </li>
</ul>

CSS

.list-heading {
    font-weight: normal;
}

En HTML5, vous pouvez associer plus clairement l'en-tête et la liste à l'aide de l'élément <section>. (<section> ne fonctionne pas correctement dans IE 8 et versions antérieures sans JavaScript.)

<section>
    <h1>heading</h1>

    <ul>
        <li>list item </li>
        <li>list item </li>
        <li>list item </li>
    </ul>
</section>

Vous pouvez faire quelque chose de similaire en HTML 4:

<div class="list-with-heading">
    <h3>Heading</h3>

    <ul>
        <li>list item </li>
        <li>list item </li>
        <li>list item </li>
    </ul>
</div>

Puis coiffez ainsi:

.list-with-heading h3 {
    font-weight: normal;
}
37
Paul D. Waite

Bien que ce soit vieux, je le mets à jour pour d'autres qui pourraient trouver cette question lors d'une recherche ultérieure.

@Matt Kelliher:

Utiliser css : before et un attribut data- * pour la liste est une excellente idée, mais peut être légèrement modifié pour être plus accessible aux personnes handicapées:

HTML: 

<ul aria-label="Vehicle Models Available:"> 
    <li>Dodge Shadow</li>
    <li>Ford Focus</li>
    <li>Chevy Lumina</li>
</ul>

CSS: 

ul:before{
    content:attr(aria-label);
    font-size:120%;
    font-weight:bold;
    margin-left:-15px;
}

Cela créera une liste avec le pseudo-élément "en-tête" au-dessus avec du texte défini sur la valeur de l'attribut aria-label. Vous pouvez alors facilement le personnaliser selon vos besoins. 

L'avantage de ceci par rapport à l'utilisation d'un attribut data- * est que aria-label sera lu par les lecteurs d'écran en tant qu '"étiquette" pour la liste, ce qui est sémantiquement correct pour votre utilisation prévue de ces données.

Remarque:IE8 prend en charge: avant les attributs, mais doit utiliser la version à deux points unique (et doit avoir un type de document valide défini). IE7 ne prend pas en charge: avant, mais Modernizer ou Selectivizr devrait résoudre ce problème pour vous. Tous les navigateurs modernes supportent la syntaxe plus ancienne: before, mais préfèrent utiliser la syntaxe :: before. Généralement, la meilleure façon de gérer cela consiste à utiliser une feuille de style externe pour IE7/8 qui utilise l'ancien format et une feuille de style générale utilisant le nouveau format, mais dans la pratique, la plupart utilise simplement l'ancien format à deux points car il navigateur, même si techniquement non valide pour CSS3.

32
Erasmus

J'aime utiliser css :before et un attribut data-* pour la liste

HTML:

<ul data-header="heading"> 
<li>list item </li>
<li>list item </li>
<li>list item </li>
</ul>

CSS:

ul:before{
    content:attr(data-header);
    font-size:120%;
    font-weight:bold;
    margin-left:-15px;
}

Cela créera une liste avec l'en-tête, quel que soit le texte spécifié comme attribut data-header de la liste. Vous pouvez alors facilement le personnaliser selon vos besoins.

8
Matt Kelliher

que diriez-vous de faire de l'en-tête un élément de liste avec différents styles comme

<ul>
 <li class="heading">heading</li>
 <li>list item</li>
 <li>list item</li>
 <li>list item</li>
 <li>list item</li>
</ul>

et le CSS

ul .heading {font-weight: normal; list-style: none;}

en outre, utilisez un CSS de réinitialisation pour définir les marges et les rembourrages directement sur les valeurs ul et li. voici une bonne réinitialisation CSS. une fois que vous avez réinitialisé les marges et les marges, vous pouvez appliquer des marges sur les éléments de liste autres que ceux avec la classe de titre, pour les indenter.

4
pixeltocode

L'utilisation de <caption> serait-elle autorisée?

<ul>
  <caption> Title of List </caption>
  <li> Item 1 </li>
  <li> Item 2 </li>
</ul>
1
phonedog365

h3 est une meilleure solution que h2, h1 ou h6!

  1. Vous devez utiliser un niveau spécifique: si vous êtes dans un h1, utilisez h2, si vous êtes dans un h5, utilisez h6 (si vous êtes dans un h6 ... hum, utilisez strong ou em par exemple) Ce n’est pas une obligation mais une question d’accessibilité ( Ici, la partie verte ).

  2. Vous n'êtes pas obligé de donner le titre à la liste ... parce que cet élément n'existe pas. Le lecteur d'écran n'utilisera donc pas quelque chose de spécial. 

Par conséquent, utiliser Hn est probablement l'une des meilleures solutions, mais sûrement pas un niveau spécifique.

0
Alysko