Gérer les citations avec les éléments appropriés.

Ce que j’ai fait :

• lire l’article Des citations bien balisées(lien externe) de Romy Duhem-Verdière
• lire la référence q : l’élément de citation en incise(lien externe) de Mozilla
• lire la référence blockquote : l’élément de bloc de citation(lien externe) de Mozilla
• lire la référence cite : l’élément de citation(lien externe) de Mozilla

Ce que j’ai appris

Baliser les citations en ligne

On utilise l’élément <q> pour baliser une citation en incise, c’est à dire une citation généralement courte, insérée directement dans un texte et qui ne nécessite pas de saut de paragraphe. Par exemple :

<p>Tim Berners-Lee a dit :
  <q lang="en">The Web does not just connect machines, it connects people.</q>
</p>

Ce qui s’affiche ainsi :

Tim Berners-Lee a dit : The Web does not just connect machines, it connects people.

Le navigateur matérialise la citation avec des guillemets, il est donc inutile de les ajouter à la main.

Baliser les blocs de citations

L’élément blockquote est utilisé pour baliser une citation longue, de un ou plusieurs paragraphes. Par exemple :

<blockquote>
<p>"Vous savez, moi je ne crois pas qu’il y ait de bonne ou de mauvaise situation. Moi, si je devais résumer ma vie aujourd’hui avec vous, je dirais que c’est d’abord des rencontres. Des gens qui m’ont tendu la main, peut-être à un moment où je ne pouvais pas, où j’étais seul chez moi. Et c’est assez curieux de se dire que les hasards, les rencontres forgent une destinée... Parce que quand on a le goût de la chose, quand on a le goût de la chose bien faite, le beau geste, parfois on ne trouve pas l’interlocuteur en face je dirais, le miroir qui vous aide à avancer. Alors ça n’est pas mon cas, comme je disais là, puisque moi au contraire, j’ai pu : et je dis merci à la vie, je lui dis merci, je chante la vie, je danse la vie... je ne suis qu’amour ! Et finalement, quand beaucoup de gens aujourd’hui me disent « Mais comment fais-tu pour avoir cette humanité ? », et bien je leur réponds très simplement, je leur dis que c’est ce goût de l’amour ce goût donc qui m’a poussé aujourd’hui à entreprendre une construction mécanique, mais demain qui sait ? Peut-être simplement à me mettre au service de la communauté, à faire le don, le don de soi..."</p>
</blockquote>

Ce qui s’affiche ainsi :

"Vous savez, moi je ne crois pas qu’il y ait de bonne ou de mauvaise situation. Moi, si je devais résumer ma vie aujourd’hui avec vous, je dirais que c’est d’abord des rencontres. Des gens qui m’ont tendu la main, peut-être à un moment où je ne pouvais pas, où j’étais seul chez moi. Et c’est assez curieux de se dire que les hasards, les rencontres forgent une destinée... Parce que quand on a le goût de la chose, quand on a le goût de la chose bien faite, le beau geste, parfois on ne trouve pas l’interlocuteur en face je dirais, le miroir qui vous aide à avancer. Alors ça n’est pas mon cas, comme je disais là, puisque moi au contraire, j’ai pu : et je dis merci à la vie, je lui dis merci, je chante la vie, je danse la vie... je ne suis qu’amour ! Et finalement, quand beaucoup de gens aujourd’hui me disent « Mais comment fais-tu pour avoir cette humanité ? », et bien je leur réponds très simplement, je leur dis que c’est ce goût de l’amour ce goût donc qui m’a poussé aujourd’hui à entreprendre une construction mécanique, mais demain qui sait ? Peut-être simplement à me mettre au service de la communauté, à faire le don, le don de soi..."

L’apparence de la citation dépend du rendu du navigateur. Sur ce blog, la citation est matérialisée par une bordure grise à gauche et un texte en italique de couleur grise et de grande taille. L’ajout de guillemets, si souhaité, doit cette fois être effectué manuellement.

Compléter les élements de citation

L’attribut cite

Il est possible de compléter les balises <q> et <blockquote avec un attribut cite. Il s’agit d’une URL qui désigne la source du document ou du message cité. Par exemple :

<p>Tim Berners-Lee a dit :
  <q lang="en" cite="https://quotepark.com/fr/auteurs/tim-berners-lee/">The Web does not just connect machines, it connects people.</q>
</p>

Ce qui s’affiche ainsi :

Tim Berners-Lee a dit : The Web does not just connect machines, it connects people.

Aucun rendu spécifique n’est donc fait par le navigateur.

L’élément <cite>

A ne pas confondre avec l’attribut cite vu précédemment.

La balise <cite> est utilisée pour donner le titre d’une oeuvre. L’oeuvre en question peut être un livre, un film, un poème, un jeu, une exposition… Vous pouvez retrouver d’autres exemples d’oeuvres sur la référence cite : l’élément de citation(lien externe) de Mozilla. Par exemple :

<blockquote cite="https://fr.wikiquote.org/wiki/Ast%C3%A9rix_%26_Ob%C3%A9lix_:_Mission_Cl%C3%A9op%C3%A2tre">
    <p>Et le mec, il lui dit c'est le phare à "On", parce qu'il s'appelle "On", le mec... Le mec, il s'appelle "On", et "On" il a un phare, c'est son appartenance. Il lui dit c'est le phare à "On" !... Le mec ! Il s'appelle "On" ! Il lui dit c'est son phare ! Et bah le Pharaon ! Qui est comme le chef de nous !</p>
    <footer>—Numérobis, <cite>Astérix & Obélix : Mission Cléopâtre</cite></footer>
</blockquote>

Ce qui s’affiche ainsi :

Et le mec, il lui dit c'est le phare à "On", parce qu'il s'appelle "On", le mec... Le mec, il s'appelle "On", et "On" il a un phare, c'est son appartenance. Il lui dit c'est le phare à "On" !... Le mec ! Il s'appelle "On" ! Il lui dit c'est son phare ! Et bah le Pharaon ! Qui est comme le chef de nous !

Quel rendu pour les lecteurs d’écran ?

Après test sur mon téléphone Androïd, aucune vocalisation spécifique n’est faite par Talkback pour les citations (en bloc ou en ligne). Sur le site AcceDe Web, Sébastien Delorme écrit ceci :

À ce jour, aucun lecteur d’écran sur le marché (à ma connaissance) n’annonce la citation en ligne. Je viens de le tester à l’instant avec Jaws 18 sur Firefox 59 et IE11, NVDA 2018.1.1 sur Firefox 59 et VoiceOver et Safari iOS 11.3. Par contre, les éventuels guillemets ajoutés par défaut par cette balise sont bien annoncés.

Cette citation est extraite d’une discussion postée sur la page Baliser les citations en ligne avec q(lien externe), en date du 17 avril 2018.

Toujours sur Talkback, avec mon téléphone, les guillemets générés automatiquement par le navigateur pour une citation courte ne sont pas annoncés par le lecteur d’écran.

Le contenu de l’attribut cite n’est pas vocalisé non plus et n’apparaît pas à l’écran. Il peut donc être envisageable d’indiquer cette information sous la forme d’un lien, après la citation.