harborandpine.example

Jag driver en Shopify-butik (Online Store 2.0-tema, Liquid-mallar) på harborandpine.example. Ett tillgänglighetstest hittade det här problemet, och jag vill åtgärda det i mitt tema.

Problem: Tangentbordsfokus är fångat i cookiebannern (WCAG 2.1.2).
Var: 1 förekomst på 1 sida, till exempel /.

Ett felande element, så som webbläsaren renderade det:
```html
Settings
```

Därför spelar det roll: Användare som bara använder tangentbord eller skärmläsare kan inte handla alls om fokus är fångat (WCAG 2.1.2 Ingen tangentbordsfälla).

Det här behöver ändras:
- Leta efter ett alternativ för tillgänglighet eller fokusfällor i inställningarna för appen till din cookie- eller samtyckesbanner, eller be leverantören att åtgärda det.
- En modal dialogruta får bara hålla kvar fokus medan den är öppen, och den måste stängas med Escape-tangenten och lämna tillbaka fokus dit det kom ifrån.

Regler för ditt svar:
- Visa den exakta ändringen som före och efter, och ange filen eller inställningen där den ska göras. Om du behöver se min fil först, be mig klistra in den.
- Behåll den visuella designen och allt befintligt beteende oförändrat.
- Hitta inte på produktnamn, priser eller text; använd platshållare som jag kan fylla i.
- Avsluta med hur jag själv kan kontrollera åtgärden.
- Ta med hur jag bekräftar åtgärden med tangentbordet och en skärmläsare.

Jag driver en Shopify-butik (Online Store 2.0-tema, Liquid-mallar) på harborandpine.example. Ett tillgänglighetstest hittade det här problemet, och jag vill åtgärda det i mitt tema.

Problem: Produktalternativ kan inte väljas med tangentbordet (WCAG 2.1.1).
Var: 1 förekomst på 1 sida, till exempel /products/trail-daypack.

Ett felande element, så som webbläsaren renderade det:
```html
<div class="size-option" data-fr="opt-1">S</div>
```

Därför spelar det roll: Kunder som bara använder tangentbordet, däribland många skärmläsaranvändare, kan inte ta sig förbi det här steget (WCAG 2.1.1).

Det här behöver ändras:
- Bygg alternativväljare av inbyggda radioknappar (eller en <select>) med synliga etiketter; styla etiketten som färgrutan.
- Om du behåller egna element behöver varje alternativ tabindex="0", role="radio" med aria-checked inuti en role="radiogroup" samt hantering av piltangenterna och blanksteg. Inbyggda radioknappar ger dig allt detta automatiskt.

En föreslagen ändring (Temats produktformulär (variantväljare)):
```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 för ditt svar:
- Visa den exakta ändringen som före och efter, och ange filen eller inställningen där den ska göras. Om du behöver se min fil först, be mig klistra in den.
- Behåll den visuella designen och allt befintligt beteende oförändrat.
- Hitta inte på produktnamn, priser eller text; använd platshållare som jag kan fylla i.
- Avsluta med hur jag själv kan kontrollera åtgärden.
- Ta med hur jag bekräftar åtgärden med tangentbordet och en skärmläsare.

Jag driver en Shopify-butik (Online Store 2.0-tema, Liquid-mallar) på harborandpine.example. Ett tillgänglighetstest hittade det här problemet, och jag vill åtgärda det i mitt tema.

Problem: Knappar måste ha urskiljbar text (WCAG 4.1.2).
Var: 41 förekomster på 9 sidor, till exempel /, /collections/all, /products/trail-daypack, /cart.

Ett felande element, så som webbläsaren renderade 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>
```

Därför spelar det roll: WCAG 4.1.2 kräver att varje kontroll har ett namn. Knappar utan namn är ofta plus- och minusknappar för antal, stängknappar och pilar i bildspel.

Det här behöver ändras:
- Hitta knapparna i exemplen nedan.
- Lägg till synlig text, visuellt dold text eller ett aria-label som säger vad knappen gör (till exempel aria-label="Close" eller aria-label="Increase quantity").

