Aide
Se connecter

Accessibilité des thèmes

Lorsque vous personnalisez votre thème, vos choix en matière de design et de contenu doivent contribuer à maintenir l’accessibilité de votre boutique en ligne. Un site web accessible est conçu pour pouvoir être utilisé par tout le monde, y compris les personnes en situation de handicap. Faire des choix en tenant compte de l’accessibilité pour votre boutique en ligne peut vous aider à offrir une expérience inclusive à tous vos clients.

Les directives ci-dessous ont été créées en gardant à l’esprit les règles pour l’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 simple fait de suivre les directives ci-dessous ne garantit pas que votre boutique en ligne soit entièrement accessible. Vous pouvez en savoir plus sur l’accessibilité du web en consultant le site web des WCAG ou les ressources indiquées ci-dessous.

Sur cette page

Accessibilité du texte

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

Contraste des couleurs

Lorsque vous modifiez les couleurs de votre boutique en ligne, assurez-vous que tous vos textes sont accessibles aux clients daltoniens ou malvoyants. Ces clients ont besoin d’un contraste de couleurs suffisant pour distinguer visuellement les éléments les uns des autres. Vous pouvez utiliser un outil de ratio de contraste en 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 sur un fond blanc uni.

Dans l’exemple suivant, le texte présente un rapport de contraste de 4,8:1 et il est plus facile à lire pour de nombreux clients.

Un bloc de texte gris foncé sur un fond blanc uni.

Testez le contraste de tous les textes, y compris le corps du texte, les titres, les liens et les champs de formulaire. Suivez les directives suivantes :

  • La couleur du corps du texte et du texte des boutons doit présenter un rapport de contraste d’au moins 4,5:1 par rapport à son arrière-plan.
  • La couleur des titres et des autres textes de grande taille (taille de police de 24 px et plus) doit présenter un rapport de contraste d’au moins 3:1 par rapport à son arrière-plan.
  • La couleur de tous les textes sur les images, y compris les diaporamas, les bannières et les vidéos, doit présenter des rapports de contraste suffisants par rapport à son arrière-plan. Pour les textes de grande taille (taille de police de 24 px et plus), le contraste est d’au moins 3:1. Pour les textes plus petits, le contraste est d’au moins 4,5:1.
  • La couleur des éléments non textuels, y compris les bordures de saisie et les icônes, doit présenter un rapport de contraste d’au moins 3:1 par rapport à son arrière-plan.

Titres de texte

Lorsque vous ajoutez des titres à votre page avec l’éditeur de texte enrichi, il est important de les conserver dans un ordre séquentiel (de 1 à 6). Les titres sont utilisés par les technologies d’assistance pour communiquer la façon dont le contenu de la page est organisé. Le fait de sauter des niveaux, par exemple en passant d’un titre de niveau 2 à un titre de niveau 4, peut prêter à confusion pour les utilisateurs. Suivez la directive suivante :

  • Les titres sont utilisés dans l’ordre séquentiel et ne sautent aucun niveau.

Taille et alignement du texte

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

Le texte doit également avoir un espacement uniforme entre les mots et les lettres pour en faciliter la lecture. Dans l’exemple ci-dessous, l’alignement du texte est justifié, ce qui crée un espacement non uniforme entre les mots.

Un bloc de texte justifié. Chaque ligne remplit l’espace de bout en bout, ce qui crée un espacement variable entre les mots.

Dans l’exemple suivant, l’alignement du texte est aligné à gauche, ce qui crée un espacement uniforme entre les mots.

Un bloc de texte aligné à gauche. L’espacement entre chaque mot est uniforme.

Lorsque vous personnalisez la taille et l’alignement du texte, suivez les 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 non uniforme entre les mots.

Liens textuels

Les liens textuels doivent être soulignés ou avoir un autre style visuellement distinct par rapport au texte normal. Étant donné que certains clients ont de la difficulté à voir les couleurs, vous ne pouvez pas vous fier uniquement à un changement de couleur pour différencier un lien du texte normal.

Les liens textuels devraient s’ouvrir dans le même onglet. En effet, les liens qui s’ouvrent dans un nouvel onglet ou une nouvelle fenêtre peuvent prêter à confusion, surtout sur les appareils mobiles où l’ancienne fenêtre n’est plus visible. Ils ne sont pas non plus inclusifs pour les clients, notamment ceux qui utilisent un agrandissement d’écran ou qui sont moins à l’aise avec la technologie.

Si vous modifiez la feuille de style de votre thème, assurez-vous de ne pas supprimer les styles de liens textuels. Suivez les instructions suivantes :

  • Les liens textuels sont soit soulignés, soit dotés d’un autre différenciateur visuel qui n’est pas uniquement la couleur, afin que les clients puissent différencier les liens du texte normal.
  • Les liens textuels s’ouvrent dans le même onglet lorsqu’on clique dessus.

