♿ WordPress webbplatsens tillgänglighet: en komplett guide 2026

När en användare inte kan läsa din text, klicka på en knapp eller helt enkelt förstå vart en länk leder, lämnar de sidan. Inte för att innehållet är dåligt. Utan för att webbplatsen inte talar till dem.

Sedan juni 2025 är den europeiska tillgänglighetslagen (EAA) obligatorisk. I Tyskland gäller den nationella Barrierefreiheitsstärkungsgesetz (BFSG). Böter, förelägganden, förlorad publik. Men bakom det juridiska trycket ligger en enkel sanning: enligt WHO lever cirka 16% av världens befolkning, en av sex, med någon form av funktionsnedsättning. Att ignorera dem innebär att förlora var sjätte besökare.

WordPress är varken ett undantag eller en dödsdom här. CMS:et ger en solid grund, men verklig tillgänglighet är resultatet av medvetna handlingar från utvecklaren eller webbplatsägaren. Den här guiden är en steg-för-steg-genomgång: från rubrikstruktur till tangentbordsnavigering, från temaval till automatiserade kontroller. Inget utfyllnad, bara sådant du kan tillämpa idag. 💡 Snabb översikt:

• Kontrollera uppfattbarhet: meningsfull alt-text för varje bild, aria-label för ikoner, tydlig länktext för varje länk.
• Uppnå ett kontrastförhållande på 4,5:1 för normal text och 3:1 för stor text med hjälp av WebAIM Contrast Checker.
• Bygg en rubrikhierarki: en H1 per sida, sedan H2 och H3 utan överhoppade nivåer.
• Säkerställ tangentbordstillgänglighet: allt som är klickbart med mus måste fungera via Tab och Enter.
• Kontrollera formulär: en uttrycklig etikett för varje inmatningsfält; en placeholder ersätter inte en beskrivning.
• Kör WAVE eller Lighthouse: en automatiserad granskning hittar de flesta problem på en halv minut.

Vad webbtillgänglighet är och varför det är obligatoriskt 2026

Webbtillgänglighet är praktiken att designa och utveckla webbplatser som kan användas av människor med alla fysiska och kognitiva förmågor. Skärmläsare för blinda användare, tangentbordsnavigering för personer med motoriska funktionsnedsättningar, tillräcklig kontrast för användare med nedsatt syn, undertexter för döva användare.

De facto-standarden är WCAG 2.2 (Web Content Accessibility Guidelines) från W3C-konsortiet. Tre nivåer: A (minimum), AA (målet för de flesta) och AAA (högsta). EU:s och USA:s lagstiftning kräver nivå AA.

Den europeiska tillgänglighetslagen (EU-direktiv 2019/882) trädde i kraft den 28 juni 2025 och omfattar e-handel, banktjänster, transport och media. I Tyskland gäller BFSG parallellt. Böterna varierar: upp till 100 000 € i Tyskland, upp till 250 000 € i Frankrike. WordPress-webbplatser från kommersiella företag omfattas direkt av regleringen.

Uppfattbarhet: hur man gör innehåll begripligt för skärmläsare

Utgångspunkten för tillgänglighet: information måste presenteras så att användaren kan uppfatta den via minst en kanal: syn, hörsel, känsel.

Bilder och alt-text. Varje img-tagg måste ha ett alt-attribut. För meningsfulla bilder, en beskrivning av vad som händer i dem (5-8 ord, utan "bild" eller "fotografi"). För dekorativa bilder, alt="" (tomt, men närvarande). Skärmläsaren hoppar över en tom alt och distraherar inte användaren.

1
/* functions.php — forced alt for post thumbnails */
2
add_filter('wp_get_attachment_image_attributes', function($attr, $attachment) {
3
    if (empty($attr['alt'])) {
4
        $attr['alt'] = get_the_title($attachment->ID);
5
    }
6
    return $attr;
7
}, 10, 2);

Tomma länkar och knappar. En förstoringsglasikon utan text är ett mysterium för en skärmläsare. Lägg alltid till aria-label på ikonknappar:

1
<button aria-label="Open search">
2
    <span class="dashicons dashicons-search"></span>
3
</button>

Title-attribut. Användbara för ytterligare sammanhang, men duplicera inte länktexten i dem; skärmläsaren kommer att läsa samma sak två gånger. WordPress duplicerar länktext i title som standard; detta bör inaktiveras.

Färgkontrast: grundläggande siffror och kontrollverktyg

Otillräcklig kontrast mellan text och bakgrund är det mest utbredda problemet. Enligt WebAIM Million 2025 hittades låg kontrast på 81% av de skannade webbplatserna.

Minimikrav enligt WCAG 2.2 AA:

• Normal text (mindre än 18pt): kontrast 4,5:1
• Stor text (18pt och större eller 14pt fet): kontrast 3:1
• Ikoner och UI-element: kontrast 3:1

Kontrollera det på en minut med WebAIM Contrast Checker: ange text- och bakgrundsfärgerna i HEX och få ett utlåtande: Godkänd / Underkänd för varje nivå.

Typiska problemområden i WordPress: grå text på vit bakgrund i sidfoten, ljusa knappar med vita etiketter, text över foton utan en mörkare överlägg. Åtgärdas genom att redigera CSS, oftast genom att mörka texten ett par nyanser.

Rubrikstruktur: en hierarki som alla förstår

Skärmläsare bygger en "innehållsförteckning" för sidan från rubriker; användaren hoppar genom H2:or och H3:or och förbigår navigering. Om hierarkin är bruten, bryts navigeringen.

Regler:

• En H1 per sida, vanligtvis inläggets titel
• H2 för huvudavsnitt, H3 för underavsnitt inom en H2
• Rubriker hoppar inte över nivåer: H2 → H4 (hoppar över H3) är ett fel
• Använd inte h*-taggar bara för teckenstorlek; använd CSS för det

Ett typiskt problem i WordPress: tillägg och teman som infogar H2/H3 för sina egna block (bildspel med en rubrik, ett prenumerationsformulär, sidofältswidgetar). Tre lösningar: hitta tagginställningen i tillägget, anpassa utdatan via ett filter eller byt till ett mer noggrant tillägg. Att acceptera en bruten hierarki "för att det ser snyggt ut" är inget alternativ.

Navigering och landmärken: vägvisare för skärmläsaren

HTML5-landmärken ger skärmläsaren en karta över sidan. Fyra nyckeltaggar: header för sidhuvudet, nav för navigering, main för huvudinnehållet och footer för sidfoten. Användaren trycker på en snabbkommando och hoppar direkt till huvudinnehållet.

1
<header role="banner">
2
<nav role="navigation">
3
<main role="main">
4
<footer role="contentinfo">

Rollen role="main" måste finnas exakt en gång per sida. De flesta moderna WordPress-teman använder dessa taggar från start; kontrollera med WAVE: avsnittet "Structure" visar alla landmärken.

Ett annat obligatoriskt element, "Hoppa till innehåll", är en osynlig länk som första element på sidan som låter användare hoppa förbi menyn och gå direkt till innehållet. I WordPress läggs den till via ett filter eller ett tillgänglighetsplugin.

Formulär utan hinder

Kontaktformulär, nyhetsbrevsregistrering, kassa: varje fält måste vara etiketterat och nåbart via tangentbord.

*Varje input behöver sin egen label (explicit eller via aria-label):*

1
<label for="user-email">Email</label>
2
<input id="user-email" name="email" type="email">

En platshållare ersätter inte en etikett; den försvinner vid inmatning och läses dåligt av skärmläsare. Använd placeholder endast som formatledtråd, inte som fältnamn.

Gruppering: omslut radioknappar och kryssrutor i ett <fieldset> med en <legend>. Obligatoriska fält: markera dem med texten "(obligatorisk)", inte bara en asterisk eller färg.

Tangentbordsnavigering: din sida utan mus

Vissa användare använder aldrig en mus: tremor, spasticitet, förlamning. Allt måste fungera via Tab, Shift+Tab, Enter, Escape och piltangenter.

Snabbtest: öppna sidan och navigera den med enbart Tab-tangenten. Varje interaktivt element måste få en synlig fokusmarkering. En modal måste stängas med Escape. En rullgardinsmeny måste fällas ut med Enter.

Typiska brister på WordPress-sajter:

• Egna rullgardinsmenyer utan tabindex och aria-expanded
• outline: none i CSS (tar bort fokusmarkeringen; gör inte detta)
• Oändlig fokusfälla i popup-fönster
• Bildspel som inte kan hanteras med tangentbord

Inaktivera aldrig standardstilen för :focus helt. Om du ogillar webbläsarens outline, ersätt den med en egen :focus-visible-stil som har en ring med hög kontrast.

Zoom: hindra inte användare från att förstora text

Många mobilversioner av WordPress-sajter blockerar nypzoom via en metatagg:

1
<!-- INCORRECT — do not do this -->
2
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
3
 
4
<!-- CORRECT -->
5
<meta name="viewport" content="width=device-width, initial-scale=1">

WCAG 2.2 kräver möjlighet att zooma till 200% utan förlust av innehåll eller funktion; detta är Kriterium 1.4.4. Kontrollera att text inte klipps av eller överlappar andra block vid zoomning.

WordPress-teman och tillgänglighet: vad du ska titta efter när du väljer

