Checklista för tillgänglig utveckling

Status:

Använd checklistan när du utvecklar på någon av våra webbplatser. Den hjälper dig att säkerställa att det du utvecklar är tillgängligt.

Kodstruktur och semantik

Använd semantisk HTML för en korrekt struktur. Landmärken och element ska användas på korrekt sätt för att ge innehållet tydlig struktur.
Läs mer om uppmärkning av landmärken på www.w3.org Länk till annan webbplats.
Rubriker ska ha en logisk herarki (<h1> till <h6>) om de är fast uppsatta i moduler där redaktör inte har möjlighet att påverka herarkin.
Märk upp listor på korrekt sätt med (<ul>, <ol> och <dl>) för grupperat innehåll istället för att bara använda <div>.
Formulär skall vara omslutna av <form>-elementet och respektive inputfält ska vara omslutet av fieldset samt vara kopplad mot en förklarande <label>.

Använd native HTML-element där det är möjligt (<button>, <select>, <input>) eftersom de har en inbyggd tillgänglighet. Se till att ingen kod blockerar den naturliga funktionaliteten.
Om du bygger egna komponenter (till exempel modaler eller dropdowns), se till att de:
- har korrekt fokusmarkering och fokusstyrning – markeringen ska vara tydlig och fokusnavigeringen ska gå i en logisk ordning
- har korrekta ARIA-roller och attribut där det är nödvändigt
- kan styras med tangentbord (Tab, Enter, Esc, etc.).
I komponenter som uppdaterar innehåll efter sidladdning eller efter att användaren interagerat med komponenten ska detta uppmärksammas för skärmläsare med hjälp av aria-live och aria-atomic.
När innehåll visas/döjs (exempelvis modaler och dropdowns), hantera fokusflytt korrekt – till exempel genom att sätta fokus på modalen när den öppnas och återställ när den stängs.
Länkar eller knappar som endast innehåller grafiska element skall ha en aria-label som förklarar vad det interaktiva elementet gör.

Använd label-element kopplade till formulärfält (<label for="input-id">) , inte bara visuella placeringar.
Ge beskrivande felmeddelanden som är kopplade till fältet med aria-describedby.
Markera obligatoriska fält tydligt – både visuellt och med attribut (required, aria-required).
Kontrollera: ges tydlig feedback vid fel i formulär?
- Inputfält ska markeras med en tydlig ram och kompletteras med ett förklarande felmeddelande.
- Felmeddelandet ska vara beskrivande och förklara exakt vad som är fel. Exempel: varna om fältet för e-postadress är tomt eller om formatet på adressen är felaktigt.
- Fel får inte endast framgå genom färg. Använd alltid text eller symboler som stöd så att informationen blir tillgänglig även för färgblinda.
- Vid fel ska fokusmarkeringen automatiskt hamna på det första fält där felet uppstått.
- Felmeddelanden ska visas utan att formuläret rensas. Användaren ska kunna korrigera fel utan att behöva fylla i allt på nytt.

Alla meningsbärande bilder ska ha en beskrivande alt-text. Används bilder i moduler ska det hämtas från bilden.
Dekorativa bilder ska ha tom alt-text för att ignoreras av skärmläsare.
Ikoner som används som knappar eller länkar ska ha textalternativ eller aria-label.

Färgkontraster mellan textfärg och bakgrundsfärg ska kontrolleras och uppnå tillräcklig kontrastnivå (minst 4:5:1 för normalstor text och 3:1 för stor text).
Undvik att förmedla information enbart med färg – kombinera med text eller ikon för att tydliggöra informationen. Vid utvecklade formulär ska detta ges hög prioritering eftersom WCAG-krav efterlyser visuell feedback med text, färg och ikon vid felmeddelanden. Läs om feedback i formulär på www.w3.org. Länk till annan webbplats.
Använd CSS för att stödja mörkt läge och hög kontrast där möjligt.

Innehåll ska fungera på olika skärmstorlekar och enheter utan att klippa eller blockera innehåll.
Använd relativa enheter (rem, em) istället för fasta pixlar (px) för bättre skalbarhet vid zoom och olika skärmstorlekar.

Semantiska HTML-strukturen ska vara korrekt. Detta testas genom att använda en kod-validator på w3.org Länk till annan webbplats.
Se till att gränssnittet fungerar utan mus (till exempel med tangentbordsnavigering och skärmläsare).
Fokusmarkering ska vara synlig med en ram av 2px där färgkontrasten uppnår en nivå av 3:1.
Använd automatiska tillgänglighetsverktyg
- Wave
- Axe DevTools