Facebook beschrijft foto's met artificiële intelligentie

Bart Simons op 07/04/2016

Update 19 mei 2016: nu beschikbaar in België op i-devices die op Engels zijn ingesteld.

Sinds vorige week kan je in Twitter een alt-tekst toevoegen aan de foto in je tweet. Deze week laat Facebook weten dat ze foto's zullen beschrijven via artificiële intelligentie. Twee verschillende benaderingen dus om blinden te vertellen wat er op een foto staat:

  • Twitter vraagt dat gebruikers zelf beschrijvingen bij hun foto's voegen. Dit gebeurt wellicht zelden. Als het gebeurt, zal de beschrijving wel accuraat zijn, want de auteur weet waarom hij de foto plaatst en welk detail uit de foto belangrijk is.
  • Facebook beseft dat er veel te veel foto's circuleren op sociale media. Ze verwachten niet dat iedereen de moeite zal nemen om die te beschrijven en laten dat dus aan software over. Dit is kiezen voor kwantiteit maar inboeten aan kwaliteit.

Hoe kan je de beschrijvingen zien?

  • Je moet een i-device hebben want de mogelijkheid is op dit moment enkel beschikbaar in de iOS versie van de Facebook app. Dus niet op Android en niet op de Facebook website.
  • Je toestel moet op Engels ingesteld zijn. Er is nog niet bekend wanneer andere talen zullen volgen.
  • Om de beschrijvingen te horen, volstaat het om, met VoiceOver actief, de foto aan te raken. Je hoort dan een aantal dingen die in de foto zouden kunnen voorkomen.

Wat kunnen we verwachten?

Momenteel herkent de software een honderdtal concepten. Als een foto tekst bevat, hoor je enkel dat de foto tekst bevat; er is nog geen tekstherkenning (OCR) ingebouwd.

Het project is interessant. Het kan zeker werken voor eenvoudige afbeeldingen. Software kan een droge beschrijving geven van wat er te zien is, maar dat geeft weinig context:

Op sociale media post je vaak een foto met een bepaald doel of je wil een (grappig) detail benadrukken. Zal software ooit in staat zijn om de jurk van de bruid te beschrijven of om aan te geven hoe schattig je poes of baby op de foto staat?

Facebook is overigens niet de enige die experimenteert met artificiële intelligentie om beelden te beschrijven. Zie bijvoorbeeld dit indrukwekkende filmpje over de Seeing AI app van Microsoft.

Reageer als eerste

Twitter voegt alt-teksten toe

Bart Simons op 30/03/2016

Update 27 mei 2016: je kan nu ook alt-teksten toevoegen aan tweets die je verstuurt vanuit de twitter.com website, maar je moet dit wel eerst aanvinken in de toegankelijkheidsinstellingen.

Tweets bevatten vaak afbeeldingen. Sinds gisteren kan je die een alt-tekst geven. Bekijk een voorbeeld van een tweet met foto-beschrijving.

De mogelijkheid is voorzien bij tweets die je verstuurt vanuit de officiële Twitter app (iOS en Android) en vanuit de Twitter.com website. Hoe ga je te werk?

Website

De mogelijkheid om een foto-beschrijving bij een twee te voegen, is niet standaard aanwezig. Je moet het inschakelen in de toegankelijkheidsinstellingen.

App

  • Installeer de meest recente versie van de Twitter app.
  • Volg deze instructies om de optie in te schakelen.
  • Op mijn toestel moest ik de app meerdere keren herstarten vooraleer de bewuste optie tevoorschijn kwam.
  • Als je nu een foto bij een tweet voegt, is er de mogelijkheid om een beschrijving toe te voegen.

    iPhone met twitter app en de functie image description

Opmerkingen

Reageer als eerste

Te veel uitzonderingen in Europees wetsvoorstel

Bart Simons op 19/02/2016

Dit is een vervolg op Europese wetgeving moet beter. Cet article en français: Trop d'exceptions dans la directive européenne

