Figure comme parent d'un blockquote nécessaire ou pas

Bonjour,
J'ai une citation précédé de son hauteur mais je me demande si l'auteur peut être placé avant la citation ou dans le cas contraire est-ce que je dois baliser le tout comme ceci :

<figure>
<figcaption>Auteur</figcaption>
<blockquote>Ut enim ad minim veniam, quis nostrud exercitation ullamco</blockquote>
</figure>

Première possibilité :

<p>Auteur</p>
<blockquote>Ut enim ad minim veniam, quis nostrud exercitation ullamco</blockquote>

Modifié par Hermann (16 Aug 2014 - 22:55)

Hello,

Perso, utiliser <figure> me paraît un peu louche pour quelque chose qui n'a rien à voir avec une illustration; mais en même temps rien n'existe vraiment pour indiquer l'auteur d'une citation à part l'attribut cite de <blockquote>. A voir si celui-ci doit plutôt obligatoirement recevoir une URL, je ne suis pas si sûr que ce soit vraiment une obligation.

QuentinC a écrit :
Hello,

Perso, utiliser &lt;figure&gt; me paraît un peu louche pour quelque chose qui n'a rien à voir avec une illustration; mais en même temps rien n'existe vraiment pour indiquer l'auteur d'une citation à part l'attribut cite de &lt;blockquote&gt;. A voir si celui-ci doit plutôt obligatoirement recevoir une URL, je ne suis pas si sûr que ce soit vraiment une obligation.

Salut Quentin,
pour figure, la spec donne cet exemple, je ne pensais pas qu'on pouvoir étendre figure aux citation et je ne sais pas comment ça peut être utilement exploité. D'ailleurs je me suis pas trop renseigné sur l'interprétation des nouveaux éléments HTML5 par les lecteurs d'écran. Les role ARIA sont utiles mais les balises?
Malheureusement l'élément cite ne permet plus en html5 de citer l'Auteur, il n'a rien été prévu à cet effet. Oui l'attribut cite est normalement fait pour recevoir uniquement une URL. Dommage qu'on ait pas un truc genre le couple for/id comme les labels.

Le problème est que j'ai une suite de 3 blocs de citation et que l'Auteur est situé visuellement avant la citation. Est-ce qu'il est préférable dans ce cas que je place l'auteur après dans le code?

Bonjour,

Je suis aussi surpris de l'usage sans être un expert.

Pour le figcaption, je dirais qu'il remplira son rôle en théorie sans ambiguïté qu'il soit devant ou derrière.

Dans le doute, il y a aussi display:flex avec order qui permet de modifier visuellement le flux d'un document.

++

gc-nomade a écrit :
Bonjour,
Je suis aussi surpris de l'usage sans être un expert.

Pour le figcaption, je dirais qu'il remplira son rôle en théorie sans ambiguïté qu'il soit devant ou derrière.

Dans le doute, il y a aussi display:flex avec order qui permet de modifier visuellement le flux d'un document.
++

Salut, en fait je n'utilise pas encore la valeur flex, étant donné que ça demande de déclarer plusieurs syntaxes différentes et que le module est encore à l'état de Brouillon. On s'en passe très bien dans la plupart des cas...
Mais c'est c'est du bidouillage, je préfère utiliser des valeur comme table-header-group ou table-caption pour passer visuellement un élément en premier.

a écrit :
pour figure, la spec donne cet exemple, je ne pensais pas qu'on pouvoir étendre figure aux citation et je ne sais pas comment ça peut être utilement exploité. D'ailleurs je me suis pas trop renseigné sur l'interprétation des nouveaux éléments HTML5 par les lecteurs d'écran. Les role ARIA sont utiles mais les balises?

Comme je comprends la chose, le rôle le plus logique est attribué par défaut à chaque élément individuellement, s'il n'est pas précisé. Du coup en théorie tu peux écrire n'importe quoi avec n'importe quelle balise et donner un sens sémantique complètement différent avec ARIA si tu veux. Bien sûr le mieux c'est de rester au plus proche, ça va de soi.

<figure> et <figcaption> ne sont pas traités spécialement, donc en soi ça ne poserait pas de problème pour les utiliser de cette façon je pense. Ce qui me surprend, en fait, c'est que jusqu'à maintenant j'ai toujours lu que ces éléments étaient destinés aux illustrations, typiquement les blocs flottants au fil du texte par exemple.

a écrit :
Malheureusement l'élément cite ne permet plus en html5 de citer l'Auteur, il n'a rien été prévu à cet effet.

Ah oui, je viens de voir sur w3school le changement de signification de cet élément. Du coup <cite> n'est plus vraiment utile, et pas dans ce contexte.

a écrit :
Oui l'attribut cite est normalement fait pour recevoir uniquement une URL. Dommage qu'on ait pas un truc genre le couple for/id comme les labels.

Dommage, ça diminue beaucoup l'intérêt de cet attribut. En même temps il y a sûrement moyen de détourner ça et de mettre l'URL vers la page facebook de la personne, sa page wikipedia si c'est un écrivain, son profil sur un forum, etc. C'est sous employé comme truc.

En même temps, le contenu de cet attribut n'est pas rendu visuellement, si ? Ca expliquerait son peu d'intérêt.

