harborandpine.example

Jeg driver en Shopify-butikk (Online Store 2.0-tema, Liquid-maler) på harborandpine.example. En test av universell utforming fant dette problemet, og jeg vil fikse det i temaet mitt.

Problem: Tastaturfokuset er fanget i cookie-banneret (WCAG 2.1.2).
Hvor: 1 forekomst på 1 side, for eksempel /.

Ett element som feiler, slik nettleseren gjengav det:
```html
Settings
```

Hvorfor det er viktig: De som bare bruker tastatur, og skjermleserbrukere kan ikke handle i det hele tatt hvis fokuset er fanget (WCAG 2.1.2 No Keyboard Trap).

Hva som må endres:
- Se etter et valg for universell utforming eller fokusfeller i innstillingene til appen for cookie- eller samtykkebanneret, eller be leverandøren rette det.
- En modal kan bare holde fokuset inne mens den er åpen, og den må kunne lukkes med Escape-tasten og sende fokuset tilbake dit det kom fra.

Regler for svaret ditt:
- Vis den nøyaktige endringen som før og etter, og oppgi filen eller innstillingen den hører hjemme i. Hvis du må se filen min først, ber du meg lime den inn.
- Behold det visuelle designet og all eksisterende funksjonalitet uendret.
- Ikke dikt opp produktnavn, priser eller tekst; bruk plassholdere jeg kan fylle ut.
- Avslutt med hvordan jeg selv kan kontrollere utbedringen.
- Ta med hvordan jeg bekrefter det med tastaturet og en skjermleser.

Jeg driver en Shopify-butikk (Online Store 2.0-tema, Liquid-maler) på harborandpine.example. En test av universell utforming fant dette problemet, og jeg vil fikse det i temaet mitt.

Problem: Produktalternativer kan ikke velges med tastaturet (WCAG 2.1.1).
Hvor: 1 forekomst på 1 side, for eksempel /products/trail-daypack.

Ett element som feiler, slik nettleseren gjengav det:
```html
<div class="size-option" data-fr="opt-1">S</div>
```

Hvorfor det er viktig: Kunder som bare bruker tastatur, blant dem mange skjermleserbrukere, kommer ikke forbi dette steget (WCAG 2.1.1).

Hva som må endres:
- Bygg velgerne av innebygde radioknapper (eller en <select>) med synlige ledetekster; style ledeteksten som fargeprøven.
- Hvis du beholder egendefinerte elementer, trenger hvert alternativ tabindex="0", role="radio" med aria-checked inne i en role="radiogroup", og håndtering av piltaster og mellomromstasten. Innebygde radioknapper gir deg alt dette gratis.

En foreslått endring (Produktskjemaet i temaet ditt (variantvelgeren)):
```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>
```

Regler for svaret ditt:
- Vis den nøyaktige endringen som før og etter, og oppgi filen eller innstillingen den hører hjemme i. Hvis du må se filen min først, ber du meg lime den inn.
- Behold det visuelle designet og all eksisterende funksjonalitet uendret.
- Ikke dikt opp produktnavn, priser eller tekst; bruk plassholdere jeg kan fylle ut.
- Avslutt med hvordan jeg selv kan kontrollere utbedringen.
- Ta med hvordan jeg bekrefter det med tastaturet og en skjermleser.

Jeg driver en Shopify-butikk (Online Store 2.0-tema, Liquid-maler) på harborandpine.example. En test av universell utforming fant dette problemet, og jeg vil fikse det i temaet mitt.

Problem: Knapper skal ha forståelig (dvs. detekterbar) tekst (WCAG 4.1.2).
Hvor: 41 forekomster på 9 sider, for eksempel /, /collections/all, /products/trail-daypack, /cart.

Ett element som feiler, slik nettleseren gjengav det:
```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>
```

Hvorfor det er viktig: WCAG 4.1.2 krever at alle kontroller har et navn. Knapper uten navn er ofte knapper for å endre antall, lukkeknapper og piler i karuseller.

Hva som må endres:
- Finn knappene i eksemplene nedenfor.
- Legg til synlig tekst, visuelt skjult tekst eller en aria-label som sier hva knappen gjør (for eksempel aria-label="Close" eller aria-label="Increase quantity").

