En bild säger tusen ord, men inte riktigt

En skärmläsare som använder VoiceOver för att läsa en artikel i New York Times med titeln

Zoey älskar att surfa på internet. De njuter av att gå vilse i den sammankopplade webben full av information, och avvecklar bitar av kunskap som är värda att bokmärka. Men de tycker inte om att skumma igenom stora textmassor. De föredrar bilder. Många bilder. De går igenom sin förälskelses bilder på Facebook innan de ens överväger att läsa deras biografi. Deras längtan efter memes och visualiseringar är oöverträffad för någon annan på den här planeten och deras Instagram stories återspeglar det. De är bara, du vet, starkt kopplade till sin visuella inlärningsnatur. Och det är inget fel med det.

Men världen består inte bara av Zoey. Det finns Trung-Anh, det finns Sewon, det finns Nayon, det finns Venkatesh, det finns Zeqiu, det finns Dinko, det finns Sade, det finns Ivan och det finns Mohammed. Enligt WHO har minst 29 procent (2,2 miljarder) av världens befolkning (7,7 miljarder) någon form av synnedsättning, vilket innebär minst tre personer i den ovan nämnda listan. Hmm, så, umm … nu när vi vet att 29 procent av befolkningen kanske inte kan se visuellt innehåll, vad gör vi då? Håller vi fortfarande fast vid den bokstavliga tolkningen av Fred Barnards citat ”En bild säger mer än tusen ord”? Jag vågar påstå att jag inte gör det. Inte alltid.

En ofta nyfiken fråga att ställa är – hur använder personer med synnedsättning en dator? Först och främst tror jag att det är viktigt att förstå att ha en synnedsättning inte är en synonym till att vara blind. Så om du ser någon som använder en vit käpp skulle det vara fel att anta att de är helt blinda. När det gäller att använda en dator kan de, beroende på deras synnivå, använda skärmläsare för att läsa innehållet på skärmen. Några populära skärmläsare är JAWS, NVDA (gratis och öppen källkod) och VoiceOver (inbyggd i Apples enheter).

The State of the World

Great! Vi har alltså ett sätt för skärmläsare att interagera med sina datorer eller mobila enheter. Men hur kan en skärmläsare läsa sina förälskade bilder? Eller memes? Eller grafer/visualiseringar? Ett möjligt svar här är att vi borde göra medicinska framsteg för att bota deras syn eller något i stil med att de har en personlig assistent/vän/familj som kan förklara för dem vad som står på skärmen. Ett annat möjligt svar är att bygga upp en värld där det är möjligt för dem att göra det själva. Om ditt svar låg närmare det förstnämnda behöver du helt klart utbilda dig och bekanta dig med begreppen i den sociala modellen för funktionshinder.

Bilder

Låt oss lägga vårt fokus på bilderna. För att skärmläsaren ska kunna läsa upp en bild måste den veta vad bilden handlar om och sedan presentera den för användaren på ett meningsfullt sätt. Låt oss till exempel ta en bild på en familj som leker med sina tvillinghundar (Go Huskies!). Som användare som inte är skärmläsare är det lätt att räkna ut vad som händer i bilden – inte bara vad som händer i förgrunden utan även i bakgrunden. Jialin, en av familjemedlemmarna, har till exempel på sig en T-shirt där det står ”100 % människa”. Kan skärmläsaren helt och hållet utvinna scenen? För att göra detta förlitar sig skärmläsarna på att utvecklarna eller innehållsförfattarna tillhandahåller en alternativ text för bilderna med hjälp av alt-attributet, som introducerades för allmänheten 1995 som en del av HTML 2.0 (om du inte vet vad ett alt-attribut är eller vilken betydelse det har, kan du läsa den här artikeln, som ger en bra översikt över alt-attributet). HTML-elementet img ser då ut på följande sätt:

<img src="image1.jpg" alt="This is an image of two Huskies" />

Därmed kommer skärmläsaren nu att läsa ”Image, This is an image of two Huskies”.