Minister van digitale agenda, Alexander De Croo heeft vorig jaar zijn steun toegezegd voor "een verordening die de overheid verplicht hun websites toegankelijk te maken voor bezoekers met een functionele beperking". De Europese instellingen zijn op dit moment in gesprek over de inhoud van deze wettekst.

Zowel Blindenzorg Licht en Liefde als het Slechtzienden- en Blindenplatform Vlaanderen als de Brailleliga zijn niet tevreden met de inhoud van het voorstel van deze wetgeving in ontwikkeling (PDF).

Deze tekst zal drastisch moeten wijzigen als de wet het doel wil bereiken waarvoor ze werd opgesteld: alle burgers toegang geven tot de steeds digitaler wordende dienstverlening van de overheden.

Voor België neemt het kabinet De Croo aan deze onderhandelingen deel. AnySurfer steunt de oproep van de Belgische belangenorganisaties om te werken aan een zinvolle wet en niet aan eentje die, door de vele uitzonderingen, al verouderd zal zijn op het moment dat hij in werking treedt.

De Nationale Hoge Raad Personen met een Handicap adviseert minister De Croo om op nationaal vlak toegankelijkheid van overheidswebsites wettelijk te regelen. Daarvoor is er zelfs al een wetsvoorstel ingediend in de kamer. Het is enigszins begrijpelijk dat de regering hiermee wacht totdat de Europese verordening klaar is. Maar ze moet dan wel haar verantwoordelijkheid nemen en in de Europese telecom-raad eisen dat de huidige voorstellen grondig worden herzien.

Wat moet er veranderen?

Het huidige voorstel bevat uitzonderingen voor:

  • Intranets: hoe zal iemand met een handicap dan voor de overheid kunnen werken?
  • Audio- en videofragmenten: waarom besteedt men overheidsgeld om ze te maken, terwijl 15% van de bevolking er niets aan heeft?
  • Downloadbare documenten: dus de brochure met meer uitleg en het formulier om iets aan te vragen, moeten niet toegankelijk zijn? Enkel de pagina waar deze documenten te downloaden zijn.
  • Websites van televisieomroepen: dus mensen met een handicap hoeven niet te weten welke programma's er vanavond op tv worden uitgezonden?
  • Websites van scholen en crèches: de schoolplicht geldt toch ook voor kinderen met een handicap en kinderen van ouders met een handicap?

Andere tekortkomingen in de huidige tekst van de verordening:

  • Het zou enkel gaan om websites, niet om apps voor tablets, smartphones, smart watches, smart fridges en wat er binnenkort nog allemaal op ons afkomt.
  • De wet voorziet geen sanctie voor websites die niet voldoen.
  • Er ontbreekt ook een verwijzing naar een kenniscentrum dat kan bepalen of de websites al dan niet voldoen aan de gestelde criteria.

Om het huidige wetsvoorstel te verbeteren, kunnen de telecom-ministers inspiratie vinden in de amendementen van het Europese Parlement die met 92% van de stemmen werden goedgekeurd in februari 2014.

Update 22 februari 2016

Minister De Croo meldt via Twitter dat België wil dat deze wet een stap vooruit zal zijn en hij engageert zich om ook anderen daarvan te overtuigen:

Dit is goed nieuws. Bedankt. Wij staan klaar om u te helpen waar nodig!

2 reacties

Toegankelijkheid, een vereiste voor digitale inclusie

Bart Simons op 16/12/2015

Cet article en français: L'accessibilité, un prérequis pour l'e-inclusion

Als het over de digitale kloof gaat, dan bedoelt men vaak een gebrek aan vaardigheden of motivatie van gebruikers. Zij zouden de digitalisering eerder als een bedreiging zien.

Voor andere mensen, in het bijzonder mensen met een handicap, biedt de digitalisering van de informatie juist enorme kansen. Onoverkomelijke moeilijkheden in de fysieke wereld kunnen totaal verdwijnen in de digitale wereld. Deze mensen zijn dus zeer gemotiveerd om maximaal te profiteren van de digitale interfaces.

