Tältä näyttää aito vaatimustenmukaisuusdokumentaatio

Tulos kohteelle https://seviranta.com/demo-winkel.html

Testattu: EN 301 549 (WCAG 2.1 AA) + WCAG 2.2 AA välineellä axe-core 4.11.4. Automatisoitu testaus havaitsee luotettavasti noin 57 % ongelmista; arviointikohdat vaativat inhimillisen arvion. Näin näet täsmälleen, mikä on mustaa valkoisella varmaa ja missä seuraava hyöty on.

Rikkomukset, koneellisesti varmat

• Kriittinen1× tällä sivulla

  Mitä se tarkoittaa · A button without a name is announced as 'button', unusable for anyone who can't see it. Often affects the cart and search buttons.

  Näin korjaat sen · Give the button text or an aria-label that describes the action ('Add to cart', 'Search').

  Sivullasi

  Väärin · <button class="icon-btn"><span aria-hidden="true">🔍</span></button>

  Kunnossa · <button aria-label="Add to cart"><svg>…</svg></button>

  WCAG wcag2a, wcag412 · Tekninen nimi: Buttons must have discernible text · tekninen lähde kehittäjällesi

• Vakava7× tällä sivulla

  Mitä se tarkoittaa · Text with insufficient contrast is unreadable for people with low vision and in bright sunlight on a phone. This is by far the most common EAA finding in online stores.

  Näin korjaat sen · Darken or lighten the text or background color until the ratio is at least 4.5:1 (3:1 for large text). In Shopify: theme settings → colors; adjust button and text colors once and it applies theme-wide.

  Sivullasi

  Esimerkkitekstimitattu 1,87:1, vaadittu 4,5:1#b8b2a7 päällä #f4f1ec

  Esimerkkitekstimitattu 1,52:1, vaadittu 4,5:1#ffffff päällä #a8dadc

  Esimerkkitekstimitattu 1,73:1, vaadittu 4,5:1#c9c4bb päällä #ffffff

  WCAG wcag2aa, wcag143 · Tekninen nimi: Elements must meet minimum color contrast ratio thresholds · tekninen lähde kehittäjällesi

• Kriittinen2× tällä sivulla

  Mitä se tarkoittaa · Images without alt text are invisible to screen readers. For product photos that means a blind customer has no idea what the product is.

  Näin korjaat sen · Give every informative image a short alt text describing what it shows. In Shopify: product → media → 'edit alt text'. Purely decorative images get an empty alt (alt="").

  Sivullasi

  Väärin · <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 140'%3E%3Crect fill='%23dfe7e2' width='220' height='140'/%3E%3Ccircle cx='110' cy='70' r='38' fill='%238aa39b'/%3E%3C/svg%3E" width="220" height="140">

  Kunnossa · <img src="hond.jpg" alt="Brown Labrador puppy wearing a collar">

  …ja 1 vastaava elementti tällä sivulla.

  WCAG wcag2a, wcag111 · Tekninen nimi: Images must have alternative text · tekninen lähde kehittäjällesi

• Kriittinen1× tällä sivulla

  Mitä se tarkoittaa · Input fields without a label cannot be operated with a screen reader and are difficult for anyone with a disability. Affects search, login and checkout fields.

  Näin korjaat sen · Associate a visible <label> with every input field (for/id), or use an aria-label when there is no room for visible text.

  Sivullasi

  Väärin · <input type="email" name="email">

  Kunnossa · <label for="email">Email address</label><input id="email" type="email">

  WCAG wcag2a, wcag412 · Tekninen nimi: Form elements must have labels · tekninen lähde kehittäjällesi

• Vakava1× tällä sivulla

  Mitä se tarkoittaa · A link without readable text (e.g. an icon only) is announced by a screen reader as 'link' with no destination, the visitor has no idea where it leads.

  Näin korjaat sen · Give the link visible text, or an aria-label / hidden text that describes the destination (e.g. 'View cart' instead of a bare cart icon).

  Sivullasi

  Väärin · <a href="#cart"><span aria-hidden="true">🛒</span></a>

  Kunnossa · <a href="/winkelwagen" aria-label="View cart"><svg>…</svg></a>

  WCAG wcag2a, wcag244, wcag412 · Tekninen nimi: Links must have discernible text · tekninen lähde kehittäjällesi

Vaatii manuaalisen tarkistuksen

• Vakava1× tällä sivulla

  Mitä se tarkoittaa · Text with insufficient contrast is unreadable for people with low vision and in bright sunlight on a phone. This is by far the most common EAA finding in online stores.

  Näin korjaat sen · Darken or lighten the text or background color until the ratio is at least 4.5:1 (3:1 for large text). In Shopify: theme settings → colors; adjust button and text colors once and it applies theme-wide.

  Sivullasi

  Väärin · <h2>Get 10% off your first order</h2>

  WCAG wcag2aa, wcag143 · Tekninen nimi: Elements must meet minimum color contrast ratio thresholds · tekninen lähde kehittäjällesi