Om du driver företag i Katrineholm eller någon annanstans i Sörmland har du säkert lagt en hel del omsorg på hur din hemsida ser ut. Färgerna stämmer, bilderna är skarpa och prislistan ligger prydligt i en tabell. Men har du någon gång blundat och funderat på hur sajten faktiskt låter för den som inte ser skärmen?
Vi på Sörmlands Webbyrå har en ny sida om tillgänglighetsanpassning av webbplatser. När vi byggde den tog vi med exempel på hur en skärmläsare läser en planritning utan alt-text – den läser filnamnet "Grafik: planritning_3rok_och_karta.jpg". Den sortens exempel får fler att förstå än paragrafer. Men hur fungerar skärmläsare egentligen i vardagen när någon besöker en vanlig företagshemsida?
Vad är en skärmläsare?
En skärmläsare är ett program som gör att personer som är blinda eller har en grav synnedsättning kan använda datorer, surfplattor och mobiltelefoner. Programmet tolkar det som finns på skärmen och gör att användaren får innehållet uppläst med talsyntes (syntetiskt tal) eller presenterat i punktskrift via en inkopplad punktskriftsskärm.
Utöver att läsa upp ren text hjälper programmet användaren att orientera sig i telefonens eller datorns inställningar och inne på webbplatser. För den som inte kan se muspekaren är skärmläsaren själva tolken mellan webbsidans kod och besökaren. Är strukturen tydlig går det snabbt att hitta rätt; saknas märkningen i koden blir sidan däremot svår att begripa.
Vilka skärmläsare finns?
Vilket program man använder beror ofta på om man sitter vid en dator eller håller i en mobiltelefon. I Synskadades Riksförbunds undersökning om skärmläsare från 2019 svarade 92 synskadade användare på vilka hjälpmedel de använder till vardags.
På datorn var JAWS det klart vanligaste programmet i undersökningen från 2019: 62 av 92 svarande uppgav att de använder JAWS som sin primära skärmläsare. JAWS och liknande kommersiella program förskrivs ofta som hjälpmedel av syncentralerna. På andra plats i 2019 års undersökning kom NVDA, som 7 personer hade som sitt förstahandsval. NVDA bygger på öppen källkod och är helt kostnadsfritt att ladda ner. I Windows finns dessutom det inbyggda programmet Skärmläsaren (Narrator på engelska).
I mobiltelefonen såg fördelningen annorlunda ut i undersökningen från 2019. Där var Apples inbyggda VoiceOver för iOS i särklass vanligast med 63 användare, medan 6 personer använde Androids motsvarigheter TalkBack eller VoiceAssistant.
Så "läser" den en webbsida
En vanlig föreställning är att skärmläsaren läser en webbsida rakt uppifrån och ner, ungefär som en ljudbok. I praktiken fungerar det sällan så. En van användare skummar sidan precis som en seende besökare, men använder tangentbordet eller svepgester istället för ögonen.
Som guiden Bra att veta om skärmläsare beskriver har programmen särskilda kortkommandon för att hoppa direkt mellan olika element som rubriker och tabeller. På en dator kan användaren till exempel trycka på H-tangenten för att hoppa från rubrik till rubrik tills rätt avsnitt dyker upp. På samma sätt går det att hoppa mellan länkar, formulärfält och tabeller.
För att den här navigeringen ska fungera räcker det inte att en rubrik ser stor och fet ut på skärmen. Skärmläsaren tittar i den underliggande koden efter riktiga rubriknivåer, begripliga länkar, alternativtexter (alt-texter) på bilder, kopplade formuläretiketter och tydligt uppmärkta tabeller.
Tre exempel som låter fel
När koden bakom webbsidan saknar rätt struktur blir uppläsningen snabbt förvirrande. Utifrån de illustrerande exempel som vi visar på vår sida är det här tre klassiska situationer där det låter fel i hörlurarna:
- Bild utan alt-text: Om en viktig bild, exempelvis en ritning eller områdeskarta, läggs upp utan beskrivande alt-text kan skärmläsaren inte berätta vad bilden visar. Istället läser den upp bildens filnamn, som i exemplet på vår sida: "Grafik: planritning_3rok_och_karta.jpg".
- Fält utan kopplad etikett: I ett kontaktformulär ser en seende besökare ofta en ledtext ovanför rutan. Men om etiketten inte är ihopkopplad med själva inmatningsfältet i koden säger skärmläsaren bara "Redigera text", utan att avslöja om du förväntas skriva in namn, e-post eller telefonnummer.
- Tabell utan th-taggar (rubrikceller): Om en tabell med siffror eller priser saknar riktiga kolumnrubriker (th-taggar) i koden läser skärmläsaren upp siffrorna ur sitt sammanhang rad för rad, utan att berätta vilket år, konto eller pris som respektive siffra hör till.
Testa själv
Du behöver varken köpa licenser eller specialutrustning för att få en första inblick i hur din egen hemsida uppför sig. Nästan alla moderna telefoner och datorer har redan en skärmläsare inbyggd. Har du en iPhone kan du aktivera VoiceOver under hjälpmedelsinställningarna, och sitter du vid en Windows-dator kan du ladda ner NVDA helt gratis eller starta den inbyggda Skärmläsaren.
Att testa på egen hand som ovan användare ersätter förstås inte vanan hos någon som använder hjälpmedlet varje dag, men det är en riktig ögonöppnare. Som vi tar upp på vår tjänstesida hittar automatiska testverktyg bara omkring en tredjedel av alla tillgänglighetsfel. Resten märks först när man faktiskt testar koden med tangentbord och skärmläsare.
Lyssna på din egen startsida en gång
Vill du göra ett enkelt test under kaffepausen? Slå på VoiceOver i mobilen eller NVDA på datorn, lägg bort musen och lyssna på din egen startsida i ett par minuter. Går det att hoppa mellan rubrikerna i logisk ordning, eller möts du av kryptiska filnamn och formulärfält som bara säger "Redigera text"?
Om du märker att det låter krångligt och vill ha hjälp att reda ut koden under huven är du varmt välkommen att höra av dig till oss på Sörmlands Webbyrå.
