Accessibilité et performances

Tenora est conçu pour être utilisable par tous et se charger rapidement sur téléphone. Cette page explique ce que le thème fait pour vous et ce que vous pouvez faire pour garder votre boutique accessible et rapide.

Ce que fait le thème pour l'accessibilité

Tenora a été testé selon les Règles pour l'accessibilité des contenus Web (WCAG) 2.2, niveau AA, avec des vérifications automatisées et des tests au clavier sur chaque modèle.

Navigation au clavier

• Chaque lien, bouton, menu, tiroir et formulaire peut être utilisé uniquement au clavier.
• Les tiroirs (menu, panier, filtres, points de retrait, pays et langue) gardent le focus clavier à l'intérieur tant qu'ils sont ouverts. La touche Échap (Esc) les ferme, et le focus revient là où il était.
• Les points de Shoppez la pièce, le formulaire « Est-ce que ça rentre ? », le zoom sur l'image et le sélecteur cm/po fonctionnent tous au clavier.
• Lorsqu'un client supprime un article du panier, le focus passe à l'article suivant ou au titre du panier.

Focus visible

Lorsqu'un client parcourt la page avec la touche Tab, l'élément actif est entouré d'un contour bien visible. L'ordre du focus suit l'ordre de la page.

Lien d'évitement

La première fois qu'un client appuie sur Tab, un lien Passer au contenu apparaît. Il permet de sauter l'en-tête pour aller directement au contenu principal de la page.

Réduction des animations

Certaines personnes activent le réglage « réduire les animations » sur leur appareil. Pour ces clients, le thème :

• désactive les animations et les transitions, comme l'apparition en fondu des sections
• arrête le défilement automatique de la barre d'annonces
• désactive le défilement fluide

Contraste des couleurs

• Toutes les couleurs de texte et d'arrière-plan des styles prédéfinis Tenora, Terrace et Lantern atteignent un rapport de contraste d'au moins 4.5:1 (WCAG AA). Les bordures et les icônes atteignent au moins 3:1.
• Les messages d'erreur et de réussite utilisent la couleur de texte de la combinaison de couleurs avec une icône colorée. Ils restent lisibles avec toutes les combinaisons de couleurs.
• Si vous modifiez les couleurs, gardez un rapport de contraste d'au moins 4.5:1 entre le texte et l'arrière-plan. Vous pouvez vérifier une paire de couleurs avec n'importe quel outil de contraste en ligne.

Lecteurs d'écran

• Les pages utilisent des titres et des repères (landmarks) corrects, comme l'en-tête, le contenu principal et le pied de page.
• Les prix, les prix unitaires, les prix promotionnels et les états de stock ont des libellés clairs pour les lecteurs d'écran.
• Les résultats de « Est-ce que ça rentre ? » et le nombre de pays trouvés par la recherche de pays sont annoncés.
• Les boutons et les champs de formulaire ont des libellés, y compris dans les 30 langues traduites.
• Les zones tactiles mesurent au moins 24 x 24 pixels.

Sens du texte et langue

La langue de la page et le sens du texte dépendent de la langue de la boutique. Les langues s'écrivant de droite à gauche sont inversées automatiquement. Consultez Vendre à l'international.

Ce que vous pouvez faire : le texte alternatif

Le texte alternatif (alt text) décrit une image pour les personnes qui ne peuvent pas la voir. Les lecteurs d'écran le lisent à voix haute, et les moteurs de recherche l'utilisent.

Où ajouter un texte alternatif

• Images produit : ouvrez un produit dans l'interface administrateur Shopify, sélectionnez une image, puis Ajouter un texte alternatif (Add alt text).
• Images des sections et fichiers : accédez à Contenu (Content) → Fichiers (Files), sélectionnez l'image et modifiez son texte alternatif.
• Images de collection : ouvrez la collection dans l'interface administrateur Shopify et modifiez l'image.

Comment rédiger un bon texte alternatif

• Décrivez ce que montre l'image et pourquoi c'est important. Par exemple : « Table de salle à manger en chêne avec six chaises en lin dans une pièce lumineuse ».
• Restez bref, en général une seule phrase.
• Ne commencez pas par « Image de » ou « Photo de ».
• Ajoutez les détails qui aident à choisir, comme la couleur, la matière ou la taille.
• Ne répétez pas le titre du produit si l'image n'apporte rien de nouveau. Décrivez plutôt la vue, par exemple « Vue de côté montrant les pieds fins en chêne ».