Au contraire, du côté des lecteurs d'écran, ça fait assez longtemps que jaws par exemple indique "bloc de citation provenant de <URL>" au lieu de seulement "bloc de citation"; l'URL n'est pas cliquable (ça c'est crétin par contre)

Peut-être il y a quelque chose à explorer du côté de la sémantique parralèle de HTML5, avec itemscope/itemtype/itemprop ? JE n'ai pas encore cherché à regarder ce qu'on pouvait faire avec mais par contre je suis certain que les lecteurs d'écran n'en tiennent absolument pas compte pour le moment.

a écrit :
Le problème est que j'ai une suite de 3 blocs de citation et que l'Auteur est situé visuellement avant la citation. Est-ce qu'il est préférable dans ce cas que je place l'auteur après dans le code?

En principe, il faut que l'ordonnancement des éléments dans le rendu vocal soit identique ou au plus proche de l'ordonnancement visuel naturel. C'est un prérequis important de l'accessibilité. Donc en toute logique, si visuellement on voit l'auteur avant la citation, on doit aussi l'avoir avant dans le rendu vocal.

Merci pour ces quelques précisions.

QuentinC a écrit :

En même temps, le contenu de cet attribut n'est pas rendu visuellement, si ? Ca expliquerait son peu d'intérêt.

Jamais remarqué mais c'est un attribut que j'ai pratiquement pas utilisé.

QuentinC a écrit :

Peut-être il y a quelque chose à explorer du côté de la sémantique parralèle de HTML5, avec itemscope/itemtype/itemprop ? JE n'ai pas encore cherché à regarder ce qu'on pouvait faire avec mais par contre je suis certain que les lecteurs d'écran n'en tiennent absolument pas compte pour le moment.

Je crois que certains moteurs de recherche s'en servent déjà...

QuentinC a écrit :

En principe, il faut que l'ordonnancement des éléments dans le rendu vocal soit identique ou au plus proche de l'ordonnancement visuel naturel. C'est un prérequis important de l'accessibilité. Donc en toute logique, si visuellement on voit l'auteur avant la citation, on doit aussi l'avoir avant dans le rendu vocal.

Ah oui ok merci de me rappeler ce critère que j'avais complètement oublié.
Du coup je vais rester simple.

QuentinC a écrit :

En principe, il faut que l'ordonnancement des éléments dans le rendu vocal soit identique ou au plus proche de l'ordonnancement visuel naturel. C'est un prérequis important de l'accessibilité. Donc en toute logique, si visuellement on voit l'auteur avant la citation, on doit aussi l'avoir avant dans le rendu vocal.

Hermann a écrit :

Ah oui ok merci de me rappeler ce critère que j'avais complètement oublié.
Du coup je vais rester simple.

Avec mes gros sabot, je ne peut pas m’empêcher d’évoquer les liste de définition. n'y aurait-il pas de ce coté quelque choses sémantiquement correcte et logique a mettre en place sans forcement y meler ARIA ?
@ Quentin , C'est plutôt une question qu'une proposition .

@Herman, sinon, oui bien vu les display header & footer-group.il y a aussi le caption qui est parfois utile a defaut de colspan en CSS
Modifié par gc-nomade (17 Aug 2014 - 21:07)

gc-nomade a écrit :

@Herman, sinon, oui bien vu les display header &amp; footer-group.il y a aussi le caption qui est parfois utile a defaut de colspan en CSS

Oui mais la valeur table-caption a des avantages que table-header-group n'a pas, notamment l'utilité de la propriété associée caption-side avec la valeur bottom (même si les valeur left et right ne sont implémentées que par Firefox).

a écrit :
Avec mes gros sabot, je ne peut pas m’empêcher d’évoquer les liste de définition. n'y aurait-il pas de ce coté quelque choses sémantiquement correcte et logique a mettre en place sans forcement y meler ARIA ?
@ Quentin , C'est plutôt une question qu'une proposition

On peut faire des choses fabuleuses comme des horreurs avec ARIA; je pense que le mieux, c'est d'essayer d'y avoir recours le moins possible, et d'utiliser un balisage qui n'en ait pas trop besoin. En bref, utiliser au mieux la sémantique naturelle des éléments.

Pour ce qui est des listes de définition, je ne sais pas trop quoi dire. J'ai parfois l'impression qu'on cherche toujours à lui attribuer des sens ou des fonctions assez éloignés de ce pour quoi elle a été conçue (ça c'est calmé avec HTML5, mais j'ai l'impression que ça reste quandd même la mode). Si tu as plusieurs citations, au moins 5, de plusieurs auteurs différents, pourquoi pas en fait. Le seul bémol, c'est qu'on ne peut alors pas cumuler les rôles, donc il faut faire gaffe.

gc-nomade a écrit :

Avec mes gros sabot, je ne peut pas m’empêcher d’évoquer les liste de définition. n'y aurait-il pas de ce coté quelque choses sémantiquement correcte et logique a mettre en place sans forcement y meler ARIA ?

La liste de définition HTML4 est devenue une liste de description en html5, leur utilisation a donc été élargie (voir les exemple donnés dans le spec). Je pense que s'agissant de mon exemple, ce choix n'est pas pertinent.
Modifié par Hermann (18 Aug 2014 - 12:35)