Accessibilité pour les thèmes

Cette page a été imprimée le Apr 10, 2023. Pour la dernière version, allez à https://help.shopify.com/fr/manual/online-store/themes/customizing-themes/accessibility.

Lorsque vous personnalisez votre thème, c'est une bonne idée de faire des choix en matière de conception et de contenu, qui vous aideront à garder votre boutique en ligne accessible. Un site web accessible est conçu de manière à pouvoir être utilisé par tout le monde, y compris les personnes handicapées. L'accessibilité de votre boutique en ligne est essentielle pour offrir une expérience agréable à vos clients.

Les instructions ci-dessous ont été créées en tenant compte desrègles d'accessibilité des contenus web (WCAG). Étant donné que de nombreux facteurs doivent être pris en compte lors de la création d'un site web accessible, le seul respect des consignes ci-dessous ne garantit pas que votre boutique en ligne est entièrement accessible. Vous pouvez en apprendre plus sur l'accessibilité du web en visitant le site web WCAG ou en consultant lesressources listées ci-dessous.

Accessibilité du texte

Il est important que le texte de votre boutique en ligne soit lisible pour les clients malvoyants ou qui ont de la difficulté à lire des blocs de texte denses.

Contraste de couleur

Lorsque vous modifiez les couleurs de votre boutique en ligne, assurez-vous que tout votre texte est accessible aux clients qui sont daltoniens ou malvoyants. Ces clients ont besoin d'un contraste de couleur adéquat pour pouvoir différencier visuellement une chose d'une autre. Vous pouvez utiliser unoutil de rapport de contrasteen ligne pour vérifier le contraste des différentes parties de votre boutique.

Dans l'exemple ci-dessous, le texte présente un rapport de contraste de 2,4:1 par rapport à son arrière-plan, et il est difficile à lire pour certains clients.

Un bloc de texte gris clair et un arrière-plan blanc uni.

Dans l'exemple suivant, le texte présente un rapport de contraste de 4.8:1, et peut être lu facilement par de nombreux clients.

Un bloc de texte gris foncé et un arrière-plan blanc uni.

Testez le contraste de tout le texte, y compris le corps du texte, les en-têtes, les liens et les champs du formulaire. Référez-vous aux directives suivantes :

  • La couleur du texte du corps et du texte du bouton présente un rapport de contraste d'au moins 4,5:1 par rapport à son arrière-plan.
  • La couleur des en-têtes et autres textes volumineux (taille de police 24 px et plus) présente un rapport de contraste d'au moins 3:1 par rapport à son arrière-plan.
  • La couleur de tout le texte sur les images, y compris les diaporamas, les bannières et les vidéos, présente des rapports de contraste suffisants par rapport à son arrière-plan. Pour les textes volumineux (taille de police de 24 px et plus), le contraste est d'au moins 3:1. Pour un texte plus petit, le contraste est d'au moins 4,5:1.
  • La couleur des éléments non textuels, tels que les icônes et les bordures de champ d'insertion, présente un rapport de contraste d'au moins 3:1 par rapport à l'arrière-plan.

Astuce : dans certains thèmes, vous pouvez placer une superposition de couleurs entre le texte et une image pour améliorer le contraste et la lisibilité du texte.

Textes de titres

Lorsque vous ajoutez des titres à votre page avec l'éditeur de texte enrichi, il est important de conserver un ordre séquentiel (1 à 6). En effet, les titres sont utilisés par les technologies d'assistance pour communiquer la manière dont le contenu de la page est organisé. Sauter des niveaux, par exemple en passant d'un titre de niveau 2 à un titre de niveau 4, peut dérouter les utilisateurs. Suivez la consigne ci-après :

  • Les titres sont utilisés dans un ordre séquentiel et ne sautent pas les niveaux.

Taille du texte et alignement

Lorsque vous modifiez les paramètres de typographie de votre thème, assurez-vous que votre texte est assez grand pour que les clients puissent lire confortablement.

L'espacement des mots et des lettres du texte doit être régulier, afin de faciliter la lecture. Dans l'exemple ci-dessous, l'alignement du texte est justifié, ce qui crée des irrégularités d'espacement entre les mots.

Un bloc de texte justifié aligné. Chaque ligne de texte remplit l'espace de bout en bout, forçant l'espacement varié entre les mots pour l'adapter.

Dans l'exemple suivant, le texte est aligné sur la gauche, ce qui crée un espacement cohérent entre les mots.

Un bloc de texte aligné à gauche. Il y a un espacement cohérent entre chaque mot.

Lorsque vous personnalisez la taille et l'alignement du texte, référez-vous aux instructions suivantes :

  • La taille de police minimale pour le corps du texte est l'équivalent de 16 px.
  • L'alignement du texte n'est pas justifié. Le texte justifié crée un espacement incohérent entre les mots.

Liens texte

Lorsque vous ajoutez des liens à votre texte, vérifiez que tous vos clients puissent les identifier. Comme certains clients ont du mal à voir les couleurs, vous ne pouvez pas compter uniquement sur un changement de couleur pour différencier un lien d'un texte ordinaire. Le texte devrait être souligné pour qu'on ne comprenne pas qu'il s'agit d'un lien seulement en raison du changement de couleur.

如果你们modifiez de风格de la树叶味的e, assurez-vous de ne pas supprimer les styles de lien de texte. Utilisez la ligne directrice suivante :

  • Les liens de texte sont soulignés ou ont un autre différenciateur visuel, qui les démarque du texte normal.

