harborandpine.example

Jeg driver en Shopify-webshop (tema til Online Store 2.0, Liquid-skabeloner) på harborandpine.example. En tilgængelighedstest fandt dette problem, og jeg vil gerne rette det i mit tema.

Problem: Tastaturfokus er fanget i cookiebanneret (WCAG 2.1.2).
Hvor: 1 forekomst på 1 side, for eksempel /.

Ét fejlende element, som browseren renderede det:
```html
Settings
```

Hvorfor det er vigtigt: Brugere, der kun bruger tastatur eller skærmlæser, kan slet ikke handle, hvis fokus er fanget (WCAG 2.1.2 No Keyboard Trap).

Det skal ændres:
- Tjek indstillingerne i din app til cookie- eller samtykkebanneret for en indstilling for tilgængelighed eller fokusfælder, eller bed leverandøren om at rette det.
- En modal må kun holde fokus inden i sig, mens den er åben, og skal kunne lukkes med Escape-tasten og sende fokus tilbage, hvor det kom fra.

Regler for dit svar:
- Vis den præcise ændring som før og efter, og angiv den fil eller indstilling, den skal ind i. Hvis du har brug for at se min fil først, så bed mig om at indsætte den.
- Bevar det visuelle design og al eksisterende funktionalitet uændret.
- Opfind ikke produktnavne, priser eller tekst; brug pladsholdere, som jeg kan udfylde.
- Slut af med, hvordan jeg selv kan tjekke rettelsen.
- Forklar også, hvordan jeg bekræfter det med tastaturet og en skærmlæser.

Jeg driver en Shopify-webshop (tema til Online Store 2.0, Liquid-skabeloner) på harborandpine.example. En tilgængelighedstest fandt dette problem, og jeg vil gerne rette det i mit tema.

Problem: Produktets valgmuligheder kan ikke vælges med tastaturet (WCAG 2.1.1).
Hvor: 1 forekomst på 1 side, for eksempel /products/trail-daypack.

Ét fejlende element, som browseren renderede det:
```html
<div class="size-option" data-fr="opt-1">S</div>
```

Hvorfor det er vigtigt: Kunder, der kun bruger tastatur, herunder mange skærmlæserbrugere, kan ikke komme videre fra dette trin (WCAG 2.1.1).

Det skal ændres:
- Byg vælgerne af indbyggede radioknapper (eller en <select>) med synlige labels; style labelen som farveprøven.
- Hvis du beholder specialbyggede elementer, skal hver valgmulighed have tabindex="0" og role="radio" med aria-checked inden i en role="radiogroup" samt håndtering af piletaster og mellemrumstasten. Indbyggede radioknapper giver dig alt dette gratis.

