Fil d'Ariane mobile — scroll horizontal

Ce dépôt documente une expérimentation CSS visant à améliorer une problématique souvent rencontrée sur mobile : un fil d'Ariane trop long pour tenir sur l'écran, sans sacrifier la lisibilité du chemin ni la visibilité de la page courante.

Il ne s'agit pas d'un composant de production prêt à l'emploi, mais d'un prototype exploratoire — démonstration HTML (index.html) et feuille de styles (style.css) — pour tester des pistes avant une éventuelle intégration (thème WordPress, markup Yoast SEO). Les approches retenues : défilement horizontal, affichage initial centré sur la page courante, et indicateurs visuels (fades) synchronisés au scroll.

Problématique

Sur mobile, un fil d'Ariane avec de nombreux niveaux (ex. site e-commerce ou arborescence profonde) dépasse souvent la largeur de l'écran.

Comportements habituels peu satisfaisants :

• Retour à la ligne — le fil d'Ariane occupe plusieurs lignes et alourdit l'interface.
• Troncature (text-overflow: ellipsis) — une partie du chemin devient illisible sans action de l'utilisateur.
• Scroll horizontal natif — fonctionnel, mais le scroll démarre à gauche : la page courante (souvent à droite) peut rester hors écran au chargement.
• Absence de repère visuel — l'utilisateur ne voit pas immédiatement qu'il peut faire défiler pour atteindre les niveaux parents.

Ce prototype vise à proposer une expérience mobile où :

1. Le fil d'Ariane tient sur une seule ligne et se scroll horizontalement.
2. La page courante est visible dès l'affichage (alignée à droite).
3. Des dégradés sur les bords signalent qu'il reste du contenu scrollable, et s'adaptent à la position du scroll.

Solution technique

La solution repose sur CSS uniquement (pas de JavaScript), en s'appuyant sur le markup généré par Yoast SEO.

Structure HTML

<div class="yoast-breadcrumbs-wrap">
    <nav class="yoast-breadcrumbs" aria-label="Fil d'Ariane">
        <span>
            <span><a href="#">…</a></span>
            <span class="breadcrumb_last" aria-current="page">…</span>
        </span>
    </nav>
</div>

• .yoast-breadcrumbs-wrap — conteneur fixe qui porte les dégradés latéraux (pseudo-éléments).
• .yoast-breadcrumbs — zone scrollable (overflow-x: auto).
• Markup interne Yoast : .yoast-breadcrumbs > span > span pour chaque niveau.

1. Scroll horizontal (mobile)

En dessous de 768px :

• white-space: nowrap et min-width: max-content empêchent le retour à la ligne.
• La barre de scroll est masquée (scrollbar-width: none).
• -webkit-overflow-scrolling: touch améliore le scroll au doigt sur iOS.

2. Affichage de la page courante à droite (scaleX(-1))

Par défaut, un conteneur scrollable commence à gauche. Pour montrer d'abord la fin du fil d'Ariane (page courante) :

1. .yoast-breadcrumbs reçoit transform: scaleX(-1) — le contenu est retourné horizontalement, le point de scroll initial se trouve à droite.
2. .yoast-breadcrumbs > span reçoit aussi scaleX(-1) — le texte et les liens restent lisibles dans le bon sens.

C'est un double flip : inversion du scroll, pas du texte.

3. Fades synchronisés au scroll (scroll-timeline)

Les dégradés gauche/droite doivent apparaître ou disparaître selon la position du scroll :

Élément	Rôle
scroll-timeline: --breadcrumb-x inline	Sur .yoast-breadcrumbs, lie la timeline au scroll horizontal
timeline-scope: --breadcrumb-x	Sur le wrapper, expose la timeline aux pseudo-éléments
animation-timeline: --breadcrumb-x	Anime l'opacité des fades selon le scroll
@keyframes breadcrumb-fade-left / -right	Seuils à 10 % et 90 % du parcours de scroll

• Fade gauche — visible tant qu'il reste du contenu à gauche ; masqué quand le bord gauche est atteint (~90 %).
• Fade droit — masqué au départ (~10 %) ; visible dès qu'on peut scroller vers la gauche (niveaux parents).

Fallback : sans support de animation-timeline, les opacités initiales (opacity: 1 à gauche, 0 à droite) restent en place.

4. Configuration via variables CSS

Les réglages du composant sont centralisés sur .yoast-breadcrumbs-wrap :

• couleurs, typo, espacements ;
• --breadcrumb-fade-color (aligné sur le fond de page pour un fondu propre) ;
• --breadcrumb-fade-width, --breadcrumb-fade-start / --breadcrumb-fade-end (seuils documentés, à synchroniser avec les @keyframes).

