Accessibilité

Faubourg est conçu et testé selon le niveau WCAG 2.2 AA, au-delà du minimum demandé par le Shopify Theme Store. L’accessibilité fait partie de la conception du thème : elle ne dépend pas d’un réglage.

Un thème ne peut pas, à lui seul, rendre une boutique conforme : vos images, vos textes, vos couleurs, vos applications et vos éventuelles modifications de code comptent autant que le thème. Les listes ci-dessous disent ce que fait le thème et ce qui relève de vous.

Ce que fait le thème

• Clavier : les commandes du thème s’atteignent et s’utilisent au clavier, y compris les menus déroulants, le méga-menu, les tiroirs, les filtres, le sélecteur de variante et le zoom. Les tiroirs se ferment avec Échap et rendent le focus à l’élément qui les a ouverts.
• Focus visible : chaque élément actif affiche un contour de focus net, dans toutes les palettes de couleurs.
• Lecteurs d’écran : libellés sur les boutons à icône, repères de navigation nommés, annonces des changements (ajout au panier, changement de variante, nombre de résultats après un filtre).
• Cibles tactiles : au moins 24 × 24 px pour toute cible, et 44 px de haut pour les contrôles sur écran tactile.
• Contrastes : les palettes livrées sont réglées pour respecter 4,5:1 pour le texte et 3:1 pour les contours des contrôles ; le texte posé sur une photo (bandeau principal, en-tête transparent, en-tête de collection) est protégé par un voile ; sur l’en-tête de collection, son intensité est le paramètre Voile sur l’image, et une valeur faible peut rendre le texte difficile à lire sur une photo claire.
• Animations : si l’acheteur a demandé à son système de réduire les animations, elles sont désactivées et rien ne défile automatiquement.
• Sans JavaScript : parcourir, filtrer, choisir une variante, ajouter au panier et passer commande sont conçus pour fonctionner, et testés scripts désactivés.
• Titres : chaque page a un titre principal unique, et les niveaux de titres restent visuellement distincts.

Ce qui dépend de vous

• Textes alternatifs : décrivez chaque image porteuse d’information (produits, images avec texte). Laissez vide une image purement décorative.
• Contrastes de vos palettes : si vous modifiez les couleurs, gardez les seuils décrits dans Couleurs.
• Texte sur image : ne descendez pas le voile sous le niveau qui garde votre texte lisible ; vérifiez sur vos photos les plus claires.
• Défilement automatique : laissez-le désactivé sur le bandeau principal et la barre d’annonce sauf nécessité.
• Liens explicites : préférez « Découvrir la collection Automne » à « Cliquez ici ».
• Niveaux de titres : dans les blocs Texte et Ligne dépliante, choisissez des niveaux qui suivent la structure de la page.
• Vidéos : ajoutez des sous-titres à vos vidéos YouTube ou Vimeo ; évitez la lecture automatique pour une vidéo parlée.
• Applications et modifications de code : elles ajoutent des contenus que le thème ne maîtrise pas. Testez votre boutique au clavier après avoir installé une application ou modifié le code.

Si vous trouvez un problème d’accessibilité dans le thème lui-même, signalez-le-nous : nous le traitons comme un bug.