Články

Nástroje v aplikaci Flash

Představme si nyní konkrétní nástroje a možnosti, jež nám Flash nabízí. Zaměříme se především na panel Accessibility a metody a vlastnosti ActionScriptu. Obecně můžeme říci, že vše, co lze nastavit v aplikačním prostředí Flashe můžeme nastavit také pomocí ActionScriptu. U každého nastavení si představíme oba postupy. Nejprve se podívejme na základní objekty Flashové stránky, které můžeme pro přístupnost optimalizovat. Jedná se o:

• Dynamické texty (Dynamic Text Field)
• Vstupní textová pole (Input Text Field)
• Tlačítka (Buttons)
• Movie klipy (Movie Clips)
• Flash aplikace jako celek

Následující tabulka přehledně zobrazuje nabídky panelu Accessibility, jejich ekvivalenty v ActionScriptu a konečně na jaké konkrétní objekty lze tyto vlastnosti aplikovat.

* Převrácená logika znamená, že hodnota true v ActionScriptu se vztahuje k nevybrané nabídce v panelu Accessibility, a hodnota false v ActionScriptu se vztahuje k vybrané nabídce v panelu Accessibility.

Mimo tyto vlastnosti jednotlivých elementů nám ActionScript nabízí ještě metody další. Jedná se o Accessibility.isActive(), Accessibility.updateProperties() a System.capabilities.hasAccessibility().

Accessibility.isActive();

Tato metoda nám říká, zda jsou nějaká pomocná zařízení pro přístupnost aktivní a zda s nimi přehrávač komunikuje.

Tip:
Pokud metodu Accessibility.isActive() zavoláme okamžitě (např. v první vteřině) po spuštění flashové aplikace, může se stát, že nám vrátí hodnotu false, i když je nějaké pomocné zařízení aktivní. Je to způsobeno asynchronní komunikací mezi Flashem a MSAA klientem. Proto po spuštění aplikace zajistíme jednu nebo dvě vteřiny prodlevu.

Accessibility.updateProperties();

Po zavolání této metody se aplikují všechny změny vlastnosti _accProps.

Tip:
Zavoláním této metody „přinutíme“ Flash Player aby znovu „prozkoumal“ všechny vlastnosti přístupnosti a aktualizovat popisy vlastností pro asistenční zařízení a pokud je to nezbytné, upozornil jej na změnu. Pokud měníme vlastnosti přístupnosti u mnoha objektů najednou, není vhodné volat metodu Accessibility.updateProperties() po každé změně. Příliš častá změna by totiž mohla u obrazové čtečky způsobit problémy. Místo toho provedeme všechny potřebné změny u všech objektů a tuto metodu zavoláme až na konci.

System.capabilities.hasAccessibility();

Pomocí této metody zjistíme je-li přehrávač v prostředí, které podporuje komunikaci mezi Flash Playerem a pomocnými zařízeními.

Panel Accessibility

Klíčovým nástrojem, který umožňuje kontrolovat přístupnost jednotlivých elementů ve Flashi, je panel Accessibility. Tento panel je přístupný pouze pro Movie klipy, Tlačítka a Text. „Graphics“ musíme zkonvertovat na Movie klipy. Panel Accessibility je poněkud zavádějící. Název napovídá, že naše aplikace budou 100% přístupné, ale to není tak úplně pravda. Při tvorbě flashové aplikace musíme mít na paměti více než jen alternativní texty.

Panel Accessibility nám dovoluje nastavit různé vlastnosti individuálních elementů nebo celé flashové aplikace. V panelu Accessibility pro jednotlivé objekty nastavujeme různé vlastnosti přístupnosti jako jsou Name (Jméno), Description (Popis), Keyboard shortcut (Klávesová zkratka) nebo Tab index. Podmínkou je, že konkrétní objekt musí být označený. Pokud nebude označený žádný objekt, tyto vlastnosti se nastaví pro celou aplikaci. Nesmíme také zapomenout zadat jméno objektu v panelu vlastností (Property inspector) – viz následující obrázek.

Upozornění:
Nepleťte si jméno objektu specifikované v panelu Accessibility se jménem instance specifikovaným v „Property instectoru“. Viz předešlé obrázky.

1. Make movie accessible / Make object accessible

