« Quel outil pour un plan qui ne bouge jamais mais qu’il faut pouvoir cliquer point par point ? » — la question que s’est posée un office de tourisme d’une petite ville fortifiée du Sud-Ouest, qui souhaitait présenter son parcours patrimonial de quatorze points d’intérêt sans recourir à une carte interactive du type Leaflet, jugée disproportionnée pour un plan qui ne change pratiquement jamais et ne nécessite aucune géolocalisation réelle.
Le plan existait déjà en illustration vectorielle, dessinée par un graphiste local pour les dépliants papier. L’idée a été de réutiliser ce même fichier, converti en SVG inline directement dans le HTML du bloc, avec chaque point d’intérêt rendu cliquable pour afficher sa description sans quitter la page.
Pourquoi le SVG inline plutôt qu’une image
Une image SVG chargée via une balise <img> ne permet ni de cibler un élément individuel en CSS, ni de lui attacher un gestionnaire de clic en JavaScript : le fichier reste une boîte opaque du point de vue du DOM. En insérant le code SVG directement dans le HTML rendu par le bloc, chaque point d’intérêt devient un élément manipulable comme n’importe quel autre nœud de la page.
<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
<path d="M120,340 L200,310 L240,380 Z" class="zone-remparts" />
<circle
cx="215" cy="345" r="8"
class="point-interet"
data-point-id="porte-nord"
/>
<!-- 13 autres points -->
</svg>Modéliser les points d’intérêt comme attributs de bloc
Plutôt que de coder en dur les quatorze descriptions dans le SVG, chaque point est un objet dans un attribut de type tableau, éditable via l’inspecteur — ce qui permet à l’office de tourisme de corriger un texte ou d’ajouter un quinzième point sans toucher au code :
{
"attributes": {
"pointsInteret": {
"type": "array",
"default": [
{
"id": "porte-nord",
"titre": "Porte Nord",
"description": "Vestige du rempart du XIVe siècle, seule porte encore fermée par ses vantaux d'origine.",
"coordX": 215,
"coordY": 345
}
]
}
}
}Le rendu final combine le SVG statique (les tracés du plan, qui ne changent pas) et les coordonnées dynamiques issues de cet attribut, pour positionner chaque marqueur cliquable directement dans render.php à partir des valeurs enregistrées.
Le comportement au clic, sans librairie
L’affichage de la description au clic repose sur un script minimal, sans framework, qui bascule une classe CSS sur un panneau latéral :
document.querySelectorAll('.point-interet').forEach((point) => {
point.addEventListener('click', () => {
const id = point.dataset.pointId;
const panneau = document.querySelector('.panneau-description');
const donnee = document.querySelector(`[data-fiche="${id}"]`);
panneau.innerHTML = donnee.innerHTML;
panneau.classList.add('est-ouvert');
});
});Les fiches descriptives, elles, sont rendues côté serveur dans des éléments cachés (hidden) associés à chaque point, ce qui garantit que le contenu reste accessible aux moteurs de recherche et aux lecteurs d’écran même sans interaction JavaScript.
Rendre le plan accessible au clavier
Un point cliquable en SVG n’est pas focusable par défaut au clavier : il a fallu ajouter un attribut tabindex="0" et un rôle role="button" sur chaque cercle, ainsi qu’un gestionnaire d’événement keydown réagissant à la touche Entrée, en plus du clic à la souris. Sans cet ajout, un visiteur naviguant au clavier n’aurait tout simplement pas pu accéder aux quatorze fiches.
- Chaque point reçoit un
aria-labelreprenant son titre, pour une lecture correcte au lecteur d’écran. - Le panneau de description, une fois ouvert, reçoit le focus automatiquement pour signaler le changement de contenu.
- Un bouton de fermeture explicite complète le clic en dehors du panneau, pour les utilisateurs de clavier ou de synthèse vocale.
Un plan qui ne fonctionne qu’à la souris n’est un plan que pour une partie des visiteurs : le clavier n’est pas une option secondaire, c’est un chemin d’accès à part entière.
Ce que cette approche n’a pas cherché à faire
Aucune géolocalisation réelle, aucun calcul d’itinéraire, aucune couche de tuiles cartographiques : le plan reste une illustration fixe, fidèle au dépliant papier existant. Un visiteur cherchant à se géolocaliser en temps réel dans les ruelles de la ville devra se tourner vers une application de cartographie classique — ce n’était pas l’objectif de ce bloc, pensé comme un complément numérique au support papier existant, pas son remplacement.
En résumé
Un SVG inline, couplé à des attributs de bloc éditables pour les points d’intérêt, permet de construire un plan de visite cliquable sans dépendance à une librairie cartographique. L’effort principal se situe moins dans le rendu visuel que dans l’accessibilité au clavier, souvent oubliée sur ce type de composant graphique.
