Een beeld zegt meer dan duizend woorden, maar niet echt

Zoey is dol op surfen op internet. Ze vinden het heerlijk om te verdwalen in het web vol informatie, om stukjes kennis te ontrafelen die een bladwijzer waard zijn. Maar ze houden er niet van om grote lappen tekst door te bladeren. Ze hebben liever plaatjes. Heel veel zelfs. Ze bekijken eerst de foto’s van hun crush op Facebook voordat ze overwegen hun biografie te lezen. Hun verlangen naar memes en visualisaties is ongeëvenaard voor iedereen op deze planeet en hun Instagram verhalen weerspiegelen dat. Ze zijn gewoon, je weet wel, sterk verbonden met hun visuele-leerling natuur. En daar is niets mis mee.

Maar de wereld heeft niet alleen Zoey in zich. Er is Trung-Anh, er is Sewon, er is Nayon, er is Venkatesh, er is Zeqiu, er is Dinko, er is Sade, er is Ivan, en er is Mohammed. Volgens de WHO heeft ten minste 29% (2,2 miljard) van de wereldbevolking (7,7 miljard) een vorm van visuele handicap, wat neerkomt op ten minste 3 mensen op de hierboven vermelde lijst. Hmm, dus, umm … nu we weten dat 29% van de bevolking wellicht niet in staat is visuele inhoud te zien, wat doen we dan? Houden we nog steeds vast aan de letterlijke interpretatie van Fred Barnard’s uitspraak “Een foto zegt meer dan duizend woorden”? Ik durf te zeggen van niet. Niet altijd.

Een vaak nieuwsgierige vraag die gesteld wordt is – hoe gebruiken mensen met een visuele handicap een computer? Ten eerste is het belangrijk te begrijpen dat een visuele handicap geen synoniem is voor blind zijn. Dus, als je iemand een witte wandelstok ziet gebruiken, is het verkeerd om aan te nemen dat hij of zij volledig blind is. Als het gaat om het gebruik van een computer, afhankelijk van hun niveau van het gezichtsvermogen, kunnen ze schermlezers gebruiken om de inhoud op hun scherm te lezen. Enkele populaire schermlezers zijn JAWS, NVDA (gratis en open-source), en VoiceOver (ingebouwd in Apple’s apparaten).

De toestand van de wereld

Geweldig! We hebben dus een manier voor gebruikers van schermlezers om te communiceren met hun computers of mobiele apparaten. Maar hoe kan een schermlezer de foto’s van hun crush lezen? Of memes? Of grafieken/visualisaties? Een mogelijke reactie hierop is dat we medische vooruitgang moeten boeken om hun zicht te genezen of iets in die zin dat ze een persoonlijke verzorger/vriend/familie hebben die hen kan uitleggen wat er op het scherm staat. Een andere mogelijke reactie is het bouwen van een wereld waarin het voor hen mogelijk is om het zelf te doen. Als uw antwoord dichter bij het eerste lag, dan moet u zich duidelijk vertrouwd maken met de concepten van het sociale model van invaliditeit.

Beeld

Laten we ons concentreren op de beelden. Wil de screenreader een afbeelding kunnen voorlezen, dan moet hij weten waar de afbeelding over gaat en deze vervolgens op een zinvolle manier aan de gebruiker presenteren. Laten we bijvoorbeeld eens kijken naar een afbeelding van een gezin dat met hun Huskies speelt (Go Huskies!). Als gebruiker die geen schermlezer is, is het gemakkelijk om uit te zoeken wat er op de foto gebeurt – niet alleen wat er op de voorgrond gebeurt, maar ook wat er op de achtergrond gebeurt. Jialin, een van de gezinsleden, draagt bijvoorbeeld een T-shirt met de tekst “100% menselijk”. Kan de screenreader de scène volledig extraheren? Om dit te doen, vertrouwen de screenreaders op de ontwikkelaars of auteurs van inhoud om een alternatieve tekst voor de afbeeldingen te leveren met behulp van het “alt”-attribuut, dat in 1995 werd geïntroduceerd als onderdeel van HTML 2.0 (als je niet bekend bent met wat een alt-attribuut is of welke betekenis het heeft, biedt dit artikel een geweldig overzicht van het alt-attribuut). Het HTML-element img ziet er dan als volgt uit:

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

De schermlezer leest nu “Afbeelding, dit is een afbeelding van twee Huskies”.

