Tilgængelighed med Shopify

Shopifys temaer og apps afgør tilgængeligheden. Checkout er i vid udstrækning fastlagt af Shopify.

Hyppige findesteder

Temafarver med for lav kontrast, produktbilleder uden alt-tekst, anmeldelses- og pop op-apps uden tastaturbetjening, megamenuer der kun åbner ved hover, karruseller uden pause. Shopify-kernen er sjældent problemet — det er temaet, apps og indhold oprettet i rich text-editoren.

Tjek og vælg temaet

Temaet afgør kontrast, synligt fokus, overskriftsstruktur og tastaturbetjening af menu og filtre. Kriterier før valget: gå gennem forsiden, en kollektion og en produktside med Tab — er fokus altid synligt? Åbner menuen uden mus? Er kontrasten på tekst og knapper mindst 4,5:1? Online Store 2.0-standardtemaerne (Dawn og de afledte) er et solidt udgangspunkt; ved købte temaer hjælper tastaturtesten på demoen og at bede udbyderen om en tilgængelighedserklæring.

Produktbilleder, varianter og rich text

Giv hvert produktbillede i admin en alt-tekst, der beskriver indholdet — ikke filnavnet. Det samme gælder variantbilleder. Tekst, der er brændt ind som grafik i et badge eller banner ("Udsalg", "Kun i dag"), er usynlig for skærmlæsere; brug rigtig tekst. Brug overskriftsniveauerne rent i rich text-editoren til produktbeskrivelsen (gør ikke bare teksten stor) og lister som rigtige lister.

Apps og indlejrede widgets

Anmeldelses-, pop op-, mersalgs- og cookiebanner-apps indsætter ofte deres egne widgets, der fanger tastaturfokus, ikke har labels eller viser overlays uden mulighed for at lukke. Test hver app enkeltvis med tastaturet; slider- og nedtællings-apps skal have en pause og må ikke få noget til at blinke. Et tilgængeligheds-overlay som app løser ikke de strukturelle problemer og kritiseres af handicaporganisationer. I tvivlstilfælde: fjern appen.

Checkout: hvad Shopify bestemmer, og hvad ikke

Shopifys standard-checkout vedligeholdes af Shopify og er i vid udstrækning bygget tilgængeligt — der har du få håndtag. Det du påvirker: checkout-udvidelser og egne felter (gavehilsen, alderskontrol) kan forstyrre tastatur- eller skærmlæserbrug, og vejen frem til checkout — kurv, rabatkodefelt, forsendelsesvalg — ligger i temaet. Test også de trin.

Test og ofte stillede spørgsmål

Hurtig test: betjen forsiden, en kollektion og en produktside kun med tastaturet, zoom til 200 % i browseren, kør en udvidelse som WAVE eller axe DevTools. a11yglass' gratis scanning tjekker desuden det leverede HTML for kontrast, alt-tekster, labels, sprog og struktur. Har min Shopify-butik brug for en tilgængelighedserklæring? Som regel ja — en butik, hvor forbrugere køber, er elektronisk handel i BFSG's forstand; se siden om tilgængelighedserklæringen. Er Shopifys checkout allerede tilgængelig? I vid udstrækning Shopifys ansvar, men udvidelser kan bryde den. Hvilket tema er tilgængeligt? Der findes ikke et mærke — det afgørende er implementeringen i det konkrete tilfælde.

Sådan hjælper a11yglass

Den gratis scanning tjekker den leverede HTML og CSS for automatisk genkendelige WCAG-overtrædelser og nævner pr. fund succeskriteriet og et konkret tiltag. Den finder cirka 20–35 % af problemerne og erstatter ikke en fuldstændig gennemgang.

Læs videre

Generel information efter bedste overbevisning, ikke juridisk rådgivning. Inddrag et advokatfirma med speciale i it-ret til den konkrete sag.