En foreslået ændring (Dit temas produktformular (variantvælger)):
```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 dit svar:
- Vis den præcise ændring som før og efter, og angiv den fil eller indstilling, den skal ind i. Hvis du har brug for at se min fil først, så bed mig om at indsætte den.
- Bevar det visuelle design og al eksisterende funktionalitet uændret.
- Opfind ikke produktnavne, priser eller tekst; brug pladsholdere, som jeg kan udfylde.
- Slut af med, hvordan jeg selv kan tjekke rettelsen.
- Forklar også, hvordan jeg bekræfter det med tastaturet og en skærmlæser.

Jeg driver en Shopify-webshop (tema til Online Store 2.0, Liquid-skabeloner) på harborandpine.example. En tilgængelighedstest fandt dette problem, og jeg vil gerne rette det i mit tema.

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

Ét fejlende element, som browseren renderede 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 vigtigt: WCAG 4.1.2 kræver, at alle kontroller har et navn. Knapper uden navn er ofte knapper til antal, lukkeknapper og pile i slidere.

Det skal ændres:
- Find knapperne i eksemplerne nedenfor.
- Tilføj synlig tekst, visuelt skjult tekst eller en aria-label, der siger, hvad knappen gør (for eksempel aria-label="Close" eller aria-label="Increase quantity").

En foreslået ændring (Din temakode (søg efter den viste markup)):
```html
<button type="button" aria-label="[What this button does]">…</button>
```

Regler for dit svar:
- Vis den præcise ændring som før og efter, og angiv den fil eller indstilling, den skal ind i. Hvis du har brug for at se min fil først, så bed mig om at indsætte den.
- Bevar det visuelle design og al eksisterende funktionalitet uændret.
- Opfind ikke produktnavne, priser eller tekst; brug pladsholdere, som jeg kan udfylde.
- Slut af med, hvordan jeg selv kan tjekke rettelsen.
- Forklar også, hvordan jeg bekræfter det med tastaturet og en skærmlæser.

Jeg driver en Shopify-webshop (tema til Online Store 2.0, Liquid-skabeloner) på harborandpine.example. En tilgængelighedstest fandt dette problem, og jeg vil gerne rette det i mit tema.

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

Ét fejlende element, som browseren renderede det:
```html
<img src="/img/hero-photo.jpg" loading="lazy">
```

Hvorfor det er vigtigt: WCAG 1.1.1 kræver et tekstalternativ til meningsfulde billeder. Uden det kan en skærmlæserbruger ikke vide, hvilket produkt et foto viser.

Det skal ændres:
- I Shopify-administrationen åbner du Produkter > [produkt] > Medier, klikker på hvert billede og udfylder alt-teksten (»Alt text«). For billeder i sektioner åbner du Onlinebutik > Temaer > Tilpas og angiver billedets alt-tekst i sektionens indstillinger.
- Beskriv det, der er vigtigt for en kunde: produktnavn, farve og den viste vinkel (for eksempel »Mulepose i canvas, oliven, set forfra«).
- Dekorative billeder skal have en tom alt-attribut (alt=""), så skærmlæsere springer dem over.

En foreslået ændring (Produktfotos: Shopify-administration › Produkter › Medier › alt-tekst. Andre billeder: din temakode):
```html
<img src="/img/hero-photo.jpg" loading="lazy" alt="[Describe the image for a shopper]">
```

Regler for dit svar:
- Vis den præcise ændring som før og efter, og angiv den fil eller indstilling, den skal ind i. Hvis du har brug for at se min fil først, så bed mig om at indsætte den.
- Bevar det visuelle design og al eksisterende funktionalitet uændret.
- Opfind ikke produktnavne, priser eller tekst; brug pladsholdere, som jeg kan udfylde.
- Slut af med, hvordan jeg selv kan tjekke rettelsen.
- Forklar også, hvordan jeg bekræfter det med tastaturet og en skærmlæser.

Jeg driver en Shopify-webshop (tema til Online Store 2.0, Liquid-skabeloner) på harborandpine.example. En tilgængelighedstest fandt dette problem, og jeg vil gerne rette det i mit tema.

Problem: Form-elementer skal have labels (WCAG 4.1.2).
Hvor: 7 forekomster på 6 sider, for eksempel /products/trail-daypack, /cart, /products/pine-wool-beanie, /products/enamel-camp-mug.

Ét fejlende element, som browseren renderede det:
```html
<input type="number" value="1" min="1">
```

Hvorfor det er vigtigt: WCAG 1.3.1, 3.3.2 og 4.1.2 kræver, at formularfelter har labels. Felter til tilmelding til nyhedsbrev og søgefelter er typiske syndere.

Det skal ændres:
- Giv hvert felt et <label for="field-id">-element eller som minimum en aria-label.
- Pladsholdertekst alene tæller ikke som en label.

En foreslået ændring (Din temakode (søg efter den viste markup)):
```html
<input type="number" value="1" min="1" aria-label="Quantity">
```

Regler for dit svar:
- Vis den præcise ændring som før og efter, og angiv den fil eller indstilling, den skal ind i. Hvis du har brug for at se min fil først, så bed mig om at indsætte den.
- Bevar det visuelle design og al eksisterende funktionalitet uændret.
- Opfind ikke produktnavne, priser eller tekst; brug pladsholdere, som jeg kan udfylde.
- Slut af med, hvordan jeg selv kan tjekke rettelsen.
- Forklar også, hvordan jeg bekræfter det med tastaturet og en skærmlæser.

Jeg driver en Shopify-webshop (tema til Online Store 2.0, Liquid-skabeloner) på harborandpine.example. En tilgængelighedstest fandt dette problem, og jeg vil gerne rette det i mit tema.

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

Ét fejlende element, som browseren renderede det:
```html
<select><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

