Tillgänglighet i Shopify: vad plattformen sköter och vad som är ditt ansvar
Vad Shopify själv anger om tillgänglighet, var felen i Shopify-butiker brukar sitta (tema, produktbilder, varianter, tillägg) och hur du kontrollerar och rättar dem.
Det här är teknisk vägledning och inte juridisk rådgivning. För tolkningsfrågor om tillgänglighetslagen, vänd dig till Post- och telestyrelsen (PTS).
Den som driver en butik på Shopify får ofta frågan "är vår butik tillgänglig?" och svarar "Shopify sköter det". Det stämmer till en del. Resten beror på temat du valt, apparna du installerat och hur du själv lägger in innehåll. Här går vi igenom var gränsen går och vad du kan göra åt det som ligger på din sida.
Vad Shopify själv säger
På sin tillgänglighetssida skriver Shopify att de använder WCAG 2.2 som vägledning och löpande testar innehåll och funktioner mot nivå AA. Shopify publicerar också tillgänglighetsrapporter (VPAT) för bland annat kassan och för temat Dawn. Samma sida konstaterar att butiksägare har full kontroll över sin temakod.
Det sista är det viktiga. En rapport om kassan eller om ett enskilt tema säger något om just den delen i just den versionen. Den säger inte att din butik, med ditt tema, dina ändringar och dina tillägg, uppfyller WCAG. Och en plattforms egen bedömning ersätter inte att någon kontrollerar den färdiga butiken.
För teman i Shopifys temabutik finns dessutom ett krav som går att läsa i klartext: genomsnittet av Lighthouses tillgänglighetspoäng ska vara minst 90 över startsida, produktsida, kollektionssida och varukorg. Utöver det granskas bland annat tangentbordsanvändning från startsida till kassa, etiketter på formulärfält, kontrast, synlig fokusmarkering, fokusordning och storlek på tryckytor (minst 44 gånger 44 CSS-pixlar för viktiga kontroller). Observera att kraven gäller temats standardinställningar. Så fort du ändrar färger, lägger till egna sektioner eller byter ut delar av koden är det ditt ansvar.
Lighthouse är dessutom ett automatiskt verktyg. En poäng på 90 betyder att de fel som kan hittas automatiskt är få, inte att butiken fungerar för en skärmläsaranvändare. Se vår guide om att testa webbutiken mot WCAG själv för vad verktygen missar.
Var felen brukar sitta
Temat och dina anpassningar
Ett tema som klarar kraven i standardutförande tappar ofta tillgänglighet vid anpassning. Typiska exempel:
- Egna färger i knappar och länkar som ger för låg kontrast (WCAG 1.4.3). Ljus accentfärg med vit text är det vanligaste.
- Fokusmarkeringen tas bort i den egna stilmallen (WCAG 2.4.7).
- Rubriknivåer väljs efter utseende och inte efter struktur, så att en sida hoppar från h1 till h4.
- Bildbanners med text i bilden och utan alternativtext (WCAG 1.1.1, 1.4.5).
Produktbilder
Alternativtexten ska beskriva det en köpare behöver veta, inte upprepa produktnamnet. "Svart linnepåse med långa handtag, sedd framifrån" är användbar. "linnepase_final2.jpg" och "Linnepåse" är det inte. Rent dekorativa bilder ska ha tom alt-text (alt="") så att skärmläsaren hoppar över dem. Granska det du själv har laddat upp, för det är ingen som gör det åt dig.
Varianter
Val av storlek och färg är en vanlig fallgrop. Färgprovet som bara är en färgad ruta behöver ett namn som går att läsa upp. Aktuell vald variant ska framgå utan att man ser färgen (WCAG 1.4.1), och när priset eller lagerstatus ändras efter ett val bör ändringen annonseras för skärmläsare (WCAG 4.1.3). Kontrollera även att varianterna går att välja med tangentbordet.
Varukorg och kassatillägg
Shopifys egen kassa har en särskild rapport. Det ligger nära till hands att anta att allt i köpresan därmed är gjort, men många butiker lägger till sådant som skjuter in sig i flödet: en varukorgsdrawer från ett tillägg, en betalknapp från en tredje part, uppsäljningsrutor, cookiebanderoller och chattfönster. Det är oftast här den allvarligaste bristen finns, eftersom ett fönster som fångar tangentbordsfokus (WCAG 2.1.2) eller en knapp utan namn (WCAG 4.1.2) stoppar köpet helt. Läs även vår genomgång av de vanligaste felen i kassan.
Tillägg (appar)
Varje tillägg som lägger ut något i butikens kod, till exempel popup, recensioner, filter, produktfrågor eller kampanjbanners, är en egen källa till fel. Räkna med att du själv behöver kontrollera dem. Shopifys temakrav gäller temat, och de dokument vi hänvisar till här anger inga motsvarande krav på tillägg.
Så kontrollerar du
- Gå igenom köpresan med bara tangentbordet: startsida, kollektion, produkt, varukorg, kassa, bekräftelse. Tab, Skift+Tab, Enter och Esc räcker.
- Kör ett automatiskt test på de fem sidtyperna. Testa med och utan dina tillägg påslagna om du misstänker att något av dem orsakar felet.
- Lyssna på produktsidan med en skärmläsare (NVDA på Windows eller VoiceOver på Mac och iPhone). Fem minuter räcker för att höra om bilder, varianter och knappar låter begripliga.
- Skriv ned varje fel med sidan, elementet och WCAG-kriteriet. Då går det att åtgärda och att följa upp.
Så rättar du
- Dina egna ändringar och ditt innehåll: rätta direkt. Färger, alternativtexter, rubriknivåer och fokusmarkering är sådant du själv styr.
- Temat: kontrollera om det finns en nyare version eller en inställning som löser felet. Annars kan en utvecklare ändra temats kod, men tänk på att ändringar kan försvinna vid en temauppdatering om de inte hanteras med versionshantering.
- Ett tillägg du inte äger: testa utan tillägget så att du vet att det är orsaken. Kontakta leverantören med sidan, elementet och kriteriet. Finns ingen rättning, överväg ett annat tillägg som gör samma sak.
- Det du inte kan rätta: skriv in det i din tillgänglighetsinformation tillsammans med hur kunden når dig om något inte fungerar. Tillgänglighetslagen ställer krav på information om detta, se tillgänglighetslagen för e-handel.
Rangordna efter effekt: börja med det som hindrar köp (kassans tillägg, varianter, knappar utan namn) och ta därefter kontrast och alternativtexter.
AccessAudit
AccessAudits gratis test på butik.nightwave.se/tillganglighet läser källkoden på upp till fem sidor i din butik och rapporterar fel som syns där, till exempel fält utan etikett, knappar utan namn och saknade alternativtexter. Testet kontrollerar inte kontrast, synlig fokus eller tangentbordsnavigering. Vill du ha löpande kontroll finns ett abonnemang för 1 990 kr per månad exklusive moms för upp till 30 sidor. Det är teknisk granskning mot WCAG, inte juridisk rådgivning.