Tillgänglighetskrav: det här krävs av restaurangens sajt

Tillgänglighetskraven för hemsidor styrs i Sverige av tillgänglighetslagen (SFS 2023:254), som genomför EU:s tillgänglighetsdirektiv och tillämpas sedan 28 juni 2025. En vanlig restaurangs informationssajt omfattas inte direkt av lagens hårda krav — men säljer ni online kan det räknas som e-handel, och oavsett juridik är WCAG 2.1 nivå AA den måttstock en seriös restaurangsajt bör klara.

Tänk dig en gäst med nedsatt syn som vill boka bord på din restaurang. Hen förstorar texten i mobilen — och din meny, som ligger som en bild, blir en oläslig gröt. Hen försöker boka via formuläret — men det går inte att navigera med tangentbord. Hen ger upp och bokar hos konkurrenten. Det här händer varje dag på svenska restaurangsajter, och det är precis vad tillgänglighetskraven handlar om att förhindra.

Den här guiden reder ut vad lagen faktiskt kräver av en restaurangs hemsida — utan skrämselpropaganda — och vad du konkret bör göra oavsett vad lagen säger. För här är sanningen: även om din sajt inte omfattas av lagens bokstav, förlorar du gäster varje vecka på brister som är billiga att fixa.

Vad säger lagen? Tillgänglighetslagen och din restaurang

Det finns mycket förvirring kring vilka tillgänglighetskrav som gäller för företags hemsidor i Sverige. Låt oss reda ut begreppen, ett i taget.

EU:s tillgänglighetsdirektiv och den svenska lagen

EU:s tillgänglighetsdirektiv — ofta kallat European Accessibility Act eller EAA — är ett EU-direktiv från 2019 som ställer tillgänglighetskrav på vissa produkter och tjänster. I Sverige genomförs det genom lagen om vissa produkters och tjänsters tillgänglighet (SFS 2023:254), vardagligt kallad tillgänglighetslagen. Lagen började tillämpas den 28 juni 2025.

Lagen riktar sig mot specifika kategorier: e-handelstjänster, banktjänster, elektronisk kommunikation, e-böcker, vissa transporttjänster och audiovisuella medietjänster, samt vissa produkter som datorer, telefoner, betalterminaler och biljettautomater. Det tekniska kravet är i praktiken WCAG 2.1 nivå AA, via den harmoniserade europeiska standarden EN 301 549.

Vad lagen INTE är

Tillgänglighetslagen är inte en generell lag om att alla företags hemsidor måste vara tillgängliga. Den gäller inte restaurangverksamhet som sådan, inte frisörsalonger, inte bilverkstäder. Den gäller de uppräknade tjänstekategorierna. Det är en viktig distinktion — många byråer använder lagens namn för att skrämma företagare till dyra åtgärder de inte behöver.

Diskrimineringslagen gäller alltid

Däremot gäller diskrimineringslagen alla som tillhandahåller varor, tjänster och bostäder till allmänheten — inklusive restauranger. Den förbjuder diskriminering av personer med funktionsnedsättning, bland annat genom bristande tillgänglighet. En bokningsfunktion som i praktiken är oanvändbar för en blind gäst, eller en meny som en synskadad inte kan ta del av, är inte bara dålig service — det kan vara ett diskrimineringsproblem. Tröskeln för vad som räknas som diskriminering är hög, men principen är tydlig: ingen gäst ska stängas ute.

Omfattas din restaurang av tillgänglighetslagens krav?

För de flesta restauranger är svaret: inte direkt — men det finns viktiga undantag och gråzoner.

När restaurangen räknas som e-handel

Lagens kategori "e-handelstjänster" omfattar tjänster där konsumenter kan ingå avtal eller köpa varor och tjänster online. För en restaurang kan det betyda:

• Presentkortsförsäljning online — säljer ni presentkort via hemsidan med kortbetalning är det e-handel i lagens mening.
• Matbeställning med onlinebetalning — takeaway eller hemkörning där gästen betalar på sajten.
• Betald bokning av event eller catering — där avtal ingås och betalning sker digitalt.

En ren informationssajt med ett kontaktformulär för bordsbokning — där ingen betalning sker och inget köpavtal ingås online — faller däremot normalt utanför e-handelsdefinitionen.

Mikroföretagsundantaget

Även om er onlineförsäljning skulle räknas som e-handel finns ett viktigt undantag: mikroföretag — färre än 10 anställda och en årsomsättning eller balansomslutning på högst 2 miljoner euro — är undantagna från kraven på e-handelstjänster. De allra flesta fristående svenska restauranger faller inom den definitionen. Större restaurangkedjor och koncerner gör det däremot inte.

