Poslepu.cz na novém URL

Od ledna 2014 najdete blog na adrese poslepu.cz.

úterý 9. února 2010

Přístupnost ovládacích prvků webových aplikací

Čím víc jsou populárnější weby využívající Javascript pro zobrazování nového obsahu ve stránce, tím víc se množí dotazy, jaká řešení volit, aby nevznikaly závažné bariéry v přístupnosti. Bohužel se jedná o tak dynamicky se rozvíjející oblast, v níž odečítače drží krok s nemalými obtížemi, že jasná odpověď neexistuje. Jak upozornit na nový obsah víceméně úspěšně řeší specifikace WAI-ARIA, ovšem přístupný návrh klikatelných oblastí stránky pro mnoho tvůrců webových aplikací zůstává otazníkem. Pokusíme se najít způsob, který zaručí, že uživatel bude moci obslužný skript v Javascriptu aktivovat i při ovládání z klávesnice za využití odečítače obrazovky.

Vyjdeme z testovací stránky http://lab.cjneti.net/focus-click.html, která nám poslouží k otestování s níže uvedenými kombinacemi odečítačů a prohlížečů. Prvním krokem k přístupnosti je schopnost prvku získat v prohlížeči fokus, druhým pak schopnost odečítače zjistit, že na prvek lze kliknout.

Pro otestování chování jednotlivých případů byly použity dvě konfigurace - jedna konzervativnější bez oficiálně deklarované podpory ARIA (Windows Internet Explorer 7.0 + JAWS 9.0) a jedna zaměřená na současnou implementaci ARIA (Mozilla Firefox 3.6 + NVDA 2009.1). Byly vybrány sice konkrétní verze, ovšem interpretace elementů na stránce je záležitost především odečítače, tudíž např. JAWS 11.0 s Firefoxem 3.6 vykazuje na testovací stránce prakticky stejné výsledky jako testovaná kombinace s Internet Explorerem.

Máme tedy šest následujících případů:

1. případ

Element <a> s vyplněnými atributy href a onclick:
<a href="#" onclick="return test()">

Ideální řešení - element je dosažitelný přes tab order (tj. získává fokus), je hlášený jako "odkaz" a samozřejmě i bez problému aktivovatelný. Za pozornost stojí konstrukce "return test()" v atributu onclick, jenž tím, že bude vracet false, zabrání přejití na originální adresu odkazu, což s výhodou lze využít ve chvíli, kdy při nefunkčnosti javascriptu se při aktivaci odkazu načte alternativní stránka.

2. případ

Element <a> pouze s vyplněným atributem onclick:
<a onclick="test()">

Stále je hlášen odkaz, u NVDA navíc s informací, že je klikatelný, nezíská v prohlížeči však nikdy fokus. Skript lze aktivovat po přesunutí virtuálního kurzoru odečítače na text elementu a stisku mezerníku nebo klávesy Enter.

3. případ

Element <a> s přivěšenou událostí onclick pomocí skriptu:
<a class="click">

Fokus opět nelze získat, z čehož plyne, že oba prohlížeče jako odkaz interpretují pouze element <a> s vyplněným atributem href. NVDA hlásí klikatelný odkaz, zatímco JAWS nesděluje žádnou sémantickou informaci, ani informaci o možnosti kliknutí na element. Na testované stránce událost onclick se u tohoto elementu bez problému vyvolá postupem uvedeným v předchozím případě.

4. případ

Element <span> s vyplněnými atributy tabindex a onclick:
<span tabindex="0" onclick="test()">


Podle specifikace WAI-ARIA je možné atribut tabindex aplikovat na jakýkoli element, který má mít možnost získat fokus, což oba prohlížeče dodržují. Rovněž oba odečítače oznamují, že element je klikatelný,a tak skript lze jednoduše aktivovat.

5. případ

Element <span> pouze s vyplněným atributem onclick:
<span onclick="test()">

Element je hlášen oběma odečítači jako klikatelný a tudíž pro jeho aktivaci je možno použít postup uvedený v případě č. 2. <span> se chápe jako anonymní inline element, a proto není implicitně zahrnut do tab order.

6. případ

Element <span> s přivěšenou událostí onclick pomocí skriptu:
<span class="click">

O fokusu nemůže být řeči, jak bylo zmíněno v předchozím případě, a rovněž s korektním oznámením klikatelnosti to není příliš pozitivní. NVDA klikatelnost hlásí a skript vyvolat lze. JAWS se chová jako v případě č. 3, tj. při čtení stránky takový element bere za obyčejný text bez hlubšího významu. Skript sice pomocí JAWS vyvolat lze, je zde však důvodné podezření, že uživatel nemusí být tak úspěšný vždy, což potvrzují ovládací prvky vytvořené tímto způsobem v online aplikacích Googlu, na nichž stisk mezerníku, ani Enteru, nemusí událost vyvolat.Tento problém se týká ve většině případů kombinace s prohlížečem Mozilla Firefox.

Závěr

Nejlepším řešením se jeví případ č. 1 umožňující poskytnout
alternativní ovládání pro variantu nefunkčního Javascriptu,
, popř. případ č. 4, který ale neumožňuje alternativní ovládání.

Za nejméně vhodné pak můžeme prohlásit případy č. 3 a 6, s nimiž má JAWS problém bez ohledu na jeho verzi, což se projevuje absencí hlášení o klikatelnosti a nemožnosti událost v některých případech vyvolat.

Autorem článku je Roman Kabelka.

1 komentář:

Anonymní řekl(a)...

Zdravím,
zajímalo by mě, jak je to s použitím onclick. K validaci používám aDesigner, který trvá na tom, že při použití onclick je nutnost používat onkeypress. Platí tato podmínka i dnes? Díky za radu, A.