Tilgængelighed på Umbraco: typiske WCAG-fejl og hvem der retter dem

Opdateret 10. september 2026

Umbraco er et CMS, ikke en webshop-platform. Butikken kommer fra Umbraco Commerce eller en integration, og alt fra skabeloner til checkout er bygget af et bureau. Der er intet standardtema at skyde skylden på, og til gengæld kan alt rettes.

Hvad loven kræver

Sælger shoppen til private forbrugere i Danmark, er den en e-handelstjeneste efter tilgængelighedsloven (LOV nr. 801/2022), som har været i kraft siden 28. juni 2025. Kravet er WCAG 2.1 AA via EN 301 549, en offentliggjort tilgængelighedserklæring og dokumentation, som Sikkerhedsstyrelsen kan bede om at se. Mikrovirksomheder (under 10 årsværk og under 2 mio. EUR i omsætning eller balance) er undtaget. Umbraco-sites med salg til forbrugere er e-handelstjenester på linje med alle andre. Da bureauet har bygget alt, er tilgængelighed et kontraktspørgsmål: skriv WCAG 2.1 AA ind som krav i aftalen, og gør nul automatisk målbare fund til en del af afleveringen.

Det finder vi typisk på Umbraco

På Umbraco afspejler fundene to ting: bureauets Razor-skabeloner og redaktørernes indhold. I skabelonerne ser vi manglende <main> og andre landemærker, sidetitler, der er ens på alle sider, fordi <title> ikke bruger sidens navn, og ikonlinks uden tekst i header og footer. Overskriftsniveauer springer, når redaktører vælger H3 i Rich Text Editor, fordi den så bedre ud. Billeder fra mediearkivet mangler alt-tekst, når skabelonen ikke henter alt-feltet, eller når feltet ikke findes. Farver er typisk defineret i bureauets designsystem, hvor lys grå brødtekst er den hyppigste kontrastfejl. Formularer fra Umbraco Forms er som regel fine, men egne formularer i checkout er det ofte ikke.

På Umbraco er der intet standardtema: fundene afspejler bureauets skabeloner og redaktørernes indhold.

image-alt1.1.1 Ikke-tekstbaseret indhold · A
Billeder uden alt-attribut har intet tekstalternativ. Skærmlæserbrugere hører enten filnavnet (fx 'IMG_2043.jpg') eller ingenting og går glip af indholdet — fx et produktbillede, et kampagnebanner eller et betalingskort-ikon.
Giv alle <img> en alt-attribut. Beskriv billedets indhold eller funktion i én kort sætning (uden 'billede af'). Er billedet rent dekorativt (rammer, skygger, spacer-gifs), så brug tom alt="" — så springer skærmlæseren det over. Et billede i et link skal beskrive linkets mål, ikke billedet. I webshops: produktbilleder bør nævne produktnavn og variant ('Sort uldfrakke, model Nora, set forfra'), og logoer bør have firmanavnet som alt.
Før
```
<img src="/img/frakke-nora-sort.jpg">
```
Efter
```
<img src="/img/frakke-nora-sort.jpg" alt="Sort uldfrakke, model Nora, set forfra">
<img src="/img/border.gif" alt="">
```
color-contrast1.4.3 Kontrast (minimum) · AA
Tekstens kontrast mod baggrunden er under 4,5:1 (3:1 for stor tekst ≥ 18 pt eller ≥ 14 pt fed). Brugere med nedsat syn eller farvesynsdefekt — og alle på en mobil i sollys — kan ikke læse teksten. Rammer typisk lysegrå hjælpetekst, placeholder-tekst, priser på farvet baggrund og hvid tekst på pastelfarvede knapper.
Mørkn tekstfarven eller lysn baggrunden, til kontrasten er mindst 4,5:1 (3:1 for stor tekst). axe angiver den målte kontrast og de præcise farver i fejlbeskrivelsen. Ret farven i design-tokens/CSS-variabler frem for pr. element, så det slår igennem overalt. Tjek også hover-, fokus- og disabled-tilstande (disabled-tekst er undtaget, men bør stadig kunne læses).
Før
```
.hint { color: #9ca3af; background: #ffffff; } /* 2,5:1 */
```
Efter
```
.hint { color: #4b5563; background: #ffffff; } /* 7,6:1 */
```
heading-order1.3.1 Information og relationer · A
Overskriftsniveauer springer (fx h2 → h4). Skærmlæserbrugere, der navigerer via overskrifter, mister overblikket over sidens struktur.
Brug overskriftsniveauer som en disposition: h1 for sidens emne, h2 for hovedafsnit, h3 for underafsnit. Vælg aldrig niveau efter udseende — styr størrelsen med CSS i stedet.
Før
```
<h2>Beskrivelse</h2>
<h4>Materiale</h4>
```
Efter
```
<h2>Beskrivelse</h2>
<h3>Materiale</h3>
```
landmark-one-main1.3.1 Information og relationer · A2.4.1 Spring over blokke · A
Siden har ingen <main>-landemærke. Skærmlæserbrugere bruger 'spring til hovedindhold' via main-landemærket for at komme forbi header og navigation.
Pak sidens primære indhold (ikke header, nav og footer) i ét <main>-element — typisk i sideskabelonen.
Før
```
<div id="content">…</div>
```
Efter
```
<main id="content">…</main>
```
link-name2.4.4 Formål med links (i kontekst) · A4.1.2 Navn, rolle, værdi · A
Linket har ingen tilgængelig tekst. Skærmlæsere oplæser 'link' uden mål — brugeren ved ikke, hvor det fører hen. Typisk et link, der kun indeholder et ikon eller et billede uden alt, fx logo, kurv-ikon eller sociale medier-ikoner.
Giv linket en tekst: enten synlig tekst, alt på billedet inde i linket, eller aria-label på <a>. Teksten skal beskrive målet ('Gå til kurv', 'Nordally — forside'), ikke 'klik her'. Har linket ingen href, er det ikke et link — brug en <button>.
Før
```
<a href="/kurv"><svg>…</svg></a>
```
Efter
```
<a href="/kurv" aria-label="Indkøbskurv, 2 varer"><svg aria-hidden="true">…</svg></a>
```
document-title2.4.2 Sider har titler · A
Siden har ingen <title> (eller den er tom). Titlen er det første, en skærmlæser oplæser, og det, der står i browserfanen, bogmærker og søgeresultater. Uden den kan brugeren ikke skelne mellem åbne faner eller vide, hvilken side der er indlæst.
Giv hver side en unik, beskrivende <title>: det specifikke først, sitenavn til sidst, fx 'Sort uldfrakke Nora – Butiksnavn'. I Next.js: eksportér metadata.title pr. side; i Shopify/WooCommerce sættes det i skabelonen.
Før
```
<head></head>
```
Efter
```
<head><title>Sort uldfrakke Nora – Butiksnavn</title></head>
```

