Články

Tyto tipy jsou seskupeny pod jednotlivé oblasti, které jsou typické pro internetové stránky obecně; nejen pro Flash. Při tvorbě stránek tradičními technologiemi jsou, nebo by měly být, některé z následujících vlastností samozřejmostí – alternativní text, přizpůsobitelná velikost textu atd. Při tvorbě stránky ve Flashi se však na tyto základní principy často zapomíná; snad práce v jiném prostředí či s jiným nástrojem odvádí pozornost od našeho cíle. Od cíle, kterým zůstává internetová stránka, na níž jakýkoliv uživatel rychle a snadno najde co hledá, nehledě na technologii, kterou je stránka vytvořena.

Zabývat se budu konkrétně těmito oblastmi:

• alternativní text,
• kontrola pořadí čtení,
• animace,
• alternativní navigace,
• přístupnost komponent,
• kontrola zvuku,
• přispůsobitelná velikost textu.

1.1. Alternativní text

Pro objekty, u kterých použjeme panel Accessibility a tedy je zpřístupníme, nesmíme zapomenout uvést zároveň alternativní text. Je důležité, aby text nejen popisoval obrázek, ale zároveň vysvětloval, co vybraný objekt bude dělat, jak se bude chovat. Porovnejte např. „Kliknutím zobrazíte animaci skákajícího míče“ vs. „Míč“ nebo „Klikněte zde“.

• Alternativní text zadáme do pole Name, popř. vyplníme i Description.
• Jeden z flashových elementů, který rovněž vyžaduje textový ekvivalent, je text samotný. Flash nerozeznává odkazy ani citace.
• Alternativní text přiřadíme neviditelným tlačítkům a některým formulářovým komponentám, jako jsou ComboBox, seznamy či scroll bary.
• U animace, která může být celá popsána několika slovy, stačí jednoduchý textový ekvivalent. Složité animace však v těchto textech vyžadují změny v průběhu svého přehrávání. Optimalizaci animace se budeme věnovat dále.
• Pro správné přiřazení alternativního textu je důležitá správná hierarchie subobjektů. Měli by být za sebou uvedeny tak, aby se nenarušilo čtení textu obsahu a alternativních textů.
• Alternativní text musí být přiřazen i tlačítkům s grafickým textem. Musíme zajistit, že společně se změnou obsahu dynamického textového pole se změní i alternativní text. Pokud změníme Name a Description „za běhu“ aplikace pomocí _accProps, nebude to mít žádný efekt. Možností je tedy měnit celé objekty s novým alternativním textem.
• Alternativní text bychom měli přiřadit i aplikaci jako celku. Měl by zde být popsán účel aplikace, layout a její navigace, ovládací prvky, klávesové zkratky apod. Name a Description mohou být přístupné například z nejvyšší úrovně časové osy (_root). Mnohem flexibilnější je však metoda umístění neviditelného, prázdého objektu s alternativním textem, který bude po načtení aplikace číst obrazová čtečka jako první. Toto řešení má výhodu v tom, že po opakovaném zobrazení úvodní stránky se obecné informace opět nečtou. Při dalším návratu na úvodní stránku je tato informace zbytečná a tak snadno neviditelný objekt odstraníme. Pokud uživatel přeci jen tyto informace opět vyžaduje, stačí do hlavičky umístit tlačítko „informace o stránce“. Stejné tlačítko umístíme i do patičky stránky.

1.2. Kontrola pořadí čtení – „tab-order“ a „reading-order“

Existují dva způsoby, jak kontrolovat pořadí čtení jenotlivých elementů:

1. „tab-order“, pomocí kterého se sám uživatel pohybuje po obsahu stránky pomocí klávesy Tab (tabulátor) a
2. „reading-order“, což je pořadí, ve kterém jsou jednotlivé elementy čteny obrazovou čtečkou.

