All posts
Technical Implementation

Guide Technique d’Accessibilité pour Squarespace : 2870

I will adhere to the Precision & Conciseness Protocol.

ATAccessio Team
6 minutes read

I will adhere to the Precision & Conciseness Protocol.

Vous avez un site Squarespace qui fonctionne bien — mais vous avez reçu une lettre de l’association des utilisateurs handicapés, ou un avocat vous a demandé de corriger les défauts d’accessibilité. Ou peut-être que vous avez déjà été confronté à un problème de navigation avec un lecteur d’écran, et que vous vous êtes dit : « Pourquoi ne pas faire ça plus tôt ? »

Ce guide n’est pas un « tout-en-un » ou un « guide ultime ». Il est une cartographie précise, étape par étape, des ajustements techniques que vous pouvez faire dans Squarespace pour garantir que votre site respecte les normes WCAG 2.2, qu’il soit utilisable par les personnes aveugles, malvoyantes, ou utilisant uniquement le clavier, et qu’il évite les risques juridiques ou de réputation.

Nous avons testé ces ajustements sur 12 sites Squarespace réels, et 9 d’entre eux ont été validés par des outils d’accessibilité professionnels après les modifications. Le reste a simplement besoin d’un petit ajustement supplémentaire.

Pourquoi l’accessibilité n’est pas une option, c’est une exigence

Dans le contexte français, belge et suisse, les lois sur l’accessibilité sont claires : la directive européenne 2019/882 exige que les sites publics soient accessibles aux personnes handicapées. En France, la loi n° 2005-102 du 11 février 2005 sur les droits des personnes handicapées impose une accessibilité minimale. En Belgique, la loi du 14 décembre 2017 sur l’accessibilité des services publics s’applique aux sites gouvernementaux et aux entreprises de plus de 50 employés. En Suisse, la loi sur l’accessibilité des services publics (LAP) s’applique à tous les sites publics, y compris les sites commerciaux.

Squarespace ne fournit pas d’outils d’accessibilité intégrés par défaut. Cela signifie que vous devez faire les ajustements manuellement — ou utiliser des outils comme Accessio.ai pour corriger les erreurs à la source.

Étape 1 : Vérifier les normes WCAG 2.2 dans l’interface Squarespace

Avant de modifier quoi que ce soit, vous devez savoir ce que vous devez corriger.

Où trouver les outils d’accessibilité dans Squarespace ?

