harborandpine.example

Sivustoni harborandpine.example on Shopify-kauppa (Online Store 2.0 -teema, Liquid-mallipohjat). Saavutettavuustesti löysi tämän ongelman, ja haluan korjata sen teemassani.

Ongelma: Näppäimistön fokus jää loukkuun evästebanneriin (WCAG 2.1.2).
Missä: 1 esiintymä, 1 sivulla, esimerkiksi /.

Yksi virheellinen elementti sellaisena kuin selain sen renderöi:
```html
Settings
```

Miksi sillä on merkitystä: Pelkkää näppäimistöä tai ruudunlukijaa käyttävät eivät voi ostaa lainkaan, jos fokus jää loukkuun (WCAG 2.1.2 Ei näppäimistöansaa).

Mitä pitää muuttaa:
- Etsi eväste- tai suostumusbannerisovelluksesi asetuksista saavutettavuus- tai fokusloukkuasetusta, tai pyydä toimittajaa korjaamaan asia.
- Modaali-ikkuna saa pitää fokuksen sisällään vain ollessaan auki, ja sen on sulkeuduttava Escape-näppäimellä ja palautettava fokus sinne, mistä se tuli.

Ohjeet vastaukseesi:
- Näytä tarkka muutos ennen ja jälkeen -muodossa ja kerro, mihin tiedostoon tai asetukseen se tehdään. Jos sinun täytyy ensin nähdä tiedostoni, pyydä minua liittämään se.
- Pidä ulkoasu ja kaikki nykyinen toiminta ennallaan.
- Älä keksi tuotenimiä, hintoja tai tekstejä; käytä paikkamerkkejä, jotka voin täyttää itse.
- Kerro lopuksi, miten voin itse tarkistaa korjauksen.
- Kerro myös, miten korjauksen voi varmistaa näppäimistöllä ja ruudunlukijalla.

Sivustoni harborandpine.example on Shopify-kauppa (Online Store 2.0 -teema, Liquid-mallipohjat). Saavutettavuustesti löysi tämän ongelman, ja haluan korjata sen teemassani.

Ongelma: Tuotevaihtoehtoja ei voi valita näppäimistöllä (WCAG 2.1.1).
Missä: 1 esiintymä, 1 sivulla, esimerkiksi /products/trail-daypack.

Yksi virheellinen elementti sellaisena kuin selain sen renderöi:
```html
<div class="size-option" data-fr="opt-1">S</div>
```

Miksi sillä on merkitystä: Pelkkää näppäimistöä käyttävät asiakkaat, myös monet ruudunlukijan käyttäjät, eivät pääse tämän vaiheen ohi (WCAG 2.1.1).

Mitä pitää muuttaa:
- Rakenna vaihtoehtojen valitsimet natiiveista valintanapeista (tai <select>-elementistä) näkyvine nimiöineen; muotoile nimiö värinäytteeksi.
- Jos säilytät omat elementit, jokainen vaihtoehto tarvitsee tabindex="0", role="radio" ja aria-checked role="radiogroup" -ryhmän sisällä sekä nuolinäppäinten ja välilyönnin käsittelyn. Natiivit valintanapit tarjoavat kaiken tämän valmiina.

Ehdotettu muutos (Teemasi tuotelomake (muunnelmavalitsin)):
```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>
```

Ohjeet vastaukseesi:
- Näytä tarkka muutos ennen ja jälkeen -muodossa ja kerro, mihin tiedostoon tai asetukseen se tehdään. Jos sinun täytyy ensin nähdä tiedostoni, pyydä minua liittämään se.
- Pidä ulkoasu ja kaikki nykyinen toiminta ennallaan.
- Älä keksi tuotenimiä, hintoja tai tekstejä; käytä paikkamerkkejä, jotka voin täyttää itse.
- Kerro lopuksi, miten voin itse tarkistaa korjauksen.
- Kerro myös, miten korjauksen voi varmistaa näppäimistöllä ja ruudunlukijalla.

