Wanneer het gaat om het ontwikkelen van toegankelijke websites, is Flash altijd een ondergeschoven kindje geweest. Flash toegankelijk? Dat kon gewoon niet. Totdat in de Verenigde Staten een wet aangenomen werd die bekend staat als Section 508. Hierin stond dat alle informatie die de overheid digitaal aanbiedt ook voor visueel en anderszins gehandicapten toegankelijk moest zijn.

Voor een bedrijf als Macromedia betekende dit dat wanneer zij niet zorgden dat hun software voldoende opties bevatte om toegankelijke producten te ontwikkelen, de federale overheid hun software niet meer zou mogen gebruiken. Dat wilden ze uiteraard voorkomen en zodoende heeft de toegankelijkheid van Flash een grote sprong voorwaarts genomen!

Maar hoe kun je dat zelf toepassen? In dit artikel vind je een eerste aanzet van vijf stappen die je kunt nemen om je eigen flashsite ook toegankelijk te maken. De stappen die besproken worden in dit artikel zijn specifiek gericht op het toegankelijk maken van je flashsite voor visueel gehandicapten die gebruik maken van screen reader software. Het gaat hier dus niet zozeer om tekstbrowsers, maar met name om software die de website aan je voorleest. Momenteel zijn er tenminste twee (veel gebruikte) screen reader programma’s die flash accessibility ondersteunen: Window-Eyes van GW Micro en Jaws van Freedom Scientific (beide alleen gesproken Engels). Op beide websites kun je een demo downloaden waarmee je ongeveer 30 minuten aan de slag kunt.

In vijf stappen een toegankelijke flashsite

Voordat ik het hoe en wat kan uitleggen, is er een kanttekening die ik moet plaatsen. Aan het toegankelijk ontwikkelen in Flash zit namelijk een grote ‘maar’. Het kan op zich prima, maar dan alleen met de nieuwste versies van Flash (Flash MX en Flash MX 2004). In oudere versies kun je het toegankelijk bouwen eigenlijk wel vergeten. Vroeger kon je naast je flashsite alleen een alternatieve site in HTML aanbieden. Ik ben van mening dat dit niet telt als toegankelijk, want daarmee is je flashmovie nog steeds zo ontoegankelijk als wat!

