Montréal, Québec HTML · CSS · JS natif

Amy Smith
Dog-Sitter
Template Web

Un site web complet pour dog-sitter et pension canine : 7 pages HTML / CSS / JS natif, responsive dès 320 px, conçu avec une attention rigoureuse à l'accessibilité numérique. Aucune dépendance, aucun framework.

Voir la démo en ligne Explorer les pages
Pages
7
Dépendances
0
Responsive depuis
320 px
Norme visée
WCAG AA
Accueil
Expérience
Services
Galerie
Contact
Merci
JS · CSS
Contenu

7 pages prêtes à personnaliser

Chaque page est sémantiquement structurée, interconnectée et immédiatement personnalisable. Navigation cohérente et responsive sur l'ensemble du site.

  1. 01

    Accueil

    Hero avec photo et statistiques flottantes, présentation d'Amy, aperçu des 3 services, témoignages, bande CTA.

  2. 02

    Expérience

    Certifications ACACED, formation comportementaliste, timeline professionnelle animée, valeurs et philosophie.

  3. 03

    Services

    Pension canine, dog-sitting, promenades. Tarifs et formules, FAQ accordéon accessible, zones d'intervention.

  4. 04

    Galerie

    Grille de photos filtrable (4 catégories), lightbox accessible au clavier avec piège de focus et navigation fléchée.

  5. 05

    Contact

    Formulaire complet (FormSubmit), disponibilités, coordonnées, zones d'intervention, validation en temps réel.

  6. 06

    Page Merci

    Confirmation de soumission, liens de retour, navigation cohérente. Page de redirection FormSubmit intégrée.

  7. 07

    Style & Scripts

    1 fichier CSS partagé avec custom properties. 2 fichiers JS modulaires : main.js et galerie.js.

Accessibilité

Conçu pour tout le monde

Chaque choix technique a été guidé par les critères WCAG 2.1. Le template vise la conformité AA sur toutes les pages, avec plusieurs critères AAA intégrés dès la conception.

Navigation au clavier complète

Skip link visible au focus. Ordre de tabulation logique sur toutes les pages. Touche Escape pour fermer le menu mobile, focus retourné au burger. Piège de focus dans la lightbox galerie.

CS 2.1.1 · 2.1.2 · 2.4.3

Focus visible renforcé

Indicateur de focus de 3 px, décalage de 3 px sur tous les éléments interactifs. Deux styles distincts : brun foncé sur fond clair, beige sable sur fond brun. Visible en High Contrast Mode Windows.

CS 2.4.7 · 2.4.11 AAA

Sémantique HTML rigoureuse

Landmarks nav, main, footer. Hiérarchie de titres stricte H1→H3. Listes sémantiques, tableaux avec caption et scope.

CS 1.3.1 · 1.3.2 · 2.4.6

Contrastes documentés

Palette warm beige / brun profond avec ratios mesurés. Texte principal sur fond crème : 13,9:1. Brun foncé sur blanc : 8,1:1. La couleur n'est jamais le seul moyen de transmettre une information.

CS 1.4.1 · 1.4.3 · 1.4.6 AAA

Formulaires accessibles

Labels associés via for/id, messages d'erreur role="alert", aria-invalid et aria-describedby sur les champs en erreur. autocomplete sur tous les champs personnels.

CS 1.3.5 · 3.3.1 · 3.3.2

Galerie & lightbox accessibles

Filtres avec aria-pressed et live region annonçant le nombre de résultats. Lightbox avec role="dialog", aria-modal, navigation au clavier et restauration du focus à la fermeture.

CS 4.1.2 · 2.1.1 · 2.4.3

Mouvement contrôlé

Toutes les animations respectent prefers-reduced-motion : transitions désactivées à 0,01 ms. IntersectionObserver vérifie la préférence avant d'appliquer les effets d'entrée au scroll.

CS 2.3.3 AAA

Espacement du texte

Hauteur de ligne ≥ 1,7×, letter-spacing en em, word-spacing défini. Taille de base en rem pour respecter les préférences utilisateur jusqu'à 200 % sans perte de contenu.

CS 1.4.4 · 1.4.10 · 1.4.12

Live regions & états ARIA

Live regions aria-live="polite" pour les filtres galerie, les erreurs de formulaire et le statut d'envoi. aria-busy sur le bouton de soumission, aria-current="page" sur les liens actifs.

CS 4.1.3 · 4.1.2
Palette vérifiée

Ratios de contraste

