SevirantaGør din WooCommerce-webshop tilgængelig: en praktisk guide
9. juni 2026
Kort svar. WooCommerce følger i sig selv WordPress' tilgængelighedsretningslinjer nogenlunde, men din webshop arver først og fremmest tilgængeligheden fra dit tema, dine plugins og dit indhold — og det er som regel dér, det går galt. Gennemgå de seks punkter nedenfor (kontrast, alt-tekster, overskrifter, plugins & page-buildere, tastatur, sprog), og vær ekstra opmærksom på din blok-checkout og dine produktfiltre; så har du taget hånd om langt størstedelen.
Hvorfor er WooCommerce alene ikke nok?
WooCommerce er et plugin oven på WordPress. Om din shop overholder WCAG, afhænger af, hvordan dit tema er bygget, hvilke farver du valgte, hvilke plugins og hvilken page-builder du bruger, og hvordan du udfyldte dine produkter. To shops på samme WooCommerce-version kan altså score vidt forskelligt. Den gode nyhed: fordi meget går igen via dit tema og dine templates, dækker én rettelse ofte hundredvis af sider.
1. Tjek din farvekontrast
Den mest almindelige fejl. Med et blok-tema (Full Site Editing) går du til Udseende → Editor → Stilarter → Farver; med et klassisk tema til Udseende → Tilpas → Farver. Sørg for, at tekst og baggrund har mindst 4,5:1 i kontrast (3:1 for stor tekst). Vær særligt opmærksom på teksten på din Læg i kurv-knap, pris- og tilbudslabels og links. Indstil det rigtigt én gang, og det gælder i hele butikken. Se farvekontrast: WCAG-kravet, og hvordan du måler det.
2. Giv dine produktbilleder alt-tekster
Åbn et produkt under Produkter, klik i Produktbillede (og
Produktgalleri) på billedet → udfyld feltet Alternativ tekst i
mediebiblioteket. Beskriv kort og faktuelt, hvad der er på billedet
(fx "Sort herresko i ruskind med snørebånd"), ikke marketingsprog. Begynd med dine
bedst sælgende produkter og dine forside-bannere. Dekorative billeder får en tom
alt (alt=""). Mere om det i
skriv alt-tekster, der virker.
3. Tjek din overskriftsstruktur
Brug overskrifter i logisk rækkefølge (H1 → H2 → H3) og ikke kun til layoutet. I blok-editoren (Gutenberg) ser du niveauet for hver overskriftsblok; spring ikke niveauer over. Pas på med page-buildere som Elementor eller Divi: de lader dig gøre enhver tekst stor, uden at den bliver en rigtig overskrift — vælg dér bevidst det rigtige overskriftsniveau.
4. Hold øje med dine plugins og din page-builder
Det er ofte den største kilde til problemer. Plugins til anmeldelser, chat, pop-ups, sliders og filtre — og tunge page-buildere — injicerer deres egen kode i dit tema, og den indeholder regelmæssigt knapper uden navn, forkert ARIA eller elementer, der ikke kan betjenes med tastaturet. Installér derfor ikke blindt ethvert plugin, og test altid din side med det hele aktivt. Viser et plugin sig at være utilgængeligt, så skift til et alternativ, der faktisk respekterer WCAG-standarderne. Vælg, hvor det er muligt, de nye WooCommerce-blokke til indkøbskurv og checkout (se punkt 6).
5. Test med tastaturet
Prøv at bruge din side helt uden mus: kun med Tab-tasten og Enter. Kan du nå alt —
menu, produktfiltre, variantvalg, indkøbskurv, betaling — og kan du hele tiden se,
hvor fokus er? Vær ved WooCommerce særligt opmærksom på variant-dropdowns,
antal-stepperen (+/−) og filter-widgets i din sidebar; det er de steder, hvor
tastaturet oftest går i stå.
6. Tjek din sprogindstilling og din checkout
Sørg for, at dit tema sætter det rigtige sprogattribut, så en skærmlæser vælger den
rigtige udtale. I et klassisk tema står linjen
<html <?php language_attributes(); ?>> i header.php — den skal indeholde
sprogattributtet. Bruger du WPML eller Polylang til flere sprog, så tjek, at hver
sprogversion får det rigtige lang-attribut. Skift helst til WooCommerce'
blok-baserede Cart- og Checkout-blokke: de er mere tilgængelige end den gamle
shortcode-checkout og vedligeholdes aktivt med fokus på tilgængelighed.
Almindelige WooCommerce-fejl og deres løsning
| WooCommerce-element | Almindelig fejl | Løsningen |
|---|---|---|
| "Læg i kurv"-knap | for lys skrift / lav kontrast | kontrast i temastilarterne op på mindst 4,5:1 |
| Produktbilleder | filnavn som beskrivelse (IMG_2043.jpg) | funktionel alt-tekst i mediebiblioteket |
Antal-stepper (+/−) | knapper uden label, kan ikke betjenes med tastaturet | tilføj label/aria-label, eller brug en tilgængelig variant |
| Produktfilter-widget | filtre kan kun bruges med musen | tilgængeligt filter-plugin eller WooCommerce-filterblokkene |
| Tilgængeligheds-plugin | at installere en overlay-widget | undgå den — den reparerer ikke din kode og beskytter ikke mod krav |
Hjælper et tilgængeligheds-plugin fra WordPress-pluginkataloget?
Nej. Søger du på "accessibility", finder du dusinvis af plugins, der lover at gøre din shop compliant med ét klik via en widget. Lad dig ikke narre: de reparerer ikke dit tema og dine templates, og tilsynsmyndigheder kontrollerer din shops rå kildekode. At løse det strukturelt i dit tema og indhold er den eneste vej, der holder — og det giver dig oven i købet bedre SEO og hurtigere indlæsningstid. Læs mere i hvorfor en overlay-widget ikke beskytter dig.
Overholder min WooCommerce-shop dermed loven?
Disse seks punkter dækker størstedelen af det, en automatiseret test kan konstatere, men "at overholde" rækker videre: det afhænger af dit samlede tema, dine plugins og dit indhold tilsammen. Om European Accessibility Act gælder for dig, kan du gennemgå i vores tjekliste. Arbejder du også med Shopify? Så hjælper vores Shopify-guide dig videre.
Hvordan finder jeg ud af, hvor min WooCommerce-shop står nu?
Den hurtigste vej: scan én side gratis. Du ser for hvert fund, hvad der er galt, og hvordan du løser det — og fordi meget går via dit tema og dine templates, løser du det ofte på én gang for hele din butik. På under 60 sekunder, uden konto.