♿ WordPress-nettstedtilgjengelighet: en komplett guide 2026

Når en bruker ikke kan lese teksten din, klikke på en knapp eller rett og slett forstå hvor en lenke fører, forlater de siden. Ikke fordi innholdet er dårlig. Fordi nettstedet ikke snakker til dem.

Fra juni 2025 ble den europeiske tilgjengelighetsloven (EAA) obligatorisk. I Tyskland gjelder den nasjonale Barrierefreiheitsstärkungsgesetz (BFSG). Bøter, pålegg om etterlevelse, tapt publikum. Men bak det juridiske presset ligger en enkel sannhet: ifølge WHO lever rundt 16% av verdens befolkning, én av seks, med en eller annen form for funksjonsnedsettelse. Å ignorere dem betyr å miste hver sjette besøkende.

WordPress er verken et unntak eller en dødsdom her. CMS-et gir et solid fundament, men reell tilgjengelighet er resultatet av bevisste handlinger fra utvikleren eller nettstedseieren. Denne guiden er en trinnvis gjennomgang: fra overskriftsstruktur til tastaturnavigasjon, fra temavalg til automatiserte sjekker. Uten fyllstoff, bare det du kan bruke i dag. 💡 Rask oversikt:

• Sjekk oppfattbarhet: meningsfull alt-tekst for hvert bilde, aria-label for ikoner, tydelig lenketekst for hver lenke.
• Oppnå et kontrastforhold på 4,5:1 for normal tekst og 3:1 for stor tekst ved hjelp av WebAIM Contrast Checker.
• Bygg et overskriftshierarki: én H1 per side, deretter H2 og H3 uten å hoppe over nivåer.
• Sørg for tastaturtilgjengelighet: alt som kan klikkes med mus, må fungere med Tab og Enter.
• Sjekk skjemaer: en eksplisitt etikett for hvert inndatafelt; en plassholder er ingen erstatning for en beskrivelse.
• Kjør WAVE eller Lighthouse: en automatisert revisjon vil finne de fleste problemer på et halvt minutt.

Hva netttilgjengelighet er og hvorfor det er obligatorisk i 2026

Netttilgjengelighet er praksisen med å designe og utvikle nettsteder som kan brukes av mennesker med alle fysiske og kognitive evner. Skjermlesere for blinde brukere, tastaturnavigasjon for personer med motoriske funksjonsnedsettelser, tilstrekkelig kontrast for svaksynte, undertekster for døve.

De facto-standarden er WCAG 2.2 (Web Content Accessibility Guidelines) fra W3C-konsortiet. Tre nivåer: A (minimum), AA (målet for de fleste) og AAA (høyest). EU- og amerikansk lovgivning krever nivå AA.

Den europeiske tilgjengelighetsloven (EU-direktiv 2019/882) trådte i kraft 28. juni 2025 og dekker e-handel, bank, transport og media. I Tyskland gjelder BFSG parallelt. Bøtene varierer: opptil 100 000 euro i Tyskland, opptil 250 000 euro i Frankrike. WordPress-nettsteder for kommersielle selskaper faller direkte inn under regelverket.

Oppfattbarhet: hvordan gjøre innhold forståelig for skjermlesere

Utgangspunktet for tilgjengelighet: informasjon må presenteres slik at brukeren kan oppfatte den gjennom minst én kanal: syn, hørsel, berøring.

Bilder og alt-tekst. Hver img-tagg må ha et alt-attributt. For meningsfulle bilder, en beskrivelse av hva som skjer i dem (5-8 ord, uten «bilde» eller «fotografi»). For dekorative bilder, alt="" (tomt, men til stede). Skjermleseren hopper over en tom alt og distraherer ikke brukeren.

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);

Tomme lenker og knapper. Et forstørrelsesglassikon uten tekst er et mysterium for en skjermleser. Legg alltid til aria-label på ikonknapper:

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

Title-attributter. Nyttig for ekstra kontekst, men ikke dupliser lenketeksten i dem; skjermleseren vil lese det samme to ganger. WordPress dupliserer lenketekst i title som standard; dette bør deaktiveres.

Fargekontrast: grunnleggende tall og sjekkeverktøy

Utilstrekkelig kontrast mellom tekst og bakgrunn er det mest utbredte problemet. Ifølge WebAIM Million 2025 ble lav kontrast funnet på 81% av de skannede nettstedene.

Minimumskrav for WCAG 2.2 AA:

• Normal tekst (mindre enn 18pt): kontrast 4,5:1
• Stor tekst (18pt og over eller 14pt fet): kontrast 3:1
• Ikoner og UI-elementer: kontrast 3:1

Sjekk det på et minutt ved hjelp av WebAIM Contrast Checker: skriv inn tekst- og bakgrunnsfargene i HEX og få en vurdering: Bestått / Ikke bestått for hvert nivå.