Chaque combinaison texte / fond a été mesurée avec l'algorithme de luminance relative WCAG 2.x. Le niveau AAA exige 7:1 pour le texte courant et 4,5:1 pour le grand texte.

Combinaisons couleur texte / fond — mesurées avec l'algorithme WCAG relative luminance
Couleur texte Fond Ratio Niveau Usage dans le template
#2d2015 #faf6f0 13,9:1 AAA ✓ Texte principal sur fond crème
#5c3d20 #ffffff 8,1:1 AAA ✓ Brun foncé sur blanc — titres, liens actifs
#4a3528 #faf6f0 8,9:1 AAA ✓ Texte secondaire sur fond crème
#ffffff #5c3d20 8,1:1 AAA ✓ Blanc sur brun — boutons, footer, CTA
#3a6348 #e8f0eb 7,3:1 AAA ✓ Vert sur fond vert clair — étiquettes section
#5c3d20 #f5ede0 7,9:1 AAA ✓ Brun sur fond warm — badges, location tag
Critères de succès

Conformité WCAG 2.1

Critères couverts dans le template. Les mentions AAA signalent les critères dépassant le niveau AA visé.

  • 1.1.1 Contenu non textuel — alt sur images, emoji cachés avec aria-hidden
  • 1.3.1 Information et relations — HTML5 sémantique, landmarks, tableaux balisés
  • 1.3.2 Ordre séquentiel logique — DOM et ordre d'affichage cohérents
  • 1.3.5 Finalité des champs — attribut autocomplete sur tous les champs
  • 1.4.1 Utilisation de la couleur — jamais seule pour transmettre une information
  • 1.4.3 Contraste minimum — ≥ 4,5:1 texte normal, ≥ 3:1 grand texte
  • 1.4.4 Redimensionnement — rem, lisible sans perte à 200 %
  • 1.4.6 AAA Contraste renforcé — ≥ 7:1 sur toutes les combinaisons texte/fond
  • 1.4.10 Redistribution — aucun scroll horizontal dès 320 px
  • 1.4.11 Contraste composants — boutons, champs, icônes ≥ 3:1, High Contrast Mode
  • 1.4.12 Espacement du texte — line-height, letter-spacing, word-spacing définis
  • 2.1.1 Clavier — toutes fonctionnalités accessibles sans souris
  • 2.1.2 Pas de piège clavier — Escape ferme menu et lightbox
  • 2.3.3 AAA Animation suite à interaction — prefers-reduced-motion respecté
  • 2.4.1 Ignorer des blocs — skip link vers le contenu principal
  • 2.4.2 Titre de page — <title> descriptif et unique sur chaque page
  • 2.4.3 Parcours du focus — logique, cohérent, focus restauré après fermeture
  • 2.4.4 Fonction du lien — libellés descriptifs, aria-label si nécessaire
  • 2.4.6 En-têtes et étiquettes — H1→H3 strict, labels formulaire explicites
  • 2.4.7 Visibilité du focus — indicateur 3 px sur tous les éléments interactifs
  • 2.4.11 AAA Apparence du focus — surface ≥ périmètre × 2 px, contraste ≥ 3:1
  • 3.1.1 Langue de la page — lang="fr" sur <html>
  • 3.2.3 Navigation cohérente — même ordre et structure sur toutes les pages
  • 3.3.1 Identification des erreurs — messages explicites avec role="alert"
  • 3.3.2 Étiquettes et instructions — champs obligatoires signalés sans couleur seule
  • 4.1.1 Analyse syntaxique — HTML valide, balises correctement imbriquées
  • 4.1.2 Nom, rôle, valeur — aria-expanded, aria-current, aria-pressed
  • 4.1.3 Messages de statut — live regions pour filtres, formulaire et chargement
Responsive

320 px à l'infini

Mobile-first. CSS Grid, Flexbox et clamp() garantissent une mise en page fluide. Aucun scroll horizontal sous 320 px (WCAG 1.4.10). Burger menu avec piège de focus complet.

Technologies

Zéro dépendance, 100 % natif

Aucun framework, aucun bundler, aucun gestionnaire de paquets. Ouvrez un fichier HTML dans votre navigateur : ça fonctionne immédiatement.

  • HTML5 sémantique
  • CSS Custom Properties
  • CSS Grid & Flexbox
  • clamp()
  • JS ES6+ natif
  • IntersectionObserver
  • ARIA landmarks
  • FormSubmit
  • Google Fonts
  • prefers-reduced-motion
  • forced-colors
  • @media print