Remarque : même si nos guides les plus populaires ont été traduits en français, certains guides sont uniquement disponibles en anglais.

Rendre votre site Squarespace plus accessible

Les sites web accessibles sont plus faciles à consulter pour les personnes en situation de handicap qui utilisent des lecteurs d’écran et d’autres technologies d’assistance. Vous pouvez personnaliser de nombreux aspects de votre site pour faciliter la navigation.

Utilisez ce guide pour découvrir les bonnes pratiques en matière de design et de structuration de votre contenu.

Remarque : ce guide est proposé comme ressource pour vous aider à démarrer, mais il ne doit être en aucun cas considéré comme un document juridique. Squarespace ne peut pas vous fournir de conseils sur la conformité de votre site à aucune loi, réglementation et norme spécifiques en matière dʼaccessibilité du web.

Titre des pages

La première chose que les lecteurs d’écran communiquent lorsque les utilisateurs accèdent à une nouvelle page web est le titre de la page. Étant donné que les titres des pages sont importants pour l’orientation, assurez-vous que chaque page comporte un titre qui présente le sujet ou le but de la page et la différencie des autres pages de votre site.

Texte

Titres

Les lecteurs d’écran utilisent du code HTML plutôt que des éléments visuels pour comprendre la structure d’une page. Lorsqu’ils utilisent un lecteur d’écran, les visiteurs peuvent naviguer plus facilement entre les pages si chaque section de la page comporte un titre. Utilisez la barre d’outils Texte pour mettre en forme du texte en tant que titres.

Pour en savoir plus sur la structure et les titres des pages, consultez la Web Accessibility Initiative (en anglais).

À faire
  • Utilisez les titres en fonction de l’importance du texte. Par exemple, utilisez Titre 1 (h1) pour les titres les plus importants.
Don't

Liens

Assurez-vous que vos visiteurs peuvent comprendre le but de chaque lien uniquement à partir du texte du lien. Cette mise en forme s’avère utile pour les utilisateurs de lecteur d’écran qui peuvent vouloir passer d’un lien à l’autre sans perdre le contexte. Une mise en forme correcte des liens permet également d’améliorer le SEO. Vous n’avez pas besoin d’inclure le mot lien dans le texte du lien. La plupart des lecteurs d’écran disent lien avant chaque lien. Par exemple :

À faire “To reach out, visit our contact page.”
Don't

« Pour nous contacter, cliquez ici. »

Espacement

Assurez-vous que l’espacement des lignes de votre texte est suffisant. De cette façon, les visiteurs peuvent modifier l’espacement des lignes en fonction de leurs besoins et améliorer leur expérience de lecture si nécessaire. Vous pouvez contrôler l’espacement des lettres et la hauteur de ligne dans le panneau Styles du site.

Images

Internet étant un support visuel, les images peuvent jouer un rôle important dans la présentation de votre site. Assurez-vous que vos images sont accessibles à vos visiteurs, quelles que soient leurs aptitudes. Les éléments tels que le texte de remplacement et la façon dont vous mettez en forme les images animées ou les fichiers GIF ne doivent pas être négligés.

Texte de remplacement

Lorsqu’ils parcourent une page, les lecteurs d’écran identifient les images et lisent le texte de description (texte de remplacement) aux visiteurs. Lorsque vous ajoutez un texte de remplacement, prenez le temps de réfléchir à la raison pour laquelle vous avez utilisé l’image en premier lieu. Par exemple, l’image permet-elle de transmettre des informations ou a-t-elle un but uniquement décoratif ? Que doivent savoir les visiteurs souffrant de déficiences visuelles au sujet de l’image pour avoir accès à toutes les informations accessibles aux visiteurs voyants ?

La meilleure pratique consiste à décrire brièvement l’image comme vous le feriez au téléphone avec un ami. Les images purement décoratives, comme les contenus graphiques utilisés comme séparations ou les images d’arrière-plan abstraites ne nécessitent pas de description.

À faire
  • Réfléchissez au but de l’image et essayez de transmettre ce sens en 125 caractères maximum.
  • Si l’image a une URL de destination ou toute autre utilisation fonctionnelle, décrivez la fonction. Par exemple, le texte de remplacement d’une image d’un couple de fiancés qui rient qui dirige vers une page avec des photos de fiançailles pourrait être le suivant : Couple de fiancés qui rient. Dirige vers des photos de fiançailles.
  • Pour les images qui nécessitent des descriptions détaillées, telles que les schémas, les graphiques ou les illustrations complexes, incluez une description de l’image à proximité dans le texte de votre site. Vous pouvez également ajouter une page distincte avec une description de l’image, puis ajouter une URL de destination de l’image vers cette page.
