liste de liste ou pas ...

[adatim]

Bonjour à tous,

une petite question purement technique et qui pourtant a je n'en peux douter une importance considérable sur l'accessibilité.

J'ai besoin de réaliser en quelques sorte une liste de liste du genre

Catégories :

Rubrique 1

Article 1

Article 2

Rubrique 2

a1

a2

a3

etc ...

La question est vaut-il mieux qqch dans le genre :

<ul>
   <li>rub 1</li>

   <ul>
       <li>ss rub 1</li>
       <li>ss rub 2</li>
      <li>ss rub 3</li>
   </ul>

   <li>rub 2</li>
   
    <ul>
         <li>ss rub 1</li>
         <li>ss rub 2</li>
        <li>ss rub 3</li>
   </ul>
</ul>

Ou alors un code dans le genre :

<p><img src="puce.gif" alt="*"> Rubrique 1</p>

   <ul>
       <li>ss rub 1</li>
       <li>ss rub 2</li>
      <li>ss rub 3</li>
   </ul>

<p><img src="puce.gif" alt="*"> Rubrique 2</p>

   <ul>
       <li>ss rub 1</li>
       <li>ss rub 2</li>
      <li>ss rub 3</li>
   </ul>

La remière solution permet de tout mettre sous forme de liste mais avec un navigateur vocal ne va-t-on pas s'y perdre ....

La seconde permet d'éviter ses imbrications mais nécessite des techniques moins conventionnelles ...

Alors bien que je pense qu'aucune des deux ne soit forcément meilleure et que le mieux serait peut-être de changer le système j'aimerais votre point de vue.

Lionel

[lupucide]

<dl>
<dt>rub 1</dt>
<dd>
<ul>
<li><a href="#">lien</a></li>
<li><a href="#">lien</a></li>
<li><a href="#">lien</a></li>
</ul>
</dd>
</dl>

<dl>
<dt>rub 2</dt>
<dd>
<ul>
<li><a href="#">lien</a></li>
<li><a href="#">lien</a></li>
<li><a href="#">lien</a></li>
</ul>
</dd>
</dl>

Pourquoi pas ?

Modifié 7 Mars 2005 par lupucide

[Perrine]

Bonjour,

La question entre ul,li et dt,dd a été longtemps discutée sur divers forums. Les discussions sont toujours intéressantes mais au final, il semblerait difficile de tomber d'accord.

J'opte pour le couple ul, li et dans ton cas adatim, je prendrai la première solution.

L'utilisation des <p> n'est pas satisfaisante puisque le titre de la rubrique n'est pas un paragraphe.

Tu as aussi le choic d'utiliser des hn :

<hn>rub 1</hn>
  <ul>
      <li>ss rub 1</li>
      <li>ss rub 2</li>
      <li>ss rub 3</li>
  </ul>

Mais perso, je ne suis pas fan pour utiliser des hn dans une liste de menu puisque je considère que les titres de ma page se trouvent dans le contenu.

Modifié 7 Mars 2005 par Azon

[Sebastien]

Selon le w3c "A heading element briefly describes the topic of the section it introduces" càd qu'une balise hn décrit brievement le thême de la section qu'elle introduit (et pas seulement un titre de page)

Ce qui est ici parfaitement le cas : Un hn suivi d'une liste est adapté

[Perrine]

Oui, mais ça me plait pas du tout comme solution.

Je ne vois pas en quoi l'utilisation de listes imbriquées est moins bonne que le <hn>.

Un menu reste une liste de liens. A la limite, titrer le menu avec un <hn> ... mais titrer toutes les rubriques, je trouve que ça noie l'information au détriment du contenu vraiment intéressant : le texte présenté dans la page.

Modifié 7 Mars 2005 par Azon

[Sebastien]

Effectivement, ca se discute...

Mon avis : comme tu le dis justement, un menu est une liste de liens. Il m'apparait donc logique que les list-items ne contiennent que des liens. Rubriques et liens ne sont pas de même nature, je favorise donc un balisage différent plutot qu'une imbrication de listes.

[adatim]

Le soucis des listes imbriquées à mon avis c'est qu'on risque rapidement de ne plus savoir où on se trouve si c'est dans la première liste ou dans la seconde alors qu'effectivement les hn ca peut être une bonne idée mais le pb c'est que dans le cas des hn je me trouve obligé de mettre une image à côté ...

Et là on retrouve un problème de contenu / mise en page puisque les images n'auraient pas lieu d'être .... ou alors avec des petits alt="*" ?

[Sebastien]

Tu peux mettre des images de décorations (puces) juste par CSS, en combinant une image en background alignée à gauche et un padding-left de la largeur de ton image pour décaler le texte vers la droite.

Contenu et mise en page restent alors séparés

[adatim]

Effectivement je n'avais pas pensé à cette option là faire juste une classe liste pour les titres de rubriques ...

Même s'il est vrai que des hn à chaque rubriques ne sont peut-être pas ce qu'il y a de plus adapté puisqu'on va peut-être s'y perdre avec le contenu de la page mais je pense que le risque à prendre est moins élevé que les listes de listes ...

[Monique]

Bonjour,

Il est difficile de trancher...

En ce qui concerne les utilisateurs de synthèse vocale, il faut toujours garder à l'esprit une de leur plus grande difficulté : être obligé de se forger l'organisation d'une page uniquement sur base de l'annonce des différents éléments qui la compose.

L'important est donc de choisir une solution permettant d'identifier le menu en tant que tel, et de conserver la même structure sur toutes les pages.

J'ai tendance à privilégier les listes, éventuellement imbriquées... à condition qu'il n'y ait pas trop de niveaux (un menu ne doit pas être le plan du site).

Si le menu comprend des rubriques nettement différenciées par leur contenu, il me semble que l'utilisation d'un élément hx peut s'avérer utile pour y accéder rapidement.