Sivustoni harborandpine.example on Shopify-kauppa (Online Store 2.0 -teema, Liquid-mallipohjat). Saavutettavuustesti löysi tämän ongelman, ja haluan korjata sen teemassani.

Ongelma: Painikkeilla on oltava tunnistettava teksti (WCAG 4.1.2).
Missä: 41 esiintymää, 9 sivulla, esimerkiksi /, /collections/all, /products/trail-daypack, /cart.

Yksi virheellinen elementti sellaisena kuin selain sen renderöi:
```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>
```

Miksi sillä on merkitystä: WCAG 4.1.2 edellyttää, että jokaisella säätimellä on nimi. Nimettömiä painikkeita ovat usein määrän säätimet, sulkemispainikkeet ja karusellin nuolet.

Mitä pitää muuttaa:
- Etsi painikkeet alla olevista esimerkeistä.
- Lisää näkyvä teksti, visuaalisesti piilotettu teksti tai aria-label, joka kertoo, mitä painike tekee (esimerkiksi aria-label="Close" tai aria-label="Increase quantity").

Ehdotettu muutos (Teemasi koodi (etsi siitä näytetty merkintäkoodi)):
```html
<button type="button" aria-label="[What this button does]">…</button>
```

Ohjeet vastaukseesi:
- Näytä tarkka muutos ennen ja jälkeen -muodossa ja kerro, mihin tiedostoon tai asetukseen se tehdään. Jos sinun täytyy ensin nähdä tiedostoni, pyydä minua liittämään se.
- Pidä ulkoasu ja kaikki nykyinen toiminta ennallaan.
- Älä keksi tuotenimiä, hintoja tai tekstejä; käytä paikkamerkkejä, jotka voin täyttää itse.
- Kerro lopuksi, miten voin itse tarkistaa korjauksen.
- Kerro myös, miten korjauksen voi varmistaa näppäimistöllä ja ruudunlukijalla.

Sivustoni harborandpine.example on Shopify-kauppa (Online Store 2.0 -teema, Liquid-mallipohjat). Saavutettavuustesti löysi tämän ongelman, ja haluan korjata sen teemassani.

Ongelma: Kuvilla on oltava vaihtoehtoinen teksti (WCAG 1.1.1).
Missä: 22 esiintymää, 7 sivulla, esimerkiksi /, /collections/all, /products/trail-daypack, /products/pine-wool-beanie.

Yksi virheellinen elementti sellaisena kuin selain sen renderöi:
```html
<img src="/img/hero-photo.jpg" loading="lazy">
```

Miksi sillä on merkitystä: WCAG 1.1.1 edellyttää merkityksellisille kuville tekstivastinetta. Ilman sitä ruudunlukijan käyttäjä ei tiedä, mitä tuotetta kuva esittää.

Mitä pitää muuttaa:
- Avaa Shopifyn hallinnassa Tuotteet > [tuote] > Media (Products > [product] > Media), napsauta kutakin kuvaa ja täytä kenttä ”Alt-teksti” (Alt text). Osioiden kuvia varten avaa Verkkokauppa > Teemat > Mukauta (Online Store > Themes > Customize) ja aseta kuvan alt-teksti osion asetuksissa.
- Kuvaile se, mikä on asiakkaalle olennaista: tuotteen nimi, väri ja kuvakulma (esimerkiksi ”Kangaskassi, oliivinvihreä, edestä”).
- Koristekuvilla pitäisi olla tyhjä alt-attribuutti (alt=""), jotta ruudunlukijat ohittavat ne.

Ehdotettu muutos (Tuotekuvat: Shopifyn hallinta › Tuotteet › Media › Alt-teksti (Products › Media › Alt text). Muut kuvat: teemasi koodi):
```html
<img src="/img/hero-photo.jpg" loading="lazy" alt="[Describe the image for a shopper]">
```

