harborandpine.example

Ik beheer een Shopify-webshop (Online Store 2.0-thema, Liquid-sjablonen) op harborandpine.example. Een toegankelijkheidstest vond dit probleem en ik wil het in mijn thema oplossen.

Probleem: De toetsenbordfocus zit vast in de cookiebanner (WCAG 2.1.2).
Waar: 1 geval op 1 pagina, bijvoorbeeld /.

Eén fout element, zoals de browser het weergaf:
```html
Settings
```

Waarom het belangrijk is: Gebruikers met alleen een toetsenbord of een schermlezer kunnen helemaal niet winkelen als de focus vastzit (WCAG 2.1.2 Geen toetsenbordval).

Wat er moet veranderen:
- Zoek in de instellingen van je app voor de cookie- of toestemmingsbanner naar een optie voor toegankelijkheid of focusvallen, of vraag de leverancier het op te lossen.
- Een modal mag de focus alleen vasthouden zolang die open is, moet met de Escape-toets sluiten en de focus terugzetten waar die vandaan kwam.

Regels voor je antwoord:
- Toon de exacte aanpassing als voor en na, en noem het bestand of de instelling waar die hoort. Als je eerst mijn bestand moet zien, vraag me dan om het te plakken.
- Laat het visuele ontwerp en al het bestaande gedrag ongewijzigd.
- Verzin geen productnamen, prijzen of teksten; gebruik placeholders die ik kan invullen.
- Sluit af met hoe ik de oplossing zelf kan controleren.
- Vermeld ook hoe ik het kan bevestigen met het toetsenbord en een schermlezer.

Ik beheer een Shopify-webshop (Online Store 2.0-thema, Liquid-sjablonen) op harborandpine.example. Een toegankelijkheidstest vond dit probleem en ik wil het in mijn thema oplossen.

Probleem: Productopties zijn niet met het toetsenbord te kiezen (WCAG 2.1.1).
Waar: 1 geval op 1 pagina, bijvoorbeeld /products/trail-daypack.

Eén fout element, zoals de browser het weergaf:
```html
<div class="size-option" data-fr="opt-1">S</div>
```

Waarom het belangrijk is: Klanten die alleen het toetsenbord gebruiken, waaronder veel gebruikers van een schermlezer, komen niet voorbij deze stap (WCAG 2.1.1).

Wat er moet veranderen:
- Bouw optiekiezers met native keuzerondjes (of een <select>) met zichtbare labels; geef het label de opmaak van het kleurvakje.
- Houd je eigen elementen aan, dan heeft elke optie tabindex="0" nodig, role="radio" met aria-checked binnen een role="radiogroup", en afhandeling van de pijltjestoetsen en de spatiebalk. Native keuzerondjes geven je dat allemaal vanzelf.

Een voorgestelde aanpassing (Het productformulier van je thema (variantkiezer)):
```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>
```

Regels voor je antwoord:
- Toon de exacte aanpassing als voor en na, en noem het bestand of de instelling waar die hoort. Als je eerst mijn bestand moet zien, vraag me dan om het te plakken.
- Laat het visuele ontwerp en al het bestaande gedrag ongewijzigd.
- Verzin geen productnamen, prijzen of teksten; gebruik placeholders die ik kan invullen.
- Sluit af met hoe ik de oplossing zelf kan controleren.
- Vermeld ook hoe ik het kan bevestigen met het toetsenbord en een schermlezer.

Ik beheer een Shopify-webshop (Online Store 2.0-thema, Liquid-sjablonen) op harborandpine.example. Een toegankelijkheidstest vond dit probleem en ik wil het in mijn thema oplossen.

Probleem: Knoppen moeten herkenbare tekst hebben (WCAG 4.1.2).
Waar: 41 gevallen op 9 pagina’s, bijvoorbeeld /, /collections/all, /products/trail-daypack, /cart.

Eén fout element, zoals de browser het weergaf:
```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>
```

Waarom het belangrijk is: WCAG 4.1.2 vraagt dat elk bedieningselement een naam heeft. Knoppen zonder naam zijn vaak plus- en minknoppen voor het aantal, sluitknoppen en pijlen van sliders.

Wat er moet veranderen:
- Zoek de knoppen in de voorbeelden hieronder.
- Voeg zichtbare tekst, visueel verborgen tekst of een aria-label toe dat zegt wat de knop doet (bijvoorbeeld aria-label="Close" of aria-label="Increase quantity").