Texte alternatif pour les images

Lorsque vous ajoutez des images à votre boutique en ligne, il est important de les rendre accessibles aux clients aveugles ou malvoyants. Pour ce faire, vous pouvez ajouter un texte alternatif qui décrit chaque image avec précision. Les clients qui utilisent des lecteurs d’écran se fient au texte alternatif pour connaître le contenu des images de votre boutique en ligne.

Vous pouvez ajouter un texte alternatif à vos images de produits à partir de l’interface administrateur Shopify. Vous pouvez ajouter un texte alternatif aux autres images de votre thème à partir de l’éditeur de thème.

Lorsque vous ajoutez un texte alternatif à une image, il est conseillé de faire comme si vous décriviez l’image à une personne qui a les yeux fermés. Aidez-la à se créer une image mentale. La façon dont vous décrivez une image dépend également du contexte de votre page web. Par exemple, vous pouvez décrire une image différemment selon que votre entreprise est une agence de voyages ou un magasin d’équipement de plein air. Prenons l’image suivante :

Deux amis portant des sacs à dos, l’un passant son bras sur l’épaule de l’autre et regardant l’océan

Pour une agence de voyages, vous pouvez faire référence au pays et à la région où les deux amis voyagent, ainsi qu’au nom de l’océan ou de la mer qu’ils regardent. En revanche, pour un magasin d’équipement de plein air, vous pouvez vous concentrer sur les marques et les caractéristiques des sacs à dos des deux amis.

Si votre entreprise est une agence de voyages, un exemple de mauvais texte alternatif pourrait être : « Deux personnes devant l’océan ». Pour la même agence, un exemple de bon texte alternatif pourrait être : « Deux amis voyageant à Lagos, au Portugal, qui regardent la crique de sable de Praia do Camilo par une journée ensoleillée. »

Accessibilité des diaporamas et des vidéos

Lorsque vous ajoutez des vidéos à votre boutique en ligne, veillez à tenir compte des besoins des clients malvoyants, sourds ou malentendants, ou des clients qui pourraient être sujets à des troubles vestibulaires.

Certains de ces clients dépendent de la fonctionnalité de synthèse vocale des lecteurs d’écran, qui lisent le contenu d’une page web à haute voix. Le son supplémentaire provenant des vidéos et de la musique, surtout s’il est inattendu, peut rendre cette expérience difficile. Pour les clients sourds ou malentendants, il est conseillé d’ajouter des sous-titres à vos vidéos afin qu’ils puissent en consulter le contenu.

Les clients souffrant de troubles vestibulaires peuvent ressentir des vertiges en présence de contenu en mouvement. C’est pourquoi il est important que les diaporamas et les vidéos ne se lancent pas automatiquement et que le client puisse contrôler le diaporama à l’aide de boutons de contrôle.

Diaporamas

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

  • Les diaporamas ne se lancent pas automatiquement.
  • Si les diaporamas se lancent automatiquement, ils doivent inclure des commandes que les clients peuvent utiliser pour mettre en pause, faire avancer 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 se lancent pas automatiquement.
  • Si les vidéos se lancent automatiquement, leur son est désactivé.
  • Pour les vidéos qui comportent du son, la vidéo doit être entièrement visible et non masquée par d’autres éléments de la page. Cela permet aux sous-titres de rester visibles.
  • Pour les vidéos qui comportent des dialogues, des transcriptions textuelles sont disponibles. Celles-ci sont incluses soit sur la page, soit dans un lien menant à une page distincte.

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

Navigation au 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 se fient à un indicateur visuel pour savoir où se trouve le focus de leur clavier sur une page web. Dans l’exemple ci-dessous, le champ E-mail a un indicateur de focus visuel :

Un écran de connexion client sur une boutique en ligne, affichant des champs de formulaire pour l’e-mail et le mot de passe. Le champ E-mail est encadré en bleu.

Si vous modifiez la feuille de style de votre thème, assurez-vous de ne pas supprimer le style de focus du clavier des éléments de la page. Suivez l’instruction suivante :

  • Tous les éléments de page interactifs ont un indicateur visuel clair lorsqu’ils ont le focus du clavier. Ces éléments comprennent les liens, les boutons et les champs de formulaire.

Ressources

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

Ressources sur le contraste des couleurs

  • Colors with Good Contrast, un article de la Web Accessibility Initiative
  • 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 qui a été développée par le Paciello Group

Ressources sur le texte

Ressources sur le texte alternatif

Ressources sur les diaporamas et les vidéos

Ressources sur la prise en charge du clavier

Dans cette section