Varför "lagen kräver det inte" är ett dåligt argument

Här är det ärliga affärsperspektivet: en betydande andel av befolkningen lever med någon form av funktionsnedsättning — syn, hörsel, motorik eller kognition — och andelen växer i takt med att befolkningen åldras. Äldre gäster, som ofta har både pengar och tid att äta ute, är de som drabbas hårdast av liten text, dålig kontrast och krångliga formulär. Att göra sajten tillgänglig är inte välgörenhet — det är att inte aktivt stänga ute betalande gäster.

WCAG 2.1 AA förklarat på vanlig svenska

WCAG — Web Content Accessibility Guidelines — är den internationella standarden för webbtillgänglighet, framtagen av W3C. Den har tre nivåer: A (grundläggande), AA (den nivå lagar hänvisar till) och AAA (högsta, svår att nå överallt). Här är vad AA betyder i praktiken för en restaurangsajt, utan tekniska termer i onödan.

1. Möjlig att uppfatta — alla ska kunna ta till sig innehållet

• Tillräcklig kontrast: vanlig text ska ha kontrasten minst 4,5:1 mot bakgrunden (3:1 för stor text). Ljusgrå text på vit bakgrund — restaurangsajters vanligaste designmiss — klarar det inte.
• Alt-texter för bilder: bilder som förmedlar information (till exempel en bild på veckans meny) ska ha en beskrivande text som skärmläsare läser upp. Rent dekorativa bilder ska markeras som just dekorativa.
• Ingen information enbart i färg: "de röda rätterna innehåller nötter" fungerar inte för färgblinda. Använd text eller symboler också.
• Text ska gå att förstora: sajten ska fungera när texten förstoras till 200 procent, utan att innehåll försvinner eller överlappar.

2. Hanterbar — alla ska kunna använda sajten

• Tangentbordsnavigering: allt — menyer, bokningsformulär, bildspel — ska gå att använda med enbart tangentbordet (Tab, Enter, piltangenter).
• Synlig fokusmarkering: det ska synas vilket element som är markerat när man tabbar sig fram.
• Inga tidsfällor: innehåll som försvinner automatiskt (roterande bildspel, popup-erbjudanden med nedräkning) ska gå att pausa eller stänga.
• Inget blinkande: inget får blinka snabbare än tre gånger per sekund (epilepsirisk).

3. Begriplig — alla ska förstå vad de ska göra

• Tydliga rubriker och struktur: en logisk rubrikordning (H1, H2, H3) så att skärmläsare kan hoppa mellan avsnitt.
• Begripliga formulär: varje fält ska ha en tydlig etikett, och felmeddelanden ska förklara vad som är fel och hur det rättas ("Ange telefonnummer med riktnummer" istället för "Ogiltig inmatning").
• Konsekvent navigation: menyn ska se likadan ut och fungera likadant på alla sidor.
• Rätt språk deklarerat: sidans språk ska anges i koden så att skärmläsare använder rätt uttal.

4. Robust — tekniken ska hålla

Koden ska följa vedertagna standarder så att den fungerar med hjälpmedel som skärmläsare, nu och i framtiden. I praktiken: använd riktiga HTML-element (knappar ska vara <button>, inte klickbara div:ar) och testa med faktiska hjälpmedel, inte bara i teorin.

De vanligaste bristerna på svenska restaurangsajter

När tillgänglighetskonsulter granskar restaurangsajter dyker samma fel upp gång på gång. Här är de fem vanligaste — och varför just restauranger drabbas.

1. Menyn som bild eller PDF

Det vanligaste felet av alla. Menyn laddas upp som en bild eller en inskannad PDF, vilket betyder att skärmläsare inte kan läsa den alls, att den inte går att förstora utan att bli oläslig, och att Google inte indexerar rätterna. För en synskadad gäst finns menyn i praktiken inte.

2. Ljusgrå text på vit bakgrund

Elegant, minimalistisk design med tunn, ljusgrå text är restaurangbranschens favoritsynd. Den klarar sällan kontrastkravet 4,5:1. Testa själv: kan du läsa texten i solljus på mobilen? Om inte, kan en stor del av dina äldre gäster inte heller.

3. Bokningsformulär som bara fungerar med mus