Typiske problemområder i WordPress: grå tekst på hvit bakgrunn i bunnteksten, lyse knapper med hvit etikett, tekst over bilder uten et formørkende overlegg. Løses ved å redigere CSS, som oftest ved å gjøre teksten et par nyanser mørkere.

Overskriftsstruktur: et hierarki alle forstår

Skjermlesere bygger en «innholdsfortegnelse» for siden fra overskrifter; brukeren hopper gjennom H2-er og H3-er og omgår navigasjonen. Hvis hierarkiet er brutt, bryter navigasjonen sammen.

Regler:

• Én H1 per side, typisk innleggstittelen
• H2 for hovedseksjoner, H3 for underseksjoner innenfor en H2
• Overskrifter hopper ikke: H2 → H4 (hoppe over H3) er en feil
• Ikke bruk h*-tagger bare for skriftstørrelse; bruk CSS til det

Et typisk problem i WordPress: utvidelser og temaer som setter inn H2/H3 for sine egne blokker (glidere med en overskrift, et abonnementsskjema, sidebar-widgeter). Tre løsninger: finn tag-innstillingen i utvidelsen, tilpass utdataene via et filter, eller bytt til en mer nøye utvidelse. Å akseptere et brutt hierarki «fordi det ser pent ut» er ikke et alternativ.

Navigasjon og landemerker: veivisere for skjermleseren

HTML5-landemerker gir skjermleseren et kart over siden. Fire nøkkeltagger: header for toppteksten, nav for navigasjon, main for hovedinnholdet og footer for bunnteksten. Brukeren trykker på en hurtigtast og hopper rett til hovedinnholdet.

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

Rollen role="main" må forekomme nøyaktig én gang per side. De fleste moderne WordPress-temaer bruker disse taggene ut av boksen; sjekk med WAVE: «Structure»-seksjonen viser alle landemerker.

Et annet påkrevd element, "Hopp til innhold", er en usynlig lenke som første element på siden som lar brukere hoppe forbi menyen og gå rett til innholdet. I WordPress legges det til via et filter eller en tilgjengelighetsplugin.

Skjemaer uten barrierer

Kontaktskjema, nyhetsbrevpåmelding, utsjekking: hvert felt må være merket og tilgjengelig via tastatur.

*Hver input trenger sin egen label (eksplisitt eller via aria-label):*

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

En plassholder erstatter ikke en etikett; den forsvinner ved inntasting og leses dårlig av skjermlesere. Bruk placeholder kun som et formathint, ikke som feltnavn.

Gruppering: pakk radioknapper og avkrysningsbokser inn i et <fieldset> med en <legend>. Obligatoriske felt: merk dem med teksten «(obligatorisk)», ikke bare en stjerne eller farge.

Tastaturnavigasjon: siden din uten mus

Noen brukere bruker aldri mus: tremor, spastisitet, lammelser. Alt må fungere via Tab, Shift+Tab, Enter, Escape og piltaster.

Rask test: åpne siden og naviger den kun med Tab-tasten. Hvert interaktive element må få en synlig fokusindikator. En modal må lukkes med Escape. En nedtrekksmeny må utvides med Enter.

Typiske feil på WordPress-nettsteder:

• Egendefinerte nedtrekksmenyer uten tabindex og aria-expanded
• outline: none i CSS (fjerner fokusindikatoren; ikke gjør dette)
• Uendelig fokusfelle i popup-vinduer
• Skyveknapper som ikke kan betjenes med tastatur

Deaktiver aldri standard :focus-stilen fullstendig. Hvis du ikke liker nettleserens omriss, erstatt den med en tilpasset :focus-visible-stil som har en ring med høy kontrast.

Zoom: ikke hindre brukere i å forstørre tekst

Mange mobilversjoner av WordPress-nettsteder blokkerer klypezoom via en meta-tag:

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 krever muligheten til å zoome til 200% uten tap av innhold eller funksjonalitet; dette er Suksesskriterium 1.4.4. Sjekk at tekst ikke blir avkuttet eller overlapper andre blokker ved zooming.

WordPress-temaer og tilgjengelighet: hva du bør se etter når du velger

Ingen temaer er «fullt tilgjengelige rett ut av boksen», for mye avhenger av innhold og innstillinger. Men utgangspunktet har mye å si.

Når du velger et tema, vær oppmerksom på:

• Beskrivelsen sier «accessibility ready», dette er en merkelapp på WordPress.org som betyr grunnleggende samsvar med kravene
• Korrekt HTML5-struktur med landemerker
• Navigasjonsmenyer, opprinnelig <nav> med <ul>, ikke en div-konstruksjon med JS
• Tilstedeværelse av :focus-stiler for lenker og knapper
• Fravær av maximum-scale=1.0 i viewporten