Een voorgestelde aanpassing (De code van je thema (zoek daarin naar de getoonde markup)):
```html
<button type="button" aria-label="[What this button does]">…</button>
```

Regels voor je antwoord:
- Toon de exacte aanpassing als voor en na, en noem het bestand of de instelling waar die hoort. Als je eerst mijn bestand moet zien, vraag me dan om het te plakken.
- Laat het visuele ontwerp en al het bestaande gedrag ongewijzigd.
- Verzin geen productnamen, prijzen of teksten; gebruik placeholders die ik kan invullen.
- Sluit af met hoe ik de oplossing zelf kan controleren.
- Vermeld ook hoe ik het kan bevestigen met het toetsenbord en een schermlezer.

Ik beheer een Shopify-webshop (Online Store 2.0-thema, Liquid-sjablonen) op harborandpine.example. Een toegankelijkheidstest vond dit probleem en ik wil het in mijn thema oplossen.

Probleem: Afbeeldingen moeten een tekstalternatief hebben (WCAG 1.1.1).
Waar: 22 gevallen op 7 pagina’s, bijvoorbeeld /, /collections/all, /products/trail-daypack, /products/pine-wool-beanie.

Eén fout element, zoals de browser het weergaf:
```html
<img src="/img/hero-photo.jpg" loading="lazy">
```

Waarom het belangrijk is: WCAG 1.1.1 vraagt een tekstalternatief voor betekenisvolle afbeeldingen. Zonder tekstalternatief weet iemand met een schermlezer niet welk product een foto toont.

Wat er moet veranderen:
- Open in de Shopify-beheeromgeving Producten > [product] > Media, klik op elke afbeelding en vul ‘Alt-tekst’ in. Voor afbeeldingen in secties open je Webwinkel > Thema’s > Aanpassen en stel je de alt-tekst van de afbeelding in bij de instellingen van de sectie.
- Beschrijf wat voor een klant belangrijk is: productnaam, kleur en de getoonde kant (bijvoorbeeld ‘Canvas tas in olijfgroen, vooraanzicht’).
- Decoratieve afbeeldingen horen een leeg alt-attribuut (alt="") te hebben, zodat schermlezers ze overslaan.

Een voorgestelde aanpassing (Productfoto’s: Shopify-beheeromgeving › Producten › Media › Alt-tekst. Andere afbeeldingen: de code van je thema):
```html
<img src="/img/hero-photo.jpg" loading="lazy" alt="[Describe the image for a shopper]">
```

Regels voor je antwoord:
- Toon de exacte aanpassing als voor en na, en noem het bestand of de instelling waar die hoort. Als je eerst mijn bestand moet zien, vraag me dan om het te plakken.
- Laat het visuele ontwerp en al het bestaande gedrag ongewijzigd.
- Verzin geen productnamen, prijzen of teksten; gebruik placeholders die ik kan invullen.
- Sluit af met hoe ik de oplossing zelf kan controleren.
- Vermeld ook hoe ik het kan bevestigen met het toetsenbord en een schermlezer.

Ik beheer een Shopify-webshop (Online Store 2.0-thema, Liquid-sjablonen) op harborandpine.example. Een toegankelijkheidstest vond dit probleem en ik wil het in mijn thema oplossen.

Probleem: Formulierelementen moeten een label hebben (WCAG 4.1.2).
Waar: 7 gevallen op 6 pagina’s, bijvoorbeeld /products/trail-daypack, /cart, /products/pine-wool-beanie, /products/enamel-camp-mug.

Eén fout element, zoals de browser het weergaf:
```html
<input type="number" value="1" min="1">
```

Waarom het belangrijk is: WCAG 1.3.1, 3.3.2 en 4.1.2 vragen dat formuliervelden een label hebben. Aanmeldvelden voor de nieuwsbrief en zoekvelden zijn de gebruikelijke boosdoeners.

Wat er moet veranderen:
- Geef elk veld een <label for="field-id">-element, of op zijn minst een aria-label.
- Placeholdertekst alleen telt niet als label.

Een voorgestelde aanpassing (De code van je thema (zoek daarin naar de getoonde markup)):
```html
<input type="number" value="1" min="1" aria-label="Quantity">
```

