Tillgänglighetsanpassad funktionalitet.

Teknisk tillgänglighet handlar om att bygga digitala tjänster på ett sätt som fungerar för alla. En e-handelssajt behöver vara tekniskt korrekt uppbyggd för exempelvis konsekvent interaktion, tangentbordsåtkomst och kompatibilitet med olika hjälpmedel. En robust teknisk grund gör designen mer hållbar, förbättrar prestandan och minskar både framtida kostnader och teknisk skuld.

LPTT hänvisar till standarden EN 301 549 som omfattar bland annat WCAG A+AA och ett antal tekniskt detaljerade krav för funktionalitet, kompatibilitet och robusthet.

Semantisk kodbas

• Använd rätt HTML element för rätt uppgift. Semantiken gör det begripligt för hjälpmedel och skapar ett stabilt gränssnitt.

• Grundregeln är att använda semantisk HTML först. ARIA ska endast användas när HTML inte räcker.

• Använd rubrikstruktur <h1> till <h6> i rätt ordning.

• Knappar är <button> och länkar är <a href> som leder någonstans.

• Listor är <ul> eller <ol> inte text med streck.

• Formulär behöver programmatisk koppling mellan label, input och felmeddelanden för att fungera med skärmläsare och röststyrning.

• Använd HTML‑landmärken för att strukturera sidan så hjälpmedel kan navigera effektivt.

  
  
  

Tangentbordsstöd och interaktioner

• Se till att ha en logisk och intuitiv tab-ordning.

• Säkra fokusordning och ha synligt fokus med tydliga fokusmarkeringar.

• Allt som går att klicka på ska kunna styras med tangentbord.

• Komponenter ska vara användbara med piltangenter, tab, enter och escape.

• Ha tydliga felmeddelanden i formulär.

• Komponenter så som dropdowns, flikar, filter och modaler ska alltid bete sig likadant med en tydlig logik.

• Modaler ska låsa fokus inom sig tills de stängs och sedan returnera fokus till knappen/länken som öppnade modalen.

• Lägg till “Hoppa till innehåll” länk som blir synlig vid tabbnavigering. Särskilt viktigt på e‑handel där headers ofta är stora och komplexa.

  
  
  

Designfunktioner

• Kunna förstora text upp till 200% utan att innehåll försvinner eller överlappar.

• Innehåll och komponenter ska fungera utan horisontell scroll ner till 320px bredd.

• Tydliga klickytor och tillräcklig träffyta, rekommenderad minsta storlek, 44 x 44px.

• Länkar och knappar är tydligt markerade även utan färg.

• Tillstånd ska inte bara märkas med färg, använd ikon, kontur, text eller form också.

• Interaktiva ikoner behöver kompletteras med text som är synlig eller dold.

• Användare ska kunna pausa, stoppa eller dölja rörliga element som autoplayande bildspel eller animationer.