Datumväljare och tidsslots byggda som klickbara element utan tangentbordsstöd. Gäster som navigerar med tangentbord — eller med många hjälpmedel — kan inte slutföra bokningen.

4. Bilder utan alt-texter

Stämningsbilderna från matsalen och rätterna saknar beskrivningar. För seende gäster spelar det ingen roll, men för skärmläsaranvändare blir bilderna tomma luckor — eller ännu värre, upplästa filnamn som "IMG_4829.jpg".

5. Otydliga länkar och knappar

"Klicka här", "Läs mer", "Boka" utan sammanhang. En skärmläsaranvändare som hoppar mellan länkar hör bara en lista av "klicka här" utan att veta vart de leder. Länkar ska beskriva sitt mål: "Boka bord för fredag", "Se lunchmenyn".

Menyn: den största tillgänglighetsfällan

Menyn förtjänar ett eget avsnitt, för den är både den mest besökta sidan på restaurangsajter och den mest misshandlade ur tillgänglighetssynpunkt.

Så ska en tillgänglig meny se ut

• Vanlig HTML-text, inte bild eller PDF. Varje rätt som rubrik eller listobjekt, priset som text bredvid.
• Logisk struktur: kategorier som rubriker (Förrätter, Varmrätter, Desserter), rätter under dem. Då kan skärmläsare hoppa direkt till "Desserter".
• Allergeninfo som text vid varje rätt eller i en tydlig nyckel — inte som en separat PDF.
• Tillräcklig textstorlek: minst 16 px brödtext, och den ska tåla 200 procents förstoring.
• Priser i text, inte inbakade i en bild.

Bonus: en meny som HTML-text är också bättre för Google. Rätterna indexeras, ni kan dyka upp på sökningar som "toast skagen södermalm" och sidan laddar snabbare på mobilen. Tillgänglighet och SEO går hand i hand här — det är samma åtgärd som ger båda effekterna. Läs mer om menyformatets alla fallgropar i vår guide om PDF-menyns problem.

Vad gör man med den gamla PDF-menyn?

Släng den inte nödvändigtvis — vissa gäster vill skriva ut menyn. Men den ska vara ett komplement till HTML-menyn, inte ersättningen. Och om PDF:en ska finnas kvar: se till att den är en riktig text-PDF (inte inskannad bild), med rubrikstruktur och alt-texter. En inskannad menybild sparad som PDF är det sämsta av två världar.

Bokning och formulär som alla kan använda

Bokningsflödet är sajtens viktigaste funktion — och den plats där tillgänglighetsbrister kostar mest, eftersom varje misslyckad bokning är en förlorad intäkt.

Checklista för ett tillgängligt bokningsformulär

• Etiketter på alla fält. "Namn", "Telefon", "Antal gäster", "Datum" ska stå som riktiga etiketter — inte bara som grå placeholder-text inuti fältet som försvinner när man börjar skriva.
• Tangentbordsnavigering hela vägen. Tabba er igenom formuläret: går det att välja datum, tid och antal gäster utan mus? Kalenderwidgets är de vanligaste bovarna.
• Tydliga felmeddelanden. När något blir fel ska meddelandet säga vilket fält det gäller och hur felet rättas — och det ska läsas upp av skärmläsare. "Ogiltig inmatning" duger inte.
• Bekräftelse som går att uppfatta. Efter bokningen ska en tydlig bekräftelse visas — inte bara en färgförändring eller en liten ikon. Gärna också som mejl eller SMS.
• Inga tidspressade steg. Om bokningen har en tidsgräns ("du har 5 minuter på dig") ska det gå att förlänga eller stänga av den.

De flesta moderna bokningssystem har byggt in mycket av detta — men det måste vara aktiverat och testat i just er installation. När ni jämför bordsbokningssystem, fråga leverantören uttryckligen om WCAG-stöd och be om en demonstration med tangentbordsnavigering.

Telefonnumret är också tillgänglighet

Det enklaste tillgänglighetstricket av alla: ett tydligt, klickbart telefonnummer högt upp på varje sida. Gäster som inte kan eller vill använda formuläret ska alltid kunna ringa. Det är ingen ersättning för ett tillgängligt formulär, men det är en livlina som kostar en rad kod.

Så testar du sajten själv — fem gratis metoder

Du behöver ingen dyr konsult för att hitta de flesta bristerna. Avsätt en timme och gå igenom de här fem testen:

1. Lighthouse i Chrome (5 minuter)