Zelfs met hun vaardigheden en motivatie, is het voor zeer veel mensen met een handicap nochtans onmogelijk om digitale diensten te gebruiken. Dit probleem ligt niet bij de gebruikers maar bij de digitale interfaces zelf, als ze niet toegankelijk zijn voor iedereen. Dit gebrek aan toegankelijkheid wordt vaak veroorzaakt door een gebrek aan vaardigheden of motivatie bij de ontwikkelaars van digitale inhoud.

Het is des te erger omdat de digitale interface voor deze mensen vaak de enige beschikbare optie is. Als technologie goed wordt gebruikt, kan ze bovendien veel obstakels wegnemen.

Technologie kan obstakels wegnemen

De technologische vooruitgang heeft ervoor gezorgd dat vandaag bijna iedereen een computer, tablet of smartphone kan gebruiken. Je kan deze apparaten bedienen met je stem of met je blik en binnenkort zelfs met je gedachten. Iemand die geen bic kan vasthouden of niet kan spreken en dus niet kan telefoneren, kan dankzij dit soort technologie toch communiceren en zelfstandig allerlei dagelijkse handelingen uitvoeren.

Zoom op smartphone is een gewaardeerd hulpmiddel voor alle mensen bij wie het zicht afneemt met de leeftijd. Een screenreader laat een blinde persoon toe om door een webpagina te navigeren. Toepassingen als Facetime vergemakkelijken de communicatie tussen doven. En dit zijn slechts enkele van de vele voorbeelden.

Met aangepaste communicatiemiddelen is er geen handicap meer. Neem het voorbeeld van Sylvie (blind) en Sophie (doof). Ze communiceren probleemloos met elkaar via direct messages op twitter.

De situatie creëert de handicap

Iemand die een kinderwagen duwt, beschouwt zich niet als gehandicapt, totdat hij onderaan een trap staat. In de digitale wereld is het precies hetzelfde.

  • Een blinde persoon kan met een screenreader probleemloos een goed ontworpen formulier invullen, maar kan het niet versturen als het eindigt met een CAPTCHA.

    voorbeeld van re-captcha

    De ontwikkelaar kan andere technische oplossingen gebruiken om spam tegen te houden.

  • Een communicatiecampagne die enkel bestaat uit video zonder ondertitels of gebarentaal sluit alle dove mensen uit. Als u ondertiteling en vertaling in gebarentaal in het budget voorziet, bent u er zeker van dat iedereen de boodschap begrijpt.
  • Enkel rood, oranje en groen gebruiken om de piekuren van een winkel aan te duiden, maakt deze informatie onbruikbaar voor een kleurenblinde. Goede ontwerpers houden daar rekening mee en gebruiken niet enkel kleur om deze informatie over te brengen.

    Piekuren aangeduid met kleur en met een pictogram dat 1, 2 of 3 mensen voorstelt

  • De zoomfunctie op een website blokkeren, kan de inhoud voor veel mensen onleesbaar maken op een smartphone.
  • Inhoud in Flash is een handicap voor elke internetgebruiker die enkel over een tablet beschikt om de website te raadplegen.

De verantwoordelijkheid van ontwikkelaars van digitale inhoud

De bezoekers van uw website gebruiken allerlei tools, nemen de informatie op verschillende manieren waar en interageren niet allemaal op dezelfde manier met uw website. Sommigen hebben een handicap.

Daar moet u rekening mee houden als u digitale inhoud ontwikkelt.

Zoals Sarah Bourne zegt, is toegankelijkheid niet de kers op de taart. Het zijn de eieren. Je moet ze in het begin toevoegen want anders is het veel meer werk.

De keuzes die communicatieverantwoordelijken, ontwerpers, ontwikkelaars en redacteurs maken, kunnen werkelijk obstakels creëren en effectief talloze surfers in een handicapsituatie plaatsen, of in tegendeel, ervoor zorgen dat iedereen toegang heeft tot de inhoud.

AnySurfer biedt opleidingen en informatie aan iedereen die digitale inhoud ontwikkelt. We helpen hen goede keuzes te maken en toegankelijkheid te integreren in het proces.