En foreslått endring (Temakoden din (søk etter markupen som vises)):
```html
<button type="button" aria-label="[What this button does]">…</button>
```

Regler for svaret ditt:
- Vis den nøyaktige endringen som før og etter, og oppgi filen eller innstillingen den hører hjemme i. Hvis du må se filen min først, ber du meg lime den inn.
- Behold det visuelle designet og all eksisterende funksjonalitet uendret.
- Ikke dikt opp produktnavn, priser eller tekst; bruk plassholdere jeg kan fylle ut.
- Avslutt med hvordan jeg selv kan kontrollere utbedringen.
- Ta med hvordan jeg bekrefter det med tastaturet og en skjermleser.

Jeg driver en Shopify-butikk (Online Store 2.0-tema, Liquid-maler) på harborandpine.example. En test av universell utforming fant dette problemet, og jeg vil fikse det i temaet mitt.

Problem: Bilder skal ha en alternativ tekst (WCAG 1.1.1).
Hvor: 22 forekomster på 7 sider, for eksempel /, /collections/all, /products/trail-daypack, /products/pine-wool-beanie.

Ett element som feiler, slik nettleseren gjengav det:
```html
<img src="/img/hero-photo.jpg" loading="lazy">
```

Hvorfor det er viktig: WCAG 1.1.1 krever et tekstalternativ for meningsbærende bilder. Uten det kan ikke en skjermleserbruker vite hvilket produkt et bilde viser.

Hva som må endres:
- I Shopify-administrasjonen åpner du Produkter > [produkt] > Medier, klikker på hvert bilde og fyller ut «Alternativ tekst». For bilder i seksjoner åpner du Nettbutikk > Temaer > Tilpass og angir alt-teksten for bildet i seksjonsinnstillingene.
- Beskriv det som betyr noe for en kunde: produktnavn, farge og vinkelen som vises (for eksempel «Handlenett i canvas, olivengrønn, sett forfra»).
- Dekorative bilder bør ha et tomt alt-attributt (alt=""), slik at skjermlesere hopper over dem.

En foreslått endring (Produktbilder: Shopify-administrasjonen › Produkter › Medier › Alternativ tekst. Andre bilder: temakoden din):
```html
<img src="/img/hero-photo.jpg" loading="lazy" alt="[Describe the image for a shopper]">
```

Regler for svaret ditt:
- Vis den nøyaktige endringen som før og etter, og oppgi filen eller innstillingen den hører hjemme i. Hvis du må se filen min først, ber du meg lime den inn.
- Behold det visuelle designet og all eksisterende funksjonalitet uendret.
- Ikke dikt opp produktnavn, priser eller tekst; bruk plassholdere jeg kan fylle ut.
- Avslutt med hvordan jeg selv kan kontrollere utbedringen.
- Ta med hvordan jeg bekrefter det med tastaturet og en skjermleser.

Jeg driver en Shopify-butikk (Online Store 2.0-tema, Liquid-maler) på harborandpine.example. En test av universell utforming fant dette problemet, og jeg vil fikse det i temaet mitt.

Problem: Alle skjemaelement skal ha en tilknyttet ledetekst eller instruksjon (WCAG 4.1.2).
Hvor: 7 forekomster på 6 sider, for eksempel /products/trail-daypack, /cart, /products/pine-wool-beanie, /products/enamel-camp-mug.

Ett element som feiler, slik nettleseren gjengav det:
```html
<input type="number" value="1" min="1">
```

Hvorfor det er viktig: WCAG 1.3.1, 3.3.2 og 4.1.2 krever at skjemafelt har ledetekster. Påmeldingsfelt for nyhetsbrev og søkefelt er vanlige syndere.

Hva som må endres:
- Gi hvert felt et <label for="field-id">-element, eller i det minste en aria-label.
- Plassholdertekst alene teller ikke som ledetekst.

En foreslått endring (Temakoden din (søk etter markupen som vises)):
```html
<input type="number" value="1" min="1" aria-label="Quantity">
```

