Tillgänglighets­anpassning – hur gör man?

23 okt 2017

En webbplats ska förstås funka lika bra för alla besökare. Därför är det viktigt att till­gänglig­hets­­anpassa den. Men hur går det till, egentligen? Vår back­end­utvecklare Tim ger sina bästa tips.

När vi utvecklar en ny webbplats finns det många saker att ta hänsyn till. Den ska förstås se till­talande ut, vara enkel att navigera på och komma högt upp i Googles sök­resultat. Som utvecklare tänker vi extra mycket på att optimera webben för att minska laddnings­tider och dataanvändning för besökare som till exempel sitter på en mobil uppkoppling. Sen måste vi förstås tänka på att besökare med funktions­­ned­sättning ska kunna ta del av innehållet, precis som vilken annan besökare som helst. Och det är den biten vi fokuserar på när vi till­gänglig­hets­anpassar en webbplats.

Viktigt hela vägen

Tillgänglighetsanpassning är någon­ting som genom­syrar hela webb­plats­­arbetet. Det kan handla om att begränsa anima­tio­ner, öka konstrast mellan text och bakgrund eller att förtydliga ikoner och fel­med­delanden. En stor del av arbetet ligger även i tekniken och hur vi utvecklare bygger webb­­platsen. Det är nämligen vårt arbete där som avgör hur lättläst webbplatsen blir för en skärmläsare – ett verktyg som läser upp sidans innehåll med konstgjort tal.

5 tips om till­gänglig­hets­anpas­sning till dig som bygger en webb­plats

1. Ha koll på tabbarna

  1. Kontrollera att tabbordningen är logisk. Vanligtvis ska du kunna navigera igenom en webbplats enbart genom att använda tangent­bordet. Se till att sidans element kommer i rätt ordning eller använd attributet ”tabindex” för att styra ordningen.

2. Fokus på rätt ställe

  1. Se till att skärmläsares fokus hamnar på rätt ställe när nya element öppnas eller fälls ut på en sida. Om du till exempel har klickat på en länk för att öppna ett modal­fönster, se till att fokus hamnar i det nyöppnade modal­fönstret. Om du gör en sökning, se till att fokus hamnar på sök­resultatet. Och så vidare. Det styr du enkelt genom Javascript med funktionen focus().

3. Förklara genom ARIA

  1. Använd ARIA-attributen som finns att tillgå i HTML för att beskriva element på webb­platsen. Genom attributen kan du förklara för en skärmläsare om ett element är utfällt eller hopfällt, du kan beskriva en ikon mer utförligt, koppla ihop ett eller flera element på webb­platsen som interagerar med varandra och mycket mer.

Här hittar du en djupare beskrivning om ARIA.länk till annan webbplats, öppnas i nytt fönster

4. Skippa Flash och text i bilder

  1. Undvik Flash och text i bilder. Gammal teknik som Flash ska du undvika av flera anledningar, men en av dem är att skärm­läsare inte kan hantera innehållet. Samma sak gäller med bilder som inne­håller text. Textens kvalitet försämras när besökaren förstorar den och skärm­läsare kan inte läsa upp innehållet.

5. Allt ska gå att zooma

  1. Se till att det går att zooma in och ut på webbplatsen utan problem, i alla olika enheter. Det är viktigt eftersom många med nedsatt syn behöver förstora texten för att kunna läsa.

 

Vid tillgänglighetsanpassning av en webbplats siktar vi in oss på en av tre nivåer under den inter­nationella standarden WCAG 2.0. Nivåerna A, AA och AAA inne­håller olika tillgäng­lighets­krav som ska uppfyllas för att få kalla sin webb­plats tillgänglig­hets­­anpassad under den standarden.