harborandpine.example

Je gère une boutique Shopify (thème Online Store 2.0, modèles Liquid) à l’adresse harborandpine.example. Un test d’accessibilité a détecté ce problème et je veux le corriger dans mon thème.

Problème : Le focus clavier est piégé dans le bandeau cookies (WCAG 2.1.2).
Où : 1 occurrence sur 1 page, par exemple /.

Un élément en échec, tel que le navigateur l’a rendu :
```html
Settings
```

Pourquoi c’est important : Les personnes qui n’utilisent que le clavier et les utilisateurs de lecteurs d’écran ne peuvent pas acheter du tout si le focus est piégé (WCAG 2.1.2 Pas de piège au clavier).

Ce qui doit changer :
- Cherchez dans les paramètres de votre application de bandeau cookies ou de consentement une option d’accessibilité ou de piège au focus, ou demandez à son éditeur de corriger le problème.
- Une fenêtre modale ne peut retenir le focus que lorsqu’elle est ouverte ; elle doit se fermer avec la touche Échap et rendre le focus à l’élément d’où il venait.

Règles pour votre réponse :
- Montrez la modification exacte sous forme d’avant/après, et indiquez le fichier ou le paramètre concerné. Si vous avez d’abord besoin de voir mon fichier, demandez-moi de le coller.
- Conservez à l’identique le design et tous les comportements existants.
- N’inventez pas de noms de produits, de prix ni de textes ; utilisez des espaces réservés que je pourrai remplir.
- Terminez en expliquant comment je peux vérifier la correction moi-même.
- Indiquez comment la vérifier au clavier et avec un lecteur d’écran.

Je gère une boutique Shopify (thème Online Store 2.0, modèles Liquid) à l’adresse harborandpine.example. Un test d’accessibilité a détecté ce problème et je veux le corriger dans mon thème.

Problème : Les options du produit ne peuvent pas être choisies au clavier (WCAG 2.1.1).
Où : 1 occurrence sur 1 page, par exemple /products/trail-daypack.

Un élément en échec, tel que le navigateur l’a rendu :
```html
<div class="size-option" data-fr="opt-1">S</div>
```

Pourquoi c’est important : Les clients qui n’utilisent que le clavier, dont de nombreux utilisateurs de lecteurs d’écran, ne peuvent pas franchir cette étape (WCAG 2.1.1).

Ce qui doit changer :
- Construisez les sélecteurs d’options avec des boutons radio natifs (ou un <select>) et des étiquettes visibles ; donnez à l’étiquette le style de la pastille.
- Si vous conservez des éléments personnalisés, chaque option doit avoir tabindex="0", role="radio" avec aria-checked dans un role="radiogroup", et réagir aux touches fléchées et à la touche Espace. Les boutons radio natifs offrent tout cela d’office.

Une modification suggérée (Le formulaire produit de votre thème (sélecteur de variantes)) :
```html
<fieldset class="variant-picker">
  <legend>Size</legend>
  <input type="radio" id="size-s" name="Size" value="S" class="visually-hidden">
  <label for="size-s" class="size-option">S</label>
  <input type="radio" id="size-m" name="Size" value="M" class="visually-hidden">
  <label for="size-m" class="size-option">M</label>
</fieldset>
```

Règles pour votre réponse :
- Montrez la modification exacte sous forme d’avant/après, et indiquez le fichier ou le paramètre concerné. Si vous avez d’abord besoin de voir mon fichier, demandez-moi de le coller.
- Conservez à l’identique le design et tous les comportements existants.
- N’inventez pas de noms de produits, de prix ni de textes ; utilisez des espaces réservés que je pourrai remplir.
- Terminez en expliquant comment je peux vérifier la correction moi-même.
- Indiquez comment la vérifier au clavier et avec un lecteur d’écran.

Je gère une boutique Shopify (thème Online Store 2.0, modèles Liquid) à l’adresse harborandpine.example. Un test d’accessibilité a détecté ce problème et je veux le corriger dans mon thème.

Problème : Les boutons doivent avoir un texte perceptible (WCAG 4.1.2).
Où : 41 occurrences sur 9 pages, par exemple /, /collections/all, /products/trail-daypack, /cart.

Un élément en échec, tel que le navigateur l’a rendu :
```html
<button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-3.5-3.5"></path></svg></button>
```

Pourquoi c’est important : Le critère WCAG 4.1.2 exige que chaque composant d’interface ait un nom. Parmi les boutons sans nom, on trouve souvent les sélecteurs de quantité, les boutons de fermeture et les flèches des carrousels.