Conclusie

Zonder toegankelijkheid zijn de vaardigheden en de motivatie van de gebruikers zinloos. Zonder toegankelijkheid is de digitalisering een gemiste kans om iedereen gelijke toegang te geven tot informatie en diensten. De toegankelijkheid is een vereiste voor digitale inclusie.

1 reactie

Tabs met ARIA: de regels van de kunst

Bart Simons op 15/09/2015

Cet article en français: Des onglets dans les règles de l'art

Het probleem

Tabs op een website zijn visueel erg duidelijk en tegelijk heel verwarrend voor wie het scherm niet ziet of geen overzicht heeft over het hele scherm:

  • De tabs zijn voor screenreadergebruikers geen afgebakend geheel, maar gewoon een onderdeel van de webpagina. Aan het eind van het paneel moet je je realiseren/herinneren dat je terug moet keren om een andere tab te selecteren.
  • Als je een tab kiest, verdwijnt de tekst van de eerder geselecteerde tab en deze wordt vervangen door nieuwe informatie: paginawijziging.
  • Het paneel heeft meestal geen kop. Visueel is het duidelijk doordat de actieve tab is gemarkeerd. Screenreadergebruikers missen dat verband.

Screenshot tabs van Hans Hillen

Basiscode van een tabswidget

<div id="Tabs">
<ul>
<li><a id="tabsdemo-1-tab" href="#tabsdemo-1">Dogs</a></li>
<li><a id="tabsdemo-2-tab" href="#tabsdemo-2">Cats</a></li>
<li><a id="tabsdemo-3-tab" href="#tabsdemo-3">Sheep</a></li>
</ul>
			
<div style="display: block;" id="tabsdemo-1">
<p>The dog Canis lupus familiaris, is?</p>
</div>

<div style="display: none;" id="tabsdemo-2">
<p>The cat (Felis catus), also known as? </p>
</div>
				
<div style="display: none;" id="tabsdemo-3">
<p>Domestic sheep are quadrupedal?</p>
</div>

ARIA to the rescue

Tabs zijn een van de weinige widgets waar we aanbevelen om ARIA te gebruiken. Je vertrekt van een lijst van links en div's en met ARIA voeg je de semantiek toe die in HTML niet bestaat:

  • verander met role="tab" de semantiek van de links naar tabs,
  • groepeer deze tabs met role="tablist",
  • onderdruk de lijst-items met role="presentation",
  • geef met aria-selected aan welke tab geselecteerd is. Voeg dit attribuut toe aan elke tab en verander de waarde van false naar true als het actief wordt.
  • leg het verband tussen tab en tabpaneel met aria-controls. Dit attribuut krijgt als waarde de inhoud van de id van het paneel dat deze tab zal activeren.
  • geef met role="tabpanel" aan waar elk tabpaneel begint en eindigt,
  • geef elk tabpaneel een naam via aria-labelledby. Dit attribuut krijgt als waarde de id van de tab die bij dit paneel hoort.

Dit filmpje toont stap voor stap hoe je ARIA toevoegt. Het bevat ook een interessante discussie over het activeren van tabs. Ondertussen zijn de meesten het erover eens dat de tweede optie de beste is: in de tablist selecteer je een tab met de pijltoetsen; om naar het paneel te gaan, gebruik je de tabtoets.