Ohjeet vastaukseesi:
- Näytä tarkka muutos ennen ja jälkeen -muodossa ja kerro, mihin tiedostoon tai asetukseen se tehdään. Jos sinun täytyy ensin nähdä tiedostoni, pyydä minua liittämään se.
- Pidä ulkoasu ja kaikki nykyinen toiminta ennallaan.
- Älä keksi tuotenimiä, hintoja tai tekstejä; käytä paikkamerkkejä, jotka voin täyttää itse.
- Kerro lopuksi, miten voin itse tarkistaa korjauksen.
- Kerro myös, miten korjauksen voi varmistaa näppäimistöllä ja ruudunlukijalla.

Sivustoni harborandpine.example on Shopify-kauppa (Online Store 2.0 -teema, Liquid-mallipohjat). Saavutettavuustesti löysi tämän ongelman, ja haluan korjata sen teemassani.

Ongelma: Lomake-elementeillä on oltava nimiöt (WCAG 4.1.2).
Missä: 7 esiintymää, 6 sivulla, esimerkiksi /products/trail-daypack, /cart, /products/pine-wool-beanie, /products/enamel-camp-mug.

Yksi virheellinen elementti sellaisena kuin selain sen renderöi:
```html
<input type="number" value="1" min="1">
```

Miksi sillä on merkitystä: WCAG 1.3.1, 3.3.2 ja 4.1.2 edellyttävät, että lomakekentillä on nimiöt. Uutiskirjeen tilaus- ja hakukentät ovat tavallisia ongelmakohtia.

Mitä pitää muuttaa:
- Anna jokaiselle kentälle <label for="field-id"> -elementti tai vähintään aria-label.
- Pelkkä paikkamerkkiteksti (placeholder) ei kelpaa nimiöksi.

Ehdotettu muutos (Teemasi koodi (etsi siitä näytetty merkintäkoodi)):
```html
<input type="number" value="1" min="1" aria-label="Quantity">
```

Ohjeet vastaukseesi:
- Näytä tarkka muutos ennen ja jälkeen -muodossa ja kerro, mihin tiedostoon tai asetukseen se tehdään. Jos sinun täytyy ensin nähdä tiedostoni, pyydä minua liittämään se.
- Pidä ulkoasu ja kaikki nykyinen toiminta ennallaan.
- Älä keksi tuotenimiä, hintoja tai tekstejä; käytä paikkamerkkejä, jotka voin täyttää itse.
- Kerro lopuksi, miten voin itse tarkistaa korjauksen.
- Kerro myös, miten korjauksen voi varmistaa näppäimistöllä ja ruudunlukijalla.

Sivustoni harborandpine.example on Shopify-kauppa (Online Store 2.0 -teema, Liquid-mallipohjat). Saavutettavuustesti löysi tämän ongelman, ja haluan korjata sen teemassani.

Ongelma: Select-elementillä on oltava saavutettava nimi (WCAG 4.1.2).
Missä: 1 esiintymä, 1 sivulla, esimerkiksi /collections/all.

Yksi virheellinen elementti sellaisena kuin selain sen renderöi:
```html
<select><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

Miksi sillä on merkitystä: WCAG 4.1.2 edellyttää, että valintavalikoilla on saavutettava nimi.

Mitä pitää muuttaa:
- Lisää valikkoon liitetty <label> tai aria-label, kuten aria-label="Sort by".

Ehdotettu muutos (Teemasi koodi (etsi siitä näytetty merkintäkoodi)):
```html
<select aria-label="[Field label]"><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

Ohjeet vastaukseesi:
- Näytä tarkka muutos ennen ja jälkeen -muodossa ja kerro, mihin tiedostoon tai asetukseen se tehdään. Jos sinun täytyy ensin nähdä tiedostoni, pyydä minua liittämään se.
- Pidä ulkoasu ja kaikki nykyinen toiminta ennallaan.
- Älä keksi tuotenimiä, hintoja tai tekstejä; käytä paikkamerkkejä, jotka voin täyttää itse.
- Kerro lopuksi, miten voin itse tarkistaa korjauksen.
- Kerro myös, miten korjauksen voi varmistaa näppäimistöllä ja ruudunlukijalla.

