Menus et accessibilité

[Kazé]

Bonsoir,

je suis en train de faire quelques pages web pour présenter mes extensions Nvu, et je me posais une question un peu bête : pour les menus, d'un point de vue accessibilité, vaut-il mieux :

• utiliser des listes imbriquées, du style :

  Code : Tout sélectionner

  <ul>
      <li>premier item
          <ul>
              <li>sous-item A</li>
              <li>sous-item B</li>
              <li>sous-item C</li>
          </ul>
      </li>
      <li>deuxième item
          <ul>
              <li>sous-item A</li>
              <li>sous-item B</li>
              <li>sous-item C</li>
          </ul>
      </li>
  </ul>

• ou utiliser des titres <Hn> pour les menus principaux, du genre :

  Code : Tout sélectionner

  <h2>premier item</h2>
  <ul>
      <li>sous-item A</li>
      <li>sous-item B</li>
      <li>sous-item C</li>
  </ul>
  <h2>deuxième item</h2>
  <ul>
      <li>sous-item A</li>
      <li>sous-item B</li>
      <li>sous-item C</li>
  </ul>

Le gros avantage de la première méthode, c'est évidemment de pouvoir passer d'un menu vertical à un menu horizontal avec une feuille de style alternative (A List Apart, Listamatic, etc).

Pourtant, je vois beaucoup plus souvent la deuxième méthode sur le web. Est-ce parceque la feuille de style est plus simple à écrire, ou bien y a-t'il une question d'accessibilité qui fait qu'on préfère utiliser des titres <Hn> pour les menus ?

Merci d'éclairer ma lanterne...

[Monique]

Bonjour,

La question est loin d'être bête
Elle a d'ailleurs déjà suscité bien des débats et n'a toujours pas de réponse tranchée.
Le problème d'un menu, c'est qu'il ne fait pas réellement partie du contenu d'une page (ou d'un site), il sert seulement à présenter les différentes parties de ce contenu et à les atteindre.

Selon le W3C, "un élément de titre décrit brièvement le sujet de la section qu'il introduit". L'utilisateur d'une synthèse vocale consulte la liste des titres et sous-titres pour se faire une idée de la structure du contenu d'une page. Comment pourrait-il savoir que le contenu de h2 est un menu et non du texte ? Pour celui qui voit, un menu est identifié facilement comme tel où qu'il soit dans la page. Il n'en va pas de même pour un non-voyant.
Personnellement, je ne suis pas partisan de l'utilisation des titres pour l'organisation des sous-menus.

Un menu est une liste de liens, l'utilisation de <ul> est donc tout indiquée.
Il faut cependant éviter trop de niveaux de listes imbriquées, dans lesquelles on se pert vite avec une synthèse vocale. Il est préférable de les séparer en plusieurs listes.

[calimo]

Et quid d'un

Code : Tout sélectionner

<h2>Menu</h2>
<ul>
    <li><h3>premier item</h3>
        <ul>
            <li>sous-item A</li>
            <li>sous-item B</li>
            <li>sous-item C</li>
        </ul>
    </li>
    <li><h3>deuxième item</h3>
        <ul>
            <li>sous-item A</li>
            <li>sous-item B</li>
            <li>sous-item C</li>
        </ul>
    </li>
</ul>

(Il y a deux chose, les <hx> à l'intérieur même des li et un hx de niveau supérieur pour signaler le menu)

Est-ce aussi problématique ? Je vois l'extension DocumentMap dans laquelle ça irait bien, mais est-ce universel ?

[Monique]

Lors de l'affichage de la liste des titres par une synthèse vocale, ils sont présentés (par défaut) dans l'ordre de leur écriture dans le code en annonçant leur niveau.
La synthèse ne distingue évidemment pas la zone graphique où ils se situent, bloc menu ou bloc contenu.
Il faut donc bien choisir le niveau de titre pour qu'il n'y ait pas confusion possible entre les deux zones (pas de <h3> dans le menu et dans le contenu, par exemple).

Dans ton exemple <h2>Menu</h2> annonce clairement la nature de ce qui suit, les <h3> pour les items beaucoup moins.

[Benoit]

Mais ça fait implicitement partie du menu puisqu'il n'y a pas eu de titre de second niveau depuis, non ?

[Kazé]

Un menu est une liste de liens, l'utilisation de <ul> est donc tout indiquée.
Il faut cependant éviter trop de niveaux de listes imbriquées, dans lesquelles on se pert vite avec une synthèse vocale. Il est préférable de les séparer en plusieurs listes.

Merci pour ce sage conseil

[Monique]

Mais ça fait implicitement partie du menu puisqu'il n'y a pas eu de titre de second niveau depuis, non ?

Implicitement, oui.
J'imagine que cela ne posera pas de gros problème à un utilisateur non-voyant expérimenté. Il faut seulement garder à l'esprit que l'écoute de cette liste de titres et sous-titres est le seul moyen de se faire une idée de l'organisation de la page... un exercice qui n'est vraiment pas facile.

Cela dit, il vaut mieux des <hx> pour structurer menu et contenu que des <div class="titrex"> comme on le voit bien trop souvent