Uppfyller din butikslokaliserare EAA-kraven? En checklista för varumärken med flera platser

Ditt varumärke driver 150 platser i Europa. Du har investerat i en butikslokaliserare, optimerat dina listningar och ser stark organisk besökstrafik. Sedan får du ett formellt meddelande från din nationella handikapporganisation: din butikslokaliserare uppfyller inte tillgänglighetsstandarderna.

Det här är inte hypotetiskt. Det händer nu.

Den europeiska tillgänglighetslagen (EAA) trädde i kraft i juni 2025, och nationella myndigheter i hela EU genomför granskningar, utfärdar meddelanden och utdömer i vissa fall böter. Frankrike, Tyskland, Spanien och Nederländerna har alla inlett aktiv tillsyn, där handikapporganisationer lämnar formella klagomål mot stora detaljhandels- och transportföretag.

Ändå har de flesta varumärken med flera platser inte granskat sina butikslokaliserare mot WCAG 2.2 AA-efterlevnad, den standard EAA kräver.

Den här artikeln förklarar vad EAA-efterlevnad faktiskt innebär för din butikslokaliserare och ger dig en praktisk granskningschecklista.

Den europeiska tillgänglighetslagen: tidslinje och aktuell tillsyn

EAA är ett direktiv som kräver att alla digitala produkter och tjänster som säljs eller drivs på EU-marknaden uppfyller minimistandarder för tillgänglighet. Det gäller för:

• Webbplatser och mobilappar (inklusive butikslokaliserare och lokala landningssidor)
• Självbetjäningsterminaler (kiosker, bankomater)
• E-handelsplattformar
• Mobilapplikationer med väsentlig funktionalitet

Kärnkravet: digitala tjänster måste uppfylla WCAG 2.2 nivå AA-standarderna, den internationella riktmärket för webbtillgänglighet.

Tidslinje för tillsyn

• December 2016: EAA-direktivet publicerat
• 28 juni 2025: Tillsynsdeadline: alla berörda digitala tjänster måste efterleva
• 2025 till idag: Nationella myndigheter genomför granskningar, utfärdar efterlevnadsmeddelanden och inför sanktioner

Tillsynen är redan aktiv. Franska handikapporganisationer har lämnat klagomål mot stora detaljhandelskedjor för butikslokaliserare som misslyckades i tillgänglighetstester. Tyska tillsynsmyndigheter undersöker apptillgänglighet i olika sektorer. Spanien krävde att varumärken genomförde tillgänglighetsgranskningar till början av 2026, en deadline som nu har passerat.

Sanktioner varierar per medlemsstat men konsekvenserna är verkliga. Bristande efterlevnad kan leda till:

• Böter upp till 25 000 € per överträdelse i vissa länder
• Obligatoriska åtgärdsorder med strikta tidsfrister
• Anseendeskador och uteslutning från offentlig upphandling
• Tillgänglighetsstämningar, som ökar i Europa

Vad WCAG 2.2 AA faktiskt kräver för butikslokaliserare

WCAG 2.2 bygger på fyra principer: möjlig att uppfatta, hanterbar, begriplig och robust (POUR). Här är vad var och en innebär i praktiken för en butikslokaliserare.

Möjlig att uppfatta: användare måste kunna ta till sig ditt innehåll

Vad detta innebär för butikslokaliserare:

• Textalternativ för bilder: Varje kartikon, butiksbilder eller visuellt element måste ha alternativtext som en skärmläsare kan tolka.
• Färgkontrast: Text måste ha ett kontrastförhållande på 4,5:1 mot bakgrunden (WCAG-krav), och 3:1 för stor text (18pt+).
• Video och multimedia: Om din butikslokaliserare innehåller videoinnehåll måste det inkludera undertexter och ljudbeskrivningar.
• Fel- och statusindikatorer: Dessa får inte enbart förlita sig på färg. Använd text, ikoner eller andra visuella ledtrådar.

Vanlig brist: En kartnål är röd för att visa “öppet nu”. En färgblind användare kan inte skilja den från andra nålar. Åtgärd: lägg till en synlig etikett (“Öppet nu”) eller en sekundär ikon.

Hanterbar: användare måste kunna navigera och styra

Vad detta innebär för butikslokaliserare:

• Tangentbordsnavigering: Varje interaktivt element måste vara tillgängligt via Tab, Enter och piltangenter. Ingen mus krävs.
• Hopplänkar: Användare måste kunna hoppa över repetitivt navigationsinnehåll för att direkt nå sökfältet.
• Fokusindikatorer: När en användare tabbar till en knapp eller ett inmatningsfält måste det vara visuellt tydligt vilket element som är i fokus.
• Tryckytor på mobil: Klickbara element måste vara minst 24×24 pixlar med tillräckligt avstånd.

Vanlig brist: En kartvy stöder muszoom och panorering men tangentbordsanvändare kan inte zooma. Åtgärd: lägg till tangentbordsgenvägar (+ och - för zoom, piltangenter för panorering).

Begriplig: användare måste förstå ditt innehåll

Vad detta innebär för butikslokaliserare:

• Tydligt språk: Undvik fackjargong. “Begränsa sökningen” är tydligare än “förfina din platssökning”.
• Konsekvent navigering: Om filter visas i en sidopanel på skrivbordet måste de vara lika tillgängliga på mobil.
• Märkta formulärfält: Varje sökfält och filter måste ha en synlig, kopplad etikett.
• Felmeddelanden: Visa ett förklarande meddelande, inte bara en röd ram.

Vanlig brist: Ett filter märkt “Servicetyper” utan förklaring av tillgängliga alternativ. Åtgärd: använd “Filtrera efter tjänster (parkering, rullstolsanpassad, WiFi)”.

Robust: din butikslokaliserare måste fungera med hjälpmedel

Vad detta innebär för butikslokaliserare:

• Semantisk HTML: Använd rätt HTML-element. Knappar ska vara <button>, inte <div onclick>.
• ARIA-etiketter: Där visuellt sammanhang inte räcker, använd ARIA-attribut. En filterknapp som expanderar en panel behöver aria-expanded="true".
• Formulärkopplingar: Inmatningsfält måste vara programmatiskt kopplade till sina etiketter.
• Live-regioner: När din lokaliserare dynamiskt laddar nya resultat måste skärmläsare meddelas via aria-live.

Vanlig brist: En “Ladda fler”-knapp laddar fler butiker men skärmläsare meddelas inte. Åtgärd: använd aria-live="polite" på resultatbehållaren.

Vanliga tillgänglighetsbrister i butikslokaliserare

Baserat på EAA-tillsynsaktivitet det senaste året är dessa de vanligaste problemen:

1. Kartinteraktioner är inte tillgängliga via tangentbord

Musanvändare kan klicka, dra och scrolla på en karta. Tangentbordsanvändare kan ofta inte det. Detta är den vanligast citerade bristen i EAA-granskningar.

Åtgärd: Lägg till tangentbordsgenvägar: + och - för zoom, piltangenter för panorering. Dokumentera genvägarna i hjälptext.

Test: Koppla bort musen. Kan du genomföra en komplett butikssökning enbart med tangentbordet?

2. Kartnålar saknar textalternativ

Åtgärd: Lägg till textetiketter för varje nåltillstånd (“Öppet nu”, “Stängt”). Använd ikoner vid sidan av färg.

3. Sökfilter saknar tydliga etiketter

Åtgärd:

<label for="service-filter">Filtrera efter tjänster (parkering, rullstolsanpassad, WiFi)</label>
<select id="service-filter">
  <option>Parkering</option>
  <option>Rullstolsanpassad</option>
  <option>WiFi</option>
</select>

4. Saknade eller otillräckliga fokusindikatorer

Åtgärd:

:focus { outline: 3px solid #0066cc; }

5. Mobilbutiksinfo bakom otillgänglig navigering

Åtgärd: Säkerställ att alla kontroller uppfyller minimistorleken 24×24 pixlar. Testa tangentbordsnavigering på mobil med ett anslutet Bluetooth-tangentbord.

6. Felmeddelanden använder enbart färg

Åtgärd: Lägg till feltext: “Ange ett giltigt postnummer (5 siffror)”. Använd aria-live="assertive".

7. Öppettider visas som bilder

Åtgärd: Använd HTML-text för alla tider: <time>10:00</time>–<time>18:00</time>.

Din EAA-granskningschecklista

Kritiskt: Åtgärda omedelbart

• Tangentbordsnavigering: Kan hela butikslokaliseraren användas enbart med Tab, Shift+Tab, Enter och piltangenter?
• Fokusindikatorer: Finns det en tydlig visuell indikator när interaktiva element är i fokus?
• Semantisk HTML: Är knappar <button>, länkar <a> och formulärfält korrekt märkta?
• Färgkontrast: Uppfyller all text och alla interaktiva element ett kontrastförhållande på 4,5:1?
• Formuläretiketter: Har varje inmatningsfält ett synligt, kopplat <label>-tagg?
• Alternativtext för bilder: Har butikbilder, ikoner och kartor beskrivande alternativtext?
• Felmeddelanden: Kommuniceras ett fel med text, inte bara färg?

Högt: Åtgärda inom 30 dagar

• Tryckytor på mobil: Är klickbara element minst 24×24 pixlar med tillräckligt avstånd?
• Karttillgänglighet: Kan tangentbordsanvändare zooma och panorera? Har kartnålar textetiketter?
• Live-regionsuppdateringar: Meddelas skärmläsare när innehåll laddas dynamiskt?
• Konsekvent navigering: Är layouten konsekvent på skrivbord, surfplatta och mobil?
• ARIA-etiketter: Har komplexa interaktiva element de ARIA-attribut som behövs?
• Hopplänkar: Kan användare hoppa över repetitiv navigering?

Medel: Plan för nästa kvartal

• Undertexter för video: Finns undertexter för videoinnehåll?
• Sidspråk: Är sidans primärspråk deklarerat i HTML (<html lang="sv">)?
• Rubrikstruktur: Används rubriker i logisk ordning (H1, H2, H3)?
• Formulärvalidering: Ger formuläret tillgänglig realtidsvalidering?

Testa din butikslokaliserare

Automatiserad testning (första genomgång)

Dessa gratisverktyg fångar ungefär 30 till 40 % av tillgänglighetsproblemen:

• WAVE-webbläsartillägg: Markerar fel, kontrastproblem och saknad alternativtext direkt på sidan
• Lighthouse (Chrome DevTools): Inkluderar ett tillgänglighetstest med prioriterade rekommendationer
• Axe DevTools: Heltäckande kontroll med detaljerad åtgärdsvägledning

Manuell testning (obligatorisk)

1. Enbart tangentbordstest: Koppla bort musen. Kan du genomföra en komplett butikssökning enbart med tangentbordet?
2. Skärmläsartest: Använd NVDA (Windows) eller VoiceOver (Mac) och navigera genom lokaliseraren.
3. Färgblindhetstestning: Använd en simulator som Coblis.
4. Zoomtest: Zooma webbläsaren till 200 %. Fungerar layouten fortfarande?

EAA-efterlevnad och lokala landningssidor

EAA gäller inte bara butikslokaliserare. Den täcker hela den digitala kundresan, inklusive lokala landningssidor och platsspecifikt webbinnehåll. Om ditt arbete med lokal listningshantering genererar platssidor automatiskt måste tillgänglighetsefterllevnad byggas in i mallen.

EAA-efterlevnad hänger också ihop med GDPR-kompatibla lokala SEO-metoder: båda ramverken kräver att varumärken behandlar digital infrastruktur som något som betjänar alla användare.

Tillgänglighet som konkurrensfördel

EAA-kompatibla butikslokaliserare presterar bättre på standardmarknadsföringsmått. De har lägre avvisningsfrekvens, högre slutförandegrad för butikssökningar och bättre mobilprestanda.

Varumärken som bygger för tillgänglighet når en bredare publik, inklusive de 15 till 20 procent av användarna med någon form av funktionsnedsättning och det växande segmentet äldre användare. De minskar också juridiska och regulatoriska risker på en marknad där tillsynen ökar år för år.

Boka en demo

Källor

1. Europeiska tillgänglighetsdirektivet 2019/882. Officiell EUR-Lex juridisk text
2. WCAG 2.2 riktlinjer. World Wide Web Consortium tillgänglighetsstandarder
3. Web Accessibility Initiative (WAI). W3C:s tillgänglighetsresurscenter
4. WCAG 2.2 förstå: Tangentbord. Detaljerad vägledning om tangentbordstillgänglighet
5. WCAG 2.2 förstå: Kontrastminimum. Krav på färgkontrast
6. WAVE tillgänglighetskontroll. Gratis webbläsartillägg
7. Lighthouse tillgänglighetstest. Chrome DevTools
8. Coblis färgblindhetssimulator. Visuellt testverktyg
9. ARIA Authoring Practices Guide. W3C-vägledning om ARIA