Hvorfor det er vigtigt: WCAG 4.1.2 kræver, at rullemenuer har et tilgængeligt navn.

Det skal ændres:
- Tilføj en <label>, der er knyttet til rullemenuen, eller en aria-label som aria-label="Sort by".

En foreslået ændring (Din temakode (søg efter den viste markup)):
```html
<select aria-label="[Field label]"><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

Regler for dit svar:
- Vis den præcise ændring som før og efter, og angiv den fil eller indstilling, den skal ind i. Hvis du har brug for at se min fil først, så bed mig om at indsætte den.
- Bevar det visuelle design og al eksisterende funktionalitet uændret.
- Opfind ikke produktnavne, priser eller tekst; brug pladsholdere, som jeg kan udfylde.
- Slut af med, hvordan jeg selv kan tjekke rettelsen.
- Forklar også, hvordan jeg bekræfter det med tastaturet og en skærmlæser.

Jeg driver en Shopify-webshop (tema til Online Store 2.0, Liquid-skabeloner) på harborandpine.example. En tilgængelighedstest fandt dette problem, og jeg vil gerne rette det i mit tema.

Problem: Links skal have 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.

Ét fejlende element, som browseren renderede 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 vigtigt: WCAG 2.4.4 og 4.1.2 kræver, at links har et tilgængeligt navn, der beskriver deres formål.

Det skal ændres:
- Find linkene i eksemplerne nedenfor. De fleste er ikoner eller billeder i et <a>-tag.
- Tilføj visuelt skjult tekst i linket eller en aria-label som aria-label="Instagram" eller aria-label="Cart".
- Hvis linket omslutter et billede, så giv i stedet billedet en meningsfuld alt-tekst.

En foreslået ændring (Din temakode (søg efter den viste markup)):
```html
<a href="/cart" aria-label="Cart">…</a>
```

Regler for dit svar:
- Vis den præcise ændring som før og efter, og angiv den fil eller indstilling, den skal ind i. Hvis du har brug for at se min fil først, så bed mig om at indsætte den.
- Bevar det visuelle design og al eksisterende funktionalitet uændret.
- Opfind ikke produktnavne, priser eller tekst; brug pladsholdere, som jeg kan udfylde.
- Slut af med, hvordan jeg selv kan tjekke rettelsen.
- Forklar også, hvordan jeg bekræfter det med tastaturet og en skærmlæser.

Jeg driver en Shopify-webshop (tema til Online Store 2.0, Liquid-skabeloner) på harborandpine.example. En tilgængelighedstest fandt dette problem, og jeg vil gerne rette det i mit tema.

Problem: Elementer skal have tilstrækkelig farvekontrast (WCAG 1.4.3).
Hvor: 22 forekomster på 9 sider, for eksempel /, /collections/all, /products/trail-daypack, /cart.

Ét fejlende element, som browseren renderede det:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

Hvorfor det er vigtigt: WCAG 1.4.3 kræver et kontrastforhold på mindst 4,5:1 for normal tekst og 3:1 for stor tekst. Svage priser, mærker og bannere er svære at læse for svagsynede og for alle i skarpt lys.

Det skal ændres:
- Åbn de fejlende elementer, der er vist nedenfor, og notér forgrunds- og baggrundsfarverne i fejlbeskrivelsen.
- I Onlinebutik > Temaer > Tilpas > Temaindstillinger > Farver gør du tekstfarven mørkere eller baggrunden lysere for det berørte farveskema, indtil forholdet er mindst 4,5:1.
- Vær særligt opmærksom på udsalgsmærker, pladsholdertekst, links i footeren og knapper oven på billeder.

En foreslået ændring (Temaindstillinger › Farver eller dit temas CSS-fil):
```css
.announce {
  background-color: #b95941; /* was #e76f51: 3.09:1, now 4.59:1 */
}
```

Regler for dit svar:
- Vis den præcise ændring som før og efter, og angiv den fil eller indstilling, den skal ind i. Hvis du har brug for at se min fil først, så bed mig om at indsætte den.
- Bevar det visuelle design og al eksisterende funktionalitet uændret.
- Opfind ikke produktnavne, priser eller tekst; brug pladsholdere, som jeg kan udfylde.
- Slut af med, hvordan jeg selv kan tjekke rettelsen.
- Forklar også, hvordan jeg bekræfter det med tastaturet og en skærmlæser.

Jeg driver en Shopify-webshop (tema til Online Store 2.0, Liquid-skabeloner) på harborandpine.example. En tilgængelighedstest fandt dette problem, og jeg vil gerne rette det i mit tema.

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

Ét fejlende element, som browseren renderede det:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

Hvorfor det er vigtigt: Landmarks lader skærmlæserbrugere hoppe rundt på siden. Det er god praksis, der understøtter WCAG 1.3.1 og 2.4.1.

Det skal ændres:
- Placér løst indhold (meddelelsesbjælker, pop-ups, chatwidgets) i det rette landmark, eller læg det i <main>.

Regler for dit svar:
- Vis den præcise ændring som før og efter, og angiv den fil eller indstilling, den skal ind i. Hvis du har brug for at se min fil først, så bed mig om at indsætte den.
- Bevar det visuelle design og al eksisterende funktionalitet uændret.
- Opfind ikke produktnavne, priser eller tekst; brug pladsholdere, som jeg kan udfylde.
- Slut af med, hvordan jeg selv kan tjekke rettelsen.
- Forklar også, hvordan jeg bekræfter det med tastaturet og en skærmlæser.

Jeg driver en Shopify-webshop (tema til Online Store 2.0, Liquid-skabeloner) på harborandpine.example. En tilgængelighedstest fandt dette problem, og jeg vil gerne rette det i mit tema.

Problem: Overskriftsniveauer bør kun ændres sekventielt.
Hvor: 7 forekomster på 7 sider, for eksempel /collections/all, /products/trail-daypack, /pages/about, /products/pine-wool-beanie.

Ét fejlende element, som browseren renderede det:
```html
<h3>Trail Daypack 22L</h3>
```

Hvorfor det er vigtigt: Skærmlæserbrugere navigerer efter overskrifter. Det er god praksis, der understøtter WCAG 1.3.1.

Det skal ændres:
- Ret overskriftsniveauerne i de berørte sektioner, så de kommer i rækkefølge uden at springe niveauer over.
- Skift kun tagget, ikke den visuelle stil (brug CSS-klasser til størrelsen).

En foreslået ændring (Din temakode (søg efter den viste markup)):
```html
<h2 class="h3">Trail Daypack 22L</h2>
```

Regler for dit svar:
- Vis den præcise ændring som før og efter, og angiv den fil eller indstilling, den skal ind i. Hvis du har brug for at se min fil først, så bed mig om at indsætte den.
- Bevar det visuelle design og al eksisterende funktionalitet uændret.
- Opfind ikke produktnavne, priser eller tekst; brug pladsholdere, som jeg kan udfylde.
- Slut af med, hvordan jeg selv kan tjekke rettelsen.
- Forklar også, hvordan jeg bekræfter det med tastaturet og en skærmlæser.