对于我一个lternatif pour les images

Lorsque vous ajoutez des images à votre boutique en ligne, il est important de les rendre accessibles aux clients aveugles ou malvoyants. Vous pouvez le faire en ajoutant du texte alternatif qui décrit précisément chaque image. Les clients qui utilisent des lecteurs d'écran comptent sur le texte alternatif pour communiquer le contenu des images sur votre boutique en ligne.

Vous pouvezajouter du texte alternatif aux images de vos produitsà partir de l'interface administrateur Shopify. Vous pouvezajouter du texte alternatif aux autres images de votre thèmedepuis l'éditeur de thème.

Lorsque vous ajoutez du texte alternatif à une image, une bonne pratique consiste à faire comme si vous décriviez l'image à quelqu'un qui a les yeux fermés. Aidez-les à créer une image dans leur esprit. La façon dont vous décrivez une image dépend également du contexte de votre page web. Par exemple, vous décrirez sans doute une image différemment si votre entreprise est une agence de voyages ou un magasin d'équipement de plein air. Prenez l'image suivante :

Deux amis portant des sacs à dos, bras dessus, bras dessous, regardent l'océan.

Pour une agence de voyages, vous pouvez faire référence au pays et à la région dans lesquels les deux amis voyagent, et au nom de l'océan ou de la mer qu'ils regardent. D'autre part, pour une boutique de matériel de plein air, vous pourriez souligner les marques et les caractéristiques des sacs à dos des deux amis.

Si votre entreprise est une agence de voyages, un exemple de texte alternatif mal choisi pourrait être : « Deux personnes face à l'océan ». Pour la même agence, un exemple de texte alternatif approprié pourrait être : « Deux amis voyageant à Lagos, au Portugal, regardant la crique de sable de Praia do Camilo par une journée ensoleillée. »

Diaporama et accessibilité vidéo

Lorsque vous ajoutez des vidéos à votre boutique en ligne, assurez-vous de tenir compte des besoins des clients malvoyants, malentendants ou présentant destroubles vestibulaires.

Certains de ces clients comptent sur la帽acité de synthèse vocale des lecteurs d'écran, qui lisent à haute voix le contenu d'une page web. C'est pourquoi les sons provenant de vidéos ou de musique, en particulier s'ils sont inattendus, peuvent compliquer leur expérience. Pour les clients malentendants, il est recommandé de sous-titrer vos vidéos pour leur permettre d'accéder à leur contenu.

Les clients atteints de troubles vestibulaires peuvent éprouver des vertiges face à un contenu en mouvement. Pour cette raison, il est important que les diaporamas et les vidéos ne soient pas lus automatiquement.

Diaporamas

Lorsque vous ajoutez un diaporama à votre boutique en ligne, suivez les instructions suivantes :

  • Les diaporamas ne sont pas lus automatiquement.
  • Si les diaporamas sont lus automatiquement, ils incluent un paramètre que les clients peuvent utiliser pour mettre en pause ou arrêter le diaporama.

Vidéos

Lorsque vous ajoutez une vidéo à votre boutique en ligne, suivez les instructions suivantes :

  • Les vidéos ne sont pas lues automatiquement.
  • Si les vidéos sont lues automatiquement, leur son est coupé.
  • Les vidéos comportant du son sont entièrement visibles et ne sont pas obstruées par d'autres éléments de la page. Cela permet aux sous-titres de rester visibles.
  • 倒les视频comportant联合国对话,des transcriptions de texte sont disponibles. Elles sont incluses soit sur la page, soit dans un lien vers une page séparée.

Ces instructions s'appliquent également aux vidéos qui se trouvent dans un diaporama.

Prise en charge du clavier

Les clients ayant une déficience visuelle ou motrice peuvent utiliser un clavier pour naviguer et effectuer des tâches en ligne. Ces clients s'appuient sur un indicateur visuel pour communiquer lorsque le point de mire de leur clavier est sur une page web. Dans l'exemple ci-dessous, le champE-mailcomporte un indicateur de focus visuel :

Un écran de connexion client sur une boutique en ligne qui affiche les champs de formulaire pour e-mail et mot de passe. Le champ e-mail est encadré en bleu.

如果你们modifiez de风格de la树叶味的e, assurez-vous de ne pas supprimer le style de focus du clavier des éléments de la page. Utilisez la ligne directrice suivante :

  • Tous les éléments de la page interactive ont un indicateur visuel clair lorsqu'ils ont le focus sur le clavier. Ces éléments incluent des liens, des boutons et des champs de formulaire.

Ressources

Pour en savoir plus sur l'accessibilité web pour les sujets abordés dans cet article, consultez les ressources suivantes.

Ressources de contraste de couleur

  • Colors with Good Contrast(Couleurs bien contrastées), un article de l'Initiative pour l'accessibilité du web
  • Contrast Ratio, un outil en ligne que vous pouvez utiliser pour trouver le rapport de contraste entre deux couleurs.
  • Color Contrast Analyzer, une application de rapport de contraste à télécharger développée par le groupe Paciello

Ressources textuelles

Ressources textuelles alternatives

Diaporama et ressources vidéo

Ressources d'assistance du clavier

Prêt(e) à commencer à vendre avec Shopify ?

Essayez gratuitement