Sivustoni harborandpine.example on Shopify-kauppa (Online Store 2.0 -teema, Liquid-mallipohjat). Saavutettavuustesti löysi tämän ongelman, ja haluan korjata sen teemassani.

Ongelma: Linkeillä on oltava tunnistettava teksti (WCAG 2.4.4, 4.1.2).
Missä: 36 esiintymää, 9 sivulla, esimerkiksi /, /collections/all, /products/trail-daypack, /cart.

Yksi virheellinen elementti sellaisena kuin selain sen renderöi:
```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>
```

Miksi sillä on merkitystä: WCAG 2.4.4 ja 4.1.2 edellyttävät, että linkeillä on saavutettava nimi, joka kuvaa niiden tarkoitusta.

Mitä pitää muuttaa:
- Etsi linkit alla olevista esimerkeistä. Useimmat ovat kuvakkeita tai kuvia tagin <a> sisällä.
- Lisää linkin sisään visuaalisesti piilotettu teksti tai aria-label, kuten aria-label="Instagram" tai aria-label="Cart".
- Jos linkin sisällä on kuva, anna sen sijaan kuvalle kuvaava alt-teksti.

Ehdotettu muutos (Teemasi koodi (etsi siitä näytetty merkintäkoodi)):
```html
<a href="/cart" aria-label="Cart">…</a>
```

Ohjeet vastaukseesi:
- Näytä tarkka muutos ennen ja jälkeen -muodossa ja kerro, mihin tiedostoon tai asetukseen se tehdään. Jos sinun täytyy ensin nähdä tiedostoni, pyydä minua liittämään se.
- Pidä ulkoasu ja kaikki nykyinen toiminta ennallaan.
- Älä keksi tuotenimiä, hintoja tai tekstejä; käytä paikkamerkkejä, jotka voin täyttää itse.
- Kerro lopuksi, miten voin itse tarkistaa korjauksen.
- Kerro myös, miten korjauksen voi varmistaa näppäimistöllä ja ruudunlukijalla.

Sivustoni harborandpine.example on Shopify-kauppa (Online Store 2.0 -teema, Liquid-mallipohjat). Saavutettavuustesti löysi tämän ongelman, ja haluan korjata sen teemassani.

Ongelma: Elementtien on täytettävä värikontrastisuhteen vähimmäisraja-arvot (WCAG 1.4.3).
Missä: 22 esiintymää, 9 sivulla, esimerkiksi /, /collections/all, /products/trail-daypack, /cart.

Yksi virheellinen elementti sellaisena kuin selain sen renderöi:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

Miksi sillä on merkitystä: WCAG 1.4.3 edellyttää vähintään kontrastisuhdetta 4,5:1 tavalliselle tekstille ja 3:1 suurelle tekstille. Haaleat hinnat, merkit ja bannerit ovat vaikealukuisia heikkonäköisille ja kaikille kirkkaassa valossa.

Mitä pitää muuttaa:
- Avaa alla luetellut virheelliset elementit ja katso virheen yhteenvedosta edusta- ja taustaväri.
- Tummenna kohdassa Verkkokauppa > Teemat > Mukauta > Teeman asetukset > Värit (Online Store > Themes > Customize > Theme settings > Colors) tekstin väriä tai vaalenna taustaa kyseisessä värimallissa, kunnes suhde on vähintään 4,5:1.
- Kiinnitä erityistä huomiota alennusmerkkeihin, paikkamerkkiteksteihin (placeholder), alatunnisteen linkkeihin ja kuvien päällä oleviin painikkeisiin.

Ehdotettu muutos (Teeman asetukset › Värit (Theme settings › Colors) tai teemasi CSS-tiedosto):
```css
.announce {
  background-color: #b95941; /* was #e76f51: 3.09:1, now 4.59:1 */
}
```