Regels voor je antwoord:
- Toon de exacte aanpassing als voor en na, en noem het bestand of de instelling waar die hoort. Als je eerst mijn bestand moet zien, vraag me dan om het te plakken.
- Laat het visuele ontwerp en al het bestaande gedrag ongewijzigd.
- Verzin geen productnamen, prijzen of teksten; gebruik placeholders die ik kan invullen.
- Sluit af met hoe ik de oplossing zelf kan controleren.
- Vermeld ook hoe ik het kan bevestigen met het toetsenbord en een schermlezer.

Ik beheer een Shopify-webshop (Online Store 2.0-thema, Liquid-sjablonen) op harborandpine.example. Een toegankelijkheidstest vond dit probleem en ik wil het in mijn thema oplossen.

Probleem: Een keuzelijst (select-element) moet een toegankelijke naam hebben (WCAG 4.1.2).
Waar: 1 geval op 1 pagina, bijvoorbeeld /collections/all.

Eén fout element, zoals de browser het weergaf:
```html
<select><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

Waarom het belangrijk is: WCAG 4.1.2 vraagt dat keuzelijsten een toegankelijke naam hebben.

Wat er moet veranderen:
- Voeg een <label> toe dat aan de keuzelijst is gekoppeld, of een aria-label zoals aria-label="Sort by".

Een voorgestelde aanpassing (De code van je thema (zoek daarin naar de getoonde markup)):
```html
<select aria-label="[Field label]"><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

Regels voor je antwoord:
- Toon de exacte aanpassing als voor en na, en noem het bestand of de instelling waar die hoort. Als je eerst mijn bestand moet zien, vraag me dan om het te plakken.
- Laat het visuele ontwerp en al het bestaande gedrag ongewijzigd.
- Verzin geen productnamen, prijzen of teksten; gebruik placeholders die ik kan invullen.
- Sluit af met hoe ik de oplossing zelf kan controleren.
- Vermeld ook hoe ik het kan bevestigen met het toetsenbord en een schermlezer.

Ik beheer een Shopify-webshop (Online Store 2.0-thema, Liquid-sjablonen) op harborandpine.example. Een toegankelijkheidstest vond dit probleem en ik wil het in mijn thema oplossen.

Probleem: Links moeten herkenbare tekst hebben (WCAG 2.4.4, 4.1.2).
Waar: 36 gevallen op 9 pagina’s, bijvoorbeeld /, /collections/all, /products/trail-daypack, /cart.

Eén fout element, zoals de browser het weergaf:
```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>
```

Waarom het belangrijk is: WCAG 2.4.4 en 4.1.2 vragen dat links een toegankelijke naam hebben die hun doel beschrijft.

Wat er moet veranderen:
- Zoek de links in de voorbeelden hieronder. De meeste zijn iconen of afbeeldingen in een <a>-tag.
- Voeg visueel verborgen tekst toe in de link, of een aria-label zoals aria-label="Instagram" of aria-label="Cart".
- Als de link om een afbeelding heen staat, geef de afbeelding dan in plaats daarvan een betekenisvolle alt-tekst.

Een voorgestelde aanpassing (De code van je thema (zoek daarin naar de getoonde markup)):
```html
<a href="/cart" aria-label="Cart">…</a>
```

Regels voor je antwoord:
- Toon de exacte aanpassing als voor en na, en noem het bestand of de instelling waar die hoort. Als je eerst mijn bestand moet zien, vraag me dan om het te plakken.
- Laat het visuele ontwerp en al het bestaande gedrag ongewijzigd.
- Verzin geen productnamen, prijzen of teksten; gebruik placeholders die ik kan invullen.
- Sluit af met hoe ik de oplossing zelf kan controleren.
- Vermeld ook hoe ik het kan bevestigen met het toetsenbord en een schermlezer.

Ik beheer een Shopify-webshop (Online Store 2.0-thema, Liquid-sjablonen) op harborandpine.example. Een toegankelijkheidstest vond dit probleem en ik wil het in mijn thema oplossen.

Probleem: Elementen moeten voldoen aan de minimale drempelwaarden voor kleurcontrast (WCAG 1.4.3).
Waar: 22 gevallen op 9 pagina’s, bijvoorbeeld /, /collections/all, /products/trail-daypack, /cart.

Eén fout element, zoals de browser het weergaf:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

Waarom het belangrijk is: WCAG 1.4.3 vraagt een contrastverhouding van minimaal 4,5:1 voor normale tekst en 3:1 voor grote tekst. Vage prijzen, badges en banners zijn moeilijk te lezen voor slechtziende mensen, en voor iedereen in fel licht.