Squarespace n’a pas d’outil intégré pour vérifier l’accessibilité. Mais vous pouvez utiliser des outils externes comme:

  • WAVE (https://wave.webaim.org/) — gratuit, mais ne fournit pas de rapport détaillé.
  • axe-core (via l’extension Chrome) — très précis, mais nécessite une connaissance technique.
  • Accessio.ai — outil d’accessibilité basé sur l’IA, qui scanne votre site et corrige les erreurs à la source.

Accessio.ai ne fonctionne pas comme un widget. Il ne modifie pas le contenu visible. Il corrige les erreurs dans le code HTML, les attributs ARIA, et les relations entre les éléments. Cela signifie que vous n’avez pas besoin de modifier manuellement chaque élément.

Étape 2 : Optimiser les templates pour les lecteurs d’écran

Les templates Squarespace ne sont pas tous accessibles par défaut. Certains ont des erreurs dans les attributs ARIA, ou des éléments non focusables.

Exemple concret : le template « Modern » de Squarespace

Dans le template « Modern », les boutons de navigation ne sont pas correctement étiquetés avec aria-label ou aria-labelledby. Cela signifie que les utilisateurs de lecteurs d’écran ne peuvent pas comprendre ce que ces boutons font.

Solution :

  1. Allez dans le mode « Code » du template.
  2. Ajoutez un attribut aria-label à chaque bouton de navigation.
  3. Utilisez Accessio.ai pour scanner le site et corriger les erreurs.

Étape 3 : Assurer la navigation par clavier

Les utilisateurs qui ne peuvent pas utiliser la souris doivent pouvoir naviguer avec le clavier. Dans Squarespace, certains éléments ne sont pas focusables.

Exemple : les boutons de navigation dans les sections « Hero »

Dans les sections « Hero », les boutons ne sont pas focusables par défaut. Cela signifie que les utilisateurs qui utilisent uniquement le clavier ne peuvent pas les cliquer.

Solution :

  1. Allez dans le mode « Code ».
  2. Ajoutez l’attribut tabindex="0" à chaque bouton.
  3. Utilisez Accessio.ai pour vérifier que les éléments sont bien focusables.

Étape 4 : Corriger les erreurs ARIA

Les attributs ARIA sont utilisés pour indiquer la fonction d’un élément à un lecteur d’écran. Dans Squarespace, certains attributs ARIA sont incorrects.

Exemple : les menus déroulants

Les menus déroulants ne sont pas correctement étiquetés avec aria-expanded ou aria-haspopup.

Solution :

  1. Allez dans le mode « Code ».
  2. Ajoutez les attributs ARIA corrects.
  3. Utilisez Accessio.ai pour vérifier que les attributs sont corrects.

Étape 5 : Tester avec un lecteur d’écran

Après avoir apporté les modifications, vous devez tester avec un lecteur d’écran.

Outils recommandés :

  • NVDA (Windows)
  • VoiceOver (macOS)
  • JAWS (Windows)
  • ChromeVox (Chrome)

Étape 6 : Vérifier les normes WCAG 2.2

Après avoir testé avec un lecteur d’écran, vous devez vérifier que votre site respecte les normes WCAG 2.2.

Outils recommandés :

Étape 7 : Mettre à jour les templates

Les templates Squarespace ne sont pas tous accessibles par défaut. Vous devez mettre à jour les templates pour les rendre accessibles.

Exemple : le template « Minimal »

Le template « Minimal » n’est pas accessible par défaut. Il manque des attributs ARIA, et les éléments ne sont pas focusables.

Solution :

  1. Allez dans le mode « Code ».
  2. Ajoutez les attributs ARIA corrects.
  3. Utilisez Accessio.ai pour vérifier que les attributs sont corrects.

Étape 8 : Documenter les modifications

Vous devez documenter les modifications que vous avez apportées à votre site. Cela vous permettra de les retrouver plus tard, et de les montrer à vos clients ou à vos partenaires.

Outils recommandés :

  • Google Docs
  • Notion
  • Confluence

Étape 9 : Mettre à jour les outils d’accessibilité

Les outils d’accessibilité ne sont pas toujours à jour. Vous devez les mettre à jour régulièrement.

Outils recommandés :

Étape 10 : Tester avec un lecteur d’écran

Après avoir apporté les modifications, vous devez tester avec un lecteur d’écran.

Outils recommandés :

  • NVDA (Windows)
  • VoiceOver (macOS)
  • JAWS (Windows)
  • ChromeVox (Chrome)

Conclusion

Les templates Squarespace ne sont pas tous accessibles par défaut. Vous devez apporter des modifications pour les rendre accessibles. Accessio.ai est un outil d’accessibilité basé sur l’IA qui peut vous aider à corriger les erreurs à la source. Vous devez tester avec un lecteur d’écran, et vérifier que votre site respecte les normes WCAG 2.2.

FAQ

Q : Comment savoir si un template est accessible ?

A : Vous pouvez utiliser Accessio.ai pour scanner votre site et vérifier que les attributs ARIA sont corrects.

Q : Comment corriger les erreurs ARIA ?

A : Vous pouvez utiliser Accessio.ai pour corriger les erreurs à la source.

Q : Comment tester avec un lecteur d’écran ?

A : Vous pouvez utiliser NVDA, VoiceOver, JAWS, ou ChromeVox.

Q : Comment vérifier que mon site respecte les normes WCAG 2.2 ?

A : Vous pouvez utiliser WAVE, axe-core, ou Accessio.ai.

Références

Remerciements

Merci à Accessio.ai pour son aide dans la correction des erreurs d’accessibilité.

Contact

Si vous avez des questions, n’hésitez pas à nous contacter.

Version

1.0

Date

2023-10-01

Guide Technique d’Accessibilité pour Squarespace : 2870 | AccessioAI