Ce qui doit changer :
- Repérez les boutons dans les exemples ci-dessous.
- Ajoutez un texte visible, un texte visuellement masqué ou un aria-label qui indique ce que fait le bouton (par exemple aria-label="Close" ou aria-label="Increase quantity").

Une modification suggérée (Le code de votre thème (recherchez-y le balisage affiché)) :
```html
<button type="button" aria-label="[What this button does]">…</button>
```

Règles pour votre réponse :
- Montrez la modification exacte sous forme d’avant/après, et indiquez le fichier ou le paramètre concerné. Si vous avez d’abord besoin de voir mon fichier, demandez-moi de le coller.
- Conservez à l’identique le design et tous les comportements existants.
- N’inventez pas de noms de produits, de prix ni de textes ; utilisez des espaces réservés que je pourrai remplir.
- Terminez en expliquant comment je peux vérifier la correction moi-même.
- Indiquez comment la vérifier au clavier et avec un lecteur d’écran.

Je gère une boutique Shopify (thème Online Store 2.0, modèles Liquid) à l’adresse harborandpine.example. Un test d’accessibilité a détecté ce problème et je veux le corriger dans mon thème.

Problème : Les images doivent avoir une alternative textuelle (WCAG 1.1.1).
Où : 22 occurrences sur 7 pages, par exemple /, /collections/all, /products/trail-daypack, /products/pine-wool-beanie.

Un élément en échec, tel que le navigateur l’a rendu :
```html
<img src="/img/hero-photo.jpg" loading="lazy">
```

Pourquoi c’est important : Le critère WCAG 1.1.1 exige une alternative textuelle pour les images porteuses de sens. Sans elle, un utilisateur de lecteur d’écran ne peut pas savoir quel produit montre une photo.

Ce qui doit changer :
- Dans l’administration Shopify, ouvrez Produits > [produit] > Media, cliquez sur chaque image et renseignez « Texte alternatif ». Pour les images des sections, ouvrez Boutique en ligne > Thèmes > Personnaliser et définissez le texte alternatif de l’image dans les paramètres de la section.
- Décrivez ce qui compte pour un client : le nom du produit, la couleur et l’angle de vue (par exemple « Sac cabas en toile olive, vue de face »).
- Les images décoratives doivent avoir un attribut alt vide (alt="") pour que les lecteurs d’écran les ignorent.

Une modification suggérée (Photos produit : administration Shopify › Produits › Media › Texte alternatif. Autres images : le code de votre thème) :
```html
<img src="/img/hero-photo.jpg" loading="lazy" alt="[Describe the image for a shopper]">
```

Règles pour votre réponse :
- Montrez la modification exacte sous forme d’avant/après, et indiquez le fichier ou le paramètre concerné. Si vous avez d’abord besoin de voir mon fichier, demandez-moi de le coller.
- Conservez à l’identique le design et tous les comportements existants.
- N’inventez pas de noms de produits, de prix ni de textes ; utilisez des espaces réservés que je pourrai remplir.
- Terminez en expliquant comment je peux vérifier la correction moi-même.
- Indiquez comment la vérifier au clavier et avec un lecteur d’écran.

Je gère une boutique Shopify (thème Online Store 2.0, modèles Liquid) à l’adresse harborandpine.example. Un test d’accessibilité a détecté ce problème et je veux le corriger dans mon thème.

Problème : Chaque élément de formulaire doit avoir une étiquette (WCAG 4.1.2).
Où : 7 occurrences sur 6 pages, par exemple /products/trail-daypack, /cart, /products/pine-wool-beanie, /products/enamel-camp-mug.

Un élément en échec, tel que le navigateur l’a rendu :
```html
<input type="number" value="1" min="1">
```

Pourquoi c’est important : Les critères WCAG 1.3.1, 3.3.2 et 4.1.2 exigent que les champs de formulaire aient une étiquette. Les champs d’inscription à la newsletter et de recherche sont souvent en cause.

Ce qui doit changer :
- Donnez à chaque champ un élément <label for="field-id">, ou au minimum un aria-label.
- Un texte indicatif (placeholder) seul ne compte pas comme une étiquette.

Une modification suggérée (Le code de votre thème (recherchez-y le balisage affiché)) :
```html
<input type="number" value="1" min="1" aria-label="Quantity">
```

