Accessibilité et longueur des listes ul

Bonjour,

Une de mes pages présente une très longue liste à puces. J'aimerais faire quelque chose pour éviter trop de scroll vertical et la passer sur 2 ou 3 colonnes.

Existe-t-il une alternative à rompre la liste en 2 ou 3 segments, et comment cela sera-t-il interprêté par les lecteurs non visuels ?

Merci

fantomas a écrit :

Existe-t-il une alternative à rompre la liste en 2 ou 3 segments, et comment cela sera-t-il interprêté par les lecteurs non visuels ?

Sans savoir ce qu'il y a dans ta liste, ca va être dur de répondre précisement.
Pour le rendu à l'oral les 3 colonnes vont être lues l'une aprés l'autre de haut en bas. Si tes colonnes ne sont pas assez distinctes tu risques d'avoir des problèmes car la lecture naturelle allant de gauche à droite, l'ordre alphabétique ne sera pas forcemment respecté dans un cas ou dans l'autre (visuel ou oral).

Si tu cherches un moyen uniquement CSS de faire "couler" un contenu (liste ou pas) dans plusieurs colonnes successives... Il n'y en a pas.

Tu trouveras dans un article d' A List Apart du printemps dernier une technique mi-CSS mi-HTML mi-bidouille et mi-soupe de tags assez affreuse pour forcer le multi-colonnage...

Si tu tiens à ce colonnage, la meilleure solution est de segmenter ta liste en 3 listes successives. De préference avec une coupure logique entre elles, ce qui te permettrait de titrer chaque segment, d'où un gain très net de structuration de l'information et d'accessibilité.

Mais une longue liste à scroller n'est pas un problème ergonomique majeur (enfin, si longue ne signifie pas kilométrique, auquel cas le colonnage sera un cautère sur une jambe de bois )

Du point de vue accessibilité, si tu penses aux lecteurs d'écrans : ils lisent de toutes façon le contenu dans l'ordre brut du HTML. Que ta liste soit en un bloc ou en trois ne changera donc rien de ce point de vue. En revanche, il ne sera peut-être pas évident de "saisir" à l'écoute qu'il y a 3 morceaux. Intuitivement, on ne cherchera qu'un seul bloc.

Il s'agit d'une liste de pays qui se divise en sous-listes de villes. En voici un morceau :

<ul>
		<li><a href="meteo-plage-2.htm" class="temps">AFRIQUE DU SUD</a>
<ul>
<li><a href="meteo-plage-2-2513.htm" class="temps">Durban</li>
<li><a href="meteo-plage-2-2514.htm" class="temps">Le Cap</li></ul>
</li>
<li><a href="meteo-plage-5.htm" class="temps">ALLEMAGNE</a>
<ul>
<li><a href="meteo-plage-5-2396.htm" class="temps">Sylt</li></ul>
</li>
<li><a href="meteo-plage-13.htm" class="temps">ARGENTINE</a>
<ul>
<li><a href="meteo-plage-13-2534.htm" class="temps">Mar del Plata</li></ul>
</li>
<li><a href="meteo-plage-16.htm" class="temps">AUSTRALIE</a>
<ul>
<li><a href="meteo-plage-16-2548.htm" class="temps">Adélaide</li>
<li><a href="meteo-plage-16-2546.htm" class="temps">Brisbane</li>
<li><a href="meteo-plage-16-2545.htm" class="temps">Cairns</li>
<li><a href="meteo-plage-16-2568.htm" class="temps">Gold Coast</li>
<li><a href="meteo-plage-16-2547.htm" class="temps">Perth</li></ul>
</li>
<li><a href="meteo-plage-19.htm" class="temps">BAHAMAS</a>
<ul>
<li><a href="meteo-plage-19-2520.htm" class="temps">Nassau</li></ul>
</li>
<li><a href="meteo-plage-24.htm" class="temps">BELGIQUE</a>
<ul>
<li><a href="meteo-plage-24-2423.htm" class="temps">Knokke-Heist</li>
<li><a href="meteo-plage-24-2422.htm" class="temps">Ostende</li>
<li><a href="meteo-plage-24-2357.htm" class="temps">Zeebrugge</li></ul>
</li>
<li><a href="meteo-plage-33.htm" class="temps">BRÉSIL</a>
<ul>
<li><a href="meteo-plage-33-2554.htm" class="temps">Belem</li>
<li><a href="meteo-plage-33-2532.htm" class="temps">Recife</li>
<li><a href="meteo-plage-33-2533.htm" class="temps">Rio de Janeiro</li>
<li><a href="meteo-plage-33-2555.htm" class="temps">Salvador Bahia</li></ul>
...

Tu pourrais scinder logiquement par continent par exemple si le critère et géographique, ou par tout autre moyen si le critère est démographique, richesse etc.

Tu pourrais ainsi profiter de cette séparation logique pour afficher le tout en colonnes

Petit point annexe, écrit les pays en minuscule et utilise ensuite les CSS pour l'affichage en majuscule

Pour l'accessibilité, et le bénéfice d'une structure plus souple et plus maniable, je romprais carrément la liste en autant de blocs titrés qu'il y a de pays.

En complément, deux possibilités supplémentaires :
- répartir la liste sur plusieurs pages plutôt que plusieurs colonnes, qui rompent l'ordre alphabétique haut-bas, et gênent certains lecteurs
- utiliser javascript pour n'afficher que les titres au chargement de la page, et rendre ces titres cliquables pour "déplier" les contenus.
Modifié par Laurent Denis (07 Jul 2005 - 18:42)

Moi je garderai la longue liste et je mettrai en haut de page un menu reprenant l'alphabet avec les ancres qui vont bien et un lien "top" à côté de chaque ancre.
Tu pourrais aussi diviser ta liste en 5 morceaux, une liste par continent mais les gens étant souvent fachés avec la géographie c'est peut-être un peu risqué.

stephkup a écrit :
Moi je garderai la longue liste et je mettrai en haut de page un menu reprenant l'alphabet avec les ancres qui vont bien et un lien "top" à côté de chaque ancre.

C'est une bonne idée, avec un rappel de la liste alphabétique après X pays/villes/lignes/etc

La version avec JavaScript en est une autre qui permet de "racourcir" la longueur de l'ensemble.

Méler ces 2 dernières idées ensemble est à mon avis une bonne solution finale

Oui c'est possible
Voir ce lien :

http://www.tantad.net/dc/index.php/2004/08/11/31-une-liste-en-deux-colonnes-ou-plus
Modifié par Rastafa (11 Aug 2005 - 13:25)

Rastafa a écrit :
Oui c'est possible
Voir ce lien :

http://www.tantad.net/dc/index.php/2004/08/11/31-une-liste-en-deux-colonnes-ou-plus

Bonjour Rastafa, et bienvenue sur ce forum,

Outre un code CSS inutilement lourd (un display: inline sur un flottant n'a aucune utilité), cette solution a un défaut majeur : les items de listes sont répartis d'une colonne à l'autre d'une manière passablement non intuitive (item 1 à gauche, item 2 à droite, item 3 à gauche, etc.). Sans compter l'obligation d'utiliser des largeurs fixes, problématiques en cas de résolution d'écran et/ou de taille de la fenêtre d'affichage en dessous des prévisions du concepteur, ou en cas d'agrandissement.

au final, une fausse bonne idée