Regler for svaret ditt:
- Vis den nøyaktige endringen som før og etter, og oppgi filen eller innstillingen den hører hjemme i. Hvis du må se filen min først, ber du meg lime den inn.
- Behold det visuelle designet og all eksisterende funksjonalitet uendret.
- Ikke dikt opp produktnavn, priser eller tekst; bruk plassholdere jeg kan fylle ut.
- Avslutt med hvordan jeg selv kan kontrollere utbedringen.
- Ta med hvordan jeg bekrefter det med tastaturet og en skjermleser.

Jeg driver en Shopify-butikk (Online Store 2.0-tema, Liquid-maler) på harborandpine.example. En test av universell utforming fant dette problemet, og jeg vil fikse det i temaet mitt.

Problem: Select-elementer skal ha et tilgjengelig navn (WCAG 4.1.2).
Hvor: 1 forekomst på 1 side, for eksempel /collections/all.

Ett element som feiler, slik nettleseren gjengav det:
```html
<select><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

Hvorfor det er viktig: WCAG 4.1.2 krever at nedtrekkslister har et tilgjengelig navn.

Hva som må endres:
- Legg til en <label> som er knyttet til select-elementet, eller en aria-label som aria-label="Sort by".

En foreslått endring (Temakoden din (søk etter markupen som vises)):
```html
<select aria-label="[Field label]"><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

Regler for svaret ditt:
- Vis den nøyaktige endringen som før og etter, og oppgi filen eller innstillingen den hører hjemme i. Hvis du må se filen min først, ber du meg lime den inn.
- Behold det visuelle designet og all eksisterende funksjonalitet uendret.
- Ikke dikt opp produktnavn, priser eller tekst; bruk plassholdere jeg kan fylle ut.
- Avslutt med hvordan jeg selv kan kontrollere utbedringen.
- Ta med hvordan jeg bekrefter det med tastaturet og en skjermleser.

Jeg driver en Shopify-butikk (Online Store 2.0-tema, Liquid-maler) på harborandpine.example. En test av universell utforming fant dette problemet, og jeg vil fikse det i temaet mitt.

Problem: Lenker skal ha forståelig (detekterbar) tekst (WCAG 2.4.4, 4.1.2).
Hvor: 36 forekomster på 9 sider, for eksempel /, /collections/all, /products/trail-daypack, /cart.

Ett element som feiler, slik nettleseren gjengav det:
```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>
```

Hvorfor det er viktig: WCAG 2.4.4 og 4.1.2 krever at lenker har et tilgjengelig navn som beskriver formålet.

Hva som må endres:
- Finn lenkene i eksemplene nedenfor. De fleste er ikoner eller bilder inne i en <a>-tag.
- Legg til visuelt skjult tekst inne i lenken, eller en aria-label som aria-label="Instagram" eller aria-label="Cart".
- Hvis lenken omslutter et bilde, gir du heller bildet en meningsfull alt-tekst.

En foreslått endring (Temakoden din (søk etter markupen som vises)):
```html
<a href="/cart" aria-label="Cart">…</a>
```

Regler for svaret ditt:
- Vis den nøyaktige endringen som før og etter, og oppgi filen eller innstillingen den hører hjemme i. Hvis du må se filen min først, ber du meg lime den inn.
- Behold det visuelle designet og all eksisterende funksjonalitet uendret.
- Ikke dikt opp produktnavn, priser eller tekst; bruk plassholdere jeg kan fylle ut.
- Avslutt med hvordan jeg selv kan kontrollere utbedringen.
- Ta med hvordan jeg bekrefter det med tastaturet og en skjermleser.

Jeg driver en Shopify-butikk (Online Store 2.0-tema, Liquid-maler) på harborandpine.example. En test av universell utforming fant dette problemet, og jeg vil fikse det i temaet mitt.

Problem: Elementer skal ha tilstrekkelig fargekontrast (WCAG 1.4.3).
Hvor: 22 forekomster på 9 sider, for eksempel /, /collections/all, /products/trail-daypack, /cart.

Ett element som feiler, slik nettleseren gjengav det:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

Hvorfor det er viktig: WCAG 1.4.3 krever et kontrastforhold på minst 4,5:1 for normal tekst og 3:1 for stor tekst. Svake priser, merker og bannere er vanskelige å lese for svaksynte, og for alle i sterkt lys.

