Par le biais de nos messageries instantanées, Stéphane et moi avons eu de passionnantes discussions au sujet du fil d’Ariane. Tellement passionnantes qu’on a voulu vous en faire profiter !
Vous allez voir comme on peut rire de tout, mais pas avec tout le monde.
Note : ce billet fait suite à son prédécesseur (Fil d’Ariane et sémantique) et essaye de creuser un peu plus la question.
Une autre voie que la sémantique ?
Faut-il utiliser au mieux les briques offertes par le HTML pour tenter de décrire sémantiquement une structure ou au contraire, s’appuyer sur la typographie quand cela est possible ?
Ce qui est important est bien sûr de conserver la notion d’imbrication.
Si elle est évidente avec le code HTML composé de listes imbriquées que nous avons vu dans le billet précédent, il faut bien avouer que la structure est un peu lourde.
Elle l’est un peu moins avec un caractère typographique… mais encore faut-il choisir le bon !
Avec un caractère typographique oui, mais lequel ?
À notre disposition, nous avons toute une panoplie de symboles, avec parmi les plus utilisés :
- des signes diacritiques
- des signes de ponctuation
- : les deux-points
- . le point
- • la puce
- des tirets :
- — le tiret cadratin
- – le tiret demi-cadratin
- ‐ le tiret de césure
- / la barre oblique
- @ l’arobase
- des symboles mathématiques
- des symboles informatiques
- la flèche et
toutes ses variantes en Art ASCII :
- ->
- =>
- >
- →
- »
Supprimons pour commencer ce qui n’a pas de sens logique :
- ~ le tilde […]permettant de séparer des éléments en opposition[…]
- · le point médian qui […]a servi […] à séparer les mots[…] par le passé
- . le point qui […]sert à marquer la fin d’une phrase[…]
- ‐ le tiret de césure […]utilisé pour scinder un mot en deux[…]
- @ l’arobase utilisé comme […]séparateur entre le nom d’utilisateur et le nom du domaine de messagerie[…]
- — le tiret cadratin […]utilisé […] pour introduire les dialogues[…]
Ce qui tient trop du bricolage pour un simple effet visuel :
- ->
- =>
- »
Puis ce qui risque d’être incompris ou mal compris par le lecteur :
- ⊃ l’inclusion : symbole mathématique peu connu
- / la barre oblique : c’est pourtant, […]sous certains systèmes d’exploitation, le caractère qui distingue les différents dossiers d’un chemin[…] dommage… Mais nous pensons que la plupart des visiteurs d’un site sont des profanes en technologie.
Il ne nous reste donc plus que :
- : les deux-points,
- → la flèche,
- > le signe supérieur,
- • la puce,
- – et le tiret demi-cadratin.
Les deux points définissent une relation de cause ou de conséquence. Le signe « supérieur » est quant à lui communément admis comme convention dans les fils d’Ariane.
La puce sert à marquer l’énumération au début d’une ligne, on ne la présente plus. Et le tiret demi-cadratin est aussi utilisé pour lister les énumérations.
Reste à choisir entre nos listes imbriquées ou l’utilisation d’un de ces caractères
Visuellement, il sera assez facile de faire se ressembler les deux solutions.
La première aura par contre bien plus de sens d’un point de vue sémantique HTML. Alors que la seconde sera bien plus facile à mettre en place.
En termes d’accessibilité, la deuxième est beaucoup moins laborieuse avec une revue d’écran : il s’agit d’une seule ligne dans laquelle on a listé plusieurs liens. En mode débutant (« verbeux ») la première nous dira : « Liste de 1 élément, lien, Sommaire, liste de 1 élément, lien, Rubrique, liste de 1 élément, Page » ; la deuxième nous dira : « Lien, Sommaire, barre oblique, lien, Rubrique, barre oblique, Page ».
La preuve par l’exemple avec Jaws :
Stéphane penche donc pour la solution 2 (en donnant la préférence aux « : » ou aux « > ») parce que :
- c’est moins laborieux à écrire…
- ça répond à une convention de notation déjà établie,
- et c’est plus confortable avec une revue d’écran.
Vincent penche pour la solution 1 parce que
- c’est plus sémantique,
- l’effet qu’on pourra obtenir sera au moins aussi riche visuellement,
- et qu’il n’est pas fainéant comme Stéphane. 😀
Dans cette question labyrinthique, vous choisiriez quel fil d’Ariane, vous ?
Et un grand merci à Stéphane pour sa collaboration à cet article !
27 commentaires ↓
Et moi en lisant tout ça j’ai commencé à rédiger une tartine, ça mériterait un vrai billet si j’avais un blog générique. Ce n’est pas le cas donc je squatte les commentaires, d’avance désolé.
Je préfère sérieusement la 2, et j’ai plein de super arguments pour ça :
Tout une liste n’est pas appropriée côté sémantique. Je conçois des listes d’un élément quand il pourrait techniquement y en avoir plus. Là on a des listes de un seul élément alors qu’on sait que par nature cette liste ne pourra jamais contenir plus d’un élément. Une liste d’un élément est-elle une liste ? je ne crois pas. Ce qui caractérise une liste c’est justement l’énumération. Vous dévoyez une liste afin de construire un marquage HTML qui n’existe pas (la hiérarchie), ce qui est AMHA plus gênant que de ne rien faire.
Et justement, le HTML est un langage restreint, délimité, qui ne modélise pas tout ce qui existe dans le monde. Il n’y a aucune balise pour marquer la hiérarchie (la hiérarchie des listes imbriquée est un effet de bord, ce qu’elles représentent ce sont des listes, pas une hiérarchie), c’est comme ça. Il n’y a rien non plus pour dire que « France » est une localisation, que « Vous » est un sujet de phrase, ou même que votre fil d’ariane est justement un fil d’ariane. Si ça a du sens pour vous c’est à cause du Français, donc laissez ce sens en français et pas en marquage HTML.
Et pas, justement, en français vous diriez/écririez : « Vous êtes en France, à Paris, rue Tartempion. » Notez que il n’y a pas de liste avec des tirets. On utilise une bête énumération « dans la phrase ». Le rôle du HTML est de marquer vos contenus, pas de les transformer. Votre énumération en ligne n’a pas lieu de passer en liste éclatée. Vous cherchez complexe pour quelque chose qui existe et qui est déjà naturel en français. Ne cédez pas à la tentation à la mode de tout transformer en liste en de tordre votre contenu pour pouvoir utiliser plus de balises HTML. Ce n’est pas le but du langage.
D’ailleurs, qui a dit qu’il fallait forcément faire une marquage de cette énumération ou de cette hiérarchie ? Plus concrêtement, quel est le but poursuivi ? Qui pourra relire cette information, quelle interprétation pourra-t-il en faire et pour quel usage ? Là l’imbrication de liste elle ne peut servir que la satisfaction du développeur. Il n’y a à peu près aucun usage actuel pour le navigateur ou un quelconque client HTML pour en faire tirer une information concrete et utile à l’utilisateur. D’ailleurs ça se constate bien à l’oral sous Jaws : l’information est perturbante, pas utile. Les informations éventuellement utiles seraient de délimiter qu’il s’agit d’une navigation. Ca sera possible en HTML 5, et ça ça sera utile à l’utilisateur ou au navigateur.
Enfin, même s’il fallait faire du marquage, le HTML est concu comme un marquage « à plat », avec peu ou pas de hiérarchie dans sa structure. Les seules balises prévues avec une hiérarchie sont les blockquote (niveaux de citation), les listes imbriquées, et les tableaux (colonne, ligne, groupes). Même les titres n’induisent pas une hiérarchie mais une simple numérotation à plat. Ne soyez pas plus royalistes que le roi.
Pour être constructif et pas uniquement critique : J’aimerai ajouter la virgule à vos signes de ponctuation. C’est ce que je mettrai intuitivement pour une phrase à l’oral (pause) ou à l’écrit (dans une lettre à la main) pour décrire un « Je suis à » hiérarchie (« Je suis en France, à Paris, rue Tartempion »). Ca se lit très bien sous Jaws, ça se lit aussi bien à l’écrit, ça respecte le français, que demander de plus ? Les solutions les plus simples sont toujours les meilleurs.
Sinon à défaut, si vous n’aimez pas la virgule, alors sérieusement mettez un chevron « > ». Le « : » induit le bon sens dans la phrase mais il est généralement unique, on ne les imbrique pas. En mettre plusieurs fait (pour moi) perdre ce sens de « entrons dans le détail » pour ne plus relever que du décoratif (et pas du plus bel effet).
Bref, fil d’ariane ?
Vous êtes dans le rayon technique & informatique, écrans LCD, 24 » et plus.
Merci pour cet article génial .. qui me laisse perplexe … Jusqu’à aujourd’hui, les listes me semblait adaptée au problème, du moins de facto. Je vais revoir mes méthodologies grâce à la démonstration Jaws et les arguments de Stéphane et d’Éric
Je n’arrive pas à trouver dans l’explication à quel moment la flèche → est évincée, il y a une raison logique ?
Par convention je penche assez systématiquement du côté du chevron « > ».
Salut David,
En effet, j’ai été un peu rapide sur ce point. Le temps de refaire quelques tests sur Jaws pour être sûr, mais pourquoi pas.
J’avoue que le commentaire d’Éric me convainc assez en attendant.
J’utilise aussi la solution 2. Ce n’est pas forcement la flemme que d’aller au plus simple. Je pars du principe que la convention c’est le signe « > » et qu’un non-voyant est déjà habitué à ce type de convention. J’imagine que ca sera peut-être encore plus perturbant pour lui qu’on change la façon de faire tout le temps…
Le HTML sémantique je suis pour aussi, mais il y a un juste milieu c’est comme ton article mettre des
<p>dans les<li>. Point trop n’en faut pour moi.J’aime faire des choses simples qui tiennent la route, avec un minimum de bidouille !
Bon suite à cet article j’ai décidé de mettre des « vraies » phrases en title sur mon blog, merci.
En plus certains moteurs (Yahoo! entre autres) géraient mal des » et les remplaçaient par des » dans les résultats ce qui rendait les résultats assez difficiles à comprendre au final.
J’aime beaucoup la virgule d’Eric; en effet, c’est joli, français, élégant, a du sens en français (bien plus que le chevron, qui n’a de sens que chez un célèbre constructeur automobile, les développeurs Web, et les scientifiques).
Bref, j’abonde
Julien, tu oublies la force de la convention.
J’ai percuté l’autre jour en expliquant à ma fille ce qu’on voyait sur un panneau de directions. Je lui dis « tu vois la flèche qui pointe à gauche ? » Elle ne voyait pas. Elle, elle voyait un rectangle avec un côté gauche pointu.
(oui, je sais, c’est approximatif)
(et le premier qui dit qu’elle est nulle ma fille, j’envoie Vincent lui mettre un bourre-pif)
(même en pleine paix, faut pas pousser Raoul dans ses retranchements)
La convention avec les panneaux de signalisation existe, et a du sens à peu près dans le monde entier.
De même, le signe supérieur est devenu assez conventionnel pour les fils d’ariane, non ?
David : pendant que tu y es, dans les rubriques de ton site, mets donc un espace avant les spans :
Merci Stéphane, c’est corrigé :-).
J’ai choisi le >. Voir en haut à gauche sur cette page : http://www.elitwork.com/xhtml_tutoriel.html
Une question que je me suis posée; que mettre en premier ? Le fil d’ariane ou les raccourcis (contenu, menu, accessibilité).
We aim to please.
Laissons maintenant ce blog reprendre son cours normal. À vous les studios.
@Nicolas: clairement si tu as besoin de liens d’évitement, ils devraient être avant tout.
Le fil d’ariane va plus bas je pense. Visuellement aussi d’ailleurs parce que sur ta page AMHA il est peu utile car peu visible. je le verrai en plus gros, tout en haut du cadre de contenu blanc.
Sinon, Vous êtes XXXXX, pas vous êtes « ici » (ce qui peut se concevoir sur une carte, mais pas sur un fil d’ariane ou un texte).
J’ai toujours opté pour la balise « p » et les séparateurs « > » pour des raisons très précisément semblables à celles exposées au premier commentaire, par Eric.
Non, pas de « li » dont je n’ai jamais compris la pertinence. Et surtout pas des virgules : comment sépareraient-elles correctement des titres contenant eux-mêmes des virgules !??
@Eric : C’était sa position initiale, mais c’est pas très beau… Ca gâche l’effet titre du titre.
Sinon, pour la précédence* des raccourcis, tu as probablement raison.
Reste à trouver une place visible, mais pas intrusive de ce satané fil d’Ariane. Après, je pense que sur la plupart de mes sites, il ne sert à rien (profondeur <=2). Je le met pour le maillage interne, du coup, la position en haut à droite en petit me paraît justifiée.
*pas sûr que ça éxiste
Désolé de polluer, mais j’ai soumis un peu vite. Concernant le vous êtes ici, vous êtes seul ça fait bizarre. Faudrait trouver une formule qui ne fasse pas « petit nègre » ou alors ne rien mettre, mais là, ça sent la confusion.
Genre « Votre position » ou « Fil d’Ariane » mais là, pas sûr que ça soit compris pour le commun des mortels. Des idées ?
Dans un esprit de chipotage ultime et d’interrogation légitime :
Je constate qu’on part du principe qu’un logiciel lit des informations inutiles pour l’utilisateur et que du coup on change de pratique. Les Windows Eyes et autres solutions adoptent-ils tous le même comportement pour la lecture des listes ?
Maintenant c’est vrai qu’on a tendance à attribuer beaucoup trop de sémantique aux listes à puces, même là où il n’y en a pas, la faute à la pauvreté du langage HTML comme l’a bien expliqué Eric.
C’est vrai qu’il est vraiment chouette ce blog.
Bonjour,
bon article, qu’en est-il du _ (underscore) tiré du monde de l’informatique ?
@Frank : Ce ne sont pas des informations inutiles, elles sont la plupart du temps pertinentes. Si une revue d’écran me dit que c’est une liste de n éléments, c’est loin d’être inutile.
La pertinence d’annoncer les listes c’est que l’utilisateur puisse « passer » la liste. Typiquement une liste de navigation, le lecteur peut passer au prochain bloc en dessous de la liste.
Ca permet aussi de se repérer parce que la pause à l’oral ne permet pas toujours de savoir qu’on est dans une liste ou d’individualiser les éléments d’une liste. C’est particulièrement vrai si ta liste contient de vraies phrases.
L’annonce de la liste est du même ordre que la présence de puces / séparateurs et de fins de lignes sur la version graphique. En général c’est indispensable.
Les seuls éléments qui sont inutiles à mentionner à l’oral sont généralement des éléments de présentation ou « inutiles ». Les seules exceptions sont à priori les paragraphes (parce que une pause peut suffire à faire l’affaire), les emphases (si le lecteur sait moduler la voix), et les images avec un texte alternatif bien foutu. Mais vu la vitesse utilisée habituellement par les lecteur d’écrans quand on en a l’habitude, je ne serai pas étonné que nommer explicitement ces balises (p, em, strong, img) soit finalement plus utile/pertinent qu’une pause ou qu’une modulation de voix.
Stéphane, tu as des infos sur ce qui est explicitement annoncé ou pas ?
Mais le fil d’ariane dont vous parlez n’est-il pas rendu nécessaire par la complexité des urls, pour pallier l’incompétence de la majorité des sites web à gérer correctement les urls ?
Un exemple : aujourd’hui vous avez un fil d’ariane sur votre page de votre site internet :
Vous êtes au rayon bricolage > peinture > acrylique
Devrait correspondre à la page dont l’url est :
http://monsite.net/bricolage/peinture/acrylique/
Ce qui rend de fait le fil d’ariane inutile puisqu’il est déjà présent dans la barre d’adresse, juste au-dessus.
Pour ceux qui souhaitent impérativement faire un rappel du fil d’ariane dans la page (par exemple pour proposer un fil d’ariane cliquable, item par item).
La logique voudrait qu’on utilise le slash « / », comme dans l’url. Même si ce n’est pas la convention actuelle, ni le plus intuitif a priori, c’est le plus cohérent. Et cela pourrait devenir la norme, et donc le plus intuitif…
L’URL n’est pas une navigation, surtout pas. C’est toujours bien si elle a du sens, mais le but de ces urls « claires » c’est d’aider les gens à les taper/dicter/mémoriser (et éventuellement donner du poids aux mots-clefs dans les moteurs de recherche). Les URLs ne sont pas là pour gérer un rubricage ou la navigation sur votre site. D’ailleurs la « mode » actuelle est plutot de faire des URLs très à plat, quasiment tout à la racine ou avec un rubricage dans les URLs de 1 ou 2 niveaux au max (contrairement au rubricage du site qui peut aller bien plus loin).
Sur le fil d’ariane avoir : boutique, bricolage, peinture, pinceaux & rouleaux, rouleaux anti-gouttes a du sens. Ca permet de revenir finement en arrière, avec une bonne granularité (et d’aider le SEO, là aussi). Par contre dans l’url, on est plutôt dans quelque chose comme /bricolage/rouleaux-a-peinture.
Si les gens bricolent l’URL à la main (ce qui incite à avoir des URLs qui ressemblent à un fil d’ariane) c’est surtout faute d’avoir une navigation utile et pertinente dans la page. S’ils ont le fil d’ariane « boutique, bricolage, peinture, pinceaux & rouleaux, rouleaux anti-gouttes » ils n’ont vraiment aucune raison de bricoler l’url et c’est plutot intéressant pour tout le monde qu’elle soit la plus courte possible (copier/coller dans un mail, dicter au téléphone, etc.)
Et pourquoi donc ?
La question est de savoir si le fil d’ariane est là pour : 1 - indiquer au visiteur où il se trouve 2 - ou pour lui permettre de naviguer simplement dans le site
Pour la première solution, je pense qu’un fil d’ariane n’est pas nécessaire si l’url est bien faire (bien qu’Eric ne soit pas d’accord sur ce point, mais j’ai du mal à être convaincu…).
Pour la seconde solution, un fil d’ariane est alors effectivement utile, mais il devrait être identique à l’url.
Les urls longues ne doivent pas être un problème : pas de différence pour un copier coller, quant à la dicter au téléphone, c’est déjà rare de le faire, et c’est quand même plus facile quand c’est une url composée de mot intelligible plutôt que de sigle abscons…
Bref url simple et intelligible et fil d’ariane ne s’opposent pas forcément, ils se complètent (voir mon premier commentaire).
[…] sur html zen garden […]
Réponse : > Raison : le fils d’ariane est le plus utilisé sur cette forme, par conséquence les utilisateurs vont plus rapidement comprendre qu’il s’agit d’un fils d’ariane
Voir étude de 2002 de Angela Colter (47,10% utilisait ce type d efils d’Ariane contre 11% pour les : )
[…] Pour coder le chemin de fer, vous pouvez aller consulter ces deux articles de vrais pointilleux (que j’adore ça !) : Fil d’Ariane et sémantique et Fil d’Ariane et sémantique (à nouveau). […]
Laisser un commentaire