Interview rendue accessible

[Nullette]

Bonjour,

je prépare une page html d'une interview. Pour rendre explicites les questions et les réponses, je mets les paragraphes des questions en gras et les réponses en texte normal.

Savez-vous s'il existe une balise spéciale ou un code pour que les phrases soient compréhensibles côté "accessibilité" ?

[ElMoustiko]

Bah une solution serait d'utiliser les listes de définition pour lier question/réponses

<dl>
<dt>Question1</dt>
<dd>Réponse1</dd>


<dt>Question2</dt>
<dd>Réponse2</dd>


<dt>Question3</dt>
<dd>Réponse3</dd>


<dt>Question4</dt>
<dd>Réponse4</dd>

</dl>

[Monique]

Bonjour,

Tu peux utiliser une liste de définition pour cela

<dl>
<dt>Question 1</dt>
<dd>Réponse 1</dd>
<dt>Question 2</dt>
<dd>Réponse 2</dd>
<dt>Question 3</dt>
<dd>Réponse 3</dd>
</dl>

ce qui donne

Question 1

  Réponse 1

Question 2

  Réponse 2

Question 3

  Réponse 3

A toi de définir la mise en forme dans ta feuille de style.

A lire :

- Les listes de définitions : mal utilisées ou mal comprises ?

- Les listes de définitions : les éléments DL, DT et DD

[edit : ElMoustiko a été plus rapide ]

Modifié 2 Octobre 2004 par Monique

[ElMoustiko]

En effet ;p

Ca conforte notre indication au moins ;p

Tu as bien fait de donner pompage en tant que référence

Plus rapide mais moins complet...

[Nullette]

Merci. Mais en fait je n'otbiens pas de bons résultats :

document type does not allow element "P" here

et je veux mettre des <p> pour aérer le texte.

Je pense que je vais laisser ma page telle quelle, simple avec les questions en gras, les réponses en texte normal, le tout aéré en paragraphes.

Je voulais que ce soit accessible pour les mal voyants, c'est-à-dire que je suppose qu'ils ne peuvent pas faire la distinction entre un paragraphe en gras et les autres.

[ElMoustiko]

Pourquoi utiliser un <p> ?????

les <dd> font parfaitement l'affaire, si tu veux aerer le tout, tu peux mettre en forme via CSS.

Si tu veux donnes nous un apercu de ce que tu veux comme rendu au final et je te ferais un petit exemple de code css des <dl>, <dt>, <dd>

@++

[Nullette]

J'avais mis des <p> pour éviter que les questions et réponses soient trop sérrés.

Voici ma page, agréée par le W3C

L'interview

[LaurentDenis]

Je suppose que tu avais fait quelque-chose comme:

<dl>
<dt><p>...Question...</p></dt>
<dd><p>...Réponse...</p></dd>
</dl>

L'erreur fréquente étant que <dd> peut contenir des éléments blocs (<p> par exemple), mais que <dt> ne peut contenir que des éléments en ligne (donc pas de <p>)

Le code valide est donc :

<dl>
<dt>...Question...</dt>
<dd><p>...Réponse...</p></dd>
</dl>

[Guest narcisse]

Pour aérer, servez vous des CSS et donnez les bonnes valeurs à vos dl,dt,dd.

Si vous utilisez le p, cela n'est plus sémantiquement correct et de plus ne sert à rien.

Les CSS vous permettent d'agencer votre liste comme vous le souhaitez. Utiliser notamment lline-height.

[ElMoustiko]

Donc le code html

<dl class="interview">
   <dt>Question de l'interview</dt>
   <dd>
      <p>Réponse à la question</p>
      <p>Eventuellement en plusieurs paragraphes</p>
   </dd>

   <dt>Question2 de l'interview</dt>
   <dd>
      <p>Réponse à la question2</p>
      <p>Eventuellement en plusieurs paragraphes</p>
   </dd>
</dl>

Donc pour le style css correspondant

