Documentation d'Accessibilité - Test RGAA 14.1.1

Ce document détaille les fonctionnalités d'accessibilité, le guide d'utilisation et les éventuels défauts de compatibilité du site web, conformément aux exigences du test 14.1.1 du RGAA.

1. Description des fonctionnalités d'accessibilité

Le site intègre plusieurs dispositifs pour faciliter la navigation et l'interaction avec les technologies d'assistance :

  • Navigation au clavier robuste : Tous les éléments interactifs sont accessibles via la touche Tab. L'ordre de tabulation suit la logique visuelle de la page.
  • Gestion du focus : Lors de l'ouverture de panneaux modaux (filtres, menus mobiles), le focus est automatiquement déplacé vers le premier élément interactif (généralement le bouton de fermeture). Un "focus trap" est activé pour empêcher le focus de sortir du panneau tant qu'il est ouvert.
  • Support de la touche Échap (Esc) : Permet de fermer instantanément les menus déroulants, les méga-menus, le panneau de filtres et le tiroir de navigation mobile. Le focus est alors restauré sur le bouton parent ayant déclenché l'ouverture.
  • Sémantique ARIA (WAI-ARIA) :
    • aria-expanded : Indique si un menu ou un bloc de filtre est ouvert ou fermé.
    • aria-controls : Relie les boutons à leurs zones de contenu respectives.
    • aria-label : Fournit des descriptions textuelles claires pour les icônes et les boutons d'action (ex: "Supprimer le filtre 'Bio'").
    • role="region" / aria-labelledby : Identifie les sections importantes pour faciliter la navigation par point de repère.
  • Éléments natifs : Utilisation privilégiée de boutons (<button>) et de liens (<a>) natifs pour garantir une interopérabilité maximale.

2. Guide d'utilisation des fonctionnalités

Navigation dans la boutique

  • Menu Principal (Desktop) : Utilisez les touches Tab et Shift+Tab. Pour fermer un sous-menu ouvert, appuyez sur Échap. Le focus reviendra sur le menu parent.
  • Filtres de produits :
    • Activez le bouton "Filtrer" via Entrée ou Espace.
    • Dans le panneau, utilisez Tab pour naviguer entre les groupes de filtres.
    • Activez/Désactivez un groupe de filtres via Entrée ou Espace.
    • Pour fermer le panneau, appuyez sur Échap ou sur le bouton de fermeture.
  • Suppression de filtres : Chaque filtre actif possède son propre bouton de suppression, identifié par son nom, accessible par tabulation.

Recherche

  • Utilisez le bouton de recherche dans l'en-tête. Le focus est placé dans le champ de saisie dès l'ouverture. Utilisez Échap pour annuler la recherche et fermer le champ.

3. Défauts de compatibilité avec les technologies d'assistance

Bien que nous nous efforcions d'assurer une compatibilité totale, les composants suivants peuvent présenter des limitations :

  • Sélecteur de prix (Price Range Slider) : Ce composant personnalisé utilise des curseurs de glissement. Bien qu'utilisable via les champs de saisie numériques "Min" et "Max", l'interaction directe avec les curseurs graphiques peut s'avérer complexe avec certains lecteurs d'écran sur mobile. Nous recommandons d'utiliser les champs de saisie pour une précision maximale.
  • Transitions Visuelles : Certaines micro-animations de menu peuvent entraîner un léger délai de mise à jour des attributs ARIA (quelques millisecondes).
  • Méga-Menus complexes : Dans de rares cas, la lecture linéaire des méga-menus très denses peut être fastidieuse. Nous avons ajouté des noms de régions pour aider le saut de section.

Dernière mise à jour : Janvier 2026