Accessibilité — Swellr Charte Graphique

Principes WCAG 2.1

Les Web Content Accessibility Guidelines définissent 4 grands principes que tout contenu web accessible doit respecter. Swellr s'engage à les appliquer dans l'intégralité du design system.

Perceptible

L'information et les composants d'interface doivent être présentés de façon à être perçus par tous les utilisateurs, quels que soient leurs sens disponibles.

Principe 1

Utilisable

Les composants d'interface et la navigation doivent être utilisables sans nécessiter l'emploi d'une souris — clavier, switch, commande vocale.

Principe 2

Compréhensible

L'information et le fonctionnement de l'interface doivent être lisibles, compréhensibles et prévisibles pour tout utilisateur, y compris cognitif.

Principe 3

Robuste

Le contenu doit être suffisamment robuste pour être interprété correctement par les technologies d'assistance actuelles et futures (lecteurs d'écran, etc.).

Principe 4

Tableau de contrastes

Ratios de contraste WCAG 2.1 calculés pour chaque combinaison couleur texte / fond utilisée dans Swellr. Niveau AA exige 4.5:1 (texte normal) ou 3:1 (texte large ≥18px). Niveau AAA exige 7:1.

Couleur texte	Fond	Aperçu	Ratio	AA Normal	AA Large	AAA
Teal Primaire #028490	Blanc #FFFFFF	Le surf c'est la vie	4.52:1	✓ Conforme	✓ Conforme	✗ Échec
Teal Dark #073742	Blanc #FFFFFF	Le surf c'est la vie	9.1:1	✓ Conforme	✓ Conforme	✓ Conforme
Teal Darkest #08272e	Blanc #FFFFFF	Le surf c'est la vie	10.5:1	✓ Conforme	✓ Conforme	✓ Conforme
Gris #637887	Blanc #FFFFFF	Le surf c'est la vie	4.6:1	✓ Conforme	✓ Conforme	✗ Échec
Blanc cassé #F8F8F8	Teal Darkest #08272e	Le surf c'est la vie	10.2:1	✓ Conforme	✓ Conforme	✓ Conforme
Blanc #FFFFFF	Teal Primaire #028490	Le surf c'est la vie	4.52:1	✓ Conforme	✓ Conforme	✗ Échec
Vert Event #4CAF00	Blanc #FFFFFF	Le surf c'est la vie	2.9:1	✗ Échec	✗ Échec	✗ Échec
Noir #090909	Mint BG #ECF8F8	Le surf c'est la vie	11.8:1	✓ Conforme	✓ Conforme	✓ Conforme

Visualisation des contrastes

Pour chaque couleur de la palette Swellr, aperçu du texte de démonstration sur fond blanc et sur fond sombre.

Le surf c'est la vie

Texte corps standard 14px

Teal Primaire / Blanc

#028490 sur #FFFFFF

4.52:1 AA ✓ AAA ✗

Le surf c'est la vie

Texte corps standard 14px

Teal Dark / Blanc

#073742 sur #FFFFFF

9.1:1 AA ✓ AAA ✓

Le surf c'est la vie

Texte corps standard 14px

Teal Darkest / Blanc

#08272e sur #FFFFFF

10.5:1 AA ✓ AAA ✓

Le surf c'est la vie

Texte corps standard 14px

Gris / Blanc

#637887 sur #FFFFFF

4.6:1 AA ✓ AAA ✗

Le surf c'est la vie

Texte corps standard 14px

Blanc cassé / Darkest

#F8F8F8 sur #08272e

10.2:1 AA ✓ AAA ✓

Le surf c'est la vie

Texte corps standard 14px

Blanc / Teal Primaire

#FFFFFF sur #028490

4.52:1 AA ✓ AAA ✗

Le surf c'est la vie

Texte corps standard 14px

Noir / Fond Mint

#090909 sur #ECF8F8

11.8:1 AA ✓ AAA ✓

WCAG FAIL

Le surf c'est la vie

Texte corps standard 14px

Vert Event / Blanc

#4CAF00 sur #FFFFFF

2.9:1 AA ✗ AAA ✗

Cas problématiques et solutions

Certaines couleurs de la palette Swellr échouent aux critères WCAG lorsqu'utilisées comme texte. Voici les règles d'usage et les alternatives recommandées.