dl.interview dt
{
   font-weight: bold;
}

dl.interview dd p
{
   margin: 5px 0;
}

Avec ca tu devrais avoir le résultat voulu et un code sémantiquement correct qui différencie et lie questions/réponses.

Modifié 3 Octobre 2004 par ElMoustiko

[ElMoustiko]

Pour aérer, servez vous des CSS et donnez les bonnes valeurs à vos dl,dt,dd.

Si vous utilisez le p, cela n'est plus sémantiquement correct et de plus ne sert à rien.

Les CSS vous permettent d'agencer votre liste comme vous le souhaitez. Utiliser notamment lline-height.

<{POST_SNAPBACK}>

Pour aerer et tout ca, oui css MAIS l'utilisation d'un <p> dans un <dd> est correcte et d'ailleur peut s'averer utile dans le cas d'une réponse structurée en plusieurs paragraphes.

[Guest narcisse]

Dans ce cas là, j'aurais plus vu ceci

<dl class="interview">
  <dt>Question de l'interview</dt>
  <dd>
<ul>
     <li>Réponse à la question</li>
     <li>Eventuellement en plusieurs paragraphes</li>
</ul>
  </dd>

  <dt>Question2 de l'interview</dt>
  <dd>
     <p>Réponse à la question2</p>
     <p>Eventuellement en plusieurs paragraphes</p>
  </dd>
</dl>

[Monique]

Si vous utilisez le p, cela n'est plus sémantiquement correct et de plus ne sert à rien.

<{POST_SNAPBACK}>

Bonjour,

Je ne vois pas en quoi l'utilisation de l'élément p n'est pas sémantiquement correct.

Dans les spécifications je lis

Une autre application de l'élément DL serait, par exemple, pour le marquage d'un dialogue, chacun des éléments DT nommant un personnage et chacun des éléments DD en contenant les paroles.

ce qui correspond bien au but de Nullette.

Si les réponses consistaient en une seule phrase, la seule utilisation des CSS suffirait pour présenter le texte de manière claire.

Mais ce n'est pas le cas, le contenu de l'élément dd comprend plusieurs phrases et peut donc être lui-même structuré. L'utilisation combinée des CSS et d'éléments p, cite... rendra le texte beaucoup plus aéré et plus facile à lire qu'il ne l'est maintenant.

[LaurentDenis]

Et si l'on cessait de prendre la sémantique des éléments HTML pour ce qu'elle n'est pas ?

Il ne s'agit pas de dicter des règles pour la satisfaction d'avoir de belles constructions théoriques aux justifications très subjectives. Il s'agit d'apporter une information supplémentaire sur le sens du contenu par le choix d'un balisage approprié. Un balisage qui n'apporte aucune information exploitable n'a aucun intérêt.

La question est donc toujours : quelle(s) informations ai-je à ajouter ? Ici, la seule information est que chaque question est associée à une réponse. Le choix de la liste de définition permet d'ajouter cette info, dans la mesure où un <dt> (question) serait implicitement lié aux <dd> qui le suivent.

