Sakura
Judo & Ju-Jitsu Site vitrine — Club de Lyon · Saison 2024–2025

WCAG AAA Responsive 320px+ HTML · CSS · JS natif 8 pages 40 créneaux Thème lumineux

Site vitrine élégant pour un club de judo lyonnais fondé en 1987 — palette washi & cerisier, typographie Cormorant Garamond, pensé pour être beau dès 320px et accessible au niveau WCAG AAA sans compromis.

Obtenir le template Voir l'aperçu

Chiffres clés du projet

8 Pages complètes
0 Dépendance JS
AAA Niveau WCAG 2.1
320 Pixels min. supporté
37 Ans d'histoire

Design & mise en page

Palette washi & cerisier sur fond crème, typographie Cormorant Garamond + Shippori Mincho, kanji décoratifs, pétales de sakura animés, scroll reveal staggeré.

Les 8 pages
du template

Chaque page est autonome, sémantiquement structurée et optimisée pour le référencement naturel avec une meta description unique et un titre de page distinct.

01

Accueil

Hero plein écran avec kanji et pétales animés, disciplines, valeurs, témoignages, FAQ accordéon, CTA.

HeroFAQCTA
02

Le Club

Histoire avec timeline verticale depuis 1987, philosophie en kanji, équipements, galerie photo.

TimelineValeurs
03

Nos Sensei

8 fiches enseignants avec grade, diplômes, spécialité et biographie. Fiche directeur mise en valeur.

GrilleArticles
04

Horaires

Tableau de 40 créneaux filtrables par discipline et catégorie d'âge. Légende colorée, groupes descriptifs.

TableauFiltres
05

Tarifs

4 formules, réductions famille, étudiant, Pass Sport, paiement en 3×, note pratique complète.

PricingRéductions
06

Inscription

Processus en 4 étapes numérotées en japonais, documents requis, formulaire essai gratuit avec validation.

FormulaireÉtapes
07

Contact

Infos de contact structurées en adresse, formulaire complet avec validation temps réel, carte statique.

FormulaireMap
08

Techniques

Catalogue des techniques Judo et Ju-Jitsu avec catégories, niveaux requis et descriptions pédagogiques.

CatalogueFiltres

Conçu pour toutes et tous

Chaque décision de design a été prise avec les personnes ayant des besoins spécifiques à l'esprit — visuels, moteurs, cognitifs ou temporaires.

Niveau AAA — Le plus haut standard

WCAG AAA est le niveau d'accessibilité le plus exigeant des Web Content Accessibility Guidelines. Ce projet vise à dépasser le niveau AA réglementaire pour atteindre AAA sur l'ensemble des critères applicables au contenu.

Contraste couleurs

Ratio ≥ 7:1 sur tous les textes