Inget tema är "fullt tillgängligt direkt ur kartongen", för mycket beror på innehåll och inställningar. Men grunden man börjar med spelar roll.

När du väljer tema, var uppmärksam på:

• Beskrivningen anger "accessibility ready", detta är en tagg på WordPress.org som innebär grundläggande uppfyllelse av kraven
• Korrekt HTML5-struktur med landmärken
• Navigeringsmenyer, äkta <nav> med <ul>, inte en div-konstruktion med JS
• Förekomst av :focus-stilar för länkar och knappar
• Frånvaro av maximum-scale=1.0 i viewport

Standardteman från WordPress (Twenty Twenty-Four, Twenty Twenty-Five) är en hygglig utgångspunkt. Kommersiella teman med visuella byggare är en riskzon: ju mer visuell "magi", desto större chans att tillgängligheten brister.

Verktyg för granskning: från en snabb koll till professionell testning

WAVE Evaluation Tool. Ett webbläsartillägg, WAVE från WebAIM, som lägger ikoner direkt på sidan: rött för fel, gult för varningar, grönt för bra. Perfekt för en första granskning. Det visar kontrast, alt-texter, rubrikstruktur, ARIA-attribut.

Google Lighthouse. Inbyggt i Chrome DevTools (F12 → Lighthouse → Accessibility). Det ger ett numeriskt betyg på 0-100 och en lista över specifika element att åtgärda. Praktiskt för regelbunden övervakning.

Accessibility Checker (Equalize Digital). Ett WordPress-plugin, Accessibility Checker kontrollerar innehåll direkt i redigeraren (Gutenberg och Classic). Gratisversionen skannar ett inlägg före publicering, Pro lägger till en fullständig webbplatsgranskning.

WP Accessibility. En veteran bland tillgänglighetsplugins, WP Accessibility av Joe Dolson. Det lägger till skip-länkar, ARIA-landmärken, tar bort duplicerade länk-titel-attribut, fixar :focus-stilar, tar bort tabindex från formulär och target från länkar. Ingen mirakelkur, men det stänger ett dussin typiska problem i ett svep.

One Click Accessibility. Ett plugin med ett verktygsfält, One Click Accessibility låter användaren byta kontrast, öka teckenstorlek och stryka under länkar på egen hand. Detta är inte en ersättning för inbyggd tillgänglighet, utan ett extra lager för dem som behöver specifika inställningar.

NVDA. En gratis skärmläsare för Windows, NVDA. Gå igenom din webbplats med skärmen avstängd. Du kommer att höra vad en blind användare hör. VoiceOver (inbyggd i macOS/iOS) är motsvarigheten för Apples ekosystem.

Tio steg till en tillgänglig WordPress-webbplats

Här är den destillerade slutsatsen från hela guiden, en checklista. Gå igenom den efter varje redesign eller lansering av ett nytt projekt.

• Skriv alt-text för varje bild. I WordPress mediebibliotek, fyll i fältet "Alternativ text". För dekorativa bilder, använd alt="".

• Beskriv länkar. Länktexten ska kommunicera vart den leder. "Klicka här" och "Läs mer" är dåliga ankare. "Ladda ner Accessibility Checker-pluginet" är ett bra.

• Ordna rubriker i ordning. En H1, sedan H2, och H3 inuti H2. Kontrollera i WAVE: Structure → Heading Outline.

• Få kontrasten till 4,5:1. Kör WebAIM Contrast Checker på temats huvudfärger: text, rubriker, knappar, länkar, sidfot.

• Aktivera synlig fokus. Se till att :focus inte är satt till outline: none utan en ersättning. Anpassad fokus görs via :focus-visible.

• Kontrollera tangentbordsnavigering. Tabba genom alla länkar och knappar, Enter för att aktivera, Escape för att stänga modaler. Om du fastnar är det en bugg.

• Märk upp formulär. Varje fält behöver sin egen <label>. Obligatoriska fält behöver en textindikator. Grupper läggs i ett <fieldset>.

• Blockera inte zoom. Viewport utan maximum-scale och user-scalable=no. Kontrollera vid 200% zoom, innehållet ska inte kapas.

• Lägg till en skip-länk. En "Hoppa till innehåll"-länk som första element i <body>. WP Accessibility gör detta automatiskt.

• Kör WAVE eller Lighthouse. En automatiserad granskning ersätter inte manuell testning, men den hittar den stora majoriteten av problem på en minut.

⁉️🤔 Vanliga frågor

Måste min WordPress-sajt följa WCAG?

Om din sajt representerar ett företag i EU, ja, från och med juni 2025. Den europeiska tillgänglighetslagen omfattar e-handel, finans, transport och media. I USA gäller liknande krav: ADA + Section 508 för myndigheter och deras leverantörer. En personlig blogg omfattas inte formellt av kraven, men en betydande andel användare har funktionsnedsättningar, ett starkt kommersiellt argument.

