# Så här bygger till tillgängliga webbplatser Author: johan I Sverige räknar man med att drygt 16 procent av befolkningen har någon form av funktionshinder. Det är många människor! Ändå så är det väldigt få som tänker på detta när man bygger webbplatser eller skriver dokument. Kort sagt: det är många kunder som man stänger ute. Tillgängliga webbplatser är sökmotoroptimerade ---------------------------------------------- En av de kanske största morötterna att bygga tillgängliga webbplatser är att sökmotor som Google automatiskt kommer förstå och gilla din webbplats bättre. En sökmotor tolkar sidan på ungefär samma sätt och med samma begränsningar som en skärmläsare. Använd rätt html-element ------------------------ Man brukar använda begreppet semantisk html när man pratar om att använda rätt html-element till rätt sak. Rubriker ska beskrivas med elementen h1, h2, h3 som är till just för rubriker. Dessa element har en inbyggt nivå så att skärmläsaren vet att rubriknivå 1 (h1) är viktigare än rubriknivå 2. Andra element som har en inbyggd betydelse för skärmläsaren är t ex strong, em, abbr, blockquote, cite med flera. T ex så innebär elementet strong mer än att texten blir fet stil. Det innebär också att texten betonas lite extra och får extra vikt. Strukturen viktig ----------------- Skärmläsaren ser inte hur innehållet visuellt ligger på sidan. Snarare ser den bara strukturen i sidan och läser helt enkelt upp innehållet i den ordning det kommer i koden. Ett bra sätt att testa om strukturen i din sida verkar logisk är att helt enkelt inaktivera stilmallar och titta på sidan. Har du en bra struktur och använt semantisk html ska du snabbt kunna förstå sidan utan att den är formgiven. Prova även att lägga ifrån dig musen och navigera enbart med tangentbordet. Då märker du snabbt om strukturen är logisk och formulärfält har rätt tabb-ordning. Tabeller är till för data, inte formgivning ------------------------------------------- Historiskt sett har tabeller används för formgivning. Men tabeller är tänkta att presentera information i tabellformat, inte formgivning. Detta hänger ihop med att strukturen i sidan är så viktig. För att skärmläsaren ska veta vad som är tabellrubriker och vad som är data använder du thead och th för rubriker och tbody och td för data. Bilder ska vara beskrivna ------------------------- Beskriv alltid bilder som är relevanta för innehållet. Med alt-attributet på bilden lägger du in en beskrivning av vad bilden föreställer. Även detta uppfattar sökmotorerna och är därför ett utmärkt sätt att få bättre placering hos Google. Bilder som mest är för formgivning och inte spelar någon roll för innehållet och läsförståelsen behöver inte ha någon beskrivning. Då kan du ange alt=”” som beskrivning. Om sidan innehåller t ex diagram bör man utöver bilden på diagrammet även ha med en datatabell med samma siffror. Beskriv var länken går ---------------------- Undvik länktexter som ”klicka här” eller ”läs mer”. Länka istället de ord som beskriver vad den länkade sidan innehåller. Även detta är viktigt sökmotoroptimering. Men för skärmläsare som kan läsa upp en sammanställning av alla länkar blir det extra viktigt. Tänkt dig själv att få en lista på 100 länkar som alla heter ”läs mer”. Då är det svårt att veta vad som är vad. Formulär -------- Till alla formulärfält bör du ha en etikett. Dessa skapas med label-elementet. Skärmläsaren läser då upp texten för label-elementet när formulärfältet aktiveras. Se till att sidan fungerar utan JavaScript ------------------------------------------ Det är i sig inget hinder att använda JavaScript, men funktionaliteten kan vara begränsad och man kan manuellt stängt av JavaScript. Se till att sidan fungerar utan JavaScript och bygg på sidans funktionalitet med JavaScript för att öka upplevelsen. Detta brukar kallas ”progressive enhancement”. ## Comment 1 Author: AndreasS #0 Tack för många bra och användbara tips. ## Comment 2 Author: larskarlsson Hej Johan Bra artikel, jag kommer att lönka till den på min blogg om tillgänglighet. ## Comment 3 Author: johan #2: Vad kul!