Är din webbplats tillgänglig?
Tillgänglighet ska inte vara en efterhandskonstruktion, utan något som ska prioriteras vid projektstart och vara i fokus under hela projektets gång.
Webben är till för alla, oavsett funktionsvariation hos din användare. Samhällsviktiga webbplatser måste fungera för alla användare, det är tom lagstadgat.
Semantisk HTML – krångla inte till det!
Oftast så kommer man väldigt långt genom att inte krångla till det och genom att använda sig av de semantiska HTML-element som finns att tillgå. Låt de olika elementen på din webbplats representera precis vad de är och låt HTML (Hyper Text Markup Language) göra exakt det jobbet det är ämnat att göra, nämligen märka upp din hemsidas innehåll i tydliga element.
Typografi
Låt din huvudrubrik vara en <h1>, dvs rubrikstorlek ”1” och den allra viktigaste rubriken på din sida. En sida får endast ha ett <h1>-element. Efterföljande rubriker bör vara <h2> (rubrikstorlek ”2”) och skulle du behöva skriva en underrubrik till stycket som tillhör <h2> så använder du en <h3>, som t ex rubriken ”Typografi” för detta stycket. En vanlig informationssida brukar oftast klara sig med rubrikstorlekarna h1, h2 och h3 men skulle du behöva så finns även h4, h5, och h6. Viktigt att följa rubrikordningen och inte hoppa över ett steg, t ex h4 ska alltid komma efter en h3 och endast när rubriken är en underrubrik till stycket för h3. Det låter mer komplicerat än vad det är. Skulle du bli osäker så kan du alltid validera din HTML hos W3. Vanliga textstycken med brödtext, lägger vi i en eller flera <p>-taggar (paragraf). Det är viktigt att se till så att din typografi är läsbar genom att sätta rimliga textstorlekar, radavstånd och att textens rader inte är för långa i ditt innehåll. Säkra alltid att din användare kan förstora texten om det skulle behövas.
Navigation
Huvudmenyn bör ligga i ett <nav> element, gärna med attributet aria-label="Huvudmeny", för att hjälpa skärmläsare och andra hjälpmedel att identifiera var just huvudmenyn är på hemsidan. Att enkelt kunna navigera på webbplatsen med hjälp av endast tangentbordet, är något som ska fungera. Testa att navigera genom att trycka på TAB-tangenten flera gånger på ditt tangentbord. Se till så att TAB-ordningen stämmer, dvs hoppar markören i den logiska ordningen som visas visuellt i webbläsaren eller hoppar markören fram och tillbaka? Kan du nå alla delar av webbsidan när du använder TAB-tangenten? Testa gärna med din skärmläsare aktiv för att se hur den väljer att presentera webbplatsen. Hjälp din användare att hoppa direkt till huvudinnehållet genom att lägga till en ankarlänk som leder dit.
Struktur
Dela in innehållet på din sida i tydliga grupper. Sidhuvudet lägger vi i <header>, själva huvudinnehållet (rubrik, text och bild) lägger vi i <main>, övrigt innehåll så som widgets eller liknande lägger vi i <aside> och slutligen i <footer> kan vi t ex lägga kontaktuppgifter och annat nyttigt.
Kontrast mellan förgrund och bakgrund
Kan alla användare läsa dina texter? Ibland räcker det inte att textstorleken är stor nog eller att den går att förstora. Ibland kan något som textfärg ställa till det, om man använder textfärgen tillsammans med fel bakgrundsfärg. Man ska alltid se till så att kontrastvärdet mellan text och bakgrundsfärg är tillräcklig. Ett exempel på dålig färgkontrast skulle vara om du använder gul textfärg på en vit bakgrund, det är i princip oläsligt även för någon med bra skärm och god syn.
Tillgänglighet är ett omfattande men viktigt ämne och i denna artikel har vi bara skrapat lite grann på ytan. Arbetet med att få digitala lösningar tillgängliga, börjar redan vid planeringsstadiet och man kommer väldigt långt genom att hålla sig till branschstandard. Vi kommer definitivt att skriva fler artiklar i ämnet längre fram.