Pokud je volba Make Movie/Object Accessible zaškrtnutá, dává pokyn pro Flash Player k předání informací o přístupnosti objektu obrazové čtečce.
Asistenčním zařízením nebudeme zpřístupňovat každý jednotlivý element, ale jen ten, který má nějakou obsahovou hodnotu. Řada prvků má jen dekorativní charakter a tak je jejich zpřístupnění zbytečné a často matoucí. Pokud tato volba zaškrtnutá není, všechny ostatní volby rovněž nejsou aktivní. Tuto nabídku můžeme aplikovat na celou aplikaci, tlačítka (Buttons), movie klipy (Movie Clips), dynamický text (Dynamic text) a vstupní textové pole (Input text)
Element lze zpřístupnit také pomocí ActionScriptu. Vlastnost _accProps je typu „objekt“ a před její změnou se ujistíme, zda tento objekt existuje. Aby se změna skutečně projevila, zavoláme ještě metodu Accessibility.updateProperties().

if (myAccessibleElement._accProps == undefined) {
  myAccessibleElement._accProps = new Object();
}
myAccessibleElement._accProps.silent = false;
Accessibility.updateProperties();

2. Make child object accessible

Tato nabídka, pokud je vybraná, zpřístupní dceřinné elementy (child) objektu, asistenčním zařízením.
Pokud toto nastavení nezaškrtneme, objekt se bude tvářit jako objekt bez dalších dceřinných prvků, i když bude obsahovat text, tlačítka a další objekty. Všechny objekty uvnitř tohoto movie klipu jsou pak před obrazovými čtečkami skryty. To se hodí například u některých animací, kdy by se čtečka aktualizovala na každém snímku. Zároveň si skrytím některých elementů můžem ulehčit práci při testování, kdy se nečte vše, ale jen ty části, které máme aktivovány.
Lze aplikovat na celou aplikaci nebo Movie klipy.

Následuje ukázka změny stejné vlastnosti, ale s pomocí ActionScriptu:

if (myAccessibleElement._accProps == undefined) {
myAccessibleElement._accProps = new Object();
}
myAccessibleElement._accProps.forceSimple = false;
Accessibility.updateProperties();

3. Auto Label

Auto Label instruuje Flash, aby automaticky „otitulkoval“ objekty specifickým jménem - labelem. Flash pak v dokumentu automaticky přiřadí jméno (Name) tlačítku nebo vstupnímu textovému poli podle textu, který jsme umístili nad, do nebo blízko objektu.

Upozornění:
Auto Label nelze nastavit za běhu aplikace (runtime).

Ukázka s tlačítkem:
Většina obrazových čteček jako první přečtou text „button“ a až potom titulek „porfolio“. Viz následující obrázek:

Ukázka se vstupním textovým polem:

Formulář může obsahovat vstupní textové pole, kde uživatelé zadávají své jméno. Statický text „Zadejte své jméno“ bude umístěno vedle tohoto vstupního textového pole. Když Flash Player na takovéto „uspořádání“ narazí, předpokládá, že statický text je pro toto vstupní textové pole titulek.
Když se například objeví následující situace, obrazová čtečka přečte text „Zadejte své jméno“:

4. Name

Stručné, popisující textové ekvivalenty pro vybrané objekty. Je to obdoba alternativního textu (ALT) u obrázků v kódu HTML. „Name“ by vždy mělo mít méně než 200 znaků. Podíváme-li se na to z pohledu uživatele používajícího obrazovou čtečku, dlouhá jména pro něj mohou být nudná a únavná. Pokud přístupný objekt jméno nemá, obrazová čtečka přečte obecný název elementu, jako třeba „tlačítko“ (button), což bývá pro uživatele spíše matoucí.
Vlastnost Name lze aplikovat na celou aplikaci, tlačítka (Buttons), movie klipy (Movie Clips) a vstupní textové pole (Input text).

Ukázka změny vlastnosti Name s pomocí ActionScriptu:

if (myAccessibleElement._accProps == undefined ) {
myAccessibleElement._accProps = new Object();
}
myAccessibleElement._accProps.name = „jméno elementu“;
Accessibility.updateProperties();

5. Description

Description nám dovoluje vložit popis (description) objektu pro asistenční zařízení, která jej pak reprodukuje uživateli. Pokud je Name box příliš malý nebo pokud je třeba dalšího vysvětlení použijeme políčko Description. V tomto případě nám Name slouží jako určité shrnutí a Description nám poskytuje detailnější popis.
Jak už jsme si řekli u políčka Name, popisek by měl být co nejkratší, aby nenudil a nezdržoval. Pokud vysloveně nepotřebujeme něco složitěji vysvětlovat, toto políčko nezaškrtáváme a ponecháme vybrané jen Name.
Toto nastavení lze aplikovat na celou aplikaci, tlačítka (Buttons), movie klipy (Movie Clips), dynamický text (Dynamic text) a vstupní textové pole (Input text)