Ohjeet vastaukseesi:
- Näytä tarkka muutos ennen ja jälkeen -muodossa ja kerro, mihin tiedostoon tai asetukseen se tehdään. Jos sinun täytyy ensin nähdä tiedostoni, pyydä minua liittämään se.
- Pidä ulkoasu ja kaikki nykyinen toiminta ennallaan.
- Älä keksi tuotenimiä, hintoja tai tekstejä; käytä paikkamerkkejä, jotka voin täyttää itse.
- Kerro lopuksi, miten voin itse tarkistaa korjauksen.
- Kerro myös, miten korjauksen voi varmistaa näppäimistöllä ja ruudunlukijalla.

Sivustoni harborandpine.example on Shopify-kauppa (Online Store 2.0 -teema, Liquid-mallipohjat). Saavutettavuustesti löysi tämän ongelman, ja haluan korjata sen teemassani.

Ongelma: Kaiken sivun sisällön pitäisi olla maamerkkien sisällä.
Missä: 18 esiintymää, 9 sivulla, esimerkiksi /, /collections/all, /products/trail-daypack, /cart.

Yksi virheellinen elementti sellaisena kuin selain sen renderöi:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

Miksi sillä on merkitystä: Maamerkkien avulla ruudunlukijan käyttäjät voivat hypätä sivun osasta toiseen. Tämä on hyvä käytäntö, joka tukee WCAG-kriteerejä 1.3.1 ja 2.4.1.

Mitä pitää muuttaa:
- Sijoita irrallinen sisältö (ilmoituspalkit, ponnahdusikkunat, chat-widgetit) sopivan maamerkin sisään tai elementin <main> sisään.

Ohjeet vastaukseesi:
- Näytä tarkka muutos ennen ja jälkeen -muodossa ja kerro, mihin tiedostoon tai asetukseen se tehdään. Jos sinun täytyy ensin nähdä tiedostoni, pyydä minua liittämään se.
- Pidä ulkoasu ja kaikki nykyinen toiminta ennallaan.
- Älä keksi tuotenimiä, hintoja tai tekstejä; käytä paikkamerkkejä, jotka voin täyttää itse.
- Kerro lopuksi, miten voin itse tarkistaa korjauksen.
- Kerro myös, miten korjauksen voi varmistaa näppäimistöllä ja ruudunlukijalla.

Sivustoni harborandpine.example on Shopify-kauppa (Online Store 2.0 -teema, Liquid-mallipohjat). Saavutettavuustesti löysi tämän ongelman, ja haluan korjata sen teemassani.

Ongelma: Otsikkotasojen pitäisi kasvaa vain yhdellä kerrallaan.
Missä: 7 esiintymää, 7 sivulla, esimerkiksi /collections/all, /products/trail-daypack, /pages/about, /products/pine-wool-beanie.

Yksi virheellinen elementti sellaisena kuin selain sen renderöi:
```html
<h3>Trail Daypack 22L</h3>
```

Miksi sillä on merkitystä: Ruudunlukijan käyttäjät liikkuvat sivulla otsikoiden avulla. Tämä on hyvä käytäntö, joka tukee WCAG-kriteeriä 1.3.1.

Mitä pitää muuttaa:
- Korjaa kyseisten osioiden otsikkotasot niin, että ne etenevät järjestyksessä hyppäämättä tasojen yli.
- Muuta vain tagia, älä ulkoasua (käytä koon säätämiseen CSS-luokkia).

Ehdotettu muutos (Teemasi koodi (etsi siitä näytetty merkintäkoodi)):
```html
<h2 class="h3">Trail Daypack 22L</h2>
```

Ohjeet vastaukseesi:
- Näytä tarkka muutos ennen ja jälkeen -muodossa ja kerro, mihin tiedostoon tai asetukseen se tehdään. Jos sinun täytyy ensin nähdä tiedostoni, pyydä minua liittämään se.
- Pidä ulkoasu ja kaikki nykyinen toiminta ennallaan.
- Älä keksi tuotenimiä, hintoja tai tekstejä; käytä paikkamerkkejä, jotka voin täyttää itse.
- Kerro lopuksi, miten voin itse tarkistaa korjauksen.
- Kerro myös, miten korjauksen voi varmistaa näppäimistöllä ja ruudunlukijalla.