Många e-handelsägare tror att de löser tillgänglighetsfrågor genom att installera ett enkelt plugin. Det fungerar sällan på sikt. Med nya lagkrav och en växande medvetenhet om digital inkludering, blir WooCommerce accessibility inte längre ett val, utan en nödvändighet. I Sverige och EU hårdnar reglerna kring elektronisk kommunikation, särskilt med tanke på EAA (European Accessibility Act) som träder i kraft 2026. Att ignorera dessa krav innebär inte bara risk för diskrimineringsanspråk, utan också att du exkluderar en stor del av din potentiella kundbas.
Denna guide fokuserar på hur du bygger in tillgänglighet direkt i koden och arkitekturen för din butik. Vi tittar bort från ytliga lösningar och går djupt in i screen reader optimization, ARIA-etiketter och tangentbordsnavigation. Genom att följa dessa fem steg säkerställer du en bättre användarupplevelse för alla besökare, oavsett hur de använder din webbplats.
Förstå grunderna för teknisk tillgänglighet
Innan du börjar ändra koden måste du förstå vad som faktiskt krävs enligt WCAG 2.2 (Web Content Accessibility Guidelines). Det handlar inte om att göra sidan "snällare", utan om att göra den begriplig för assistiv teknik. När en användare använder en screen reader, läses texten upp rakt av. Om din butik saknar korrekta etiketter, blir köpet ett kaos av ljud och meningslöst brus.
ARIA-etiketter och dynamiskt innehåll
WooCommerce är en dynamisk miljö. Varje gång du uppdaterar varukorgen eller lägger till en produkt i listan, ändras innehållet på sidan. För att en screen reader ska förstå detta måste du använda ARIA-attributes. En vanlig felaktig kodstruktur ser ut så här:
<div id="cart-items">
<!-- Inget sätt för screen reader att veta vad som händer -->
</div>
Det korrekta sättet är att informera assistiv teknik om att innehållet har ändrats. Detta görs ofta med aria-live och aria-busy. I din tema-kod eller plugin-filer kan du lägga till:
// Exempel på kod för att hantera dynamiska uppdateringar i WC
document.getElementById('cart-items').setAttribute('aria-live', 'polite');
document.getElementById('cart-items').setAttribute('aria-busy', 'false');
Genom att använda dessa attribut säkerställer du att användaren får höra "Korgen har uppdaterats" istället för tystnad. Detta är en grundläggande del av WCAG 2.1 och krävs för fullständig tillgänglighet.
Tangentbordsnavigation
En annan kritisk aspekt är hur användare navigerar med tangentbordet. Många WooCommerce-tema har felaktig hantering av tabindex. Om en knapp saknar fokus eller om tabbordet hoppar över viktiga sektioner, blir det omöjligt för en användare att köpa något utan mus. Du måste kontrollera att alla interaktiva element är i rätt ordning och att de har tydliga focus-visible-stilar.
/* Exempel på fokus-stil för tangentbordsanvändare */
button:focus-visible {
outline: 3px solid #0056b3;
outline-offset: 2px;
}
Denna kod säkerställer att användaren alltid vet var de befinner sig i flödet. Utan detta blir tangentbordsnavigation en frustrerande upplevelse som leder till avhopp.
Steg för steg i WooCommerce-admin
Att implementera dessa funktioner kräver ofta lite mer än bara ett plugin. Du behöver ibland anpassa din tema-kod eller lägga till specifika filter i functions.php. Här är en metodisk genomgång av hur du bygger in dessa ändringar.
1. Hantera varukorgen korrekt
När en användare lägger till en produkt, måste korgen uppdateras utan att sidan behöver laddas om (om du använder AJAX). Detta är bra för prestanda, men det gör att screen readers kan missa uppdateringen om du inte hanterar aria-live-regionen.
I WooCommerce-admin kan du lägga till en hook som säkerställer att korgen alltid rapporterar status:
add_action('woocommerce_before_cart', 'my_custom_cart_aria_update');
function my_custom_cart_aria_update() {
?>
<div id="cart-contents" class="wc-cart" aria-live="polite">
<?php wc_get_cart_contents(); ?>
</div>
<?php
}
Denna kod skapar en dedikerad region för korgen som screen readers kan lyssna på. Det är en enkel men kraftfull lösning som gör att din butik blir mer inkluderande.
2. Använd rätt formulärstruktur
WooCommerce använder standardformulär för checkout. Om du tillåter användare att redigera adresser eller lägga till rabattkoder, måste dessa fält ha tydliga label-attribut. Många tema gör felaktiga kopplingar mellan text och input-fält.
För att korrigera detta kan du använda wc_add_inline_script för att injicera JavaScript som kontrollerar formulärstruktur i realtid. Detta säkerställer att varje fält är korrekt kopplat till sin beskrivning, vilket är avgörande för WCAG 2.1 och undviker missförstånd hos användare med nedsatt syn.
3. Hantera felmeddelanden
När en användare gör ett misstag i checkout-processen, visas ofta felmeddelanden som "Felaktig e-postadress". Dessa måste vara tillgängliga för assistiv teknik. Du kan använda wc_add_inline_script för att säkerställa att felmeddelanden läses upp automatiskt när de dyker upp.
// Exempel på kod för att hantera felmeddelanden
jQuery(document).ready(function($) {
$('.woocommerce-error').each(function() {
var message = $(this).text();
// Lägg till ARIA-live-region för felmeddelanden
$(this).attr('aria-live', 'polite');
$(this).nearbyInputField().attr('assocated-labels', true);
});