Wat er moet veranderen:
- Open de foute elementen hieronder en noteer de voorgrond- en achtergrondkleur uit de samenvatting van de fout.
- Maak in Webwinkel > Thema’s > Aanpassen > Thema-instellingen > Kleuren de tekstkleur donkerder of de achtergrond lichter voor het betrokken kleurenschema, tot de verhouding minimaal 4,5:1 is.
- Let vooral op kortingsbadges, placeholdertekst, links in de footer en knoppen op afbeeldingen.

Een voorgestelde aanpassing (Thema-instellingen › Kleuren, of het CSS-bestand van je thema):
```css
.announce {
  background-color: #b95941; /* was #e76f51: 3.09:1, now 4.59:1 */
}
```

Regels voor je antwoord:
- Toon de exacte aanpassing als voor en na, en noem het bestand of de instelling waar die hoort. Als je eerst mijn bestand moet zien, vraag me dan om het te plakken.
- Laat het visuele ontwerp en al het bestaande gedrag ongewijzigd.
- Verzin geen productnamen, prijzen of teksten; gebruik placeholders die ik kan invullen.
- Sluit af met hoe ik de oplossing zelf kan controleren.
- Vermeld ook hoe ik het kan bevestigen met het toetsenbord en een schermlezer.

Ik beheer een Shopify-webshop (Online Store 2.0-thema, Liquid-sjablonen) op harborandpine.example. Een toegankelijkheidstest vond dit probleem en ik wil het in mijn thema oplossen.

Probleem: Alle content van de pagina zou binnen landmarks moeten staan.
Waar: 18 gevallen op 9 pagina’s, bijvoorbeeld /, /collections/all, /products/trail-daypack, /cart.

Eén fout element, zoals de browser het weergaf:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

Waarom het belangrijk is: Met landmarks springen gebruikers van een schermlezer snel naar delen van de pagina. Dit is een best practice die WCAG 1.3.1 en 2.4.1 ondersteunt.

Wat er moet veranderen:
- Zet losse content (aankondigingsbalken, pop-ups, chatwidgets) in de juiste landmark, of plaats die binnen <main>.

Regels voor je antwoord:
- Toon de exacte aanpassing als voor en na, en noem het bestand of de instelling waar die hoort. Als je eerst mijn bestand moet zien, vraag me dan om het te plakken.
- Laat het visuele ontwerp en al het bestaande gedrag ongewijzigd.
- Verzin geen productnamen, prijzen of teksten; gebruik placeholders die ik kan invullen.
- Sluit af met hoe ik de oplossing zelf kan controleren.
- Vermeld ook hoe ik het kan bevestigen met het toetsenbord en een schermlezer.

Ik beheer een Shopify-webshop (Online Store 2.0-thema, Liquid-sjablonen) op harborandpine.example. Een toegankelijkheidstest vond dit probleem en ik wil het in mijn thema oplossen.

Probleem: Kopniveaus zouden steeds maar met één moeten oplopen.
Waar: 7 gevallen op 7 pagina’s, bijvoorbeeld /collections/all, /products/trail-daypack, /pages/about, /products/pine-wool-beanie.

Eén fout element, zoals de browser het weergaf:
```html
<h3>Trail Daypack 22L</h3>
```

Waarom het belangrijk is: Gebruikers van een schermlezer navigeren via koppen. Dit is een best practice die WCAG 1.3.1 ondersteunt.

Wat er moet veranderen:
- Pas de kopniveaus in de betrokken secties aan, zodat ze op volgorde lopen zonder niveaus over te slaan.
- Verander alleen de tag, niet de opmaak (gebruik CSS-classes voor de grootte).

Een voorgestelde aanpassing (De code van je thema (zoek daarin naar de getoonde markup)):
```html
<h2 class="h3">Trail Daypack 22L</h2>
```

Regels voor je antwoord:
- Toon de exacte aanpassing als voor en na, en noem het bestand of de instelling waar die hoort. Als je eerst mijn bestand moet zien, vraag me dan om het te plakken.
- Laat het visuele ontwerp en al het bestaande gedrag ongewijzigd.
- Verzin geen productnamen, prijzen of teksten; gebruik placeholders die ik kan invullen.
- Sluit af met hoe ik de oplossing zelf kan controleren.
- Vermeld ook hoe ik het kan bevestigen met het toetsenbord en een schermlezer.