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 !