©️De juris est AB publicerad 2025-07-09 av Dennis Ivarsson, 0703 - 26 26 56
Detta är en ögonblicksbild av webbplatsen kicks.se den 2025-07-09 kl. 16:44.
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. Kicks.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.
Sidan presenterar sig – åtminstone sett genom de 292 tabb-bara noder som loggen fångar – som en mycket lång “kedja” av återkommande produktkort, kampanjbrickor och ikoniknappar. Den visuella upplevelsen är luftig och block-orienterad, men i den kod som styr tangentbords-flödet blir strukturen mer tung och repetitiv, och det påverkar flera centrala WCAG-områden.
Rubrikhierarkin är svår att följa programmatiskt. Den enda faktiska heading-tagg som dyker upp i tabb-loggen är några <h2> som ligger inuti helt klickbara kampanjrutor – ankartaggar som dessutom saknar egen länktext och därför hämtar sitt namn från de inre rubrikerna kicks-tabable. Något tydligt <h1> återfinns inte i den loggade koden, och därmed blir rubrikträdet osäkert för skärmläsare (WCAG 2.2 – 2.4.6 Headings and Labels). Risken är att användaren förlorar möjligheten att “hoppa” mellan sektioner med rubrikkommando och att sidan bryter principen Info and Relationships (1.3.1).
Loggen visar ett rent, positivt tabIndex 0 på samtliga kontroller, vilket innebär att fokus-ordningen följer DOM-ordningen och alltså i stort sett speglar den visuella ordningen kicks-tabable. Det är bra för 2.4.3 Focus Order och 2.1.1 Keyboard. Problemet uppstår i mängden: varje produktkort innehåller minst tre separata stopp (favorit-knappen, produkten som länk, varukorgs-knappen). När samma mönster upprepas trettio gånger på rad, tvingas en ren tangentbordsanvändare genom långt över hundra knappar innan sidan ens når nästa sektion. Här kolliderar man med 2.4.1 Bypass Blocks (ingen “Hoppa till innehåll”-länk) och med den nya WCAG 2.4.11 Focus Not Obscured (Minimum) om karusellen scrollar produkterna i sidled.
Flera ankartaggar är helt tomma på synlig text; de förlitar sig på alt-texten hos inbäddade bilder för att få ett tillgängligt namn – t.ex. loggor under rubriken “Nya varumärken” där länken är tom men den inre <img alt="Ecooking"> står för namnet kicks-tabable. Det fungerar, men gör sidan sårbar: om alt-texten glöms bort får länken inget namn (1.1.1 Non-text Content, 4.1.2 Name, Role, Value). I andra fall finns varken alt-text eller länktext, vilket ger helt anonyma kontroller och bryter 2.4.4 Link Purpose (In Context).
Det är positivt att alla klickbara ikoner verkligen är <button> (exempel: “Lägg till i favoriter” har en riktig knapp med programmatiskt namn) EN_301_549v030201p. Samtidigt bäddas varje knapp in i flera lager av dekorativa <div>, <span> och SVG-<path>-element. Det påverkar normalt inte skärmläsare – eftersom endast ytterhöljet är fokuserbart – men det gör DOM-trädet tungt och kan försvåra underhåll samt bryta 1.3.1 om en utvecklare senare lägger skriptad funktionalitet i de inre lagren utan korrekt ARIA.
Ett större semantiskt problem är att sidhierarkin saknar landmärken. Inslag som navigation, huvudinnehåll och sidfot är byggda med anonyma <div> snarare än <header>, <nav>, <main> och <footer>. Därmed mister hjälpmedel de “spela-huvudroller” WCAG rekommenderar via 1.3.1 och 2.4.1 Bypass Blocks.
Nästan hälften av de 292 fokuspunkterna är upprepningar av samma två kontroller: “Lägg till i favoriter” och “Flera varianter finns…”. Det innebär många likalydande etiketter i rad, vilket blir monoton lyssning i skärmläsare och gör det svårt att snabbt avgöra var man befinner sig. Eftersom länkarna ofta saknar extra kontext – enbart “Se mer” eller “Shoppa här” – hamnar man även här i konflikt med 2.4.4 Link Purpose. Ett sätt att minska brus är att gruppera variant-valen i en dialog som öppnas med ett enda tabb-stopp, eller göra favorit-funktionen till en “toggle” som inte tar eget tabb-fokus förrän man aktivt öppnar produktkortet.
Om dessa justeringar genomförs uppfyller startsidan bättre kärnkraven i WCAG 2.2 – framför allt 2.1.1 Keyboard, 2.4.3 Focus Order, 2.4.4 Link Purpose, 2.4.6 Headings and Labels, 4.1.2 Name, Role, Value – och blir därmed också mer robust mot EN 301 549-testningen som offentlig sektor och större företag i EU ställer.