Un lecteur audio qui survit au changement de pageAn audio player that survives page navigation

Sur le site d’un artiste, le visiteur lance un morceau, puis va voir les dates de concert. Si la musique s’arrête au changement de page, l’effet est désastreux — et c’est pourtant le comportement par défaut du web.On an artist’s site, the visitor starts a track, then goes to look at tour dates. If the music stops when the page changes, the effect is dreadful — and yet that is the web’s default behaviour.

Trois façons de faireThree ways to do it

• Tout mettre dans une seule page, et simuler la navigation. Simple, mais on perd les adresses distinctes et le référencement avec.Put everything in one page and simulate navigation. Simple, but you lose distinct URLs and the rankings with them.
• Intercepter les clics et remplacer le contenu sans recharger la page, en mettant l’adresse à jour. Plus de travail, mais on garde des pages réelles.Intercept clicks and swap the content without reloading, updating the URL. More work, but you keep real pages.
• Afficher le lecteur dans un cadre séparé qui ne se recharge pas. Technique ancienne, pénible à rendre accessible.Show the player in a separate frame that never reloads. An old technique, painful to make accessible.

Pourquoi la deuxièmeWhy the second one

Chaque page garde son adresse, son titre, ses balises de partage et son contenu complet dans le document servi par le serveur. Un moteur qui ne rend pas le script voit un site parfaitement normal. Le script, lui, ne fait qu’améliorer l’expérience : il remplace le contenu principal, met à jour le titre et l’adresse, et laisse le lecteur audio tranquille.Each page keeps its URL, its title, its sharing tags and its full content in the document the server sends. An engine that does not run the script sees a perfectly normal site. The script only improves the experience: it swaps the main content, updates the title and URL, and leaves the audio player alone.

C’est la différence entre un site qui a besoin du script pour exister et un site que le script améliore. La première catégorie se référence mal et casse pour tout le monde dès qu’une erreur survient.That is the difference between a site that needs the script to exist and a site the script improves. The first category ranks badly and breaks for everyone the moment an error occurs.

Les détails qui font la différenceThe details that make the difference

• Le focus doit être déplacé vers le nouveau contenu, sinon un lecteur d’écran ne sait pas que la page a changé.Focus must move to the new content, otherwise a screen reader does not know the page changed.
• Le titre du document doit être mis à jour, sinon l’historique du navigateur devient illisible.The document title must be updated, otherwise the browser history becomes unreadable.
• Le bouton « précédent » doit ramener au contenu précédent, pas à la page d’accueil.The back button must return to the previous content, not to the home page.
• Une annonce vocale discrète signale le changement de page aux technologies d’assistance.A discreet live announcement tells assistive technology the page changed.

Remplacer le contenu sans toucher au focus ni au titre, c’est rendre le site inutilisable au clavier et au lecteur d’écran. Ces trois lignes ne sont pas optionnelles.Swapping the content without touching focus or title makes the site unusable by keyboard and screen reader. Those three lines are not optional.

Le repli, toujoursThe fallback, always

Si le script ne se charge pas, les liens restent des liens : le site fonctionne, la musique s’arrête au changement de page, et c’est tout. Aucun visiteur ne se retrouve devant une page blanche. C’est la condition pour se permettre ce genre de raffinement.If the script does not load, links are still links: the site works, the music stops when the page changes, and that is all. No visitor ends up facing a blank page. That is the condition for allowing yourself this kind of refinement.