©️De juris est AB
Detta är en ögonblicksbild av webbplatsen kristdemokraterna.se den 2025-07-16 kl. 15:50.
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. Kristdemokraterna.se är en betydligt mindre webbplats och för ett helt annat syfte jämfört med de två e-handelsaktörer som också har granskats här; kicks.se och strongerlabel.com/se. 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 till HTML-koden – som avslöjas när de 42 tabb-bara elementen följds i ordning – uppträder alla visuella rubriker som vanliga <div> eller <span> med stilmallar. Därmed saknas den semantiska landmärken som skärmläsare använder för att bygga dokumentöversikter. Resultatet är att en användare som hoppar mellan rubriker (t.ex. med H-tangenten i NVDA) hamnar i ett vakuum; navigeringen sker i stället länk för länk och saknar den övergripande hierarki som WCAG 2.2 SC 1.3.1 och 2.4.6 förutsätter. Sidan upplevs alltså luftig och block-orienterad visuellt, men den underliggande strukturen blir platt och svåröverblickad för hjälpmedel.
Fokusflödet speglar i stort det visuella: logotyp, fem topp-ikoner, hero-CTA, nyhetskort, snabblänkar, fyra åtgärdsknappar, två kampanjbanners och därefter sidfot. Det är bra ur ett designperspektiv och följer andemeningen i SC 2.4.3. Men två centrala knappar – ”Bli medlem här” och ”Skriv dina förslag här” – har satts till tabindex="-1" och är därför osynliga för tangentbordsanvändare. De är dessutom inbäddade i länkar som redan är fokuserbara, vilket gör att funktionalitet både döljs och dupliceras. Det bryter rakt av mot SC 2.1.1 Keyboard och riskerar även fokusfällor (SC 2.1.2) när skärmläsaren försöker tolka dubbelkontrollen.
I båda kampanjblocken finns alltså en länk som omger en knapp. När skärmläsaren landar på länken får användaren höra rubriktexten, men knappen som visuellt lockar till klick går inte att nå. Den dubbla rollen – en <a> inuti vilken det ligger ett <button> – bryter principen i SC 4.1.2 Name, Role, Value: varje interaktiv yta ska ha tydlig roll och ett unikt, programmatiskt namn. Liknande problem finns längst ned på sidan där en PDF-ikon är enda innehållet i en länk utan alt-text; länken saknar således synligt namn och uppfyller inte SC 1.1.1 Non-text Content.
Hela sidan vilar på en ”div- och span-arkitektur” snarare än på <header>, <nav>, <main>, <footer> och ordnade listor. Avsaknaden av aria-landmärken eller semantiska element gör det omöjligt att hoppa mellan huvudregioner med skärmläsarens snabbtangenter. För WCAG 2.2 betyder det att SC 1.3.1 (relationer) och SC 2.4.1 (bypass-block) inte uppfylls; användaren tvingas tabba genom samtliga toppikoner innan hen når huvudmaterialet.
Att en startsida har 42 fokusbara noder är i sig inget hinder. Problemet är snarare balansen: många av dessa noder innehåller ytterligare två–fyra spans eller svg-element som inte bär någon verklig information. Detta sväller DOM-trädet, försvårar underhåll och ökar risken att någon djupt liggande span av misstag blir fokuserbar. När man dessutom bäddar in bildlänkar utan alternativtext eller duplicerar samma suffix ”(länk till annan webbplats, öppnas i nytt fönster)” i varsitt dolt element blir upplevelsen snabbt redundant för skärmläsare och testverktyg.
Färgkontrasterna i topp- och sidfotfältet är goda, men de gula call-to-action-knapparna ligger farligt nära gränsvärdet mot vit bakgrund, vilket riskerar att falla under SC 1.4.3 för användare med nedsatt syn. Ikonknapparna ”Lyssna”, ”Språk” och sociala medier behöver också verifieras mot SC 1.4.11 eftersom enbart en blå ikon mot mörkblå bakgrund kan ge för låg kontrast för icke-textuell grafik.
<div>-rubriker med genuina <h1–h3> och rama in huvuddelen med <main>; lägg till <header> och <footer> eller motsvarande role-attribut.Med dessa justeringar täcker sidan kärnkraven i WCAG 2.2 – framför allt 1.1.1, 1.3.1, 2.1.1, 2.4.1, 2.4.3, 2.4.4, 2.4.6 och 4.1.2 – och står därmed starkare även vid en formell EN 301 549-granskning.