Ja, kommersiella sajter i EU måste följa WCAG 2.2 AA från och med 28 juni 2025 enligt European Accessibility Act. Böter fastställs av medlemsstaterna: beloppen kan uppgå till hundratusentals euro beroende på jurisdiktion. I USA gäller liknande krav genom ADA och Section 508. För personliga icke-kommersiella bloggar finns ingen juridisk skyldighet, men tillgänglighet breddar publiken.

Räcker det att installera ett plugin som One Click Accessibility?

Ett verktygsfältsplugin är ett hjälplager, inte en lösning. Det låter användaren ändra kontrast eller textstorlek, men det fixar inte saknad alt-text, trasig rubrikhierarki eller popup-fönster som inte går att nå med tangentbord. Börja med inbyggd tillgänglighet i kod och innehåll, lägg till verktygsfältet som en sista finish.

Nej. Ett verktygsfält (One Click Accessibility, UserWay) är bara ett extra "overlay". Det ersätter inte inbyggd tillgänglighet: det fixar inte alt-text, rubrikhierarki, tangentbordsfällor eller formulärfält utan etiketter. Börja med att fixa kod och innehåll, verktygsfältet är sista touchen.

Hur testar jag en sajt utan att köpa dyra verktyg?

En komplett cykel med gratisverktyg: WAVE Extension (första snabbskanning) → Google Lighthouse (numeriskt betyg + lista över problem) → manuell tangentbordsgenomgång (Tab/Enter/Escape) → NVDA på Windows eller VoiceOver på Mac (gå igenom sajten med skärmen avstängd). Detta räcker för att åtgärda de allra flesta problem.

Gratis cykel: WAVE Extension för webbläsaren → Google Lighthouse i Chrome DevTools → manuell tangentbordsgenomgång → NVDA (Windows) eller VoiceOver (macOS/iOS) för test med skärmläsare. Dessa fyra verktyg täcker 90% av uppgifterna. Betaltjänster behövs bara för regelbundna revisioner av stora projekt.

Kan en sajt byggd med en visuell byggare (Elementor, WPBakery) göras tillgänglig?

Det kan den, men det är svårare. Byggare genererar HTML dynamiskt, och vissa widgets bryter rubrikhierarkin eller lägger in div-omslag utan semantik. Kontrollera varje block individuellt med WAVE. Elementor Pro version 3.15+ lade till inställningar för aria-attribut för widgets, använd dem.

Det kan den, men det kräver mer manuellt arbete. Visuella byggare tenderar att bryta rubrikhierarkin och generera överdrivna div-omslag. Kontrollera resultatet med WAVE efter varje ändring. Elementor Pro (3.15+) låter dig ställa in ARIA-attribut för widgets, vilket delvis löser problemet.

Hur ofta bör jag kontrollera en sajts tillgänglighet på nytt?

Efter varje betydande uppdatering: ett nytt tema, ett nytt plugin, en omdesign, en större innehållspublicering. Minsta cykel: kör Lighthouse och gå igenom nyckelsidor med tangentbordet en gång i kvartalet. Automatiserad övervakning via Accessibility Checker Pro är motiverat för sajter med regelbundet innehåll.

Som minimum, efter varje större förändring (temabyte, nytt plugin, omdesign) och kvartalsvis i förebyggande syfte. För sajter med regelbundna publiceringar är automatiserad övervakning via Accessibility Checker Pro motiverat. Ett skärmläsartest räcker en gång i halvåret om kodbasen inte har ändrats.

Vad du kan göra åt WordPress-webbplatsens tillgänglighet just nu

Vänta inte på det perfekta tillfället. WCAG 2.2 AAA är ett mål, inte en startpunkt. Börja med tre åtgärder idag:

• Kör WAVE på din startsida. Åtgärda de röda felen (oftast 5-10 stycken), de täpper till de allvarligaste hindren.
• Navigera på webbplatsen med tangentbord. Tab, Tab, Tab. Om du fastnar, fixa det. Om fokus inte syns, lägg till :focus-visible.
• Kontrollera kontrasten för tre färger: textfärg, knappfärg, länkfärg. Få upp dem till 4,5:1.

De här tre stegen, en halvtimmes arbete, och lejonparten av resultatet. Resten, tillägg, skärmläsare, ARIA, tar du itu med gradvis.

Om webbplatsen är kommersiell och verkar inom EU, skjut inte upp det. EAA ger tillsynsmyndigheterna reella befogenheter från och med 2025. Det är bättre att möta en granskning med ett grönt Lighthouse-resultat än med ett brev från en tillsynsmyndighet.