1178 sujets

Accessibilité du Web

Bonjour,

Ma question porte sur la hiérarchie des titres dans une page. On sait très bien que les titre s'organisent d'une façon hiérarchique logique (h1, h2, h3...) puis viennent ensuite les balises comme la graisse, l'italique.. etc

Or je me pose la question de savoir si les titres d'une liste de définition (dl > dt), et de la même façon les titre de tableau (table > tr > th), on un poids dans la hiérarchie de la page. Ou le cas échéant vaut-il mieux ajouter un titre h# dans les balises <dt> ?

D'ailleurs dans le cas où les <dt> ont bien une valeur hiérarchique, je suppose que le poids est plutôt faible et qu'il vaut mieux ajouter un titre h# si mon texte est important.
Bonjour,

Non les titres de liste de definition ou de tableau ne font pas partie de la hiérarchie (ils ont bien sûr un poids sémantique). Dans word, il se rapprocheraient plus de "légendes" que de "titres" (oui, je sais il y a "summary" pour les légende de tableau, mais bon).
Je vais compléter un petit peu (et remettre dans le contexte accessibilité) ... Les technologies d'assistance offrent plusieurs niveaux de navigation. Les titres sont un niveau mais on peut aussi naviguer par tableaux, par listes et par formulaires.

A partir du moment où la structure du document est bien réfléchie, l'utilisateur va pouvoir l'exploiter à plein potentiel.

Pour ce qui est de combiner plusieurs niveaux de navigation (voir un précédent sujet où Quentinc parlait d'une combinaison legend et hN), je suis assez partagé et pense qu'un seul niveau est suffisant (ce n'est que mon avis).

Espérant avoir apporté un petit plus à ce sujet Smiley smile .
LE cas de legend est un peu différent, ça dépend si on l'utilise en tant que groupe de boutons radio / case à cocher très fortement liés ou si on l'utilise pour regrouper plusieurs champs qui ont juste un rapport entre eux.

Mais comme dit plus haut, la différence générale entre titre vs caption ou titre vs dt concerne des façons de naviguer différentes, et la même information ne sera pas perçue selon le mode choisi.

Juste pour information, <dt><h#>...</h#></dt> est de toute façon invalide et l'inverse également.
QuentinC a écrit :
LE cas de legend est un peu différent, ça dépend si on l'utilise en tant que groupe de boutons radio / case à cocher très fortement liés ou si on l'utilise pour regrouper plusieurs champs qui ont juste un rapport entre eux.


Le deuxième cas d'utilisation n'est-il pas problématique (en plus de faire l'objet d'une utilisation discutable permise par les recommandations) ? Un legend non pertinent (sans liaison forte) ne parasite-il pas la compréhension générale ?

D'ailleurs, la question se pose aussi avec la combinaison de plusieurs niveaux de navigation (legend avec hN, liste avec hN et autres) - en mettant l'invalidité de côté.
QuentinC a écrit :
Juste pour information, <dt><h#>...</h#></dt> est de toute façon invalide et l'inverse également.

C'est en me rendant compte de ce détail que j'ai finalement opté pour une bonne vielle liste avec des titre h# et paragraphes. Smiley smile
Modifié par moust (10 Nov 2010 - 18:08)
a écrit :
Le deuxième cas d'utilisation n'est-il pas problématique (en plus de faire l'objet d'une utilisation discutable permise par les recommandations) ? Un legend non pertinent (sans liaison forte) ne parasite-il pas la compréhension générale ?

Ca dépend. La plupart du temps ça ne dérange pas, ça peut être parfois gênant , mais il y a aussi des cas où ça peut être très utile.

Voici un exemple que je trouve intéressant et qui mérite discussion :

Client n°1
-- Nom
-- Prénom
Client n°2
-- Nom
-- Prénom
Client n°3
-- Nom
-- Prénom
...

Dans un tel cas, la différence entre legend et les titres de section, c'est que :
1 - Si on parcourt le formulaire en curseur virtuel, les titre de section sont annoncés, utiles et pratiques. C'est aussi pratique de les avoir si on doit ne remplir qu'une partie du formulaire, p.ex. changer le client n°3 seulement, car on navigue de titre en titre pour arriver directement sur le premier champ à modifier.
2 - Si on parcourt le formulaire avec la touche tab en mode formulaire ou non, les titres hn ne sont pas annoncés. En conséquence s'il n'y a que des titres hn et pas de legend, on obtient la sortie suivante : nom, prénom, nom, prénom, nom, prénom. Il y a ambiguïté hors contexte, c'est le même problème que pour les liens lire la suite. Il faut donc que les labels soient aussi compréhensibles hors contexte, comme les liens, d'autant plus qu'on peut demander une liste des champs de formulaires (Insert+F5 avec jaws). Problème: comment donner une distinction claire ici sans utiliser legend ? le title n'est pas lu par défaut s'il y a un label, et doit-on le mettre sur le label ou le champ ? Il reste la solution du span dans le label invisible à l'oeil, précisant « nom du client n°1 », « prénom du client n°1 » ... mais ça apporte les même problèmes que « lire la suite de ... »
Modifié par QuentinC (10 Nov 2010 - 23:29)
Pour ton exemple, l'utilisation de fieldset / legend est tout à fait pertinente. A défaut de présence de ces fieldsets / legends, expliciter les labels me semble être une solution pertinente.

Je pensais plus à un cas du genre (ce que tu appelles "regroupement de plusieurs champs qui ont juste un rapport entre eux") :


<fieldset>
<legend>Mon formulaire d'inscription</legend>
<p><label for="nom">Nom :</label> <input type="text" id="nom" name="nom" /></p>
<p><label for="pnom">Prénom :</label> <input type="text" id="pnom" name="pnom" /></p>
</fieldset>


Où pour le coup, l'utilisation du fieldset / legend devient à mes yeux problématique ...
Modifié par yodaswii (11 Nov 2010 - 01:25)
a écrit :
Où pour le coup, l'utilisation du fieldset / legend devient à mes yeux problématique ...

Ce n'est peut-être pas forcément problématique, mais en tout cas complètement inutile dans ce cas-là. Un titre étant effectivement beaucoup mieux.

Note quand même que dans les deux cas, le legend regroupe des éléments autre que radio ou checkbox. C'est donc bien deux utilisations différentes de fieldset/legend, l'une étant presque toujours pertinente tandis que l'autre souvent pas. JE dis souvent pas parce qu'en réalité on se retrouve beaucoup plus souvent dans le cas que tu cites que le mien. Dans le cas que je présente, les choses sont généralement regroupées d'une autre façon, un tableau notamment... les formulaires dans les tableaux à plus de deux colonnes sont d'une autre complexité parce qu'alors les labels font bugger l'affichage virtuel et on est obligé d'utiliser title à la place (c'est le seul cas à ma connaissance où il ne vaut mieux pas mettre de label)
Modifié par QuentinC (11 Nov 2010 - 05:20)