Accessibilité

Liens en vedette

1. Documentation du W3C sur les Règles pour l’accessibilité des contenus Web
2. Documentation Shopify sur l’accessibilité des thèmes
3. Documentation développeur Shopify sur l’accessibilité des thèmes
4. Rapport de contraste
5. Documentation Shopify sur l’éditeur de texte enrichi
6. Documentation Shopify sur l’ajout de texte alternatif aux images de produits
7. Documentation Shopify sur l’ajout de texte alternatif aux images de votre thème
8. Article du projet A11Y sur les troubles vestibulaires
9. Documentation du W3C sur la synthèse vocale

Vidéos utiles

Article du centre d’aide Vimeo sur les sous-titres codés et les sous-titres

Lorsque vous personnalisez Align dans Shopify et ajoutez du contenu à votre boutique, des choix de conception accessibles permettent à davantage de clients d’utiliser votre boutique en ligne, notamment les personnes en situation de handicap.

Ces recommandations s’appuient sur les Règles pour l’accessibilité des contenus Web (WCAG). L’accessibilité dépend de nombreux facteurs. Le simple respect de ces règles ne garantit donc pas que votre boutique sera entièrement accessible. Pour obtenir des conseils supplémentaires, consultez les ressources d’accessibilité de Shopify

Astuce

Pour obtenir des conseils avancés sur l’accessibilité des thèmes, consultez Shopify.dev

Accessibilité du texte

Un texte clair et lisible aide les clients malvoyants ainsi que ceux qui ont des difficultés à lire un contenu dense.

Contraste des couleurs

Utilisez un contraste suffisant entre le texte et son arrière-plan afin que les clients puissent distinguer le contenu, notamment les personnes daltoniennes ou malvoyantes. Vérifiez les combinaisons de couleurs à l’aide d’un outil de calcul du contraste en ligne.

Par exemple, un texte présentant un rapport de contraste de 2.4:1 peut être difficile à lire pour certains clients, tandis qu’un rapport de 4.8:1 est plus facile à lire pour de nombreux clients. Vérifiez le texte courant, les titres, les liens, les champs de formulaire et le texte placé sur des images.

1. Utilisez un rapport de contraste d’au moins 4.5:1 pour le texte courant et le texte des boutons.
2. Utilisez un rapport de contraste d’au moins 3:1 pour les titres et les autres textes de grande taille, à partir de 24 px.
3. Veillez à ce que le texte placé sur des images, des diaporamas, des bannières et des vidéos respecte le rapport approprié : au moins 3:1 pour les textes de grande taille et 4.5:1 pour les textes plus petits.
4. Utilisez un rapport de contraste d’au moins 3:1 pour les éléments autres que du texte, tels que les bordures des champs de saisie et les icônes.

Astuce

Si Align propose une option de superposition d’image pour le contenu que vous modifiez, utilisez-la derrière le texte placé sur une image afin d’améliorer le contraste et la lisibilité.

Titres de texte

Utilisez les niveaux de titre dans l’ordre lorsque vous ajoutez des titres avec l’éditeur de texte enrichi. Les technologies d’assistance utilisent les titres pour indiquer la structure d’une page. Passer du niveau de titre 2 au niveau 4 peut donc prêter à confusion.

1. Utilisez les niveaux de titre dans l’ordre, sans en omettre.

Taille et alignement du texte

Choisissez des tailles de texte que les clients peuvent lire confortablement et conservez un espacement cohérent entre les mots et les lettres. Évitez l’alignement justifié, car il peut créer des espaces irréguliers entre les mots.

1. Définissez le texte courant sur l’équivalent d’au moins 16 px.
2. Utilisez un texte aligné à gauche plutôt qu’un texte justifié.

Note

Les familles de polices peuvent sembler plus grandes ou plus petites à taille égale. Si une police semble plus petite que les autres polices à 16 px, choisissez une taille supérieure.

Liens textuels

Rendez les liens identifiables sans vous appuyer uniquement sur la couleur. Le soulignement des liens ou l’utilisation d’une autre distinction visuelle claire par rapport au texte standard aide les clients qui ont des difficultés à percevoir les changements de couleur.

1. Soulignez les liens textuels ou donnez-leur une autre distinction visuelle claire par rapport au texte environnant.

Texte alternatif des images

Le texte alternatif aide les clients aveugles ou malvoyants à comprendre le contenu des images grâce aux lecteurs d’écran. Ajoutez un texte alternatif précis à chaque image significative.

Vous pouvez ajouter un texte alternatif aux images de produits dans l’interface administrateur Shopify. Vous pouvez ajouter un texte alternatif aux autres images du thème dans l’éditeur de thème.

Rédigez le texte alternatif comme si vous décriviez l’image à une personne qui a les yeux fermés. Décrivez les détails importants dans le contexte de la page et de votre activité. Par exemple, une agence de voyages peut décrire le lieu et le paysage visibles sur une image, tandis qu’un magasin d’équipement de plein air peut se concentrer sur les marques et les caractéristiques des sacs à dos présentés.

Pour une agence de voyages, « Deux personnes devant l’océan » fournit peu de détails utiles. « Deux amis en voyage à Lagos, au Portugal, qui contemplent la crique de sable de Praia do Camilo par une journée ensoleillée » est plus descriptif.

Ajouter un texte alternatif aux images du thème

1. Depuis l’interface administrateur Shopify, accédez à Online Store > Themes
2. Recherchez le thème Align que vous souhaitez modifier, puis cliquez sur Customize.
3. Dans la barre latérale de l’éditeur de thème, sélectionnez la section qui contient l’image.
4. Sélectionnez Edit sur l’image.
5. Saisissez le texte alternatif dans la boîte de dialogue, puis cliquez sur Save.
6. Cliquez à nouveau sur Save pour enregistrer les modifications de votre thème.

Accessibilité des diaporamas et des vidéos

Tenez compte des clients malvoyants, des clients sourds ou malentendants et des clients susceptibles de souffrir de troubles vestibulaires lorsque vous ajoutez des diaporamas et des vidéos.

Certains clients utilisent la synthèse vocale d’un lecteur d’écran, et un son ou une musique vidéo inattendus peuvent rendre une page difficile à utiliser. Les sous-titres codés aident les clients sourds ou malentendants à accéder au contenu vidéo. Les contenus en mouvement peuvent provoquer des étourdissements chez les clients souffrant de troubles vestibulaires.

Diaporamas

1. Ne configurez pas les diaporamas pour qu’ils se lancent automatiquement.
2. Si un diaporama se lance automatiquement, fournissez un paramètre permettant aux clients de le mettre en pause ou de l’arrêter.

Vidéos

1. Ne configurez pas les vidéos pour qu’elles se lancent automatiquement.
2. Si une vidéo se lance automatiquement, désactivez son audio.
3. Gardez les vidéos avec audio entièrement visibles et sans obstruction afin que les sous-titres codés restent visibles.
4. Fournissez les transcriptions textuelles des vidéos comportant des dialogues, soit sur la page, soit via un lien vers une page distincte.
5. Appliquez également ces recommandations aux vidéos incluses dans des diaporamas.

Prise en charge du clavier

Les clients présentant des déficiences visuelles ou motrices peuvent utiliser un clavier pour naviguer et effectuer des tâches. Un indicateur visuel clair de mise au point montre quel élément de la page est actuellement sélectionné, comme un champ Email.

1. Veillez à ce que chaque élément interactif dispose d’un indicateur visuel clair de mise au point au clavier, notamment les liens, les boutons et les champs de formulaire.