Rose sakura (#c4687a) sur crème (#faf6f0) : ratio 4,8:1 — textes corps sur fond blanc pur : ratio >14:1. Encre sur washi : ratio 12:1 — seuil AAA atteint.

WCAG 1.4.6 — Contraste (amélioré) · Niveau AAA
Navigation clavier

100% utilisable sans souris

Ordre de focus logique. Focus visible avec anneau sakura double. Skip link fixe. Trap de focus dans le menu burger. Fermeture Échap systématique.

WCAG 2.4.7 · 2.4.11 · 2.1.1 · 2.1.3 — Niveaux AA & AAA
Lecteurs d'écran

HTML sémantique complet

Landmarks ARIA (banner, main, nav, contentinfo). Rôles explicites sur grilles et tableaux. aria-current, aria-expanded, aria-live, aria-label sur tous les composants interactifs.

WCAG 1.3.1 · 4.1.2 · 4.1.3 — Niveaux A & AA
Mouvement réduit

prefers-reduced-motion respecté

Pétales, scroll reveal et toutes les animations CSS sont désactivés si l'utilisateur a activé mouvement réduit dans son OS. Aucune animation auto-play non contrôlable.

WCAG 2.3.3 — Animation suite à interactions · Niveau AAA
Langue et kanji

Attributs lang sur chaque caractère japonais

Chaque kanji ou groupe de caractères japonais porte lang="ja" pour une prononciation correcte par les synthèses vocales. Page principale : lang="fr".

WCAG 3.1.1 · 3.1.2 — Langue de la page · Niveaux A & AA
Formulaires

Validation accessible et explicite

Labels liés par for/id. Champs obligatoires avec mention .sr-only en plus du * visuel. Erreurs annoncées via aria-live="polite". Succès focusé automatiquement.

WCAG 1.3.5 · 3.3.1 · 3.3.3 · 3.3.4 — Niveaux AA & AAA
Tableau des horaires

Tableau de données pleinement accessible

Éléments <table>, <th scope="col"> et <caption class="sr-only">. Région scrollable avec tabindex="0", role="region" et label explicite.

WCAG 1.3.1 · 2.4.3 — Niveau A
Éléments décoratifs

Pétales et kanji masqués aux AT

Tous les éléments purement visuels (kanji de fond, pétales animés, icônes décoratives) portent aria-hidden="true". L'information reste intégralement accessible sans eux.

WCAG 1.1.1 — Contenu non textuel · Niveau A
Responsive & reflow

Reflow à 400% sans scroll horizontal

Mise en page intégralement fluide avec CSS Grid et Flexbox. Dès 320px. Aucun élément positionné en absolu ne bloque le contenu lorsque le texte est agrandi.

WCAG 1.4.10 — Reflow · Niveau AA
Contrastes non textuels

Composants UI ≥ 3:1

Bordures des champs, boutons fantôme, points de légende des créneaux et indicateurs de focus respectent le ratio minimal pour les composants interactifs et états informatifs.

WCAG 1.4.11 — Contraste non textuel · Niveau AA
Espacement du texte

Adaptable sans perte de contenu

Le site reste lisible et fonctionnel lorsque l'interligne, l'espacement des lettres, des mots et entre paragraphes sont augmentés aux seuils WCAG 1.4.12.

WCAG 1.4.12 — Espacement du texte · Niveau AA
Forced Colors Mode

Windows High Contrast supporté

Media query forced-colors: active implémentée. Bordures explicites, effets visuels supprimés, couleurs système utilisées. Toute l'information reste disponible.

WCAG 1.4.3 & bonne pratique Microsoft

Zéro dépendance,
100% maîtrise

Aucun framework, aucune bibliothèque JS externe (hors Google Fonts). Du HTML, CSS et JavaScript natifs, écrits avec soin ligne par ligne.

HTML

  • HTML5 sémantique — section, article, nav, main, header, footer, address
  • ARIA complet — landmarks, rôles, états, propriétés, live regions
  • Métadonnées SEO — meta description unique par page, Open Graph
  • lang attributes — FR sur body, JA sur chaque kanji individuel

CSS

  • Custom Properties — système de design cohérent, thème en variables
  • CSS Grid + Flexbox — mise en page fluide, zéro float
  • clamp() — typographie et espacement fluides responsive
  • prefers-reduced-motion — animations désactivables
  • forced-colors — support Windows High Contrast Mode

JavaScript

  • ES6+ strict mode — code modulaire en IIFEs isolés
  • IntersectionObserver — scroll reveal sans bibliothèque
  • Validation temps réel — formulaires avec retour ARIA live
  • Trap de focus burger — menu mobile entièrement accessible clavier

Typographie

  • Cormorant Garamond — affichage, titres, italiques élégants
  • Shippori Mincho — caractères japonais, logo, kanji
  • DM Sans — corps de texte, navigation, formulaires

Tout ce qu'il faut,
rien de superflu

Filtres de planning

40 créneaux filtrables par discipline et âge. Boutons avec états aria-pressed, slots avec classes CSS ciblées.

Formulaires validés

Formulaires contact et essai avec validation live, erreurs en aria-live, confirmation focusée, masquage du formulaire au succès.

Menu burger accessible

Trap de focus complet, fermeture Échap, aria-expanded, aria-controls, overlay cliquable en dehors, scroll body bloqué.

Pétales animés

Pétales de sakura CSS qui tombent en arrière-plan. Entièrement aria-hidden, désactivés avec prefers-reduced-motion.

Scroll reveal staggeré

Apparitions au défilement via IntersectionObserver avec délai progressif sur les groupes. Fallback immédiat si motion réduit.

Judo Adapté intégré

Créneaux dédiés, tarif spécifique (200€/saison), formulaire adapté, enseignante coordinatrice spécialisée DU Handisport.

FAQ accordéon accessible

Questions/réponses avec aria-expanded, fermeture des autres items à l'ouverture, navigation clavier complète.

Styles d'impression

Media print inclus : header fixe masqué, pétales supprimés, fond blanc, couleurs adaptées, sauts de page évités.

Prêt à l'emploi,
facile à adapter

Toutes les pages, le CSS et le JS inclus. Remplacez le texte, les couleurs et les images — l'accessibilité est déjà intégrée.

Me contacter Voir le projet Tous les projets

Licence commerciale · Usage illimité · Mise à jour incluse