Don't
  • Pensez à inclure des expressions comme « une image de » ou « une photo de » dans votre texte de remplacement. Les technologies d’assistance les identifient automatiquement comme des images.

Fichiers GIF animés

Vous pouvez ajouter des images animées ou des fichiers GIF à la plupart des zones de votre site. Vérifiez que vos fichiers GIF animés ne clignotent pas plus de deux fois en une seconde. Ce type de contenu est connu pour provoquer des crises ou d’autres réactions physiques.

Conseil : si votre site utilise la version 7.1, vos visiteurs peuvent désactiver certaines fonctionnalités animées via les paramètres de leur appareil. Ainsi, ils rencontreront moins d’animations en visitant votre site. Par exemple, si un utilisateur Mac choisit de réduire les animations à l’écran sur son appareil, les animations que vous avez activées pour les effets d’arrière-plan ou le motif d’arrière-plan n’apparaîtront pas animées pour ce visiteur.

Couleurs

Évitez de vous appuyez uniquement sur les couleurs pour transmettre des informations à vos visiteurs. Les différences de couleur peuvent échapper aux personnes malvoyantes ou souffrant de troubles de la vision des couleurs et les couleurs seules ne transmettent aucun sens aux visiteurs non voyants qui utilisent des lecteurs d’écran. Pour modifier les couleurs de votre site, utilisez le panneau Styles du site.

Vous pouvez utiliser les Outils de développement de Google Chrome ou l’Inspecteur d’accessibilité de Firefox afin de simuler l’apparence de vos pages pour les personnes souffrant de troubles courants de la vision des couleurs. Notez que ces outils tiers ne sont pas pris en charge par l’assistance Squarespace.

À faire
  • Group colors with high contrast.
Don't
  • Associez des couleurs difficiles à différencier, comme le bleu et le violet.

Vidéos

Lorsque vous ajoutez des vidéos sur votre site, gardez ces conseils à l'esprit :

  • Ajoutez des sous-titres synchronisés à l'aide des fonctionnalités de sous-titres codés intégrés pour YouTube et Vimeo. Ainsi, les spectateurs peuvent activer ou désactiver les sous-titres dans le bloc vidéo. Visitez YouTube et Vimeo pour en savoir plus sur l'ajout de sous-titres.
  • N'ajoutez pas plus de deux vidéos d'arrière-plan par page. Un trop grand nombre de vidéos peut entraîner une expérience indésirable pour les personnes sensibles au mouvement.
  • Évitez le contenu de votre vidéo qui clignote trois fois ou plus en une seconde.

Audio

Vous pouvez aider les visiteurs souffrant de déficiences auditives à accéder à votre contenu audio, comme les podcasts, en ajoutant une transcription. Pour que vos pages restent organisées, vous pouvez inclure des transcriptions sur les pages hors navigation.

FAQ

Is my site accessible?

Les exigences en matière dʼaccessibilité diffèrent dʼun pays à lʼautre. Il vous incombe de vous assurer que votre site respecte les lois applicables, y compris les exigences locales en matière dʼaccessibilité. Pour comprendre lʼaccessibilité de votre site et identifier les points à améliorer, vous pouvez par exemple contacter un spécialiste de lʼaccessibilité. Vous pouvez également consulter cette liste préliminaire de contrôle de lʼaccessibilité web. Lʼassistance client de Squarespace ne peut pas vous fournir de conseils sur la conformité de votre site à aucune loi, réglementation et norme spécifiques en matière dʼaccessibilité du web.

Is Squarespace working to improve accessibility?

Oui, Squarespace prend l’accessibilité très au sérieux. Nous cherchons en permanence à nous améliorer. Nous nous engageons à rendre nos services plus accessibles aux utilisateurs de tous niveaux d’aptitude. Nous examinons actuellement nos services afin d’améliorer l’expérience utilisateur et d’aider nos clients qui souhaitent rendre leur site accessible.

Puis-je personnaliser le contour de mise en évidence ?

Les sites Squarespace qui utilisent la version 7.1 disposent d’une fonction de contour de mise en évidence intégrée qui met en surbrillance les éléments d’une page, tels que les liens de navigation et les champs de formulaire. Le contour apparaît lorsque les visiteurs du site appuient sur la touche Tab de leur clavier. La première fois que vous appuyez sur la touche Tab, un message Passer au contenu s’affiche. Appuyez sur la barre d’espacement pour ignorer l’en-tête et la navigation du site et accéder directement au contenu du site ou continuez à appuyer sur la touche Tab pour accéder aux autres contenus. Ce contour de mise en évidence est le même sur tous les sites et toutes les pages. Il n’est pas possible de personnaliser la couleur ni l’épaisseur du trait.

En-tête de la page de navigation avec un contour autour d’un des éléments du menu

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 212 sur 265
Rendre votre site Squarespace plus accessible