Emoticons en emoji's

Steeds vaker gebruikt men karakters niet voor wat ze letterlijk betekenen maar voor hoe ze eruitzien. Het begon met opeenvolgende leestekens die op blije of droevige gezichtjes lijken. Het is geëvolueerd naar allerlei emoji's. In de Web Content Accessibility Guidelines valt dit onder het eerste succescriterium niet-tekstuele content. Die kan decoratief zijn en dan moet je ervoor zorgen dat screenreaders ze negeren, of ze kunnen juist heel betekenisvol zijn en dan moet je een tekstalternatief voorzien.

Wat is het probleem?

Een blinde leest de inhoud van het scherm in braille of laat die voorlezen met een synthetische stem. De brailleweergave van een karakter staat volledig los van hoe het karakter er visueel uitziet. Een synthetische stem benoemt de betekenis van een karakter maar houdt zelden rekening met de context.

Concreet: op het scherm staat een kleinerdan-teken gevolgd door het cijfer 3. Visueel interpreteert men dit als een hartje, maar voor een braillelezer staat er gewoon een kleinerdan teken en het cijfer 3. Ook de synthetische stem zal gewoon voorlezen "kleiner dan 3". Dat klinkt een stuk minder romantisch dan hoe het misschien bedoeld was.

Het is niet vanzelfsprekend voor een braillelezer om die opeenvolgende leestekens te leren interpreteren en te onthouden welke combinatie welk soort gezichtje betekent. Je kan in een screenreader instellen dat bepaalde tekenreeksen anders worden uitgesproken, maar kleinerdan-teken gevolgd door het cijfer 3 is niet altijd een hartje. Je zou dan ook horen 2 hartje als er 2<3 op het scherm staat. Dus je moet daar toch voorzichtig mee zijn.

Karakters "misbruiken" omwille van hun uitzicht komt vaker voor dan je denkt:

• Er bestaat een karakter dat "pijl naar rechts" betekent, maar veel mensen gebruiken liggend streepje gevolgd door het groterdanteken
• In Microsoft Word kan je in theorie om het even welk karakter als opsommingsteken gebruiken. Vaak kiest men de letter o. Het gevolg is dat veel screenreaders de letter "o" voorlezen aan het begin van elk onderdeel van de opsomming.
• In een ander artikel hadden we het ook al over icon fonts waar je ook om het even welk karakter visueel kan omvormen tot iets anders, maar als je dit niet toegankelijk maakt, blijft een screenreader en een brailleleesregel het originele karakter tonen.

Een andere categorie zijn de emoji's. Dit zijn wel nieuwe karakters in plaats van bestaande karakters te "misbruiken" voor hun uitzicht.

• Het is mogelijk om screenreaders de betekenis van een emoji te laten voorlezen, al blijft die enigszins subjectief uiteraard.
• Op een brailleleesregel is hiervoor nog geen oplossing gevonden. Het is niet mogelijk om al die nieuwe karakters een equivalente weergave in braille te geven.

Toegankelijk maken

Emoticons en emoji's vallen binnen de Web Content Accessibility Guidelines onder succescriterium 1.1.1 over niet-tekstuele content. Dat betekent dat we ze moeten vervangen door een tekstalternatief of moeten weglaten als ze decoratief zijn.

Emoticons zullen zelden decoratief zijn. Je voegt ze toe om een twist aan je boodschap te geven. Je wil aangeven hoe de lezer je woorden moet interpreteren. Enkel van de meest voorkomende combinaties zoals :-) en :-( mag je er van uitgaan dat je lezers ze begrijpen. Ingewikkelder constructies kan je best vermijden, vervangen door een woord of toegankelijk maken. Een mogelijke techniek is de combinatie van leestekens verbergen en vervangen door tekst:

<span aria-hidden="true">:/</span>
<span class="visuallyhidden">(melancholisch)</span>

Emoji kunnen decoratief zijn, bijvoorbeeld het vliegtuigje op de website van een vliegtuigmaatschappij. Zet het dan gerust in een span met aria-hidden="true". Maar in de zin: "Gaan we met de 🚆 of met het ✈?" is dat natuurlijk niet het geval.

Emoji zou letterlijk "beeld + karakter) betekenen. Om aan te geven dat er op het scherm niet letterlijk het woord trein of vliegtuig staat maar een afbeelding daarvan, volgen we de techniek die Léonie Watson voorstelt in het artikel Accessible emoji:

• Zet de emoji in een span zodat je er attributen aan kunt koppelen.
• Geef het de rol afbeelding via role="img".
• Geef het een tekstalternatief via aria-label.

<span role="img" aria-label="vliegtuig">✈</span>

Gaan we met de 🚆 of met het ✈?