Het leeglaten van het alt-attribuut of het leveren van nietszeggende tekst zoals “Afbeelding 1”, is, zoals u zich kunt voorstellen, niet erg nuttig. Zelfs met de alternatieve tekst “Dit is een afbeelding van twee Huskies”, komt de informatie die wordt doorgegeven niet in de buurt van wat iemand die geen schermlezer gebruikt eruit zou kunnen halen, zoals de tekst op Jialin’s T-shirt. Bovendien kondigt de schermlezer de inhoud al aan als een “afbeelding” of “grafiek”, waardoor “Dit is een afbeelding” overbodige tekst is. Dit alles is met de aanname dat de afbeelding is geplaatst door een gebruiker die toegang heeft tot de code om de alternatieve tekst in te voeren.

Maar hoe zit het met plaatsen zoals sociale mediaplatforms waar de afbeeldingen worden geüpload door gebruikers die helemaal geen toegang hebben tot de code. Facebook begon in 2016, meer dan tien jaar na de lancering, kunstmatige intelligentie in te zetten om automatisch gegenereerde alternatieve tekst aan afbeeldingen toe te voegen, en stond gebruikers toe deze tekst, indien nodig, te bewerken. Instagram volgde en implementeerde deze functie vorig jaar, 8 jaar na de lancering ervan. De vragen blijven echter dezelfde – hoeveel informatie moet een alternatieve tekst bieden? Is een basisbeschrijving op een hoger niveau voldoende? Gaan we er bij het bepalen van wat we aan screen reader-gebruikers presenteren, van uit en generaliseren we wat de screen reader-gebruikers in het beeld zoeken? Als een beeld meer waard is dan duizend woorden, zou een alternatieve tekst dan niet, metaforisch gesproken, duizend woorden moeten zijn?

GIFs en geanimeerde afbeeldingen

Leo heeft een sterk meme-gevoel en is een expert in het vinden van een kat GIF voor elke gelegenheid. Aangezien een GIF wordt gemaakt door verschillende beelden zodanig te combineren dat het eindresultaat de indruk wekt van een zeer korte video, hebben we dan met dezelfde problemen te maken als met de beelden? Erger nog. Als ontwikkelaar kunt (en moet) u zeker een alternatieve tekst toevoegen, zoals we dat ook voor afbeeldingen doen (GIF is immers een afbeeldingsbestand). Maar op social media-platforms wordt een GIF, afhankelijk van hoe het platform het verwerkt, ofwel weergegeven met een img-element zonder alt-attribuut, of met een video-element. Een video-element ondersteunt het alt-attribuut helemaal niet.

Dus, al die GIF-widgets die we hebben gebruikt om geanimeerde memes op Facebook en Instagram te posten, degenen die ons cool maken en alles, zijn ontoegankelijk voor gebruikers van schermlezers. Hier is ons doel niet om Leo te stoppen met het posten van GIF’s (want, miauw), maar om ervoor te zorgen dat dergelijke inhoud wordt genoten door iedereen en niet alleen een subset van de bevolking.

Grafieken en Visualisaties

Dit alles en we zijn nog niet eens aan de “harde dingen” toegekomen. We introduceren grafieken en interactieve visualisaties. Yisu en Xuhai zijn echte visualisatie-nerds en net als iedere onderzoeker vinden ze dat grafieken en visualisaties zeer waardevol zijn; er is zelden een academisch artikel zonder minstens één grafiek of visualisatie. Een grafiek brengt zeer visuele kennis over en wordt meestal ingebed in een webpagina met behulp van een van de drie belangrijkste technieken:

1. als een afbeelding voor statische inhoud.
2. als een HTML canvas-element of SVG-grafieken (upgrade van een afbeelding op verschillende aspecten) voor statische inhoud.
3. en/of als interactieve visualisatie met behulp van JavaScript-bibliotheken (die gewoonlijk HTML canvas of SVG als onderliggend mechanisme gebruiken) om dynamische inhoud te serveren en gebruikers in staat te stellen met de grafiek te interageren.

Wanneer de grafiek als afbeelding wordt gebruikt, gelden dezelfde overwegingen als die welke we hierboven hebben besproken, met de extra complexiteit van het presenteren van wetenschappelijke informatie. Wat moet de alternatieve tekst zeggen? Moet de tekst een overzicht geven van de grafiek? Moeten er statistieken in staan zoals gemiddelde, mediaan, modus, enz. En zo ja, welke? Hoeveel informatie is te weinig en hoeveel is te veel? Dit zijn lastige vragen.