Att lämna alt-attributet tomt eller att ge meningslös text som ”Image 1” är, som ni kan föreställa er, inte till någon större hjälp. Även med den alternativa texten ”This is an image of two Huskies” är den information som förmedlas inte ens i närheten av vad någon som inte använder en skärmläsare skulle kunna utläsa, t.ex. texten på Jialins T-shirt. Dessutom meddelar skärmläsaren redan innehållet som en ”bild” eller ”grafik”, vilket gör ”Detta är en bild” till överflödig text. Allt detta är med antagandet att bilden läggs upp av en användare som har tillgång till koden för att skriva in den alternativa texten.

Men hur är det med platser som plattformar för sociala medier där bilderna laddas upp av användare som inte har tillgång till koden alls. Facebook började 2016, mer än ett decennium efter lanseringen, använda artificiell intelligens för att lägga till automatiskt genererad alternativ text till bilder, och lät användarna redigera denna text vid behov. Instagram följde efter och införde denna funktion förra året, åtta år efter lanseringen. Frågorna är dock desamma – hur mycket information bör en alternativ text innehålla? Räcker det med en grundläggande beskrivning på högre nivå? När vi bestämmer vad som ska presenteras för skärmläsarna, antar och generaliserar vi då vad skärmläsarna letar efter i bilden? Om en bild säger mer än tusen ord, borde då inte en alternativ text metaforiskt sett vara tusen ord?

GIF:er och animerade bilder

Leo har ett starkt meme-spel och är expert på att hitta en katt-GIF för varje tillfälle. Med tanke på att en GIF skapas genom att kombinera flera olika bilder på ett sätt som gör att slutresultatet ger ett intryck av en mycket kort video, ställs vi då inför samma problem som med bilderna? Värre. Som utvecklare kan du säkert (och bör) lägga till en alternativ text på samma sätt som vi gör för bilder (GIF är trots allt en bildfil). Men på plattformar för sociala medier, beroende på hur en GIF bearbetas av plattformen, återges den antingen med hjälp av ett img-element utan alt-attribut eller med hjälp av ett video-element. Ett video-element har inte stöd för alt-attributet alls.

Så alla dessa GIF-widgetar som vi har använt för att lägga upp animerade memes på Facebook och Instagram, de som gör oss coola och allt, är otillgängliga för skärmläsare. Här är vårt mål inte att hindra Leo från att lägga upp GIF:er (för att, mjau) utan att se till att sådant innehåll kan avnjutas av alla och inte bara av en delmängd av befolkningen.

Grafer och visualiseringar

Allt detta och vi har inte ens kommit till det ”svåra” ännu. Vi presenterar grafer och interaktiva visualiseringar. Yisu och Xuhai är totala visualiseringsnördar och anser precis som alla forskare att grafer och visualiseringar är extremt värdefulla; det finns sällan en akademisk uppsats utan minst en graf eller visualisering. En graf förmedlar mycket visuell kunskap och bäddas vanligtvis in i en webbsida med hjälp av en av tre huvudtekniker:

  1. som en bild för statiskt innehåll.
  2. som ett HTML canvas-element eller SVG-diagram (uppgradering från en bild på olika aspekter) för statiskt innehåll.
  3. och/eller som en interaktiv visualisering med hjälp av JavaScript-bibliotek (som vanligtvis använder HTML canvas eller SVG som en underliggande mekanism) för att servera dynamiskt innehåll och låta användarna interagera med grafen.

När den används som en bild gäller samma överväganden som vi har diskuterat ovan med den extra komplexiteten att presentera vetenskaplig information. Vad ska den alternativa texten innehålla? Ska den ge en översikt över grafen? Ska den innehålla statistik som genomsnitt, medelvärde, median, läge osv. Och i så fall, vilka? Hur mycket information är för lite och hur mycket är för mycket? Detta är svåra frågor.

En HTML:s canvas är i sig själv exponerad som en bitmapp, och utan implementering av korrekt fallback-innehåll innebär det flera utmaningar för tillgängligheten. Det finns dock flera tekniker för att göra dem tillgängliga och är bara en Google-sökning bort. Men det är naturligtvis utvecklarna som ansvarar för att känna till dessa tekniker och implementera dem i sitt arbete – något som jag har sett förbättras med tiden men som jag inte skulle hålla andan för. Tvärtom uppmuntras SVG för tillgängliga diagram eftersom de underordnade elementen enligt W3C-specifikationerna är tillgängliga för Accessibility API. Man arbetar dock fortfarande med webbläsarstödet och ett fullt tillgängligt SVG-diagram kräver ansträngning och åtminstone en viss grundläggande kunskap om SVG, vilket återigen är ett ansvar som faller på utvecklarnas axlar.