Fichiers

Fichier	Description
index.html	Page de démo avec markup Yoast anonymisé (Lorem ipsum)
style.css	Styles du composant + mise en page de démo

Tester la démo

1. Ouvrir index.html dans un navigateur récent.
2. Réduire la fenêtre sous 768px ou utiliser les outils de développement (mode mobile).
3. Faire défiler le fil d'Ariane horizontalement et observer les fades.

Compatibilité navigateur

Fonctionnalités avancées (mobile) :

• scroll-timeline / animation-timeline — Chrome 115+, Safari 26+, Firefox (support partiel selon versions).
• Nesting CSS natif (&) — navigateurs récents.
• @media (width < 768px) — syntaxe de plage moderne.

À éviter en production sans fallback : @custom-media (support insuffisant si non compilé via PostCSS).

Sans animation-timeline, le scroll et le flip scaleX continuent de fonctionner ; seule l'animation des fades est statique.

Accessibilité

Ce qui est déjà en place

Le markup Yoast fournit une base sémantique solide :

• <nav aria-label="Fil d'Ariane"> — repère de navigation identifiable par les technologies d'assistance.
• Liens réels (<a href="…">) pour chaque niveau parent, atteignables au clavier et activables au lecteur d'écran.
• aria-current="page" sur .breadcrumb_last — indique explicitement la page courante.
• Fades décoratifs (::before / ::after avec pointer-events: none) — ils n'interceptent pas le focus ni les clics ; ils complètent une information déjà disponible via le scroll.

Les liens conservent un padding configurable (--breadcrumb-padding-link-*) pour des zones d'interaction plus confortables au toucher.

Points de vigilance

Sujet	Impact	Détail
Scrollbar masquée	Moyen	scrollbar-width: none réduit l'indicateur natif de contenu scrollable. Les fades compensent visuellement, mais ne remplacent pas un repère pour tous les utilisateurs.
Flip scaleX(-1)	Moyen	L'ordre visuel initial met la page courante à droite ; l'ordre DOM (et donc la lecture au lecteur d'écran) reste de gauche à droite (accueil → page courante). Comportement cohérent avec un fil d'Ariane classique, mais différent de l'affichage initial à l'écran.
Scroll au clavier	Moyen	La zone .yoast-breadcrumbs n'est pas focusable par défaut : seuls les liens reçoivent le focus. Le défilement horizontal au clavier peut être limité selon le navigateur.
Animations liées au scroll	Faible	Les fades s'animent via animation-timeline. En l'absence de prefers-reduced-motion, les transitions restent actives pour les utilisateurs sensibles au mouvement.

Recommandations avant mise en production

1. Conserver aria-label sur <nav> et aria-current="page" sur le dernier élément (fournis par Yoast si correctement configuré).

2. Renforcer le focus clavier — styles :focus-visible visibles sur les liens (ne pas les supprimer dans le thème).

3. Scroll clavier (optionnel) — ajouter tabindex="0" sur .yoast-breadcrumbs si les tests montrent que les utilisateurs clavier ne peuvent pas atteindre les niveaux masqués.

4. Mouvement réduit — désactiver les animations des fades lorsque l'utilisateur a activé « réduire les animations » :

   @media (prefers-reduced-motion: reduce) {
       .yoast-breadcrumbs-wrap @supports (animation-timeline: --breadcrumb-x) {
           &::before,
           &::after {
               animation: none;
           }
       }
   }

5. Tests manuels — vérifier avec au moins un lecteur d'écran (VoiceOver, TalkBack ou NVDA) et la navigation clavier seule sur mobile et desktop étroit.

6. Ne pas fonder l'information uniquement sur les fades — le chemin complet reste accessible via les liens une fois le contenu défilé ; les dégradés sont un aide visuelle, pas le seul indicateur.

Périmètre du prototype

Cette démo n'a pas fait l'objet d'un audit WCAG complet. La section ci-dessus recense les forces du markup Yoast et les limites liées aux choix CSS (scroll masqué, flip, animations). Une validation finale doit être faite sur le site intégré, avec le thème et les couleurs de production.

Intégration WordPress / Yoast

1. Envelopper le fil d'Ariane Yoast existant dans un <div class="yoast-breadcrumbs-wrap">.
2. Copier les sections 2 à 6 de style.css (ou le fichier complet) dans le thème.
3. Ajuster --breadcrumb-fade-color pour qu'il corresponde au fond réel de la zone du fil d'Ariane.
4. Mettre à jour les trois blocs @media (width < 768px) si le breakpoint change.

Aucune modification du PHP Yoast n'est requise tant que les classes .yoast-breadcrumbs et .breadcrumb_last sont conservées.