Ukázka změny vlastnosti Description s pomocí ActionScriptu:

if (myAccessibleElement._accProps == undefined ) {
myAccessibleElement._accProps = new Object();
}
myAccessibleElement._accProps.description = „detailnejsi popis“;
Accessibility.updateProperties();

6. Shortcut (Klávesová zkratka)

Zprostředkuje asistenčním zařízením znění klávesové zkratky. Toto nastavení je opět poněkud nejasné, protože samotný název klávesové zkratky v panelu Accessibility klávesovou zkratku nevytvoří; jen asistenčnímu zařízení napoví, že taková zkratka existuje. Samotnou klávesovou zkratku pak musíme sami vytvořit s pomocí ActionScriptu.
Klávesovou zkratku lze vytvořit například pro tlačítko, takže se uživatelé budou moci rychle a efektivně v aplikaci pohybovat, aniž by museli poslouchat obsah celé stránky. Vytvoříme například klávesovou zkratku pro rychlý přístup do menu, do palety nástrojů, na hlavní obsah stránky, na další stranu nebo pro stisk tlačítka odesílající formulářová data.
Klávesovou zkratku bychom měli vytvářet ve formátu „Control + A“. Pro rychlý přístup do Portfolia, Referencí nebo Kontaktů vytvoříme například zkratky „Control + P“, „Control + R“ nebo „Control + K“.
Lze aplikovat na tlačítka (Buttons), movie klipy (Movie Clips), vstupní textové pole (Input text)

Upozornění:
Funkčnost klávesových zkratek také závisí na použitých asistenčních zařízeních. Abychom se ujistili, že naše klávesové zkratky nekolidují s klávesovými zkratkami těchto zařízení, prohlížeče nebo operačním systémem musíme aplikace důkladně testovat.

Tvorba klávesové zkratky tedy vyžaduje dva kroky:

• Označíme objekt a v panelu Accessibility do políčka Shortcut vložíme název klávesové zkratky (například „Control + A“) takže jí asistenční zařízení může přečíst.
• Pomocí ActionScriptu potom samotnou klávesovou zkratku pro daný objekt vytvoříme.

// přiřazení názvu klávesové zkratky
// k objektu „myAccessibleElement“
if (myAccessibleElement._accProps == undefined ) {
myAccessibleElement._accProps = new Object();
}
// vytvoření klávesové zkratky samotné
function myShortcut():Void {
// 65 je kód pro klávesu „a“
  if (Key.isDown(Key.CONTROL) && Key.getCode() == 65) {
    Selection.setFocus(myAccessibleElement);
    // další kód
  }
}
var shortcutListener:Object = new Object();
shortcutListener.onKeyDown = myShortcut;
Key.addListener(shortcutListener);
// aktualizace vlastnosti _accProps
myAccessibleElement._accProps.shortcut = "Control + A";
Accessibility.updateProperties();


7. Tab index (pouze ve verzi Flash Professional)

Tab index vytvoří pořadí, ve kterém objekty po stisku Tabulátoru získají „focus“. Tab index se používá pro navigaci po stránce pomocí klávesnice, ale ne pro pořadí čtení (read-order – viz níže) obrazové čtečky. Lze aplikovat na tlačítka (Buttons), movie klipy (Movie Clipy), dynamický text (Dynamic text), vstupní textové pole (Input text).

Ukázka nastavení tab-indexu s pomocí ActionScriptu:

myAccessibleElement.tabIndex = 10;

Závěr

A jsme u konce. Věřím, že vás to množství nastavení a kódu neodradilo od další četby. I když je celý článek v podstatě jen o nastavení a používání jedoho panelu, není to tak hrozné jak to vypadá. Práce v porostředí Flashe je intuitivní a lze se jí rychle naučit. Důležité je mít na paměti základní principy a vědět, co a proč dělám. Ti z vás, kteří jste se „prokousali“ až sem a pořád nemáte dost, můžete se těšit na další díl. Stále zůstaneme u Flashe a technických záležitostí, nicméně už se nebudeme prodírat kousky kódu a jednotlivým nastavením, ale ukážeme si několik tipů a rad, které nám při optimalizaci stránek pro přístupnost pomohou.

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

http://www.macromedia.com/resources/accessibility/ 
http://www.w3.org/WAI/ 
http://livedocs.macromedia.com/flash/mx2004/ 
http://www.macromedia.com/software/player_census/flashplayer/