För att ta itu med några av dessa problem skapade jag evoGraphs – ett jQuery-plugin för att skapa tillgängliga grafer, som vann Delegate’s Award for the Accessibility Challenge vid W4A-konferensen 2015. Jag medger att det inte tar upp alla de frågor som lyfts fram när det gäller komplexiteten i att presentera vetenskaplig information. Därför är tillgängliga grafer ett aktivt område att utforska för mig och andra forskare.

Som interaktiv visualisering (t.ex. ChartJS, Google Charts och D3) är representationen av dynamiskt uppdaterad information knepig. De flesta användare av skärmläsare använder inte en pekanordning (t.ex. mus, styrplatta osv.) och de flesta interaktioner är antingen enbart begränsade till eller är mer praktiskt användbara när en hover över vissa element utlöses. Utan sådana interaktioner blir syftet med de interaktiva visualiseringarna för en skärmläsaranvändare nebulöst och man kan hävda att utan rätt övervägande kan förståelsen av innehållet bli mer förbryllande.

Och många moderna grafbibliotek tillåter dynamisk ändring av innehållet. Att vidarebefordra informationen till skärmläsarna, när innehållet ändras, kan hanteras genom att korrekt använda ARIA-attribut, som blev en W3C-rekommendation 2014 och är ärligt talat en gudagåva. Men precis som med SVGs är stabilt webbläsarstöd för alla ARIA-funktioner fortfarande ett pågående arbete, särskilt när de används inom SVGs. Det behövs fortfarande lämplig utbildning för utvecklare för att fullt ut utnyttja vad ARIA har att erbjuda.

Vägen framåt

Från det att Tim Berners-Lee skapade World Wide Web, till idag, har tekniken ökat drastiskt. Tyvärr kan man inte säga detsamma om tillgängligheten till sådan teknik. När en viss teknik görs tillgänglig för personer med funktionshinder har världen redan gått vidare till mer avancerad teknik. Så det är aldrig slut med att komma ikapp. Och det kommer det inte att göra – om inte tillgängligheten blir en grundläggande faktor vid utvecklingen av nyare teknik.

Men allt hopp är inte förlorat. Vi har gjort och fortsätter att göra stora framsteg inom området webbtillgänglighet, både inom akademisk forskning och industriella produkter. Studenter och nya utvecklare får lära sig begrepp om tillgänglighet och tekniker för att göra webben mer tillgänglig. I framtiden kan jag tänka mig att ta ett steg tillbaka och tänka på att anpassa programvaran efter användarnas behov i stället för att förvänta mig att användarna ska anpassa sig till programvaran. Ska vi till exempel fortsätta att utgå från vilken information en skärmläsare vill få ut ur en bild eller ska vi bygga verktyg som lär sig mer om användaren och presenterar information som användaren föredrar att ta till sig? För mig innebär framtiden att vi kommer bort från generalisering och närmare personalisering – en World Wide Web som verkligen är användarcentrerad.

  1. ”Synnedsättning och blindhet”. Världshälsoorganisationen, Världshälsoorganisationen, https://www.who.int/news-room/fact-sheets/detail/blindness-and-visual-impairment. Tillgänglig 20 okt. 2019.
  2. ”A Picture’s Worth: D. H. Hepting, Ph.D.” A Picture’s Worth | D. H. Hepting, Ph.D., .
  3. HTML 2.0 Materials, https://www.w3.org/MarkUp/html-spec.
  4. Sharif, Ather, and Babak Forouraghi. ”evoGraphs-A jQuery-plugin för att skapa webbtillgängliga grafer”. 2018 15th IEEE Annual Consumer Communications & Networking Conference (CCNC). IEEE, 2018.
  5. ”WAI-ARIA Overview.” Web Accessibility Initiative (WAI), https://www.w3.org/WAI/standards-guidelines/aria.

.

Lämna en kommentar