Accessibilité RGAA avec Squarespace : le guide
Squarespace séduit les créatifs, artistes et petites boutiques grâce à ses templates soignés et son éditeur visuel. La plateforme génère un HTML relativement propre (comparé à Wix), mais les options de personnalisation a11y sont limitées sans injection de code. Ce guide couvre Squarespace 7.1 et l'e-commerce Squarespace Commerce, avec les corrections possibles dans le Fluid Engine et le Custom CSS.
Squarespace en France et en Europe
Squarespace héberge plus de 4 millions de sites actifs. La plateforme est particulièrement populaire chez les photographes, restaurateurs et coaches, qui ne sont pas toujours sensibles aux enjeux d'accessibilité. Squarespace 7.1 et Fluid Engine offrent plus de flexibilité que les versions précédentes, mais l'injection de code reste nécessaire pour certaines corrections.
4M+
Sites Squarespace actifs
170+
Templates officiels
23€/mois
Plan Business requis pour Custom Code
En Bref : L'essentiel à retenir
- Framework : Squarespace nécessite une attention particulière à la sémantique HTML.
- Point Critique : Gestion du focus lors de la navigation dynamique.
- Outil Recommandé : Squarespace Custom CSS.
- Critères RGAA clés : 1.1, 3.2, 10.7.
Erreurs Fréquentes avec Squarespace
Focus masqué dans beaucoup de templates
La plupart des templates Squarespace utilisent outline: none sur les liens et boutons sans alternative visible au focus.
a:focus { outline: none; }a:focus-visible { outline: 2px solid #000; outline-offset: 2px; }Hiérarchie figée dans les blocks
Certains blocks Squarespace (Heading Block) imposent le niveau H1 ou H2 sans permettre de changer, créant parfois plusieurs H1 sur la même page.
Alt text non exposés en mobile
Les images d'arrière-plan via Banner Section n'acceptent pas d'alt dans l'interface. Ces images informatives deviennent invisibles aux lecteurs d'écran.
Carrousels Summary Block
Les carrousels générés par les Summary Blocks n'ont pas de contrôles clavier accessibles ni de bouton pause.
Formulaires Squarespace limités
Les formulaires natifs permettent des labels mais pas facilement d'aria-describedby ni de messages d'erreur contextualisés.
Bonnes Pratiques Squarespace
Injecter du CSS focus-visible
Dans Design > Custom CSS, ajoutez des styles focus-visible avec outline visible sur liens, boutons et éléments de formulaire.
Choisir Fluid Engine
Squarespace 7.1 avec Fluid Engine permet plus de flexibilité sémantique que les anciens templates. Créez les nouveaux sites sur 7.1.
Renseigner les alt text
Pour chaque Image Block, cliquez sur l'engrenage > Image Alt Text et rédigez une description pertinente. Pour les images décoratives, laissez vide explicitement.
Éviter les Banner Images informatives
Les Banner Section n'acceptent pas d'alt. Réservez-les aux images purement décoratives et ajoutez un titre H1 textuel par-dessus.
Limiter les Parallax et animations
Dans Design > Animations, désactivez les animations de scroll pour les utilisateurs sensibles. Le site reste attrayant sans effet de parallaxe.
Critères RGAA clés pour Squarespace
Ces critères du référentiel RGAA sont particulièrement importants pour les sites Squarespace.
Alternatives textuelles
Image Blocks avec alt, Banner Blocks problématiques
Contraste
Templates avec palette à vérifier, CSS custom si besoin
Focus visible
Outline par défaut supprimé, CSS custom obligatoire
Formulaires
Squarespace Forms avec labels, ARIA limités
Animations
Parallax et animations scroll à désactiver ou ajuster
Checklist accessibilité Squarespace
Vérifiez ces points essentiels avant de mettre votre site Squarespace en production.
- Site créé sur Squarespace 7.1 avec Fluid Engine
- CSS custom focus-visible ajouté
- Alt text renseignés sur Image Blocks
- Hiérarchie de titres cohérente par page
- Animations scroll désactivées ou optionnelles
- Plan Business minimum pour Custom Code
- Formulaires testés au clavier et lecteur d'écran
- Contrastes vérifiés sur toutes les pages
- Carrousels Summary Block remplacés si possible
- Scan RGAA complet du site publié
Questions Fréquentes sur Squarespace et l'accessibilité
Squarespace est-il accessible par défaut ?
Partiellement. Les templates récents Squarespace 7.1 ont une base correcte, mais des corrections restent nécessaires : focus visible, alt text, animations. Un site Squarespace peut atteindre une conformité raisonnable avec du Custom CSS.
Faut-il passer au plan Business pour la conformité RGAA ?
Oui pour les corrections avancées. Le plan Personal ne permet pas l'injection de CSS ni de code, limitant fortement les corrections possibles. Prévoyez le plan Business minimum (23€/mois).
Squarespace Commerce est-il accessible ?
Le tunnel d'achat standard de Squarespace Commerce est mieux accessible que beaucoup de plateformes, notamment le checkout. Les pages produit dépendent du template choisi et des Section Blocks utilisés.
Outils Recommandés pour Squarespace
Squarespace Custom CSS
Panel Design > Custom CSS permettant d'injecter du CSS pour corriger focus, contrastes et styles par défaut.
Squarespace Code Injection
Injection de JavaScript et HTML pour ajouter skip links, rôles ARIA ou corrections avancées (plan Business requis).
Scan RGAA Checker
Auditez votre site Squarespace publié contre les 106 critères RGAA 4.1.
Auditez votre site Squarespace gratuitement
Vérifiez si votre application respecte les 106 critères RGAA en moins de 30 secondes.
Lancer un audit RGAA gratuit