Créer du contenu accessible pour un site

Conseils pour créer un contenu clair et concis pour votre site.

Dernière mise à jour le 17 juillet 2024

Lors de la création du contenu d’un site, il est important de tenir compte de l’accessibilité. Il s’agit de la langue que vous utilisez, de la structure de votre texte et de la façon dont vous organisez votre contenu.

Ce guide fournit des conseils pour créer et organiser le contenu de votre site tout en tenant compte de l’accessibilité.

Remarque

ce guide est proposé comme ressource pour vous aider à démarrer, mais il ne doit en aucun cas être 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.

Un langage clair et concis

Un texte bien organisé, concis et clair profite non seulement à tous les visiteurs, mais est particulièrement important pour les personnes en situation de handicap. Lorsque vous rédigez le texte de votre site, tenez compte des conseils suivants :

  • Utilisez un langage et une mise en forme clairs.
  • Rédigez des phrases et des paragraphes concis.
  • Évitez d’utiliser du jargon, des mots et des phrases inutilement complexes.
  • Développez les acronymes dès la première utilisation. Par exemple, Extension de domaine (TLD).
  • Utilisez des listes à puces, le cas échéant.
  • Pensez à utiliser des images, des vidéos et des fichiers audio pour encore plus de clarté.

Titres

La première chose que les lecteurs d’écran communiquent lorsque les visiteurs accèdent à une nouvelle page web est un titre. Si la page comporte un titre SEO, les lecteurs d’écran le liront et ignoreront le titre de la page. En l’absence de titre SEO, les lecteurs d’écran liront le titre de la page.

Le fait de fournir un titre de page court, spécifique et unique permet aux utilisateurs qui naviguent à l’aide de technologies d’assistance de comprendre rapidement le contenu et l’objectif d’une page web.

Bonnes pratiques en matière de titres

Lorsque vous rédigez vos titres, tenez compte des points suivants :

  • Présentez le sujet et l’objectif de la page.
  • Le titre de chaque page doit être unique et différencier la page des autres pages de votre site.
  • Placez les informations exclusives et les plus pertinentes en premier. Par exemple, « Guide d’accessibilité » au lieu de « Guide sur l’accessibilité ».
  • Pour les pages qui font partie d’un processus en plusieurs étapes, indiquez dans le titre l’étape en cours. Par exemple, « Choisissez la couleur de votre produit (étape 2 sur 3) - Société ABC ».

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 mieux naviguer entre les pages si chaque section de la page comporte un titre. Les moteurs de recherche utilisent également les titres pour mieux comprendre votre contenu. Il s’agit donc d’un excellent moyen d’améliorer le SEO de votre site.

À faire
  • Utilisez les titres en fonction de l’importance du texte. Par exemple, utilisez Titre 1 (H1) pour les titres les plus importants.
  • Créer un titre/titre 1 par page.
  • Utilisez des titres courts pour regrouper les paragraphes connexes et décrire clairement les sections.
  • Utilisez la barre d’outils Texte pour mettre en forme du texte en tant que titres.
À ne pas faire
  • Utiliser des titres qui ne sont pas dans l’ordre. Vos options de titres vont de H1 à H6, et les lecteurs d’écran les lisent dans l’ordre.
  • Appuyez-vous sur le texte intégré dans les images pour transmettre leur sens, sauf si vous ajoutez également un texte de remplacement.
  • Utilisez le gras, l’italique ou toute autre mise en forme pour créer une structure.
  • Utiliser des titres sans contenu associé uniquement pour styliser le texte. Cela rend la structure de la page peu claire et plus difficile à comprendre. 
  • Styliser le texte pour qu’il ressemble à un titre si vous ne souhaitez pas qu’il en soit un. Cela risque de semer la confusion chez les visiteurs et d’empêcher ceux qui utilisent des technologies d’assistance de naviguer rapidement sur votre site. 

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

Liens

Décrivez clairement le but de chaque lien dans le texte du lien afin que les visiteurs utilisant une technologie d’assistance puissent 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 « Pour nous contacter, consultez notre page de contact. »
À ne pas faire « Pour nous contacter, cliquez ici. »

Listes

Organisez la disposition de votre texte à l’aide de listes et de titres. Les listes permettent de savoir quand des éléments de contenu sont liés les uns aux autres, comme un groupe de liens ou un ensemble d’exemples. La mise en forme de votre texte sous forme de liste favorisera ce qui suit :

  • Faciliter la navigation dans votre contenu.
  • Aider les visiteurs souffrant de troubles cognitifs à comprendre votre contenu.
À faire
  • Utiliser des listes numérotées lorsque l’ordre du contenu est important.
À ne pas faire
  • Utiliser des listes pour du contenu qui n’est pas une liste (comme un tableau de données ou pour des raisons de style uniquement).

Espacement

Vérifiez que l’espacement des lignes de votre texte est suffisant. Les visiteurs pourront ainsi 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.

Couleurs

Vous pouvez personnaliser les couleurs de votre site à l’aide des styles du site. Toutefois, ne vous fiez pas uniquement à la couleur pour transmettre des informations à vos visiteurs. Les personnes malvoyantes ou souffrant de troubles de la perception des couleurs peuvent ne pas remarquer les différences de couleur. De plus, la couleur à elle seule ne suffit pas pour donner du sens aux visiteurs aveugles qui utilisent des lecteurs d’écran.

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.

Remarque

ces outils tiers ne sont pas pris en charge par l’assistance Squarespace.

À faire Regrouper les couleurs avec un contraste élevé.
À ne pas faire Associez des couleurs difficiles à différencier, comme le bleu et le violet.

Formulaires

Les formulaires peuvent représenter un défi pour certains visiteurs. Il est important de s’assurer que le libellé de chaque champ est clair et que le formulaire est facile à parcourir. Utilisez un bloc Texte pour inclure de brèves instructions indiquant aux visiteurs exactement ce qu’ils doivent savoir pour remplir correctement le formulaire.

Vous pouvez inclure des espaces réservés avec du texte qui apparaît dans les champs du formulaire à titre d’exemple pour les visiteurs. Les visiteurs ont ainsi une meilleure idée de la manière dont ils doivent remplir le formulaire. N’oubliez pas que le texte de l’espace réservé ne doit pas remplacer le texte de l’intitulé. Pour en savoir plus sur le texte réservé, consultez notre forum.

Remarque

les modifications de code personnalisé ne sont pas prises en charge par notre service d’assistance. Nous ne sommes pas en mesure de vous aider ni pour la configuration ni pour la résolution de problèmes. En outre, si vous utilisez une solution basée sur du code, nous ne pouvons garantir sa fonctionnalité ni son entière compatibilité avec Squarespace, c’est-à-dire son fonctionnement avec notre design réactif et plus particulièrement son affichage sur les appareils mobiles, ainsi que son fonctionnement sur l’ensemble des templates. Le code personnalisé peut également causer des problèmes d’affichage lors des futures mises à jour de notre plateforme. À défaut de pouvoir vous assister pour ces éventuels problèmes, nous vous recommandons les ressources suivantes :

Footer Image
  • Obtenir de l’aide de notre communauté

  • Obtenez de l’aide sur les personnalisations avancées auprès de notre communauté.

  • Trouver un Squarespace Expert

  • Démarquez-vous en ligne avec l’aide d’un designer ou d’un développeur expérimenté.

Créer du contenu accessible pour un site