Couleur problématique	Ratio	Problème	Solution recommandée
#4CAF00 Vert événement	2.9:1	Trop clair sur fond blanc — illisible pour texte normal et large. Échoue WCAG AA et AAA.	#4CAF00 sur fond blanc Utiliser du texte noir par-dessus la couleur verte comme fond #2e7d00 Assombrir à #2e7d00 (ratio ~6.5:1 — AA ✓)
#F05906 Orange sessions	~2.5:1	Orange vif insuffisant pour du texte sur fond blanc. Utilisable uniquement comme couleur d'accent ou fond avec texte foncé.	#F05906 comme fond Toujours associer à un texte foncé #08272e par-dessus #b84200 Assombrir pour usage en texte (ratio ~5.2:1)
#4FA3B1 Teal Light / Info	~2.7:1	Trop clair pour texte sur fond blanc. Réservé aux éléments décoratifs, icônes non-fonctionnelles, ou fonds avec texte foncé.	#028490 Teal Primaire Préférer le Teal Primaire pour du texte (4.52:1 — AA ✓)
Badge sur fond coloré Texte badge sur fond teal ou orange	Variable	Un badge avec texte clair sur fond coloré peut échouer si le fond est trop lumineux. Toujours vérifier le ratio texte-badge / fond-badge.	Spot ✓ Eco ✓ Texte blanc (#fff) sur teal ✓ · Texte sombre (#08272e) sur vert ✓

Règle absolue — couleur sémantique Ne jamais transmettre une information uniquement par la couleur (WCAG 1.4.1). Toujours accompagner la couleur d'une icône, d'un texte ou d'un motif permettant de différencier les états même en cas de daltonisme.

Focus et navigation clavier

Chaque élément interactif de Swellr doit afficher un indicateur de focus visible lors de la navigation au clavier (WCAG 2.4.7). Le style de focus est standardisé dans tout le design system.

Voir le spot de surf

Lien

Outline teal 2px, offset 2px

a:focus-visible {
  outline: 2px solid #028490;
  outline-offset: 2px;
  border-radius: 2px;
}

Bouton

Box-shadow glow teal 3px, 45% opacité

.btn:focus-visible {
  box-shadow: 0 0 0 3px
    rgba(2,132,144,0.45);
  outline: none;
}

Input

Bordure teal 1.5px + shadow 3px 18% opacité

input:focus {
  border-color: #028490;
  box-shadow: 0 0 0 3px
    rgba(2,132,144,0.18);
  outline: none;
}

Aller au contenu principal

Skip Link

Caché hors focus · Visible au focus clavier · Premier élément du DOM

.skip-link {
  position: absolute;
  top: -100%;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid #fff;
}

Ordre de focus logique — WCAG 2.4.3 L'ordre de tabulation doit suivre l'ordre visuel et logique du contenu. Ne jamais utiliser tabindex > 0 sauf nécessité absolue — cela perturbe l'ordre naturel du DOM.

Tailles de texte et zoom

Le texte Swellr utilise des unités relatives (rem) afin de respecter la préférence de taille de police de l'utilisateur et de fonctionner jusqu'à 200% de zoom sans perte de contenu (WCAG 1.4.4).

Contexte	Taille min recommandée	Valeur rem	Unité	Note
Titres (H1)	28px	1.75rem	rem ✓	Toujours en rem ou em pour le zoom utilisateur
Titres (H2–H3)	20–24px	1.25–1.5rem	rem ✓	Hiérarchie visuelle maintenue au zoom
Corps texte desktop	14px	0.875rem	rem ✓	Minimum absolu pour texte courant
Corps texte mobile	16px	1rem	rem ✓	Empêche le zoom automatique iOS sur les inputs
Captions / Labels	12px	0.75rem	rem ✓	Minimum absolu — jamais en dessous
Badges / Tags	11px	0.6875rem	rem ✓	Acceptable uniquement pour labels non-essentiels
Texte en px fixe	Interdit pour le corps	—	px ✗	Ne répond pas aux préférences de l'utilisateur

Démonstration — même contenu à différents niveaux de zoom

Zoom 100% — 1rem = 16px

Spot Lacanau Pro

Conditions excellentes ce matin. Houle à 1.5m, vent offshore 15 nœuds. Session recommandée pour tous niveaux.

Zoom 150% — 1rem = 24px

Spot Lacanau Pro

Conditions excellentes ce matin. Houle à 1.5m.

Zoom 200% — 1rem = 32px

Spot Lacanau Pro

Conditions excellentes.

WCAG 1.4.4 — Redimensionnement texte Le contenu doit rester lisible et fonctionnel jusqu'à 200% de zoom navigateur, sans perte d'information ni défilement horizontal. Utiliser des layouts flexibles (flexbox, grid) et des unités relatives.

ARIA et HTML sémantique

Exemples de code HTML correct pour l'accessibilité Swellr. Le HTML sémantique doit toujours être privilégié avant l'ajout d'attributs ARIA (WCAG 4.1.2).

Bouton avec aria-label

Quand le texte visible du bouton n'est pas suffisamment descriptif, compléter avec aria-label.

                  <!-- Correct -->
<button
  type="button"
  aria-label="Se connecter à Swellr">
  Se connecter
</button>

<!-- Icône seule -->
<button
  type="button"
  aria-label="Fermer la modale">
  <svg aria-hidden="true">...</svg>
</button>
                

Icône décorative

Les icônes purement décoratives doivent être masquées aux lecteurs d'écran avec aria-hidden="true".

                  <!-- Icône décorative -->
<span
  aria-hidden="true"
  class="icon-wave">
  🌊
</span>

<!-- SVG décoratif -->
<svg
  aria-hidden="true"
  focusable="false">
  ...
</svg>
                

Formulaire accessible

Chaque champ doit avoir un <label> associé via for / id.

                  <div class="field">
  <label for="email">
    Adresse e-mail
  </label>
  <input
    id="email"
    type="email"
    name="email"
    autocomplete="email"
    aria-required="true"
  />
</div>
                

Navigation labelisée

Chaque élément <nav> doit avoir un aria-label unique et descriptif.

                  <nav
  aria-label="Navigation principale">
  <ul>
    <li><a href="/spots">Spots</a></li>
    <li><a href="/meteo">Météo</a></li>
  </ul>
</nav>

<!-- Page active -->
<a
  href="/spots"
  aria-current="page">
  Spots
</a>
                

Image avec alt descriptif

Toutes les images informatives ont un attribut alt descriptif. Les images décoratives ont alt="".

                  <!-- Image informative -->
<img
  src="lacanau.jpg"
  alt="Vague de 1,5m à Lacanau
       avec surfer en combinaison"
/>

<!-- Image décorative -->
<img
  src="bg-wave.svg"
  alt=""
  aria-hidden="true"
/>
                

Langue déclarée

L'attribut lang sur <html> est obligatoire (WCAG 3.1.1) — il permet aux lecteurs d'écran de prononcer correctement le contenu.

                  <!-- Page française -->
<html lang="fr">

<!-- Passage en anglais -->
<p>
  Abonnez-vous à notre newsletter :
  <span lang="en">
    Best surf spots weekly
  </span>
</p>
                

Checklist accessibilité

À valider sur chaque écran ou composant Swellr avant livraison. Cette checklist couvre les critères WCAG 2.1 niveau AA, niveau minimal requis pour Swellr.

Contraste et couleurs

Contraste ≥ 4.5:1 pour tout texte normal (moins de 18px ou 14px bold) Contraste ≥ 3:1 pour texte large (≥ 18px ou 14px bold) et composants UI Aucune information transmise par la couleur seule — icône ou texte toujours présent Le vert #4CAF00 n'est jamais utilisé comme couleur de texte sur fond blanc — toujours texte foncé dessus

Navigation et focus

Focus visible sur tous les éléments interactifs (liens, boutons, inputs, selects) Navigation clavier entièrement fonctionnelle — Tab, Shift+Tab, Entrée, Espace, Échap Skip link "Aller au contenu principal" présent et visible au focus, premier élément du DOM Ordre de tabulation logique correspondant à l'ordre visuel — aucun tabindex positif

Formulaires

Labels <label for="…"> associés à chaque champ de formulaire Champs requis indiqués visuellement ET avec aria-required="true" Messages d'erreur liés au champ via aria-describedby et affichés avec icône + texte Attribut autocomplete renseigné sur les champs communs (email, nom, téléphone)

Contenu et sémantique

Alt text descriptif sur toutes les images informatives — alt="" sur les images décoratives Attribut lang="fr" déclaré sur <html> — passages en autre langue balisés avec lang Icônes fonctionnelles avec aria-label descriptif — icônes décoratives avec aria-hidden="true" Taille de texte minimale respectée : 14px corps desktop, 16px mobile, 12px captions

Technologies d'assistance

HTML sémantique utilisé — <main>, <nav>, <header>, <footer>, <section>, <article> Rôles et propriétés ARIA appropriés — aria-expanded, aria-selected, aria-live pour contenu dynamique Testé avec un lecteur d'écran (VoiceOver macOS/iOS, NVDA Windows) avant livraison Interface testée à 200% de zoom navigateur — pas de perte de contenu ni de défilement horizontal

Outils de vérification recommandés axe DevTools (extension navigateur) · Lighthouse Accessibility audit · WebAIM Contrast Checker · Colour Contrast Analyser (application desktop) · WAVE Web Accessibility Evaluator

1 Principes WCAG 2.1

Perceptible

Utilisable

Compréhensible

Robuste

2 Tableau de contrastes

3 Visualisation des contrastes

4 Cas problématiques et solutions

5 Focus et navigation clavier

6 Tailles de texte et zoom

Démonstration — même contenu à différents niveaux de zoom

7 ARIA et HTML sémantique

Bouton avec aria-label

Icône décorative

Formulaire accessible

Navigation labelisée

Image avec alt descriptif

Langue déclarée

8 Checklist accessibilité

Contraste et couleurs

Navigation et focus

Formulaires

Contenu et sémantique

Technologies d'assistance

Principes WCAG 2.1

Tableau de contrastes

Visualisation des contrastes

Cas problématiques et solutions

Focus et navigation clavier

Tailles de texte et zoom

ARIA et HTML sémantique

Checklist accessibilité