Règles pour votre réponse :
- Montrez la modification exacte sous forme d’avant/après, et indiquez le fichier ou le paramètre concerné. Si vous avez d’abord besoin de voir mon fichier, demandez-moi de le coller.
- Conservez à l’identique le design et tous les comportements existants.
- N’inventez pas de noms de produits, de prix ni de textes ; utilisez des espaces réservés que je pourrai remplir.
- Terminez en expliquant comment je peux vérifier la correction moi-même.
- Indiquez comment la vérifier au clavier et avec un lecteur d’écran.

Je gère une boutique Shopify (thème Online Store 2.0, modèles Liquid) à l’adresse harborandpine.example. Un test d’accessibilité a détecté ce problème et je veux le corriger dans mon thème.

Problème : L’élément 'select' doit avoir un nom accessible (WCAG 4.1.2).
Où : 1 occurrence sur 1 page, par exemple /collections/all.

Un élément en échec, tel que le navigateur l’a rendu :
```html
<select><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

Pourquoi c’est important : Le critère WCAG 4.1.2 exige que les listes déroulantes aient un nom accessible.

Ce qui doit changer :
- Ajoutez un élément <label> associé à la liste, ou un aria-label comme aria-label="Sort by".

Une modification suggérée (Le code de votre thème (recherchez-y le balisage affiché)) :
```html
<select aria-label="[Field label]"><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

Règles pour votre réponse :
- Montrez la modification exacte sous forme d’avant/après, et indiquez le fichier ou le paramètre concerné. Si vous avez d’abord besoin de voir mon fichier, demandez-moi de le coller.
- Conservez à l’identique le design et tous les comportements existants.
- N’inventez pas de noms de produits, de prix ni de textes ; utilisez des espaces réservés que je pourrai remplir.
- Terminez en expliquant comment je peux vérifier la correction moi-même.
- Indiquez comment la vérifier au clavier et avec un lecteur d’écran.

Je gère une boutique Shopify (thème Online Store 2.0, modèles Liquid) à l’adresse harborandpine.example. Un test d’accessibilité a détecté ce problème et je veux le corriger dans mon thème.

Problème : Les liens doivent avoir un texte perceptible (WCAG 2.4.4, 4.1.2).
Où : 36 occurrences sur 9 pages, par exemple /, /collections/all, /products/trail-daypack, /cart.

Un élément en échec, tel que le navigateur l’a rendu :
```html
<a href="/cart"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 4h2l2.4 11h11l2-8H6.5"></path><circle cx="9" cy="20" r="1.5"></circle><circle cx="18" cy="20" r="1.5"></circle></svg></a>
```

Pourquoi c’est important : Les critères WCAG 2.4.4 et 4.1.2 exigent que les liens aient un nom accessible qui décrit leur fonction.

Ce qui doit changer :
- Repérez les liens dans les exemples ci-dessous. La plupart sont des icônes ou des images placées dans une balise <a>.
- Ajoutez un texte visuellement masqué dans le lien, ou un aria-label comme aria-label="Instagram" ou aria-label="Cart".
- Si le lien contient une image, donnez plutôt à cette image un texte alternatif pertinent.

Une modification suggérée (Le code de votre thème (recherchez-y le balisage affiché)) :
```html
<a href="/cart" aria-label="Cart">…</a>
```

Règles pour votre réponse :
- Montrez la modification exacte sous forme d’avant/après, et indiquez le fichier ou le paramètre concerné. Si vous avez d’abord besoin de voir mon fichier, demandez-moi de le coller.
- Conservez à l’identique le design et tous les comportements existants.
- N’inventez pas de noms de produits, de prix ni de textes ; utilisez des espaces réservés que je pourrai remplir.
- Terminez en expliquant comment je peux vérifier la correction moi-même.
- Indiquez comment la vérifier au clavier et avec un lecteur d’écran.

Je gère une boutique Shopify (thème Online Store 2.0, modèles Liquid) à l’adresse harborandpine.example. Un test d’accessibilité a détecté ce problème et je veux le corriger dans mon thème.

Problème : Les éléments doivent avoir un contraste de couleurs suffisant (WCAG 1.4.3).
Où : 22 occurrences sur 9 pages, par exemple /, /collections/all, /products/trail-daypack, /cart.

Un élément en échec, tel que le navigateur l’a rendu :
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

Pourquoi c’est important : Le critère WCAG 1.4.3 exige un rapport de contraste d’au moins 4,5:1 pour le texte normal et de 3:1 pour le gros texte. Les prix, badges et bannières pâles sont difficiles à lire pour les personnes malvoyantes, et pour tout le monde en pleine lumière.

