Accessibilité pour les thèmes
Lorsque vous personnalisez votre thème, faites 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. Faire des choix pour votre boutique en ligne axés sur l’accessibilité peut vous aider à offrir une expérience agréable à tous vos clients.
Les instructions ci-dessous ont été créées en tenant compte des rè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é web en accédant au site web WCAG ou en consultant les ressources listé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 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 un outil de rapport 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.
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.
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.
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 technologies d’assistance utilisent les titres pour communiquer l’organisation du contenu de la page. Le fait de 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 directive 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.
Dans l'exemple suivant, le texte est aligné sur la gauche, ce qui crée un espacement cohérent entre les mots.
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é. Un texte justifié crée un espacement incohérent entre les mots.
Liens texte
Les liens texte doivent être soulignés ou avoir un autre style visuellement distinct de celui du texte normal. 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.
Les liens texte doivent s’ouvrir dans le même onglet. Les liens qui s’ouvrent dans un nouvel onglet ou une nouvelle fenêtre peuvent être source de confusion, en particulier sur mobile où l’ancienne fenêtre n’est pas visible. En outre, ces liens ne sont pas adaptés pour tous les clients, en particulier ceux qui utilisent l’agrandissement de l’écran ou qui possèdent un niveau technique moins élevé.
Si vous modifiez la feuille de style de votre thème, assurez-vous de ne pas supprimer les styles de lien de texte. Suivez les directives suivantes :
- Les liens textuels sont soit soulignés, soit dotés d’un autre élément de différenciation visuelle que la couleur, afin que les clients puissent distinguer les liens du texte normal.
- Les liens textuels s’ouvrent dans le même onglet lorsque le visiteur 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. 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 pouvez ajouter du texte alternatif aux images de vos produits à partir de l'interface administrateur Shopify. Vous pouvez ajouter du texte alternatif aux autres images de votre thème depuis 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 :
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 des troubles vestibulaires.
Certains de ces clients comptent sur la capacité 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 et que le client puisse contrôler le diaporama à l’aide de boutons de commande.
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 des commandes de diaporama que les clients peuvent utiliser pour mettre en pause, 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 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.
- Pour les vidéos comportant un dialogue, 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 champ E-mail comporte un indicateur de focus visuel :
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. 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
- 16 Pixels Font Size: For Body Copy. Anything Less Is A Costly Mistake (Taille de la police 16 pixels : pour le corps du texte. Tout le reste est une erreur coûteuse), un article de Smashing Magazine
- Text alignment (Alignement de texte), un article de Web AIM
- Link Appearence (Apparence des liens), un article de Web AIM
- Using Headings for Content Structure(Utilisation de titres pour la structure de contenu), un article de Web AIM
Ressources textuelles alternatives
- Text to Speech (Du texte à la parole), un article de l'Initiative pour l'accessibilité du web
- Alternative Text (Texte alternatif), un article de Web AIM
- Considerations when writing alt text(Considérations lors de l'écriture de texte alt), un article sur Medium.
Diaporama et ressources vidéo
- A Primer to Vestibular Disorders (Une introduction aux troubles vestibulaires), un article de The A11Y Project
- Text to Speech (Du texte à la parole), un article de l'Initiative pour l'accessibilité du web
- Video Captions (Légendes vidéo), un article de l'Initiative pour l'accessibilité du web
- Use automatic captioning (Utilisation du sous-titrage automatique), un article de YouTube Help
- Captions and subtitles (Légendes et sous-titres), un article du centre d'aide de Vimeo
- Utilisabilité des carrousels, un article du Nielsen Norman Group
Ressources d'assistance du clavier
- Keyboard Compatibility (Compatibilité entre claviers), un article de l'Initiative pour l'accessibilité du web
- Introduction to Focus (Introduction à Focus), un article de Google Developers