Skapa tillgängligt innehåll med HTML och stilmallar

Du som offentlig aktör ökar chansen att information på din webbplats presenteras korrekt oavsett mottagarens verktyg, genom att märka upp sidans innehåll på rätt sätt i html-koden. Använd html för att märka upp betydelse och stilmallar (CSS – Cascading Style Sheets) för att styra hur något ska se ut, exempelvis färger, textstorlekar och var på sidan något ska placeras.

• Ange i kod vad sidans olika delar har för roll (webbriktlinjer.se) Länk till annan webbplats.
• Använd stilmallar för att separera presentationen från innehållet (webbriktlinjer.se) Länk till annan webbplats.

Meningsfull ordning på innehållet

Utforma innehållet på ett sätt som bevarar den avsedda betydelsen för alla användare, även om ordningen skulle förändras på grund av exempelvis en mindre skärm eller förstorning.

Presentera innehållet i en meningsfull ordning för alla (webbriktlinjer.se) Länk till annan webbplats.

Tabeller

Tabeller kan vara svåra att tolka – både för användare med skärmläsare och för andra. Låt html-koden uttrycka vad tabellens olika delar innehåller, och hur de hänger ihop.

Skriv rubriker till tabeller (webbriktlinjer.se) Länk till annan webbplats.

Listor

Märk upp listor som listor, och se till att inget annat än listor är märkta så. Skärmläsare och andra hjälpmedel behöver korrekt kodade listor för att kunna signalera till användaren att en lista faktiskt är just en lista.

Använd rätt html-element när ni gör listor (webbriktlinjer.se) Länk till annan webbplats.

Rubriker

Undvik att särskilja en rubrik från brödtext enbart genom formgivning. Det gör det nämligen svårare för personer med vissa hjälpmedel att navigera på sidan, och svårare för sökmotorer att avgöra vad sidan handlar om. För personer som navigerar med tangentbordet och/eller använder skärmläsare ger det en möjlighet att hoppa till olika delar av innehållet.

Skapa rubriker med h-element (webbriktlinjer.se) Länk till annan webbplats.

Beskrivande rubriker

Tydliga rubriker och beskrivningar är bra för alla användare, men framför allt för personer som har lässvårigheter och försämrat korttidsminne eftersom det ger det en möjlighet att förutse vad varje del av webbplatsen innehåller.

Skriv beskrivande rubriker och etiketter (webbriktlinjer.se) Länk till annan webbplats.

Text

Många användare behöver anpassa texten bland annat genom att förstora eller välja ett annat teckensnitt, ändra förgrund- och bakgrundsfärger eller linjeavstånd. Som regel har användare goda möjligheter att kontrollera hur digital text presenteras. Men när texten utgör en del av en bild saknas ofta de möjligheterna.

Använd text, inte bilder, för att visa text (webbriktlinjer.se) Länk till annan webbplats.

Justera tidsbegränsningar

För vissa användare och i vissa sammanhang behövs gott om tid för att använda digitala tjänster. Ge därför användare möjlighet att stänga av, anpassa eller utöka eventuella tidsbegränsningar.

Ge användarna möjlighet att justera tidsbegränsningar (webbriktlinjer.se) Länk till annan webbplats.

HTML-koden ska validera

Olika användare använder olika verktyg (programversion, hjälpmedel, teknisk utrustning med mera). Se därför till att er webbplats har sid- och stilmallar som har en god kodkvalitet och följer standarder. Det ökar chansen att alla användare kan komma åt informationen och tjänsterna på webbplatsen, oavsett vilka verktyg de använder om HTML-koden validerar utan fel.

Se till att koden validerar (webbriktlinjer.se) Länk till annan webbplats.

Rättslig vägledning

I Diggs rättsliga vägledning finns mer information om de tillgänglighetskrav du som offentlig aktör behöver ta hänsyn till.

Åtaganden – vilka är kraven?