En föreslagen ändring (Din temakod (sök efter den markup som visas)):
```html
<button type="button" aria-label="[What this button does]">…</button>
```

Regler för ditt svar:
- Visa den exakta ändringen som före och efter, och ange filen eller inställningen där den ska göras. Om du behöver se min fil först, be mig klistra in den.
- Behåll den visuella designen och allt befintligt beteende oförändrat.
- Hitta inte på produktnamn, priser eller text; använd platshållare som jag kan fylla i.
- Avsluta med hur jag själv kan kontrollera åtgärden.
- Ta med hur jag bekräftar åtgärden med tangentbordet och en skärmläsare.

Jag driver en Shopify-butik (Online Store 2.0-tema, Liquid-mallar) på harborandpine.example. Ett tillgänglighetstest hittade det här problemet, och jag vill åtgärda det i mitt tema.

Problem: Bilder måste ha alternativ text (WCAG 1.1.1).
Var: 22 förekomster på 7 sidor, till exempel /, /collections/all, /products/trail-daypack, /products/pine-wool-beanie.

Ett felande element, så som webbläsaren renderade det:
```html
<img src="/img/hero-photo.jpg" loading="lazy">
```

Därför spelar det roll: WCAG 1.1.1 kräver ett textalternativ för meningsfulla bilder. Utan det kan en skärmläsaranvändare inte avgöra vilken produkt ett foto visar.

Det här behöver ändras:
- Öppna Produkter > [produkt] > Media (Products > [product] > Media) i Shopify admin, klicka på varje bild och fyll i ’Alt-text’ (Alt text). För bilder i sektioner öppnar du Onlinebutik > Teman > Anpassa (Online Store > Themes > Customize) och anger bildens alt-text i sektionens inställningar.
- Beskriv det som är viktigt för en kund: produktnamn, färg och vilken vinkel som visas (till exempel ’Tygväska i canvas, olivgrön, framifrån’).
- Dekorativa bilder bör ha ett tomt alt-attribut (alt="") så att skärmläsare hoppar över dem.

En föreslagen ändring (Produktfoton: Shopify admin › Produkter › Media › Alt-text (Products › Media › Alt text). Övriga bilder: din temakod):
```html
<img src="/img/hero-photo.jpg" loading="lazy" alt="[Describe the image for a shopper]">
```

Regler för ditt svar:
- Visa den exakta ändringen som före och efter, och ange filen eller inställningen där den ska göras. Om du behöver se min fil först, be mig klistra in den.
- Behåll den visuella designen och allt befintligt beteende oförändrat.
- Hitta inte på produktnamn, priser eller text; använd platshållare som jag kan fylla i.
- Avsluta med hur jag själv kan kontrollera åtgärden.
- Ta med hur jag bekräftar åtgärden med tangentbordet och en skärmläsare.

Jag driver en Shopify-butik (Online Store 2.0-tema, Liquid-mallar) på harborandpine.example. Ett tillgänglighetstest hittade det här problemet, och jag vill åtgärda det i mitt tema.

Problem: Formulärelement måste ha etiketter (WCAG 4.1.2).
Var: 7 förekomster på 6 sidor, till exempel /products/trail-daypack, /cart, /products/pine-wool-beanie, /products/enamel-camp-mug.

Ett felande element, så som webbläsaren renderade det:
```html
<input type="number" value="1" min="1">
```

Därför spelar det roll: WCAG 1.3.1, 3.3.2 och 4.1.2 kräver att formulärfält har etiketter. Fält för anmälan till nyhetsbrev och sökfält är vanliga bovar.

Det här behöver ändras:
- Ge varje fält ett <label for="field-id">-element, eller åtminstone ett aria-label.
- Enbart platshållartext räknas inte som en etikett.

En föreslagen ändring (Din temakod (sök efter den markup som visas)):
```html
<input type="number" value="1" min="1" aria-label="Quantity">
```