(Au passage, un <div> conteneur et un <hn> pour la question feraient tout aussi bien l'affaire.)

Maintenant, le contenu du <dd> n'est qu'un texte comme un autre et peut être structuré :

- avec ou sans un <p> unique

- avec plusieurs <p> s'il y a plusieurs paragraphes

- avec une liste s'il contient une liste d'item : le fait de comporter plusieurs paragraphes n'en fait pas pour autant une liste ! Ou alors, tout devient une liste...

[ElMoustiko]

Dans ce cas là, j'aurais plus vu ceci

<dl class="interview">
  <dt>Question de l'interview</dt>
  <dd>
<ul>
     <li>Réponse à la question</li>
     <li>Eventuellement en plusieurs paragraphes</li>
</ul>
  </dd>

<{POST_SNAPBACK}>

le fait de comporter plusieurs paragraphes n'en fait pas pour autant une liste ! Ou alors, tout devient une liste...

<{POST_SNAPBACK}>

Oui d'accord avec Laurent, pourquoi une liste pour des paragraphes... des paragraphes sont des paragrahes, c'est tout. Ca sert à séparer plusieurs partie d'un texte c'est comment en français ;p

Si on devait mettre des listes non ordonnés a chaque liste d'élément on en mettrait partout en effet !

[Nullette]

Comme tout devient facile avec vous

Comme a dit LaurentDenis

L'erreur fréquente étant que <dd> peut contenir des éléments blocs

bien qu'après avoir lu les explications, je n'avais pas compris qu'avec <dd> on peut mettre <p> et pas avec <dt>

Merci Narcisse, Monique et ElMoustiquo.

Je ne me suis pas encore lancée dans les line-height.... une autre fois

Je me pose encore une question qui va vous paraître bête : le fait de mettre le <bold> en css, cela empêche certains internautes qui n'auraient pas accès aux feuilles de style de voir certains paragraphes en gras. ?

[ElMoustiko]

Oui ils verront le texte normalement, enfin du style par défaut que le navigateur à prévu.

Par exemple <strong> dans la plupart des navigateurs sera en gras et le restera feuille de style ou non, mais <dt> (dans ton cas) sera non gras dans la plupart des navigateurs.

Par ailleurs la distinction sera faite entre la question et la réponse, puisque par défaut (toujours dans la plupart des navigateurs) un retrait du <dd> par rapport au <dt> est fait.

Donc les questions et réponses seront quand même différenciées.

[Denis]

J'arrive un peu tard, mais je trouve que ce sujet est un excellent exemple de ce qui arrive lorsque l'on abuse de la bonne volonté de bien faire les choses.

À trop vouloir bien faire, on finit par faire n'importe quoi, sous prétexte d'une soit-disant recherche de la perfection. Ces abus sont souvent inévitables lorsque l'on cherche à sémantiser au maximum notre HTML... on arrive trop souvent à perdre de vue le but que l'on s'est fixé initialement et du coup, on lance des listes à puces, des blocs de citation et des paragraphes à tous vents en oubliant l'aspect le plus fondamental qui est de se requestionner sur la raison d'être de notre recherche de structure. Il n'y a certes pas de réponse absolues et plusieurs possibilités s'offent à nous. Je doute fort qu'il y en ait une qui soit parfaite, même s'il est assuré que plusieurs sont forcément moins bonnes.

En effet, qu'avons-nous ici ? Rien de plus qu'une liste de questions associées à des réponses. À mon sens, la solution la plus intéressante demeure le bon vieux <hx> avec une série de <p> pour y répondre. Rien de plus, rien de moins. Le truc avec les listes de définitions, c'est que c'est trop au goût du jour, trop à la mode. Tout le monde se lance là-dessus comme sur le dernier CD du chanteur populaire (insérez le nom qui vous plaît). La sémantique, c'est aussi d'exprimer en lemoins de code possible lelus de sens possible. Si on doit intégrer une tonne de CSS pour formatter nos listes correctement, s'il faut intégrer des <p> dans nos <dd>, s'il faut créer d'interminables sous-listes imbriquées pour arriver à nos fins, je regrette, mais le plus simple et le plus efficace demeure encore de se faire une belle petite structure comme ceci :

<h1>Titre de l'entrevue</h1>
<h2>Première partie de l'entrevue</h2>
<h3>Question no 1</h3>
<p>Réponse de la question 1</p>
<p>Réponse de la question 1</p>
<h3>Question no 2</h3>
<p>Réponse de la question 2</p>
<p>Réponse de la question 2</p>
<p>Réponse de la question 2</p>
<h3>Question no 3</h3>
<p>Réponse de la question 3</p>
<h2>Deuxième partie de l'entrevue</h2>
<h3>Question no 1</h3>
<p>Réponse de la question 1</p>
<p>Réponse de la question 1</p>
<p>Réponse de la question 1</p>
<h3>Question no 2</h3>
<p>Réponse de la question 2</p>
<p>Réponse de la question 2</p>
<h3>Question no 3</h3>
<p>Réponse de la question 3</p>
<p>Réponse de la question 3</p>

Et ainsi de suite... clair, précis, direct... pourquoi faire plus compliqué quand on peut faire à la fois plus simple et plus efficace ?

[ElMoustiko]

Je ne suis pas tout à fait d'accord avec toi Denis...

Tu dis que les listes de def sont une mode, peut etre oui, mais ca n'est pas pour ca qu'il faut les bannir, coder en xhtml/css ca devient une mode aussi, vas tu arreter pour autant ?

Bien sûr il y a facon d'utiliser les listes de definitions, mais je ne pense pas que l'utilisation faite ici soit mauvaise, en effet les réponses sont ainsi liées aux questions, ce qui n'est pas un mal, je ne vois pas pourquoi tu trouves l'utilisation mauvaise.

Certe l'utilisation des hN et des p est tout aussi valable (plus ? peut etre, ca n'est pas a moi d'en juger), mais ne nous n'avons pas ici affaire à une utilisation saugrenue des listes de definitions.

S'il y avait une utilisation des listes de definition un peu abusive (même au vue des specs plutot floue au sujet de ces balises) ca serait plutot pour les menus je trouve, mais là c'est une autre question.

Pour ce qui est de l'ajout de code, oui il y en a, c'est vrai !

Pour le code css, ma foi rendre un titre h3 en taille normal et gras demande plus de code css que pour obtenir le même résultat avec <dt> !

Voilà, plusieurs alternatives, comme souvent. Ici je pense que les 2 se défendent.

Modifié 3 Octobre 2004 par ElMoustiko

[Nullette]

Effectivement, je serais plutôt d'accord avec Denis .... Ma page était toute simple...

Mais je suis contente d'avoir appris des choses nouvelles.

J'ai passé plusieurs heures aujourd'hui à faire des modifications et ma page est en ligne avec les <dd> et <dt>.

A bientôt

[Denis]

Tu dis que les listes de def sont une mode, peut etre oui, mais ca n'est pas pour ca qu'il faut les bannir, coder en xhtml/css ca devient une mode aussi, vas tu arreter pour autant ?

Ben voyons ! Tu connais cette réponse tout aussi bien que moi. Mon intervention allait simplement à l'effet que c'est dans l'air de vouloir utiliser les listes à toutes les sauces et que pour beaucoup de gens, le premier réflexe est de sauter sur les listes commes si elles étaient la panacée du HTML sémantique alors que ce n'est pas forcément le cas.

Bien sûr il y a facon d'utiliser les listes de definitions, mais je ne pense pas que l'utilisation faite ici soit mauvaise, en effet les réponses sont ainsi liées aux questions, ce qui n'est pas un mal, je ne vois pas pourquoi tu trouves l'utilisation mauvaise.

Ai-je dis que l'utilisation était mauvaise ? Si je l'ai laissé sous-entendre, ce n'était pas volontaire car je trouve que si l'utilisation des listes dans une entrevue est bonne et sémantiquement correct, à mon sens, elle n'est pas forcément aussi bonne que de bons vieux <hx> avec des <p>. Cette opinion N'engage certainement personne d'autre que moi.

Pour ce qui est de l'ajout de code, oui il y en a, c'est vrai ! Pour le code css, ma foi rendre un titre h3 en taille normal et gras demande plus de code css que pour obtenir le même résultat avec <dt> !

Bof, ça dépend de l'effet qu'on vise j'imagine...

Voilà, plusieurs alternatives, comme souvent. Ici je pense que les 2 se défendent.

C'est certain. Il n'y a pas de vérités absolues ou uniques et c'est justement ce qui rend tout ceci si intéressant.