Accessibilité RGAA avec SvelteKit : le guide complet
SvelteKit est le framework full-stack de Svelte, reconnu pour sa simplicité et ses performances. Particularité unique, le compilateur Svelte émet des warnings d'accessibilité à la compilation pour de nombreux problèmes. C'est une aide précieuse mais non exhaustive. Ce guide couvre SvelteKit 2, les patterns a11y propres à Svelte, la gestion du focus et les transitions accessibles.
SvelteKit, accessibilité by design
Svelte a fait de l'accessibilité un pilier de sa philosophie dès le début : warnings automatiques sur les éléments interactifs sans rôle, les images sans alt, les labels non associés. SvelteKit hérite de cette approche et facilite les bonnes pratiques via son router et ses load functions.
15+
Warnings a11y du compilateur
500k+
Sites SvelteKit actifs
Croissante
Adoption en France
En Bref : L'essentiel à retenir
- Framework : SvelteKit nécessite une attention particulière à la sémantique HTML.
- Point Critique : Gestion du focus lors de la navigation dynamique.
- Outil Recommandé : Bits UI.
- Critères RGAA clés : 7.1, 8.2, 8.9.
Erreurs Fréquentes avec SvelteKit
Ignorer les warnings a11y
Le compilateur Svelte émet des warnings mais ne bloque pas le build. Beaucoup de développeurs les ignorent, perdant le bénéfice du lint intégré.
on:click sur div
Comme pour React/Vue, on:click sur div génère un warning Svelte. Le message indique d'ajouter role et tabindex, ou de passer à un button.
<div on:click={handle}>Click</div><button on:click={handle}>Click</button>goto() sans focus management
La navigation programmatique via goto() ne gère pas le focus. L'utilisateur clavier reste sur l'élément actif au moment du call.
Transitions sans reduced-motion
Les transitions Svelte (transition:fade, transition:slide) ne respectent pas automatiquement prefers-reduced-motion.
+page.svelte sans metadata
Sans <svelte:head><title>..., SvelteKit utilise le titre par défaut. Chaque page doit définir le sien.
<h1>Produits</h1><svelte:head><title>Produits</title></svelte:head><h1>Produits</h1>Bonnes Pratiques SvelteKit
Ne pas désactiver les warnings a11y
Gardez tous les warnings a11y actifs dans svelte.config.js. Traitez-les comme des erreurs via ESLint rules.
+layout.svelte structuré
Utilisez header, main, nav, footer dans le layout racine. Ajoutez un skip link au début du body.
afterNavigate pour le focus
Utilisez afterNavigate de $app/navigation pour déplacer le focus sur main après chaque changement de route.
Transitions conditionnelles
Utilisez un store svelte qui lit prefers-reduced-motion et conditionne l'utilisation des transitions Svelte.
svelte/ui libraries accessibles
Bits UI (port de Radix) et Melt UI offrent des composants Svelte headless accessibles par défaut.
Critères RGAA clés pour SvelteKit
Ces critères du référentiel RGAA sont particulièrement importants pour les sites SvelteKit.
Scripts
Warnings Svelte aident à respecter les interactions clavier
Titre
svelte:head avec title unique par page
Landmarks
+layout.svelte avec sémantique HTML5
Focus visible
CSS global, pas de perte via scoped styles
Animations
Transitions respectant reduced-motion
Checklist accessibilité SvelteKit
Vérifiez ces points essentiels avant de mettre votre site SvelteKit en production.
- Warnings a11y du compilateur tous corrigés
- +layout.svelte avec landmarks
- svelte:head avec title par page
- afterNavigate configuré pour le focus
- Skip link en début de layout
- Transitions conditionnelles selon reduced-motion
- Composants UI accessibles (Bits, Melt)
- Focus visible en CSS global
- Tests avec Playwright + axe-playwright
- ESLint svelte/no-at-html-tags activé
Questions Fréquentes sur SvelteKit et l'accessibilité
SvelteKit est-il plus accessible par défaut que les autres frameworks ?
Le compilateur Svelte émet des warnings a11y qui aident à détecter les erreurs courantes au développement. C'est un atout unique mais non suffisant. Un site SvelteKit inaccessible reste possible si on ignore ces warnings.
Comment déplacer le focus après navigation SvelteKit ?
Utilisez afterNavigate de $app/navigation dans +layout.svelte, avec un appel à document.getElementById('main')?.focus(). L'élément main doit avoir tabindex="-1".
Quelle librairie de composants Svelte est accessible ?
Bits UI et Melt UI sont les références headless. Shadcn-svelte (portage de shadcn/ui) est aussi accessible. Évitez les librairies qui ne mentionnent pas explicitement l'accessibilité dans leur documentation.
Outils Recommandés pour SvelteKit
Bits UI
Composants Svelte headless accessibles basés sur Radix UI, parfaits pour SvelteKit.
Melt UI
Alternative headless pour Svelte avec accessibilité par défaut : dialog, dropdown, tabs.
svelte-a11y docs
Documentation officielle Svelte sur les règles d'accessibilité et les warnings du compilateur.
Scan RGAA Checker
Scannez votre application SvelteKit en production contre les 106 critères RGAA 4.1.
Auditez votre site SvelteKit gratuitement
Vérifiez si votre application respecte les 106 critères RGAA en moins de 30 secondes.
Lancer un audit RGAA gratuit