Regler för ditt svar:
- Visa den exakta ändringen som före och efter, och ange filen eller inställningen där den ska göras. Om du behöver se min fil först, be mig klistra in den.
- Behåll den visuella designen och allt befintligt beteende oförändrat.
- Hitta inte på produktnamn, priser eller text; använd platshållare som jag kan fylla i.
- Avsluta med hur jag själv kan kontrollera åtgärden.
- Ta med hur jag bekräftar åtgärden med tangentbordet och en skärmläsare.

Jag driver en Shopify-butik (Online Store 2.0-tema, Liquid-mallar) på harborandpine.example. Ett tillgänglighetstest hittade det här problemet, och jag vill åtgärda det i mitt tema.

Problem: Select-element måste ha ett tillgängligt namn (WCAG 4.1.2).
Var: 1 förekomst på 1 sida, till exempel /collections/all.

Ett felande element, så som webbläsaren renderade det:
```html
<select><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

Därför spelar det roll: WCAG 4.1.2 kräver att rullgardinsmenyer har ett tillgängligt namn.

Det här behöver ändras:
- Lägg till en <label> som är kopplad till select-elementet, eller ett aria-label som aria-label="Sort by".

En föreslagen ändring (Din temakod (sök efter den markup som visas)):
```html
<select aria-label="[Field label]"><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

Regler för ditt svar:
- Visa den exakta ändringen som före och efter, och ange filen eller inställningen där den ska göras. Om du behöver se min fil först, be mig klistra in den.
- Behåll den visuella designen och allt befintligt beteende oförändrat.
- Hitta inte på produktnamn, priser eller text; använd platshållare som jag kan fylla i.
- Avsluta med hur jag själv kan kontrollera åtgärden.
- Ta med hur jag bekräftar åtgärden med tangentbordet och en skärmläsare.

Jag driver en Shopify-butik (Online Store 2.0-tema, Liquid-mallar) på harborandpine.example. Ett tillgänglighetstest hittade det här problemet, och jag vill åtgärda det i mitt tema.

Problem: Länkar måste ha urskiljbar text (WCAG 2.4.4, 4.1.2).
Var: 36 förekomster på 9 sidor, till exempel /, /collections/all, /products/trail-daypack, /cart.