Dit probleem met oudere versies geldt ook voor de Flash Player die de bezoeker van je website geïnstalleerd moet hebben. Pas vanaf versie 6 en alleen op Windows platformen zijn toegankelijke flashmovies ook daadwerkelijk toegankelijk (uit Flash MX Magic. Gelukkig is er ook goed nieuws: de penetratie van de Flash Player 6 is inmiddels ongeveer 92% (in de Verenigde Staten en Europa). Tenzij je flashsites bouwt in Flash 4 of 5, heb je geen excuus meer om bij het ontwikkelen geen rekening te houden met toegankelijkheid.

Stap 1: gebruik het accessibility panel om tekstuele alternatieven aan te bieden voor visuele elementen.

In Flash MX en in Flash MX 2004 heb je de beschikking over het Accessibility Panel waarmee je objecten toegankelijk kunt maken (even zoeken onder het menu Window). Het panel bestaat uit twee varianten: een met opties die gelden voor de volledige flashmovie (figuur 1) en een met opties voor aparte objecten (figuur 2).

In de eerste figuur typ je de naam in van de movie zoals je wilt dat de screen reader software die voorleest. Bij description kun je ook nog een omschrijving toevoegen. Deze twee teksten worden alleen voorgelezen op het moment dat de volledige movie geladen is. Wanneer een bezoeker op jouw flashsite terecht komt, hoort hij bij binnenkomst de paginatitel (uit de HTML code) en de net ingevoerde ‘name’ en ‘description’. Pas wanneer hij de pagina ververst, zal de screen reader software deze drie teksten nogmaals voorlezen.

Anders gaat het bij de ‘name’ en ‘description’ van een los object (figuur 2). Wanneer de bezoeker de tabtoets gebruikt om door de pagina te navigeren, worden per object telkens deze twee teksten voorgelezen. Omdat standaard beide worden voorgelezen, kun je met het oog op gebruiksvriendelijkheid beter slechts een van deze twee invullen. Bijvoorbeeld bij een knop naar de homepage typ je bij ‘name’ ‘Go to Homepage’ in. Heb je een langere omschrijving nodig bij bijvoorbeeld een foto, dan gebruik je alleen ‘description’.

Het is niet altijd noodzakelijk om al je buttons een naam of omschrijving te geven. Wanneer je tekst (met een textfield) in de knop hebt gezet dan leest de screen reader software deze automatisch voor. Het is in dit geval niet nodig dat je ook een naam en een omschrijving ingeeft. Dan kan de situatie ontstaan waarin de screen reader zegt: “Button homepage. Name homepage. Description: ga terug naar de homepage”, terwijl een maal “homepage” voldoende was geweest! Denk dus na bij wat je doet en controleer het door je zojuist gebouwde pagina te beluisteren.

Objecten in Flash kunnen ook weer andere objecten bevatten – denk hierbij bijvoorbeeld aan een movieclip met daarin een aantal graphics. In sommige gevallen zul je deze plaatjes apart een beschrijving willen geven, in andere gevallen is alleen een omschrijving van het object dat deze groepeert voldoende. Voor deze beslissing maak je gebruik van het aan- of uitvinken ‘Make child objects accessible’.

Objecten die je middels het net beschreven Accessibility Panel toegankelijk kunt maken zijn tekstvelden, buttons, movieclips en graphics (graphical symbols). Voor flashbouwers die meer technisch aangelegd zijn: elke eigenschap die je invult in het Accessibility Panel kan ook via ActionScript aan een object gekoppeld worden. Een overzicht van welke eigenschappen dat precies zijn en hoe je deze aanroept kun je bij Macromedia terugvinden. Naast de net genoemde objecten kun je in Flash MX 2004 ook components toegankelijk maken. Door middel van het in ActionScript aanroepen van de functie enableAccessibility() per componenttype (zoals de combobox of text input velden) in het eerste frame van de movie, kun je ervoor zorgen dat de screen reader ook de labels van deze componenten voorleest aan de bezoeker.

Stap 2: maak oneindige animaties ontoegankelijk

Zoals hierboven beschreven is, kun je bepaalde objecten in andere objecten ontoegankelijk maken door het uitvinken van ‘Make child object accessible’ in het Accessibility Panel. Dit is met name verstandig voor animaties die eindeloos doorlopen (zoals banners). Wanneer een animatie steeds opnieuw begint, interpreteert de screen reader dit alsof de pagina ververst wordt en begint deze opnieuw met het voorlezen van de pagina.

Stap 3: wijs toetsenbord shortcuts toe

In het Accessibility Panel kun je ‘shortcuts’ toewijzen aan objecten. De screen reader leest deze ook voor aan de bezoeker. Wanneer hij veelvuldig gebruik maakt van een website is het erg handig dat hij kan navigeren met behulp van het toetsenbord en niet iedere keer door alle objecten heen hoeft te tabben.

Stap 4: maak een logische tabvolgorde door de pagina

De tabvolgorde in een flashmovie is niet altijd even logisch. Grofweg loopt deze van linksboven naar rechtsonder. Maar soms wordt een object overgeslagen of is de volgorde die jij bedacht had als ontwikkelaar niet de volgorde die Flash aanhoudt. Het grote voordeel hier is dat je de tabvolgorde achteraf zelf kunt instellen.

De tabvolgorde stel je het eenvoudigst in met behulp van ActionScript. Dit kan op twee manieren. Bij de eerste methode bedenk je de volgorde van tevoren en stel je die in met behulp van de eigenschap tabindex. Stel je hebt een navigatie_mc, tekst_mc en een volgendebutton_mc. De tabvolgorde kun je nu op de volgende manier instellen, al naar gelang die het beste is voor de bezoeker:

_root.navigatie_mc.tabindex = 1;
_root.tekst _mc.tabindex = 2;
_root.volgendebutton _mc.tabindex = 3;

Echter, bij uitgebreide flashsites of bijvoorbeeld een rich internet applicatie met dynamische content is dit niet de meest makkelijke methode. Elk element, of dit zichtbaar is op de stage of niet, moet opgenomen worden in de tabvolgorde. Elementen die de screen reader mag negeren moeten ofwel niet zichtbaar zijn middels de eigenschap ‘visible’ of niet hoorbaar middels de eigenschap ‘silent’. Voor uitgebreide applicaties kun je beter alle elementen op de stage op ‘silent’ zetten en naast de stage – dus niet zichtbaar op je website – onder elkaar de meest belangrijke objecten nogmaals plaatsen die dan automatisch wel voorgelezen worden door de screen reader. Bovendien geeft dit je de mogelijkheid om extra informatie te vertellen die alleen voor screen reader gebruikers van toepassing is!

Stap 5: luister zelf ook eens naar je eigen site!

Hoe zeer je ook je best doet om een toegankelijke flashsite te ontwikkelen, je weet pas echt of het werkt als je het hoort. Zoals eerder beschreven zijn er twee screen reader programma’s beschikbaar die je kunt downloaden om zelf eens naar je website te kunnen luisteren. De demo software werkt voor ongeveer 30 minuten. Daarna moet je opnieuw opstarten als je de demo nog langer nodig hebt, maar hiermee heb je ruim voldoende tijd om een eerste indruk te krijgen van hoe je flashapplicaties klinken.

Leg je muis op een plaats waar je er niet bij kunt, doe je ogen dicht en navigeer door je flashmovie met alleen het toetsenbord. Veel succes!

Lees meer op onder andere de volgende websites:

• O'Reilly Network: Flash MX Accessibility Issues
• Stephen Hawking and Me - Flash MX Accessibility

• Home
• Artikelen
• Colofon