Hva som må endres:
- Åpne elementene som feiler i listen nedenfor, og noter forgrunns- og bakgrunnsfargene i feiloppsummeringen.
- I Nettbutikk > Temaer > Tilpass > Temainnstillinger > Farger gjør du tekstfargen mørkere eller bakgrunnen lysere for det berørte fargeskjemaet, til forholdet er minst 4,5:1.
- Vær spesielt oppmerksom på salgsmerker, plassholdertekst, lenker i bunnteksten og knapper oppå bilder.

En foreslått endring (Temainnstillinger › Farger, eller CSS-filen til temaet ditt):
```css
.announce {
  background-color: #b95941; /* was #e76f51: 3.09:1, now 4.59:1 */
}
```

Regler for svaret ditt:
- Vis den nøyaktige endringen som før og etter, og oppgi filen eller innstillingen den hører hjemme i. Hvis du må se filen min først, ber du meg lime den inn.
- Behold det visuelle designet og all eksisterende funksjonalitet uendret.
- Ikke dikt opp produktnavn, priser eller tekst; bruk plassholdere jeg kan fylle ut.
- Avslutt med hvordan jeg selv kan kontrollere utbedringen.
- Ta med hvordan jeg bekrefter det med tastaturet og en skjermleser.

Jeg driver en Shopify-butikk (Online Store 2.0-tema, Liquid-maler) på harborandpine.example. En test av universell utforming fant dette problemet, og jeg vil fikse det i temaet mitt.

Problem: Alt innholdet på siden skal være inne i landemerker.
Hvor: 18 forekomster på 9 sider, for eksempel /, /collections/all, /products/trail-daypack, /cart.

Ett element som feiler, slik nettleseren gjengav det:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

Hvorfor det er viktig: Landemerker lar skjermleserbrukere hoppe rundt på siden. Dette er god praksis som støtter WCAG 1.3.1 og 2.4.1.

Hva som må endres:
- Legg løstliggende innhold (kunngjøringsfelt, popup-vinduer, chatwidgeter) i riktig landemerke, eller plasser det inne i <main>.

Regler for svaret ditt:
- Vis den nøyaktige endringen som før og etter, og oppgi filen eller innstillingen den hører hjemme i. Hvis du må se filen min først, ber du meg lime den inn.
- Behold det visuelle designet og all eksisterende funksjonalitet uendret.
- Ikke dikt opp produktnavn, priser eller tekst; bruk plassholdere jeg kan fylle ut.
- Avslutt med hvordan jeg selv kan kontrollere utbedringen.
- Ta med hvordan jeg bekrefter det med tastaturet og en skjermleser.

Jeg driver en Shopify-butikk (Online Store 2.0-tema, Liquid-maler) på harborandpine.example. En test av universell utforming fant dette problemet, og jeg vil fikse det i temaet mitt.

Problem: Rekkefølgen for overksriftsnivåer skal være semtantisk korrekt.
Hvor: 7 forekomster på 7 sider, for eksempel /collections/all, /products/trail-daypack, /pages/about, /products/pine-wool-beanie.

Ett element som feiler, slik nettleseren gjengav det:
```html
<h3>Trail Daypack 22L</h3>
```

Hvorfor det er viktig: Skjermleserbrukere navigerer etter overskrifter. Dette er god praksis som støtter WCAG 1.3.1.

Hva som må endres:
- Juster overskriftsnivåene i de berørte delene, slik at de kommer i rekkefølge uten å hoppe over nivåer.
- Endre bare taggen, ikke det visuelle uttrykket (bruk CSS-klasser for størrelse).

En foreslått endring (Temakoden din (søk etter markupen som vises)):
```html
<h2 class="h3">Trail Daypack 22L</h2>
```

Regler for svaret ditt:
- Vis den nøyaktige endringen som før og etter, og oppgi filen eller innstillingen den hører hjemme i. Hvis du må se filen min først, ber du meg lime den inn.
- Behold det visuelle designet og all eksisterende funksjonalitet uendret.
- Ikke dikt opp produktnavn, priser eller tekst; bruk plassholdere jeg kan fylle ut.
- Avslutt med hvordan jeg selv kan kontrollere utbedringen.
- Ta med hvordan jeg bekrefter det med tastaturet og en skjermleser.