Sådan tilføjer I sitet i Nordally

Base-URL: sitets domæne, fx https://www.dinbutik.dk.
Sitemap: Umbraco har ikke et indbygget XML-sitemap. De fleste sites har enten en pakke fra Umbraco Marketplace, der lægger sitemappet på /sitemap.xml, eller en egen controller/route bygget af bureauet, som kan ligge på /sitemap.xml eller fx /sitemap. Spørg bureauet, eller brug den adresse, der er indsendt i Google Search Console.
Uden sitemap: svarer /sitemap.xml ikke, scanner Nordally kun forsiden. Bed bureauet om at tilføje et XML-sitemap; det er en lille opgave, og det gavner også søgemaskinerne.
Sitemappet skal være et gyldigt XML-sitemap (urlset eller sitemapindex). En HTML-sitemap-side kan Nordally ikke læse.
Flere sprog på egne domæner tilføjes som separate sites; vi følger kun URL'er på sitets eget domæne.

Hvem retter hvad

Hvem retter hvad på Umbraco
Fejl	Kan shopejeren rette selv?	Kræver udvikler/leverandør?
Alt-tekster på billeder	Ja, i mediearkivet, hvis skabelonen bruger alt-feltet	Bureauet, hvis feltet ikke findes eller ikke bruges
Overskriftsniveauer i redaktørindhold	Ja, i Rich Text Editor	Bureauet, hvis skabelonen sætter forkerte niveauer
Sidetitler	Delvist: udfyld metatitel-feltet, hvis det findes	Bureauet, hvis skabelonen ikke bruger sidens navn
Kontrast i designsystemets farver	Nej	Bureauet
Manglende <main> og landemærker	Nej	Bureauet (én rettelse i master-skabelonen)
Egne formularer og checkout	Nej	Bureauet eller commerce-leverandøren

Hvad automatisk test ikke finder

Det, en scanner ikke kan afgøre, er om checkout kan gennemføres med tastatur alene, om fokusrækkefølgen følger den visuelle rækkefølge i bureauets komponenter, om alt-teksterne beskriver billederne, og om fejlbeskeder i egne formularer bliver læst op. Det går I igennem med tjeklisten i manuel gennemgang; bureauet kan tage de tekniske punkter, redaktørerne indholdet.

Tjek én side af jeres Umbraco-shop nu

Indsæt en produktside eller forsiden, og se de automatisk målbare fund med selektor og dansk vejledning. Ingen konto, ingen installation. Tjek én side gratis.

Spørgsmål og svar

Kan vi bruge en tilgængeligheds-app i stedet for at rette Umbraco-shoppen?

Nej. En overlay-widget lægger et script oven på siden i kundens browser; temaet, produktkortene og checkout er uændrede, og det er dem, tilsynet og kunderne møder. Widgeten dokumenterer heller ikke noget over for Sikkerhedsstyrelsen. Ret fejlene i koden og indholdet, og brug eventuelt en widget som tilvalg for brugerindstillinger. Se overlay-widget eller scanner.

Vores checkout ligger hos en ekstern betalingsløsning. Er den vores ansvar?

Tjenesten er jeres, så erklæringen skal dække hele købsflowet. Beskriv, hvilke dele der leveres af en tredjepart, hvad I har testet, og hvad I har fået oplyst af leverandøren. Fejl i betalingsvinduet retter leverandøren; fejl i trinnene før og efter retter bureauet.

Kan vi kræve WCAG 2.1 AA af bureauet?

Ja, hvis det står i aftalen. Skriv kravet ind, og brug en scan af de vigtigste sidetyper som acceptkriterium: nul automatisk målbare fund og en gennemført manuel tjekliste. Med CI-integrationen kan bureauet stoppe nye fejl, før de udgives.

Kilder

Nordally hjælper med compliance og giver ikke juridisk rådgivning. Om jeres virksomhed er omfattet, og om jeres løsning er dækkende, er en vurdering, I selv eller en rådgiver må tage.