Ce que fait le thème automatiquement

• Dans la galerie produit, les images produit sans texte alternatif utilisent le titre du produit.
• Certaines images sont décoratives, comme les images de matériaux dans les cartes Matériaux et entretien et l'image de l'échantillon à côté de son titre. Le thème les masque pour les lecteurs d'écran, car le texte voisin les nomme déjà.
• Le logo utilise le nom de la boutique lorsque l'image du logo n'a pas de texte alternatif.

Ce que fait le thème pour la vitesse

• Les pages sont générées sur le serveur. Le thème utilise peu de JavaScript, et chaque section ne charge son propre script que si elle est présente sur la page. Par exemple, le script de « Est-ce que ça rentre ? » ne se charge que sur les produits qui ont des dimensions.
• Les styles propres à certaines pages, comme ceux de la page produit et des filtres, ne se chargent que sur les pages qui les utilisent.
• Les images sont disponibles en plusieurs tailles : chaque appareil télécharge la taille dont il a besoin. Les images situées sous le premier écran ne se chargent que lorsque le client s'en approche en faisant défiler la page.
• La première grande image de la page (par exemple la bannière avec image) se charge en premier, pour que la page paraisse prête plus tôt.
• Les vidéos YouTube et Vimeo ne se chargent que lorsque le client les lance.
• Les produits associés se chargent lorsque le client s'en approche en faisant défiler la page.
• Les polices proviennent de la bibliothèque de polices Shopify et le texte s'affiche immédiatement pendant le chargement de la police.

Ce que vous pouvez faire : garder votre boutique rapide

Utilisez les bonnes tailles d'image

Shopify redimensionne les images pour chaque appareil, mais une bonne image d'origine aide. Utilisez ces tailles :

Emplacement	Taille recommandée
Bannière avec image	2400 x 1350px .jpg
Bannière avec image, image sur mobile (facultative)	1080 x 1350px .jpg
Image avec texte	1500 x 1875px .jpg
Shoppez la pièce	Format 3:2, par exemple 2400 x 1600px .jpg
Promotion du méga-menu	Format 4:3
Image de couverture de vidéo	Format 16:9
Images produit	Au moins 2000px sur le côté le plus long, toutes au même format
Liste de logos	.png transparent ou .svg
Favicon	32 x 32px .png

Conseils

• Utilisez le .jpg pour les photos et le .png ou le .svg pour les logos.
• Compressez vos photos avant de les importer. Visez moins de 500 KB par photo.
• Définissez un point focal sur les images importantes. Dans l'éditeur de thème, sélectionnez l'image et choisissez le point focal. Tenora l'utilise pour recadrer l'image.

Installez moins d'applications

De nombreuses applications ajoutent leurs propres scripts et styles à chaque page, même lorsque vous ne les voyez pas. Cela peut ralentir votre boutique.

• Tenora inclut déjà les dimensions, « Est-ce que ça rentre ? », les matériaux, les échantillons, les informations de livraison et Shoppez la pièce. Vous n'avez pas besoin d'application pour ces fonctionnalités.
• Supprimez les applications que vous n'utilisez pas. Après avoir désinstallé une application, vérifiez qu'elle n'a pas laissé de code dans votre thème. Si c'est le cas, contactez le développeur de l'application.
• Avant d'installer une application, vérifiez la vitesse de votre boutique. Vérifiez-la à nouveau après l'installation.

Utilisez les vidéos avec soin

• Ajoutez une Image de couverture à la section Vidéo. L'image de couverture s'affiche jusqu'à ce que le client lance la vidéo, et le lecteur ne se charge qu'à ce moment-là.
• Gardez les vidéos hébergées sur Shopify courtes et d'une taille de fichier raisonnable.
• N'utilisez pas de vidéo comme premier élément de la page d'accueil si une image peut faire le même travail. Les images se chargent plus vite.

Gardez une page d'accueil ciblée

Chaque section ajoute du contenu à télécharger. Utilisez les sections les plus utiles à vos clients et supprimez celles dont vous n'avez pas besoin.

Vérifiez votre vitesse

Dans votre interface administrateur Shopify, accédez à Boutique en ligne (Online Store) → Thèmes (Themes) et consultez le rapport de vitesse de votre boutique. Vérifiez-le après des changements importants, comme de nouvelles applications ou de nouvelles sections sur la page d'accueil.