Standard WordPress-temaene (Twenty Twenty-Four, Twenty Twenty-Five) er et greit utgangspunkt. Kommersielle temaer med visuelle byggeverktøy er en risikosone: jo mer visuell «magi», desto større er sjansen for ødelagt tilgjengelighet.

Verktøy for revisjon: fra en rask sjekk til profesjonell testing

WAVE Evaluation Tool. En nettleserutvidelse, WAVE fra WebAIM, som legger ikoner direkte over på siden: rødt for feil, gult for advarsler, grønt for bra. Ideelt for en første gjennomgang. Den viser kontrast, alt-tekster, overskriftsstruktur og ARIA-attributter.

Google Lighthouse. Innebygd i Chrome DevTools (F12 → Lighthouse → Accessibility). Den gir en numerisk poengsum fra 0-100 og en liste over spesifikke elementer som må fikses. Praktisk for jevnlig overvåking.

Accessibility Checker (Equalize Digital). En WordPress-plugin, Accessibility Checker sjekker innhold direkte i redigeringsverktøyet (Gutenberg og Classic). Gratisversjonen skanner et innlegg før publisering, Pro legger til en fullstendig nettstedrevisjon.

WP Accessibility. En veteran blant tilgjengelighets-pluginer, WP Accessibility av Joe Dolson. Den legger til hoppelenker, ARIA-landemerker, fjerner dupliserte tittelattributter på lenker, fikser :focus-stiler, fjerner tabindex fra skjemaer og target fra lenker. Ingen universalløsning, men den lukker et dusin typiske problemer i én vending.

One Click Accessibility. En plugin med en verktøylinje, One Click Accessibility lar brukeren bytte kontrast, øke skriftstørrelsen og understreke lenker på egen hånd. Dette er ikke en erstatning for innebygd tilgjengelighet, men et ekstra lag for dem som trenger spesifikke innstillinger.

NVDA. En gratis skjermleser for Windows, NVDA. Gå gjennom nettstedet ditt med skjermen slått av. Du vil høre det en blind bruker hører. VoiceOver (innebygd i macOS/iOS) er tilsvarende for Apples økosystem.

Ti steg til et tilgjengelig WordPress-nettsted

Her er det destillerte utbyttet fra hele guiden, en sjekkliste. Gå gjennom den etter enhver redesign eller lansering av et nytt prosjekt.

• Skriv alt-tekst for hvert bilde. I WordPress' mediebibliotek fyller du ut feltet «Alternativ tekst». For dekorative bilder bruker du alt="".

• Beskriv lenker. Lenketeksten bør formidle hvor den fører. «Klikk her» og «Les mer» er dårlige ankerfester. «Last ned pluginen Accessibility Checker» er et godt et.

• Ordne overskrifter i rekkefølge. Én H1, deretter H2, og H3 inne i H2. Sjekk i WAVE: Structure → Heading Outline.

• Få kontrasten opp til 4,5:1. Kjør WebAIM Contrast Checker over temaets hovedfarger: tekst, overskrifter, knapper, lenker, bunntekst.

• Aktiver synlig fokus. Sørg for at :focus ikke er satt til outline: none uten en erstatning. Egendefinert fokus gjøres via :focus-visible.

• Sjekk tastaturnavigasjon. Tabb deg gjennom alle lenker og knapper, Enter for å aktivere, Escape for å lukke modaler. Hvis du setter deg fast, er det en feil.

• Merk skjemaer. Hvert felt trenger sin egen <label>. Påkrevde felt trenger en tekstindikator. Grupper legges i et <fieldset>.

• Ikke blokker forstørring. Viewport uten maximum-scale og user-scalable=no. Sjekk ved 200% forstørrelse, innhold skal ikke bli avskåret.

• Legg til en hoppelenke. En «Hopp til innhold»-lenke som det første elementet i <body>. WP Accessibility gjør dette automatisk.

• Kjør WAVE eller Lighthouse. En automatisert revisjon erstatter ikke manuell testing, men den vil finne det store flertallet av problemer på et minutt.

⁉️🤔 Vanlige spørsmål

Må WordPress-nettstedet mitt oppfylle WCAG-kravene?

Hvis nettstedet representerer en virksomhet i EU, ja, fra juni 2025. Den europeiske tilgjengelighetsloven omfatter e-handel, finans, transport og media. I USA gjelder lignende krav: ADA + Section 508 for offentlige etater og deres leverandører. En personlig blogg er ikke formelt pålagt å oppfylle kravene, men en betydelig andel av brukerne har funksjonsnedsettelser, et sterkt kommersielt argument.