Flash Player jako výchozí nastavení používá tab-order zleva doprava a shora dolů. Nicméně pokud toto není pořadí, které chceme použít, můžeme si jak tab-order, tak reading-order upravit použitím vlastnosti tabIndex v panelu Accessibility nebo v ActionScriptu.

1.2.1. Tab-order

Máme možnost vytvořit tab-order, který rozhodne o pořadí, ve kterém objekty přijmou „focus“, když uživatel stiskne tabulátor. Lze k tomu použít panel Accessibility nebo ActionScript. Nezapomínejme, že tabIndex, který přiřadíme v panelu Accessibility, ne vždy kontroluje pořadí čtení (reading-order).

„Tab-focus“ objekty získávají v numerickém pořadí, začínajícím od nejnižšího čísla. Po dosažení posledního čísla s nejvyšší hodnotou se „focus“ vrátí na začátek – na číslo nejnižší.

1.2.2. Reading-order

Můžeme také kontrolovat pořadí, ve kterém obrazová čtečka čte informace o objektu (tzv. „reading-order“). K jeho vytvoření, musíme pomocí ActionScriptu přiřadit každé instanci hodnotu vlastnosti tabIndex. Tuto hodnotu musíme přiřadit každému přístupnému objektu, ne jen objektu, který může získat „focus“. Dynamický text například musí mít přiřazenou hodnotu tabIndex, i když se uživatel pomocí tabulátoru k tomuto dynamickému textu nedostane. Pokud bychom tuto hodnotu pro každý přístupný objekt v každém snímku nevytvořili, Flash Player bude všechny ostatní objekty pro tento konkrétní snímek ignorovat a obrazová čtečka použije výchozí pořadí.

Pokud objekty s námi definovanými hodnotami tabIndex přesuneme v rámci dokumentu nebo mezi několika různými dokumenty, objekty si tyto hodnoty zachovají. Musíme tedy dávat pozor na případné konflikty jednotlivých indexů, kdy například dva různé objekty na obrazovce mají hodnotu stejnou.

Uvedeným postupem zajistíme, aby pořadí čtení reflektovalo zobrazení prvků na obrazovce. Jednotlivé elementy a prvky aplikace by měli být čteny ve smysluplném pořadí. Očekáváme tedy, že nejdříve se bude číst hlavička stránky, pak navigace a potom obsah samotný. Pokud tomu tak není a hlavička se čte například až po samotném obsahu, bude taková aplikace pro hendikepované uživatele obtížně srozumitelná.

Rovněž bychom neměli míchat elementy z jednotlivých úrovní. Například název aplikace by neměl být čten mezi tlačítky apod. Tlačítka z jedné úrovně navigace nebudeme křížit s tlačítky z další úrovně navigace apod.

Pokud je Flash pouze částí celé aplikace, musíme zajistit přesun „focusu“ ze stránky HTML do objektu flash a zpět. To lze udělat například JavaScriptem.

Upozornění:
Pokud mají dva a více objektů na konkrétním snímku stejný tab-index, Flash bude postupovat v pořadí, v jakém jsou objekty uspořádány na obrazovce a ne podle definovaných hodnot. Proto bychom indexy měli vždycky kontrolovat, abychom vždy dosáhli požadovaného pořadí.

Tip:
Pokud chceme zobrazit jednotlivé hodnoty tabIndex přímo v prostředí Flashe, můžeme tak učinit zaškrtnutím nabídky „Show Tab Order“ (Menu > View > Show tab Order). Pokud máme jednotlivé hodnoty tabIndex přiřazené ActionScriptem, čísla se neobjeví.

1.3. Animace