ARIA voegt enkel semantiek toe voor screenreaders. ARIA beïnvloedt niet hoe iets er uitziet en ook niet hoe het werkt. Voor toetsenbordgebruikers (waaronder screenreadergebruikers) zijn er nog aandachtspunten:

  • Voeg tabindex="0" toe aan de actieve tab en tabindex="-1" aan alle andere tabs. Zo zorg je ervoor dat de tabfocus enkel op de actieve tab terechtkomt. Wissel via Javascript de waarde van het tabindex-attribuut telkens een andere tab wordt geselecteerd.
  • Een andere tab selecteren, gebeurt met de pijltoetsen. Links/omhoog voor vorige tab en rechts/omlaag voor volgende tab.
  • Na het selecteren van een tab met de pijltoetsen, druk je op de tabtoets om naar het bijhorende paneel te gaan. Het is voor screenreadergebruikers essentieel dat je de focus bovenaan het tabpaneel plaatst: ofwel op het paneel zelf (container) ofwel op het eerste element van het paneel (kop). Als je dit niet forceert dan zal de focus gaan naar het eerste interactieve element binnen of voorbij het paneel.
  • Als je het paneel gelezen hebt, moet je terugkeren naar de lijst van tabs om een andere te kiezen. Dit is vooral lastig als het tabpaneel veel links of een formulier bevat. De WAI-ARIA Authoring Practices 1.1 definiëren sneltoetsen ctrl+pijltjes en ctrl+pageUp en ctrl+pageDown om van actieve tab te wisselen, maar die werken in de meeste browsers niet of zijn niet gekend of overschrijven reeds bestaande toetscombinaties.

Resultaat

<div id="Tabs">
<ul role="tablist">
<li role="presentation">
<a role="tab" tabindex="0" aria-selected="true" aria-controls="tabsdemo-1" 
id="tabsdemo-1-tab" href="#tabsdemo-1">Dogs</a></li>
<li role="presentation">
<a role="tab" tabindex="-1" aria-selected="false" aria-controls="tabsdemo-2" 
id="tabsdemo-2-tab" href="#tabsdemo-2">Cats</a></li>
<li role="presentation">
<a role="tab" tabindex="-1" aria-selected="false" aria-controls="tabsdemo-3" 
id="tabsdemo-3-tab" href="#tabsdemo-3">Sheep</a></li>
</ul>
			
<div role="tabpanel" style="display: block;" aria-labelledby="tabsdemo-1-tab" 
id="tabsdemo-1">
<p>The dog Canis lupus familiaris, is?</p>
</div>

<div role="tabpanel" style="display: none;" aria-labelledby="tabsdemo-2-tab" 
id="tabsdemo-2">
<p>The cat (Felis catus), also known as? </p>
</div>
				
<div role="tabpanel" style="display: none;" aria-labelledby="tabsdemo-3-tab" 
id="tabsdemo-3">
<p>Domestic sheep are quadrupedal?</p>
</div>

Kant-en-klaar

De fantastische Nicolas Hoffmann heeft ook nu weer al dit werk voor u al gedaan: jQuery Accessible tab panel system, using ARIA - By Nicolas Hoffmann

Tabpaneel van Nicolas Hoffmann

Opmerkingen

  • Niet alle browsers hebben even goede ondersteuning voor ARIA en dat geldt helaas ook voor screenreaders. Hoe recenter de versie, hoe beter, maar veel mensen werken niet met de meest recente versie.
  • Nog niet alle toetsenbordgebruikers weten dat ze de pijltoetsen moeten gebruiken om tussen tabs te schakelen.
  • Veel screenreadergebruikers weten (nog) niet wat "tab" wil zeggen en hoe ze het moeten gebruiken. Bij het activeren van een tab, gaat de screenreader in formuliermodus. Zo kan je de pijltoetsen gebruiken om tussen tabs te schakelen, maar als je dat niet weet, is het heel verwarrend. Tabs zijn geen links en staan dus niet in de linklijst van een screenreader.
  • Het web wordt ingewikkelder en iedereen zal moeten volgen om bij te blijven. Naarmate de ondersteuning door screenreaders en browsers groeit, zullen gebruikers er ook meer vertrouwd mee raken. Dat zal enkel gebeuren als alle tabs volgens dezelfde principes worden gebouwd. Als u niet de versie van Nicolas Hoffmann gebruikt, test dan grondig dat uw variant even goed werkt.
  • Gebruik in een tabswidget geen role="application" want dan kan een screenreadergebruiker de inhoud van het tabpaneel niet lezen met de vertrouwde toetscommando's. Meer hierover in het artikel Gebruik geen role=application
  • Zorg ervoor dat ook de usability van uw tabs-widget goed zit.
Reageer als eerste