Ja, kommersielle nettsteder i EU må oppfylle WCAG 2.2 AA fra 28. juni 2025 i henhold til den europeiske tilgjengelighetsloven. Bøter fastsettes av medlemslandene: beløp kan nå hundretusener av euro avhengig av jurisdiksjon. I USA gjelder lignende krav gjennom ADA og Section 508. For personlige, ikke-kommersielle blogger er det ingen juridisk forpliktelse, men tilgjengelighet utvider publikummet.

Er det nok å installere en plugin som One Click Accessibility?

En verktøylinje-plugin er et hjelpelag, ikke en løsning. Den lar brukeren endre kontrast eller skriftstørrelse, men den fikser ikke manglende alt-tekst, ødelagt overskriftshierarki eller popup-vinduer som ikke kan betjenes med tastatur. Start med innebygd tilgjengelighet i kode og innhold, legg til verktøylinjen som en siste finish.

Nei. En verktøylinje (One Click Accessibility, UserWay) er bare et ekstra «overlegg». Den erstatter ikke innebygd tilgjengelighet: den fikser ikke alt-tekst, overskriftshierarki, tastaturfeller eller umerkede skjemafelter. Begynn med å fikse kode og innhold, verktøylinjen er siste touch.

Hvordan tester jeg et nettsted uten å kjøpe dyre verktøy?

En full syklus med gratisverktøy: WAVE Extension (første rask skanning) → Google Lighthouse (numerisk poengsum + liste over problemer) → manuell tastaturgjennomgang (Tab/Enter/Escape) → NVDA på Windows eller VoiceOver på Mac (gå gjennom nettstedet med skjermen slått av). Dette er nok til å løse det store flertallet av problemer.

Gratis syklus: WAVE Extension for nettleseren → Google Lighthouse i Chrome DevTools → manuell tastaturgjennomgang → NVDA (Windows) eller VoiceOver (macOS/iOS) for testing med skjermleser. Disse fire verktøyene dekker 90% av oppgavene. Betalte tjenester er bare nødvendig for regelmessige revisjoner av store prosjekter.

Kan et nettsted bygget med et visuelt byggeverktøy (Elementor, WPBakery) gjøres tilgjengelig?

Det kan det, men det er vanskeligere. Byggeverktøy genererer HTML dynamisk, og noen widgeter bryter overskriftshierarkiet eller setter inn div-omslag uten semantikk. Sjekk hver blokk individuelt med WAVE. Elementor Pro versjon 3.15+ la til innstillinger for aria-attributter for widgeter, bruk dem.

Det kan det, men det vil kreve mer manuelt arbeid. Visuelle byggeverktøy har en tendens til å bryte overskriftshierarkiet og generere overdrevne div-omslag. Sjekk resultatet med WAVE etter hver endring. Elementor Pro (3.15+) lar deg angi ARIA-attributter for widgeter, noe som delvis løser problemet.

Hvor ofte bør jeg sjekke et nettsteds tilgjengelighet på nytt?

Etter hver betydelig oppdatering: et nytt tema, en ny plugin, en redesign, en større innholdspublisering. Minimum syklus: kjør Lighthouse og gå gjennom nøkkelsider med tastaturet en gang i kvartalet. Automatisert overvåking via Accessibility Checker Pro er berettiget for nettsteder med regelmessig innhold.

Som et minimum, etter hver større endring (temabytte, ny plugin, redesign) og kvartalsvis som et forebyggende tiltak. For nettsteder med regelmessige publiseringer er automatisert overvåking via Accessibility Checker Pro berettiget. En skjermlesertest er tilstrekkelig en gang hvert halvår hvis kodebasen ikke har endret seg.

Hva du bør gjøre med WordPress-nettstedets tilgjengelighet akkurat nå

Ikke vent på det perfekte øyeblikket. WCAG 2.2 AAA er et mål, ikke et utgangspunkt. Begynn med tre handlinger i dag:

• Kjør WAVE på hjemmesiden din. Fiks de røde feilene (vanligvis 5-10 av dem), de fjerner de mest alvorlige barrierene.
• Naviger nettstedet med tastatur. Tab, Tab, Tab. Hvis du setter deg fast, fiks det. Hvis fokus ikke er synlig, legg til :focus-visible.
• Sjekk kontrasten på tre farger: tekstfarge, knappefarge, lenkefarge. Få dem opp til 4,5:1.

Disse tre stegene, en halvtimes arbeid, og brorparten av resultatet. Resten, utvidelser, skjermlesere, ARIA, tar du gradvis.

Hvis nettstedet er kommersielt og opererer i EU, ikke utsett det. EAA gir tilsynsmyndighetene reell makt fra og med 2025. Det er bedre å møte en revisjon med en grønn Lighthouse-score enn med et brev fra en tilsynsmyndighet.