Pro jakákoliv multimédia s časovou osou (film nebo animace) nesmíme zapomenout na synchronizaci alternativních textů s „dějem“. Pokud je animace jednoduchá, stačí jeden obecný alternativní text pro celou animaci. Při složitější animaci budeme potřebovat alternativní text v průběhu přehrávání aktualizovat. Uvažujme například spot zobrazující skákající míč. Není nutné, aby se popis měnil každý snímek. Stačí když nám popis řekne, že „animace zobrazuje skákající míč“. Na druhou stranu animace se složitějším „příběhem“ vyžaduje změnu alternativního textu v průběhu celého přehrávání. Opět není nutné jej měnit na každém snímku, nýbrž postačí poskytnout toto vodítko pouze při důležité viditelné změně. Alternativní text potom bude popisovat změnu scény, prostředí, změnu objektů na obrazovce či chování nebo atmosféru, kterou uživatel kvůli svému hendikepu nemůže například slyšet či vidět.

Alternativní text lze přidat manuálně přidáním textu na časovou osu. Další možnost je import QuickTime videa s už přiřazeným textem. Toto řešení však není příliš flexibilní, protože nám neumožňuje titulky v prostředí Flashe dále upravovat. Alternativní text lze také aktualizovat z externího XML souboru.

Make child objects accessible nám dovoluje objekty nejen zpřístupnit, ale také naopak „znepřístupnit“. Čtení všech objektů obrazovou čtečkou může být u komplexních animací rušivé.

Vyvarujeme se zbytečných opakujících se animací. Pokud se potřebujeme soustředit na textový obsah stránky a zároveň se na obrazovce neustále něco hýbe, ruší nás to a odvádí naši pozornost.

Úplně se vyhneme jakýmkoli blikajícím elementům. Například uživatelům trpícím epilepsií může blikání způsobit zdravotní obtíže.

1.4. Alternativní navigace

Vedle navigace myší poskytneme i alternativní navigaci, např. pomocí klávesnice. Někteří uživatelé se při navigaci spoléhají na klávesnici, takže „tab-order (viz výše)“ a události pro stisk klávesy by měli být použity na všech tlačítkách.

Při tvorbě navigace se vyhneme takovým událostem, které nemají svůj ekvivalent u dalších zařízení, jako je klávesnice. Jsou to například události myši releaseOutside, onDragOver atd.

Efektivní navigace pomocí klávesnice je obecně velkou výzvou. Uvažujme například, že se chceme dostat z úplného začátku aplikace někam na odkaz v samotném obsahu. Takový proces může být dost zdlouhavý a únavný. Jedním z možných řešení je schovat několik ovládacích prvků pod jeden samotný. Pokud budeme tyto ovládací prvky potřebovat, objeví se až po našem požadavku. Jako příklad si můžeme představit kalkulačku, která se objeví až po stisku tlačítka „kalkulačka“. Nemusíme tedy pokaždé procházet všechny tlačítka kalkulačky jen proto, že se chceme dostat dál, ale samotnou ji nevyužijeme. V době, kdy je klakulačka schovaná, mají jednotlivá tlačítka kalkulačky nastavenou hodnotu vlastnosti .silent na true.

Měli bychom si pamatovat, že tyto tipy pozitivně ovlivní nejen přístupnost, ale také celkovou použitelnost naší aplikace. Například poskytnutí další možnosti navigace vedle navigace myší uživateli ušetří čas a navíc má možnost používat takový způsob navigace, který mu vyhovuje, a ne ten, který mu vnutíme.

1.5. Přístupnost komponent

U komponent se přístupnost nastavuje metodou enableAccessibility(). Tato možnost je ale defaultně vypnuta, takže pokud chceme komponentu zpřístupnit, musíme tuto metodu zavolat a to pro každou jednotlivou instanci komponenty. Na následujícím příkladu vidíme obecné volání metody pro jakoukoliv přístupnou komponentu, přičemž jméno komponenty je zobrazené kurzívou:
mx.accessibility.JménoKomponentyAccImpl.enableAccessibility();
Na dalším příkladu už vidíme konkrétní příklad s komponentou Label:
mx.accessibility.LabelAccImpl.enableAccessibility();

S Flash 8 jsou dodávány následující přístupné komponenty:

• Simple Button
• Check Box
• Radio Button
• Label
• Text Input
• Text Area
• Combo Box
• List Box
• Window
• Alert
• Data Grid