Ett felande element, så som webbläsaren renderade 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>
```

Därför spelar det roll: WCAG 2.4.4 och 4.1.2 kräver att länkar har ett tillgängligt namn som beskriver deras syfte.

Det här behöver ändras:
- Hitta länkarna i exemplen nedan. De flesta är ikoner eller bilder i en <a>-tagg.
- Lägg till visuellt dold text i länken, eller ett aria-label som aria-label="Instagram" eller aria-label="Cart".
- Om länken omsluter en bild ger du i stället bilden en meningsfull alt-text.

En föreslagen ändring (Din temakod (sök efter den markup som visas)):
```html
<a href="/cart" aria-label="Cart">…</a>
```

Regler för ditt svar:
- Visa den exakta ändringen som före och efter, och ange filen eller inställningen där den ska göras. Om du behöver se min fil först, be mig klistra in den.
- Behåll den visuella designen och allt befintligt beteende oförändrat.
- Hitta inte på produktnamn, priser eller text; använd platshållare som jag kan fylla i.
- Avsluta med hur jag själv kan kontrollera åtgärden.
- Ta med hur jag bekräftar åtgärden med tangentbordet och en skärmläsare.

Jag driver en Shopify-butik (Online Store 2.0-tema, Liquid-mallar) på harborandpine.example. Ett tillgänglighetstest hittade det här problemet, och jag vill åtgärda det i mitt tema.

Problem: Element måste uppfylla tröskelvärdena för minsta färgkontrast (WCAG 1.4.3).
Var: 22 förekomster på 9 sidor, till exempel /, /collections/all, /products/trail-daypack, /cart.

Ett felande element, så som webbläsaren renderade det:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

Därför spelar det roll: WCAG 1.4.3 kräver ett kontrastförhållande på minst 4,5:1 för normal text och 3:1 för stor text. Bleka priser, märken och banners är svåra att läsa för personer med nedsatt syn, och för alla i starkt ljus.

Det här behöver ändras:
- Öppna de felande elementen som listas nedan och anteckna förgrunds- och bakgrundsfärgerna i sammanfattningen av felet.
- Under Onlinebutik > Teman > Anpassa > Temainställningar > Färger (Online Store > Themes > Customize > Theme settings > Colors) gör du textfärgen mörkare eller bakgrunden ljusare i det berörda färgschemat tills förhållandet är minst 4,5:1.
- Var särskilt uppmärksam på reamärken, platshållartext, länkar i sidfoten och knappar ovanpå bilder.

En föreslagen ändring (Temainställningar › Färger (Theme settings › Colors), eller temats CSS-fil):
```css
.announce {
  background-color: #b95941; /* was #e76f51: 3.09:1, now 4.59:1 */
}
```

Regler för ditt svar:
- Visa den exakta ändringen som före och efter, och ange filen eller inställningen där den ska göras. Om du behöver se min fil först, be mig klistra in den.
- Behåll den visuella designen och allt befintligt beteende oförändrat.
- Hitta inte på produktnamn, priser eller text; använd platshållare som jag kan fylla i.
- Avsluta med hur jag själv kan kontrollera åtgärden.
- Ta med hur jag bekräftar åtgärden med tangentbordet och en skärmläsare.

Jag driver en Shopify-butik (Online Store 2.0-tema, Liquid-mallar) på harborandpine.example. Ett tillgänglighetstest hittade det här problemet, och jag vill åtgärda det i mitt tema.

Problem: Allt sidinnehåll bör ingå i landmärken.
Var: 18 förekomster på 9 sidor, till exempel /, /collections/all, /products/trail-daypack, /cart.

Ett felande element, så som webbläsaren renderade det:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

Därför spelar det roll: Landmärken gör att skärmläsaranvändare kan hoppa mellan delar av sidan. Det här är god praxis som stöder WCAG 1.3.1 och 2.4.1.

Det här behöver ändras:
- Omslut fristående innehåll (meddelandefält, popup-fönster, chattwidgetar) med rätt landmärke eller placera det i <main>.

Regler för ditt svar:
- Visa den exakta ändringen som före och efter, och ange filen eller inställningen där den ska göras. Om du behöver se min fil först, be mig klistra in den.
- Behåll den visuella designen och allt befintligt beteende oförändrat.
- Hitta inte på produktnamn, priser eller text; använd platshållare som jag kan fylla i.
- Avsluta med hur jag själv kan kontrollera åtgärden.
- Ta med hur jag bekräftar åtgärden med tangentbordet och en skärmläsare.

Jag driver en Shopify-butik (Online Store 2.0-tema, Liquid-mallar) på harborandpine.example. Ett tillgänglighetstest hittade det här problemet, och jag vill åtgärda det i mitt tema.

Problem: Rubriknivåer bör endast öka med ett steg i taget.
Var: 7 förekomster på 7 sidor, till exempel /collections/all, /products/trail-daypack, /pages/about, /products/pine-wool-beanie.

Ett felande element, så som webbläsaren renderade det:
```html
<h3>Trail Daypack 22L</h3>
```

Därför spelar det roll: Skärmläsaranvändare navigerar med hjälp av rubriker. Det här är god praxis som stöder WCAG 1.3.1.

Det här behöver ändras:
- Justera rubriknivåerna i de berörda sektionerna så att de kommer i ordning utan att nivåer hoppas över.
- Ändra bara taggen, inte det visuella utseendet (använd CSS-klasser för storleken).

En föreslagen ändring (Din temakod (sök efter den markup som visas)):
```html
<h2 class="h3">Trail Daypack 22L</h2>
```

Regler för ditt svar:
- Visa den exakta ändringen som före och efter, och ange filen eller inställningen där den ska göras. Om du behöver se min fil först, be mig klistra in den.
- Behåll den visuella designen och allt befintligt beteende oförändrat.
- Hitta inte på produktnamn, priser eller text; använd platshållare som jag kan fylla i.
- Avsluta med hur jag själv kan kontrollera åtgärden.
- Ta med hur jag bekräftar åtgärden med tangentbordet och en skärmläsare.