Un site sportif qui mélange résultats en direct, billetterie, contenus vidéo et articles de fond impose une architecture de navigation rigoureuse. Depuis le 28 juin 2025, la directive européenne sur l’accessibilité couvre les parcours de commerce en ligne destinés aux consommateurs, y compris l’achat de billets ou d’abonnements sur un site sportif. Naviguer parmi les rubriques d’un site consacré au sport ne se limite donc plus à un confort d’usage : c’est une exigence technique et réglementaire.
Navigation au clavier et lecteur d’écran sur un site sportif
Un menu accessible doit fonctionner sans souris. Les exigences européennes demandent que les sites concernés soient perceptibles, utilisables, compréhensibles et robustes. Sur un site sportif, cela se traduit par trois points de contrôle prioritaires.
- Focus visible sur chaque rubrique : quand un utilisateur navigue au clavier avec la touche Tab, chaque lien du menu doit afficher un contour ou un changement de couleur identifiable. Sans cet indicateur, un supporter utilisant un lecteur d’écran ne sait pas quelle rubrique est sélectionnée.
- Ordre de tabulation cohérent avec l’ordre visuel : si le menu affiche « Résultats », « Calendrier », « Billetterie » de gauche à droite, le parcours clavier doit suivre cette même séquence. Un décalage entre l’ordre du DOM et l’ordre affiché désoriente les technologies d’assistance.
- Rôles ARIA sur les sous-menus : un menu déroulant qui regroupe plusieurs disciplines (football, rugby, basketball) a besoin des attributs role= »menu » et role= »menuitem » pour qu’un lecteur d’écran annonce correctement la structure. Sans ces rôles, les rubriques sont lues comme une liste de liens sans hiérarchie.
Un rapport WebAIM publié en février 2025 a détecté des erreurs WCAG sur la plupart des pages d’accueil étudiées. Parmi les problèmes courants : des liens et boutons mal identifiés qui rendent les rubriques difficiles à repérer avec des technologies d’assistance.
Quand un supporter cherche un changement de programmation depuis son téléphone, chaque seconde compte. Un lien de menu étiqueté « En direct » mais codé comme un simple div cliquable ne sera pas annoncé par VoiceOver ou TalkBack. Le remplacer par un élément nav contenant des a natifs règle le problème sans JavaScript supplémentaire.
Nous avons constaté que consulter le plan du site Va Y Avoir Du Sport permet de vérifier rapidement si toutes les rubriques sont référencées et accessibles depuis un point d’entrée unique, ce qui facilite aussi l’indexation par les moteurs de recherche.
Contenus tiers et rubriques mixtes : ce que le site maîtrise vraiment
Un site consacré au sport agrège souvent des flux externes : widgets de score en temps réel, lecteurs vidéo embarqués, modules de billetterie fournis par un prestataire. La directive européenne sur l’accessibilité prévoit une exclusion pour les contenus tiers que l’opérateur ne finance, ne développe ni ne contrôle. Dans la pratique, chaque contenu tiers doit être identifié et isolé dans la navigation.
Le piège fréquent : un widget de résultats en direct injecté en haut de page capte le focus clavier avant le menu principal. Le visiteur qui utilise Tab atterrit dans le widget, parcourt des dizaines de scores, et ne trouve jamais la rubrique « Calendrier » ou « Accès au stade » située plus bas.
Séparer les zones de navigation des flux externes
La solution technique consiste à placer le menu principal dans un élément nav avec un aria-label explicite (par exemple « Menu principal ») et à encapsuler les widgets tiers dans des section distinctes. Un lecteur d’écran peut alors proposer un raccourci direct vers la navigation, sans traverser les contenus externes.
Quand un module de billetterie est fourni par un partenaire, le site n’a pas la main sur son balisage interne. Ajouter un lien d’évitement (« Passer au contenu principal ») avant ce module permet au visiteur de sauter le bloc et d’atteindre la rubrique suivante. Ce lien doit être le premier élément focusable de la page.
Recherche et filtres sur mobile : trouver l’information urgente
Sur un téléphone, le menu hamburger masque la totalité des rubriques. Pour un supporter qui cherche les horaires d’accès au stade dix minutes avant le coup d’envoi, ouvrir un menu, scanner les rubriques, identifier la bonne, puis la charger représente trop d’étapes.
Un champ de recherche visible sans ouvrir le menu réduit ce parcours à une seule action. Le champ doit être placé en dehors du menu hamburger, directement dans le bandeau supérieur. Sur un site sportif, l’autocomplétion doit proposer des résultats typés : « match », « stade », « billet », « résultat ».
Filtres contextuels par discipline et par date
Un site multisport qui couvre dix disciplines produit un volume de pages considérable. Les filtres de rubrique (football, tennis, athlétisme) combinés à un filtre de date permettent de réduire les résultats de recherche à ce qui est pertinent sur le moment.
- Filtre par discipline : affiché sous forme de boutons radio ou de chips, chaque filtre doit porter un label accessible et non un simple pictogramme. Une icône de ballon sans texte alternatif est invisible pour un lecteur d’écran.
- Filtre par date : « Aujourd’hui », « Cette semaine », « Ce mois » couvrent la majorité des besoins. Proposer un calendrier complet en premier choix ralentit la consultation mobile.
- Combinaison des filtres : la page de résultats doit annoncer le nombre d’éléments trouvés via un aria-live= »polite » pour que les utilisateurs de technologies d’assistance sachent si leur recherche a abouti sans recharger la page.
Structure du sitemap et cohérence avec le menu visible
Le sitemap XML et le plan du site HTML remplissent deux fonctions distinctes. Le sitemap XML cible les robots d’indexation. Le plan du site HTML, lui, sert de filet de sécurité pour les visiteurs qui ne trouvent pas leur rubrique via le menu principal.
Sur un site sportif, l’erreur classique est de maintenir un menu visible à cinq rubriques alors que le sitemap HTML en liste trente. L’écart crée une navigation fantôme : des pages existent, sont indexées, mais ne sont atteignables que par la recherche interne ou un lien profond.
Le plan du site HTML doit refléter exactement l’arborescence du menu, avec les mêmes intitulés et la même hiérarchie. Si une rubrique « Résultats rugby » existe dans le menu sous « Résultats > Rugby », le plan du site doit reproduire cette imbrication, pas la lister à plat.
Un site sportif dont le menu, le sitemap HTML et le sitemap XML sont synchronisés offre trois chemins vers la même information. C’est cette redondance maîtrisée qui garantit qu’un supporter, quel que soit son contexte d’utilisation, atteint la rubrique recherchée en moins de trois interactions.