Ce qui doit changer :
- Ouvrez les éléments en échec listés ci-dessous et notez les couleurs de premier plan et d’arrière-plan indiquées dans le résumé de l’échec.
- Dans Boutique en ligne > Thèmes > Personnaliser > Paramètres du thème > Couleurs, assombrissez la couleur du texte ou éclaircissez l’arrière-plan du jeu de couleurs concerné jusqu’à obtenir un rapport d’au moins 4,5:1.
- Soyez particulièrement attentif aux badges de promotion, aux textes indicatifs (placeholder), aux liens du pied de page et aux boutons placés sur des images.

Une modification suggérée (Paramètres du thème › Couleurs, ou le fichier CSS de votre thème) :
```css
.announce {
  background-color: #b95941; /* was #e76f51: 3.09:1, now 4.59:1 */
}
```

Règles pour votre réponse :
- Montrez la modification exacte sous forme d’avant/après, et indiquez le fichier ou le paramètre concerné. Si vous avez d’abord besoin de voir mon fichier, demandez-moi de le coller.
- Conservez à l’identique le design et tous les comportements existants.
- N’inventez pas de noms de produits, de prix ni de textes ; utilisez des espaces réservés que je pourrai remplir.
- Terminez en expliquant comment je peux vérifier la correction moi-même.
- Indiquez comment la vérifier au clavier et avec un lecteur d’écran.

Je gère une boutique Shopify (thème Online Store 2.0, modèles Liquid) à l’adresse harborandpine.example. Un test d’accessibilité a détecté ce problème et je veux le corriger dans mon thème.

Problème : Le contenu doit être localisé dans une région.
Où : 18 occurrences sur 9 pages, par exemple /, /collections/all, /products/trail-daypack, /cart.

Un élément en échec, tel que le navigateur l’a rendu :
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

Pourquoi c’est important : Les régions (landmarks) permettent aux utilisateurs de lecteurs d’écran de se déplacer rapidement dans la page. Il s’agit d’une bonne pratique qui contribue aux critères WCAG 1.3.1 et 2.4.1.

Ce qui doit changer :
- Placez le contenu isolé (barres d’annonce, pop-ups, widgets de chat) dans la région appropriée ou à l’intérieur de <main>.

Règles pour votre réponse :
- Montrez la modification exacte sous forme d’avant/après, et indiquez le fichier ou le paramètre concerné. Si vous avez d’abord besoin de voir mon fichier, demandez-moi de le coller.
- Conservez à l’identique le design et tous les comportements existants.
- N’inventez pas de noms de produits, de prix ni de textes ; utilisez des espaces réservés que je pourrai remplir.
- Terminez en expliquant comment je peux vérifier la correction moi-même.
- Indiquez comment la vérifier au clavier et avec un lecteur d’écran.

Je gère une boutique Shopify (thème Online Store 2.0, modèles Liquid) à l’adresse harborandpine.example. Un test d’accessibilité a détecté ce problème et je veux le corriger dans mon thème.

Problème : Les niveaux de titre doivent s’incrémenter d’un seul niveau à la fois.
Où : 7 occurrences sur 7 pages, par exemple /collections/all, /products/trail-daypack, /pages/about, /products/pine-wool-beanie.

Un élément en échec, tel que le navigateur l’a rendu :
```html
<h3>Trail Daypack 22L</h3>
```

Pourquoi c’est important : Les utilisateurs de lecteurs d’écran naviguent par les titres. Il s’agit d’une bonne pratique qui contribue au critère WCAG 1.3.1.

Ce qui doit changer :
- Ajustez les niveaux de titre dans les sections concernées pour qu’ils se suivent sans sauter de niveau.
- Modifiez uniquement la balise, pas le style visuel (utilisez des classes CSS pour la taille).

Une modification suggérée (Le code de votre thème (recherchez-y le balisage affiché)) :
```html
<h2 class="h3">Trail Daypack 22L</h2>
```

Règles pour votre réponse :
- Montrez la modification exacte sous forme d’avant/après, et indiquez le fichier ou le paramètre concerné. Si vous avez d’abord besoin de voir mon fichier, demandez-moi de le coller.
- Conservez à l’identique le design et tous les comportements existants.
- N’inventez pas de noms de produits, de prix ni de textes ; utilisez des espaces réservés que je pourrai remplir.
- Terminez en expliquant comment je peux vérifier la correction moi-même.
- Indiquez comment la vérifier au clavier et avec un lecteur d’écran.