1.6. Kontrola zvuku při přehrávání

Přehrávání zvuku ve Flashi, ať už hudby na pozadí nebo audio efektů různých událostí, může působit kolizi se zvukem „obrazové čtečky“. Je proto nutné, abychom pokaždé uživateli nabídli možnost doprovodný zvuk kdykoliv pozastavit (pause) nebo zastavit úplně (stop). Nejjednodušší způsob jak toho dosáhnout jsou tlačítka play/pause/stop a k nim přiřazené klávesové zkratky, které budou odkudkoliv snadno a rychle přístupné. Pro zastavení/spuštění použijeme například klávesu „P“, která bude sloužit jako „přepínač“; při prvním stisku se zvuk začne přehrávat, při druhém se pozastaví. Nezapomeneme ani na tlačítko pro kontrolu hlasitosti; uživatel si tak může doprovodné ozvučení zeslabit a nerušit tak obrazovou čtečku.

1.7. Velikost textu

Kontrola vzhledu je kapitolou sama o sobě a zahrnuje mnoho oblastí. Nás nejvíce zajímá změna velikosti fontu nebo barevná kombinace popředí a pozadí. U klasických HTML aplikací je, pokud jsou dobře navrženy, zajištěna změna velikosti textu přímo pomocí prohlížeče. Takovouto funkci ale Flash nenabízí a tak si ji musíme vytvořit sami. Jak měnit všechny potřebné texty na stránce je spíše otázkou správného návrhu celé aplikace a ani není účelem článku. Ukážme si tedy aplespoň změnu velikosti libovolného textového pole:

// „textResizeButton“ je tlačítko, které po kliknutí
// zvětší požadovaný text, v tomto případě textové
// pole „resizeableText“, na požadovanou velikost
textResizeButton.onRelease = function():Void {
resizableText.setTextFormat(_root.getFormat(14));
}

function getFormat(s:Number):TextFormat {
var tf:TextFormat = new TextFormat();
tf.size = s;
return tf;
}

Neměli bychom rovněž zakazovat funkci „Zoom“ v kontextovém menu Flash Playeru. Pokud zvětšování celé aplikace není vhodné, sami navrhneme a poskytneme speciální tlačítka, které budou kontrolovat, jak se jednotlivé prvky stránky budou zvětšovat resp. zmenšovat.

1.8. Validace, testování

Validace Flashe bežnými nástroji (např. HTML validátorem) není možná. Kontrolovat jej tak musíme pomocí testování.

Pokud navrhujeme naši aplikaci tak, aby spolupracovala s obrazovými čtečkami, zajistíme si několik těchto čteček, v nichž poté aplikaci otestujeme. Ujistíme se, že čtečka nepřekrývá další zvuky na místech, kde jsme tento zkuk vložili.

Otestujeme také, zda se uživatel dokáže po naší aplikaci pohybovat rychle a efektivně. To ovšem nemusí být nejsnadnější, neboť různé obrazové čtečky pracují při navigaci pomocí klávesnice, různými způsoby. To znamená, že například naše aplikace nerozezná stisknutou klávesu, jak bychom očekávali. Ujistíme se proto, že máme otestované všechny použité klávesové zkratky.

1.9. Závěr

Pečlivé plánování jednotlivých elementů aplikace, jejich seskupování a vzájemné provázání je úplný základ. To znamená, že přístupnost musí být součástí flashových projektů už od samého začátku a nesmí být zkoumána odděleně až po skončení vývoje. Tím dosáhneme nejen přístupných stránek pro uživatele bez myši a pro uživatele obrazových čteček, ale zároveň zajistíme efektivní kontrolu pomocí ActionScriptu. Obsah je ve výsledku přístupný více uživatelům.

1.10. Páni, to bylo zajímavý! Kde se dozvím víc?

• http://www.adobe.com/accessibility/ 
• http://www.w3.org/WAI/ 
• http://www.macromedia.com/software/player_census/flashplayer/