EAA för Shopify-handlare: 7 fixar att göra denna vecka
Sju konkreta WCAG-fixar för Shopify Dawn, Sense och custom themes — med Liquid-snippets ni kan klistra in direkt.
Av Sveriges cirka 12 000 e-handlare över mikrotröskeln driver ungefär 30 % på Shopify. EAA gäller alla sedan 28 juni 2025. Den goda nyheten: Shopify's Liquid-syntax är förlåtande och de flesta WCAG-fixarna är 5–15 minuters arbete per fix. Här är de sju vanligaste vi ser i scans av nordiska Shopify-sajter — med kod ni kan klistra in direkt.
Fix 1: Höj checkout-knappens kontrast
Dawn-temat levereras med en accent-färg som ofta hamnar under 4.5:1 mot varukorgens bakgrund. Knappen är osynlig för en del användare. Fixet:
<button
type="submit"
name="checkout"
class="cart__checkout-button"
style="background: #0f172a; color: #ffffff; min-height: 44px;"
aria-label="{{ 'cart.general.checkout' | t }}"
>
{{ 'cart.general.checkout' | t }}
</button>Fix 2: Alt-text fallback på produktbilder
Shopify Admin tvingar inte alt-text vid upload. På en sajt med 500 produkter saknar typiskt 70–80 % av bilderna alt. Fallback från produkttitel:
{%- assign alt_fallback = product.title -%}
<img
src="{{ image | image_url: width: 800 }}"
alt="{{ image.alt | default: alt_fallback | escape }}"
loading="lazy"
decoding="async"
/>Fix 3: Variant-pickers i fieldset
Färg- och storleksväljare i Shopify renderar som radio-knappar utan gruppering. Skärmläsare läser dem som lösa val. Wrap dem i fieldset + legend:
{%- for option in product.options_with_values -%}
<fieldset class="product-form__input">
<legend class="form__label">{{ option.name }}</legend>
{%- for value in option.values -%}
<input type="radio"
id="{{ option.name }}-{{ value | handle }}"
name="options[{{ option.name | escape }}]" />
<label for="{{ option.name }}-{{ value | handle }}">
{{ value }}
</label>
{%- endfor -%}
</fieldset>
{%- endfor -%}Fix 4: Aria-live på cart-notification
"Tillagd i varukorgen"-toast visas visuellt men hörs inte av skärmläsare. Lägg på role="status" och aria-live:
<div
class="cart-notification"
role="status"
aria-live="polite"
aria-atomic="true"
>
{{ 'products.product.added' | t }}
</div>Fix 5: Tillåt zoom i viewport
Flera Shopify-themes ärver en viewport-tagg som blockerar zoom. Ta bort user-scalable=no:
<!-- Ta bort om finns -->
<meta name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1">
<!-- Använd istället -->
<meta name="viewport"
content="width=device-width, initial-scale=1">Fix 6: Skip-link i theme.liquid
Tangentbordsanvändare måste tabba förbi headern på varje sida. En skip-link gör navigationen snabbare:
<!-- Direkt efter <body>-taggen -->
<a href="#main-content" class="skip-link">
Hoppa till innehåll
</a>
<!-- I tema/assets/base.css -->
.skip-link {
position: absolute;
left: -9999px;
}
.skip-link:focus {
left: 1rem;
top: 1rem;
z-index: 100;
padding: 0.5rem 1rem;
background: #000;
color: #fff;
}Fix 7: Rätt lang-attribut per Shopify-marknad
Många US-byggda Shopify-themes har lang="en" hårdkodad. För svenska butiker ska Shopify's request.locale.iso_code användas:
<html lang="{{ request.locale.iso_code }}">Sammanfattning
Dessa sju fixar tar er typiskt från en riskscore på 60–70 ner till 25–35 på Granska's skala — utan att rivas i fundamentala arkitekturer eller byta theme. Allt som behövs är access till tema-filer (Online Store → Themes → Edit code).
Vad ni inte fixar med dessa: app-specifika brister (Klaviyo-popups, Yotpo-widgets), checkout-app-utbyggnader och manuell skärmläsar-validering. Det är där Granska's stack-specifika scan av just er sajt visar nästa steg.
Skanna er Shopify-sajt på 60 sekunder
Vi detekterar er theme, listar prioriterade issues och genererar Liquid-snippets med rätt section-kontext.
Skanna gratis ▸