De canvas van een HTML is zelf een bitmap, en zonder de implementatie van de juiste fallback content levert dat diverse toegankelijkheidsproblemen op. Er zijn echter verschillende technieken om ze toegankelijk te maken en die zijn slechts een Google-zoekopdracht verwijderd. Maar het is natuurlijk aan de ontwikkelaars om die technieken te kennen en in hun werk toe te passen – iets wat ik in de loop van de tijd heb zien verbeteren, maar waar ik mijn hoop niet op zou vestigen. Integendeel, SVG wordt aangemoedigd voor toegankelijke grafieken omdat volgens de W3C specificaties de kind-elementen beschikbaar zijn voor de Accessibility API. Er wordt echter nog steeds gewerkt aan de browserondersteuning en een volledig toegankelijke SVG-grafiek vereist inspanning en ten minste enige fundamentele kennis van SVG, wat opnieuw een verantwoordelijkheid is die op de schouders van ontwikkelaars valt.

Om enkele van deze zorgen aan te pakken, heb ik evoGraphs gemaakt – een jQuery-plugin om toegankelijke grafieken te maken, die de Delegate’s Award won voor de Accessibility Challenge op de W4A-conferentie in 2015. Toegegeven, het behandelt niet alle benadrukte vragen met betrekking tot de complexiteit van het presenteren van wetenschappelijke informatie. Vandaar dat toegankelijke grafieken een actief onderzoeksgebied zijn voor mij en andere onderzoekers.

Als interactieve visualisatie (zoals ChartJS, Google Charts en D3), is de weergave van dynamisch bijgewerkte informatie lastig. De meeste gebruikers van schermlezers maken geen gebruik van een aanwijsapparaat (zoals muis, trackpad, enz.) en de meeste interacties zijn ofwel uitsluitend beperkt tot of zijn meer praktisch bruikbaar wanneer een hover over bepaalde elementen wordt getriggerd. Zonder dergelijke interacties wordt het doel van de interactieve visualisaties voor een schermlezer-gebruiker vaag en kan het begrijpen van de inhoud, zonder de juiste aandacht, nog verwarrender worden.

Bovendien maken veel moderne grafische bibliotheken het mogelijk de inhoud dynamisch te wijzigen. Het doorgeven van de informatie aan de schermlezers, wanneer de inhoud wordt gewijzigd, kan worden afgehandeld door op de juiste manier ARIA-attributen te gebruiken, die in 2014 een W3C-aanbeveling zijn geworden en eerlijk gezegd een uitkomst zijn. Maar, net als bij SVGs, is stabiele browserondersteuning voor alle ARIA-functies nog steeds een werk in uitvoering, vooral wanneer ze binnen SVGs worden gebruikt. De juiste training voor ontwikkelaars is nog steeds nodig om volledig gebruik te maken van wat ARIA te bieden heeft.

De weg vooruit

Van toen Tim Berners-Lee het World Wide Web creëerde, tot vandaag, is de technologie drastisch toegenomen. Helaas kan niet hetzelfde worden gezegd over de toegankelijkheid van dergelijke technologieën. Tegen de tijd dat een bepaalde technologie toegankelijk is gemaakt voor mensen met een handicap, is de wereld al verder gegaan met geavanceerdere technologieën. De inhaalslag houdt dus nooit op. En dat zal ook niet gebeuren – tenzij toegankelijkheid de fundamentele overweging wordt bij de ontwikkeling van nieuwere technologieën.

Maar niet alle hoop is verloren. We hebben en blijven grote vooruitgang boeken op het gebied van webtoegankelijkheid, zowel bij academisch onderzoek als bij industriële producten. Studenten en nieuwe ontwikkelaars worden onderwezen in de concepten van toegankelijkheid en technieken om het web toegankelijker te maken. Voor de toekomst stel ik voor een stap terug te doen en na te denken over het aanpassen van de software aan de behoeften van de gebruiker in plaats van te verwachten dat de gebruikers zich aanpassen aan de software. Blijven we bijvoorbeeld uitgaan van de informatie die een schermlezer uit een afbeelding wil halen, of bouwen we tools die meer over de gebruiker leren en informatie presenteren die de gebruiker het liefst wil zien? Voor mij beweegt de toekomst ons weg van generalisatie en dichter bij personalisatie – een World Wide Web dat werkelijk op de gebruiker is gericht.

1. “Vision Impairment and Blindness.” Wereldgezondheidsorganisatie, Wereldgezondheidsorganisatie, https://www.who.int/news-room/fact-sheets/detail/blindness-and-visual-impairment. Accessed 20 Oct. 2019.
2. “A Picture’s Worth: D. H. Hepting, Ph.D.” A Picture’s Worth | D. H. Hepting, Ph.D., http://www2.cs.uregina.ca/~hepting/projects/pictures-worth.
3. HTML 2.0 Materials, https://www.w3.org/MarkUp/html-spec.
4. Sharif, Ather, and Babak Forouraghi. “evoGraphs-A jQuery plugin om web-toegankelijke grafieken te maken.” 2018 15e 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.