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

WCAG AAA Responsive 320px+ HTML · CSS · JS natif 9 pages 42 créneaux Arts martiaux

Site vitrine complet pour un club de judo lyonnais fondé en 1991 — pensé pour être beau, rapide, et accessible à toutes et tous sans exception, des 4 ans aux seniors en situation de handicap.

Obtenir le template Voir l'aperçu

Chiffres clés du projet

9 Pages complètes
0 Dépendance JS
AAA Niveau WCAG 2.1
320 Pixels min. supporté
42 Créneaux / semaine

Design & mise en page

Palette encre de Chine & or de tatami, typographie Playfair Display, curseur personnalisé, animations au scroll et kanji décoratifs en arrière-plan.

Les 9 pages
du template

Chaque page est autonome, sémantiquement structurée, et optimisée pour le référencement naturel avec meta descriptions uniques.

01

Accueil

Hero plein écran, valeurs, disciplines, témoignages, FAQ, section CTA. Scroll reveal staggeré.

HeroFAQCTA
02

Le Club

Histoire avec timeline interactive, valeurs en kanji, équipements, galerie photo.

TimelineGalerie
03

Nos Sensei

9 fiches enseignants avec grade, diplômes, spécialité et biographie. Carte directeur mise en avant.

GrilleCards
04

Horaires

Tableau 42 créneaux filtrables par discipline et niveau. Légende, groupes, boutons ARIA.

TableauFiltresARIA
05

Tarifs

4 formules, réductions famille/étudiant/Pass Sport, paiement en 3×, informations pratiques.

PricingRéductions
06

Inscription

Processus en 4 étapes, documents nécessaires, formulaire de réservation cours d'essai gratuit.

FormulaireValidation
07

Contact

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

FormulaireMap
08

Techniques

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

CatalogueFiltres
09

Pages légales

Mentions légales et politique de confidentialité RGPD prêtes à personnaliser.

RGPDLégal

Conçu pour toutes et tous

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

Niveau AAA — Le plus haut standard

WCAG AAA représente le niveau de conformité le plus exigeant des Web Content Accessibility Guidelines. Ce projet vise à dépasser le niveau AA communément requis pour atteindre AAA sur l'ensemble des critères applicables.

Contraste couleurs

Ratio ≥ 7:1 sur tous les textes

Or (#b89040) sur encre (#0c0c0e) : ratio 8,4:1. Blanc (#f5f0e8) sur fond sombre : ratio 14:1. Tous les textes corpo atteignent AAA.

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

100% utilisable sans souris

Ordre de focus logique. Focus visible avec double anneau doré. Skip link en position fixe. Trap de focus dans le menu burger mobile.

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 les grilles. aria-current, aria-expanded, aria-live, aria-label systématiques.

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

prefers-reduced-motion respecté

Toutes les animations CSS sont désactivées si l'utilisateur a activé le mode mouvement réduit dans son système. Aucune animation auto-démarrée non contrôlable.

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

Attributs lang sur chaque kanji

Les caractères japonais portent lang="ja" pour une prononciation correcte par les synthèses vocales. La page principale est 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. Erreurs annoncées en temps réel via aria-live="polite". Autocomplete standardisé. Confirmation de succès avec focus automatique.

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

Tableau de données accessible

Éléments <table>, <th scope>, <caption>. Région scrollable avec tabindex="0" et role="region" labellisée.

WCAG 1.3.1 · 2.4.3 — Niveaux A
Responsive & zoom

Reflow à 400% sans scroll horizontal

Mise en page fluide avec CSS Grid et Clamp. Dès 320px de large. Aucun élément positionné en absolu ne bloque le contenu au zoom.

WCAG 1.4.10 — Reflow · Niveau AA
Textes alternatifs

Images décoratives masquées

Tous les éléments décoratifs (kanji de fond, icônes purement visuelles) portent aria-hidden="true". Les éléments porteurs de sens ont des alternatives textuelles.

WCAG 1.1.1 — Contenu non textuel · Niveau A
Contrastes non textuels

Composants UI ≥ 3:1

Les bordures des champs de formulaire, boutons fantôme, points de légende et indicateurs actifs respectent le ratio de contraste minimal pour les composants non textuels.

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'espacement entre lettres, mots, lignes et paragraphes est augmenté selon les seuils WCAG.

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

Windows High Contrast supporté

Media query forced-colors: active prise en charge. Les bordures sont explicites, les effets purement visuels sont supprimés. L'information reste accessible.

WCAG 1.4.3 & bonne pratique Microsoft

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

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

HTML

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

CSS

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

JavaScript

  • ES6+ strict mode — code modulaire en IIFEs
  • IntersectionObserver — scroll reveal sans bibliothèque
  • Validation temps réel — formulaires avec retour ARIA
  • Trap de focus — menu burger mobile accessible
  • Curseur personnalisé — désactivé si pas de souris

Typographie

  • Playfair Display — affichage, titres, italiques élégants
  • Noto Serif JP — caractères japonais
  • Outfit — corps de texte, navigation, labels

Tout ce qu'il faut,
rien de superflu

Filtres de planning

Tableau des 42 cours filtrable par discipline (judo, ju-jitsu, taïso…) et par catégorie d'âge. Boutons avec états ARIA.

Formulaires validés

Deux formulaires (contact, essai) avec validation live, messages d'erreur annoncés aux lecteurs d'écran, confirmation de succès focusée.

Menu burger accessible

Navigation mobile avec trap de focus, fermeture Échap, aria-expanded, aria-controls, overlay qui se ferme en cliquant hors menu.

Scroll reveal staggeré

Animations d'apparition au défilement via IntersectionObserver. Délai progressif pour les groupes d'éléments. Respecte prefers-reduced-motion.

Curseur personnalisé

Curseur SVG animé qui s'agrandit au survol des éléments interactifs. Désactivé automatiquement sur mobile et sans souris.

Judo Adapté intégré

Tout le site est pensé pour les pratiquants en situation de handicap : horaires dédiés, tarif spécifique, formulaire adapté, langage inclusif.

Skip link fonctionnel

Lien "Aller au contenu principal" visible au focus clavier sur chaque page. Positionnement fixe, contraste AAA, focus anneau double.

Styles d'impression

Media print inclus : header fixe masqué, fond blanc, couleurs adaptées, sauts de page évités dans les sections clé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.

Obtenir sur Gumroad Voir la démo

Licence commerciale · Usage illimité · Mise à jour incluse