Webbdesign

Så här bygger till tillgängliga webbplatser

2009-01-25 16:31 #0 av: johan

Tillgänglighet betyder kort och gott att något är tillgängligt för funktionshindrade. Till funktionshindrade räknas personer med nedsatt syn eller ingen syn, nedsatt eller ingen hörsel, personer med rörelsehinder, färgblinda, dyslektiker eller dyskalkeli en rad andra handikapp.

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”.

Anmäl
2009-01-25 20:20 #1 av: AndreasS

#0 Tack för många bra och användbara tips.

Mvh: Andréas Sandberg | 021media.se - Västerås hetaste nyhetsbilder | En blogg om oss och vår vardag - Bubben´s & Bella´s Blogg | Forza Grönvitt 100% kärlek

Anmäl
2009-05-07 20:13 #2 av: larskarlsson

Hej Johan

 

Bra artikel, jag kommer att lönka till den på min blogg om tillgänglighet.

Anmäl
2009-05-07 23:00 #3 av: johan

#2: Vad kul!

 

Anmäl

Bli medlem på iFokus

För att kunna delta i diskussionen måste du bli medlem på iFokus. Det går snabbt, enkelt, och kostar ingenting. Medlemskapet ger dig tillgång till över 300 sajter.