Detta är en artikel med syfte att belysa vilka grundläggande aspekter av en webbplats som kommer att stå i fokus i samband med tillsyn enligt den nya tillgänglighetslagen (LPTT) som trädde ikraft i Sverige den 28 juni 2025. strongerlabel.com/se är en webbplats för e-handel av större storlek. Nedan följer korta grundläggande observationer avseende tillgänglighet och därefter en lista med alla tabb-bara element, som vid muspekning fokuseras på bilden i fönstrets högra del. Detta gränssnitt är framtaget av De juris est AB och används i den inledande fasen när vi bistår med rådgivning för att uppfylla kraven i tillgänglighetslagen. Läs mer om hur verktyget används här. Det bör påpekas att just webbplatser för handel där många produkter trängs är särskilt utmanande ur ett tillgänglighetsperspektiv. Dock får tillsynsmyndigheten PTS antas prioritera denna typ av sidor hos större aktörer som dagligen tilldrar sig en betydande andel av konsumenttrafiken i Sverige.
Sett ur tangentbordets perspektiv bildar Strongers startsida en imponerande, men samtidigt tung, kedja av över 240 tabb-bara noder. Varje innehållsblock – från kampanjbanderoller till produktkort med storleksval – är rikt på visuella signaler, men i DOM-strukturen översätts luften och layouten till djupt nästlade containrar, många överlappande länkar och ett fokusflöde som snart tappar den linjära röda tråden.
Ingen av sidans stora rubriker – varken “SUMMER SALE”, “Heat Wave” eller “Nyheter” – är märkt med <h1>–<h6>. De ligger i stället som rena <div>- eller <span>-element, ibland rentav inuti klickbara länkar. Hjälpmedel som navigerar via rubriklistor möts därför av tystnad. Uteblivna rubriktaggar bryter både den semantiska hierarkin (WCAG 1.3.1 Info and Relationships) och gör det svårare för användaren att hoppa mellan block med kommando för nästa rubrik (2.4.6 Headings and Labels).
Efter den inledande kampanjlänken flyttas fokus till en osynlig overlay-länk som täcker hela hero-bilden. Därefter hamnar det på en <section tabindex="0"> innan själva knappen “Shop Now” blir nåbar. Samma mönster återkommer i kategorirutnätet och, ännu tydligare, i produktlistan: fokus stannar först på ett dekorativt wrapper-element, måste sedan passera storleksknapparna XXS–XXL och ett tomt “lägg i korg”-button innan länken till produktsidan blir aktiv. Resultatet är ett fokusflöde som varken följer visuell ordning (2.4.3 Focus Order) eller är rimligt effektivt för tangentbordsanvändare (2.1.1 Keyboard Accessible).
I hero-sektionen ligger en fullbredds <a> runt bilden och ytterligare en <a> runt text och knapp. Liknande dubbleringar finns i produktkorten, där namnet, bilden och ett överliggande “quick-view”-overlay samtliga är separata länkar som delvis överlappar varandra. När skärmläsaren möter två ankare på samma koordinat blir det ofta oklart vilket som ska presenteras; ibland hör användaren bara “länk, tom” eftersom länken saknar både text och aria-label. Detta strider mot 2.4.4 Link Purpose och 4.1.2 Name, Role, Value.
I stället för att använda nämnda <header>, <nav>, <main> och <footer> är nästan allt inpackat i generiska <div>-element med extraroller som “region” eller “group”. Semantiska landmärken hade gett gratis tillgänglighet – de är igenkända av alla hjälpmedel utan extra attribut och minskar risken för motstridiga ARIA-definitioner (4.1.1 Parsing).
Ett enda produktkort kan omfatta femtio till sextio DOM-noder: <picture> med flera tomma <source>, ett <img>, ett overlay-ankare, upp till sju storleksknappar, ett “lägg i korg”-button och ytterligare ett ankare runt namn och pris. Gånger tjugofem produkter innebär det hundratals extra tabb-steg som i praktiken sällan leder till unik funktionalitet. Den täta inbäddningen bromsar dessutom hjälpmedel som måste tolka varje <div>, <span>, <svg> och <path> innan de hittar riktig information.
<h1> och sektionstitlar <h2>; rama in huvuddel och footer med <main> och <footer>.tabindex från dekorativa wrapper-element, slå ihop överlappande länkar och flytta eventuell storleksväljare till produktsidan.aria-label som återger deras syfte.<img> får meningsfull alt.Genom dessa justeringar uppfyller startsidan betydligt fler nyckelkrav i WCAG 2.2 – särskilt 1.1.1, 1.3.1–1.3.2, 2.1.1, 2.4.3–2.4.7, 2.4.10 och 4.1.2 – och närmar sig samtidigt den tekniska nivån som krävs för att klara EN 301 549-audits i EU.