Vos sections « Accroche accueil » et « Nos engagements » fonctionnent dans votre navigateur, sur votre écran. Ce guide vous fait vérifier qu'elles fonctionnent aussi pour une personne qui navigue au clavier, sur un petit écran, ou avec une connexion lente.

Du HTML sémantique avant tout

Reprenez vos sections construites aux guides 13 et 14 : un titre de section doit rester une vraie balise de titre (h2, h3), pas une simple div stylée pour ressembler à un titre. Un bouton cliquable doit être une vraie balise button ou un lien a, jamais une div à laquelle on ajoute un clic en JavaScript. Ces choix, simples à faire dès l'écriture du balisage, ont un impact réel sur la compréhension de votre page par les technologies d'assistance, comme un lecteur d'écran.

Des images pensées pour tous

Toute image affichée par un thème doit avoir un texte alternatif, exactement comme déjà enseigné pour les fiches produit dans le parcours « Shopify : les bases ». Dans une section Liquid, ce texte peut provenir directement de l'image du produit (product.featured_image.alt), ou d'un champ dédié dans votre schema si l'image est purement décorative et choisie par le marchand.

Vérifier le responsive, pas seulement le supposer

Reprenez l'aperçu local de votre section « Nos engagements », lancé au guide 9, et réduisez la largeur de la fenêtre de votre navigateur progressivement, jusqu'à une largeur de téléphone. Les trois engagements doivent rester lisibles, sans texte coupé ni élément qui déborde de l'écran. Si votre CSS ne prévoit qu'une disposition en trois colonnes fixes, corrigez-la pour qu'elle s'adapte, par exemple en passant à une colonne unique sur petit écran.

Essayez de parcourir votre page d'accueil locale uniquement avec la touche Tab du clavier, sans toucher à la souris. Chaque élément interactif, comme un lien ou un bouton, doit pouvoir être atteint dans cet ordre, et un indicateur visuel (le focus) doit clairement montrer où vous vous trouvez à chaque instant. Si un élément cliquable n'est jamais atteignable au clavier, une personne qui ne peut pas utiliser de souris ne pourra tout simplement pas l'utiliser.

Des réflexes de performance simples

Sans promettre de score précis, quelques habitudes réduisent concrètement le poids d'une page : compressez vos images avant de les ajouter au thème, comme déjà enseigné dans le parcours « Shopify : les bases » pour les photos de produit, évitez d'ajouter du JavaScript pour un effet qu'une simple règle CSS peut produire, et ne chargez un script tiers que si la fonctionnalité qu'il apporte le justifie réellement.

Ne promettez jamais un score Lighthouse précis

Un score de performance mesuré par un outil comme Lighthouse dépend de nombreux facteurs qui évoluent : la connexion testée, l'appareil, les autres applications installées sur la boutique, les images ajoutées par le marchand après votre travail. Concentrez-vous sur de bonnes pratiques vérifiables (poids d'image raisonnable, JavaScript limité au nécessaire), plutôt que sur un chiffre que vous ne maîtrisez pas entièrement.

Comment vérifier concrètement

Pour chaque nouvelle section que vous construirez à l'avenir, reprenez cette liste courte : les titres sont-ils de vraies balises de titre ? Les images ont-elles un texte alternatif ? La section reste-t-elle lisible sur un petit écran ? Peut-on l'utiliser entièrement au clavier ? Ces quatre questions, posées systématiquement, évitent la plupart des problèmes les plus fréquents.

Vérifiez que vous avez compris

Votre section « Nos engagements » s'affiche parfaitement sur votre grand écran d'ordinateur. Pouvez-vous en conclure qu'elle fonctionne correctement pour l'ensemble de vos visiteurs ?

Non. Un affichage correct sur un seul type d'écran ne garantit rien sur les autres tailles d'écran, ni sur l'accessibilité au clavier ou avec un lecteur d'écran. Chacun de ces aspects mérite une vérification spécifique et distincte, comme pratiqué dans ce guide, plutôt qu'une simple vérification visuelle sur votre propre appareil.

Chapitre terminé