Tillgänglighet med Shopify

Shopifys teman och appar avgör tillgängligheten. Kassan är till stor del given av Shopify.

Vanliga fyndställen

Temafärger med för låg kontrast, produktbilder utan alt-text, recensions- och popup-appar utan tangentbordsstyrning, megamenyer som bara öppnas vid hovring, karuseller utan paus. Shopify-kärnan är sällan problemet — det är temat, apparna och innehåll som skapats i rich text-redigeraren.

Kontrollera och välj temat

Temat avgör kontrast, synligt fokus, rubrikstruktur och tangentbordsstyrning av meny och filter. Kriterier före valet: gå igenom startsidan, en kollektion och en produktsida med Tab — är fokus alltid synligt? Öppnas menyn utan mus? Är kontrasten på text och knappar minst 4,5:1? Online Store 2.0-standardtemana (Dawn och de härledda) är en solid utgångspunkt; för köpta teman hjälper tangentbordstestet på demon och att be leverantören om en tillgänglighetsredogörelse.

Produktbilder, varianter och rich text

Ge varje produktbild i admin en alt-text som beskriver innehållet — inte filnamnet. Samma sak gäller variantbilder. Text som är inbränd som grafik i en etikett eller banner ("Rea", "Endast idag") är osynlig för skärmläsare; använd riktig text. Använd rubriknivåerna rent i rich text-redigeraren för produktbeskrivningen (gör inte bara texten stor) och listor som riktiga listor.

Appar och inbäddade widgetar

Recensions-, popup-, merförsäljnings- och cookiebanner-appar injicerar ofta egna widgetar som fångar tangentbordsfokus, saknar etiketter eller visar överlägg utan möjlighet att stänga. Testa varje app för sig med tangentbordet; slider- och nedräkningsappar behöver en paus och får inte få något att blinka. Ett tillgänglighetsöverlägg som app löser inte de strukturella problemen och kritiseras av intresseorganisationer för berörda. Vid tveksamhet: ta bort appen.

Kassa: vad Shopify bestämmer och vad inte

Shopifys standardkassa underhålls av Shopify och är till stor del byggd tillgängligt — där har du få reglage. Det du påverkar: kasseutökningar och egna fält (gåvomeddelande, ålderskontroll) kan störa tangentbords- eller skärmläsaranvändning, och vägen fram till kassan — varukorg, rabattkodfält, fraktval — ligger i temat. Testa även de stegen.

Testa och vanliga frågor

Snabbtest: använd startsidan, en kollektion och en produktsida bara med tangentbordet, zooma till 200 % i webbläsaren, kör en tillägg som WAVE eller axe DevTools. a11yglass gratisskanning kontrollerar dessutom den levererade HTML-koden vad gäller kontrast, alt-texter, etiketter, språk och struktur. Behöver min Shopify-butik en tillgänglighetsredogörelse? Som regel ja — en butik som konsumenter köper genom är elektronisk handel i BFSG:s mening; se sidan om tillgänglighetsredogörelsen. Är Shopifys kassa redan tillgänglig? Till stor del Shopifys ansvar, men tillägg kan bryta den. Vilket tema är tillgängligt? Det finns ingen märkning — det avgörande är genomförandet i det konkreta fallet.

Så hjälper a11yglass

Den kostnadsfria skanningen kontrollerar den levererade HTML- och CSS-koden efter automatiskt igenkännbara WCAG-överträdelser och anger per iakttagelse framgångskriteriet och en konkret åtgärd. Den hittar ungefär 20–35 % av problemen och ersätter ingen fullständig granskning.

Läs vidare

Allmän information efter bästa förmåga, ingen juridisk rådgivning. Anlita en advokatbyrå specialiserad på IT-rätt för det enskilda fallet.