Öppna er sajt i Chrome, högerklicka, välj "Inspektera", gå till fliken Lighthouse och kör en rapport med kategorin Tillgänglighet. Ni får en poäng av 100 plus en konkret lista på fel — till exempel "knappar saknar tillgängliga namn" eller "bakgrunds- och förgrundsfärger har inte tillräcklig kontrast". Sikta på 90+.

2. Tangentbordstestet (15 minuter)

Lägg undan musen. Tabba er igenom hela sajten: meny, bokningsformulär, kontaktformulär. Ser ni alltid var fokus är? Går allt att aktivera med Enter? Fastnar ni någonstans? Det här testet avslöjar fler allvarliga fel än något automatiskt verktyg.

3. Zoomtestet (5 minuter)

Förstora sidan till 200 procent (Ctrl/Cmd + plus). Försvinner innehåll? Överlappar text? Hamnar menyn utanför skärmen? Många äldre gäster surfar permanent förstorat.

4. Kontrastkontrollen (10 minuter)

Ta era vanligaste textfärger mot deras bakgrunder och kör dem genom ett kostnadsfritt kontrastverktyg på nätet (sök "contrast checker"). Kravet: minst 4,5:1 för vanlig text. Gör om det för knappar, formulärfält och menyer.

5. Skärmläsarlyssningen (20 minuter)

Både Windows (Skärmberättaren), Mac (VoiceOver) och Android/iPhone har inbyggda skärmläsare. Släck skärmen mentalt: stäng ögonen och lyssna er igenom startsidan, menyn och bokningsflödet. Förstår ni var ni är och vad ni kan göra? Det är en ögonöppnare — bokstavligen.

Vad kostar det att fixa tillgängligheten?

Kostnaden beror på utgångsläget. En modern, välbyggd sajt behöver oftast bara justeringar; en gammal sajt med bildmenyer och skräddarsydda formulär kan behöva mer. Uppskattade priser för 2026:

Jämför det med alternativet: en ny, tillgänglig sajt från början. Om er sajt ändå är mogen för en uppdatering — läs om tecknen på att hemsidan behöver förnyas — är det nästan alltid billigare att bygga rätt från start än att lappa en otillgänglig sajt i efterhand. I vår guide om vad en restauranghemsida kostar ser du hur tillgänglighet passar in i totalbudgeten.

Ett räkneexempel för perspektiv: om tio gäster i veckan ger upp bokningen på grund av en krånglig sajt, och varje gäst i snitt spenderar 400 kronor, förlorar ni 16 000 kronor i månaden. Då är en åtgärd på 10 000 kronor betald på under tre veckor.

Din handlingsplan: från rött till grönt på 30 dagar

Här är en realistisk plan som de flesta restauranger kan genomföra utan att anlita en byrå:

Vecka 1: Kartlägg (2–3 timmar)

• Kör Lighthouse-testet och skriv ner alla tillgänglighetsfel.
• Gör tangentbordstestet på startsidan, menyn och bokningsflödet.
• Lista era tre värsta brister — det är dem ni börjar med.

Vecka 2: Menyn och texterna (en eftermiddag)

• Publicera menyn som vanlig HTML-text. Ta bort eller nedgradera PDF:en till komplement.
• Skriv alt-texter för alla bilder — börja med de viktigaste (maträtter, lokalen, personalen).
• Justera de värsta kontrastproblemen: mörkare brödtext, tydligare knappar.

Vecka 3: Formulär och navigation (några timmar)

• Se till att alla formulärfält har riktiga etiketter.
• Skriv om "Klicka här"-länkar till beskrivande länkar.
• Lägg till ett tydligt, klickbart telefonnummer högst upp på alla sidor.
• Testa bokningsflödet med tangentbord igen — och be en vän testa med skärmläsare.

Vecka 4: Rutiner för framtiden (1 timme)

• Bestäm vem som ansvarar för att nya bilder får alt-texter och att menyn uppdateras som text.
• Lägg in en halvårsvis påminnelse: kör Lighthouse igen och kontrollera att inget glidit tillbaka.
• Dokumentera kort vad ni gjort — det är guld värt om frågan om tillgänglighet någonsin kommer upp.

Efter 30 dagar har ni åtgärdat de brister som påverkar flest gäster. Perfekt blir det sällan — tillgänglighet är ett pågående arbete — men skillnaden mellan "otillgänglig" och "fungerar för nästan alla" är ofta bara några veckors fokuserat arbete. Se också till att mobilanpassningen sitter, eftersom de flesta tillgänglighetsproblem slår hårdast på små skärmar.

Vanliga frågor