Zvýrazňujete odkazy při ovládání webu z klávesnice?

Vím, psal už o tom před časem Filosof. Ale protože se tento neduh stále nedaří vymýtit a navíc mám pocit, že se v poslední době stále častěji setkávám s weby, které ovládání z klávesnice moc neřeší, určitě neuškodí malé opáčko a rozšíření tématu.

O co jde?

Existuje celá řada uživatelů, kteří ovládají web pouze z klávesnice:

• nevidomí,
• slabozrací,
• tělesně postižení,
• lidé, kteří pochopili, že když mají ruce na klávesnici, je snazší zadat příkaz z klávesnice než hledat myš ;-)
• atp.

Prakticky všem (pominu-li nevidomé uživatele) velmi pomůže, když při ovládání webu z klávesnice ví, na kterém odkazu či prvku právě mají kurzor.

V čem je problém?

Řada tvůrců webů bohužel u odkazů ošetřuje pouze stav :hover. Tím sice pomohou těm, kteří k ovládání webu používají myš (což je samozřejmě také důležité), ale pokud současně v CSS není definován i :active (pro IE < 7) a :focus (pro moderní prohlížeče), jsou ti, kteří používají jen klávesnici, při práci s webem nahraní, protože mají velký problém zjistit, který prvek má právě focus. Ostatně, zkuste si svůj web projít pomocí tabulátoru a hned zjistíte, zda se na něm při ovládání jen z klávesnice zorientujete a budete vědět, kde máte kurzor.

Pokud chce být tvůrce webu na uživatele, kteří používají pouze klávesnici, obzvlášť zlý, doplní do CSS k :hover, :active či :focus vlastnost outline: none. Tím spolehlivě zruší i systémem doplňované zvýraznění pomocí tečkovaného rámečku.

Jak z toho ven?

Řešení je naštěstí velmi jednoduché. Nepoužívat outline: 0 a u každého :hover přidat ještě dvě stejné definice s :active a :focus, případně je možné dát definice :active a :focus stavu samostatně a u textových odkazů invertovat barvu pozadí a barvu textu odkazu.

Pěkně vyřešené zvýraznění odkazů při procházení z klávesnice najdete například na blindfriendly.cz, vlada.cz nebo nette.org, opak je pak k vidění na prakticky všech ostatních webech ;-)

Takže - až budete příště definovat :hover, nezapomeňte přidat :active a :focus.

Související odkazy

• The plague of outline:0 - WebAim.org
• Whenever you use :hover, also use :focus - 456 Berea Street

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.

Tajemství fokusu

Už před nějakou dobou jsme s kolegy řešili případ rozhraní ke skeneru, které při zahájení snímání porušilo kontinuitu předávání fokusu a uvedlo uživatele do stavu, kdy nebylo žádné okno aktivní. Místo toho, abychom klientům vysvětlovali, k jaké nestandardní situaci došlo, zvolili jsme pro skener raději jiné rozhraní. Zatímco uvedení fokusu do nedefinovatelného stavu je v prostředí operačního systému věc spíše výjimečná, ve webových aplikacích s masivním nasazením Javascriptu k tomuto jevu dochází celkem běžně. Častá ztráta fokusu pak být jeden z hlavních faktorů, proč nebudou uživatelé rozhraní webové aplikace považovat za ideálně přístupné.

Fokus v operačním systému

V operačním systému při spuštění aplikace či při vyvolání nového modálního dialogu získá okno fokus a zároveň první ovládací prvek v něm. Odečítač obrazovky tuto skutečnost komentuje tím, že přečte titulkový pruh aplikace/dialogu a pokračuje oznámením aktuálního ovládacího prvku, čímž uživatel má bod, z něhož může vyjít. Je-li okno zavřeno, je v případě zavřené aplikace fokus předán naposledy použité aplikaci a to ovládacímu prvku, jenž v ní byl naposledy aktivní, v případě modálního dialogu je fokus předán do nadřazeného okna tak, že nejčastěji se uživatel ocitá na ovládacím prvku, jenž modální dialog vyvolal. Abychom přesněji pochopili, o co se jedná, představme si případ, kdy chceme projít do a z dialogu Rozšířené nastavení Javascriptu v prohlížeči Mozilla Firefox:

1. Aktivní okno aktuální záložky s webovou stránkou a nějaký odkaz v něm
2. Zvolíme z aplikačního menu Nástroje / Možnosti - aktivní okno Možnosti, ovládací prvek seznam karet dialogu
3. Přejdeme na kartu Obsah a na ní na tlačítko Rozšířené - aktivní okno Možnosti, karta Obsah, ovládací prvek Rozšířené (tlačítko)
4. Aktivujeme tlačítko - aktivní okno Rozšířené nastavení Javascriptu, ovládací prvek Přemisťovat nebo měnit velikost okna (zaškrtávací políčko)
5. Aktivujeme tlačítko Zrušit - aktivní okno Možnosti, karta Obsah, ovládací prvek Rozšířené (tlačítko)
6. Aktivujeme tlačítko Zrušit - aktivní okno aktuální záložky s webovou stránkou a nějaký odkaz v něm

Vidíme, že poloha fokusu je vždy jednoznačně definována a uchovávána i pro na sebe vrstvené modální dialogy. Toto chování je zcela v režii grafického uživatelského rozhraní operačního systému a není ovlivňováno tvůrcem aplikace.

Fokus ve webové aplikaci

Ve webové aplikaci vyvolání modálního dialogu nejčastěji znamená, že aktivováním odkazu/tlačítka se na konec stránky vloží nový kód představující dialog a příslušně se nastyluje, aby vystoupil do popředí. Vizuálně je vše v pořádku, fokus však v ideálním případě zůstává na ovládacím prvku, který dialog vyvolal, neboť webový prohlížeč neví, zda uživatel si přeje vstoupit na některý z fokusovatelných elementů v nově se objevivším obsahu - co když jde jen o reklamní sdělení?

Komplikovanější situace nastává ve chvíli, kdy se nacházíme uvnitř dialogu webové aplikace a ten chceme zavřít. Po aktivaci příslušného odkazu/tlačítka je obsah ze stránky sice odstraněn, ale rovněž i ovládací prvek mající fokus. Protože prohlížeč opět neví, kam fokus předat, skončí stránka v nejednoznačném stavu, kdy fokus získá to, co je, tak říkajíc, nejblíže po ruce.

Právě tyto popsané nejednoznačnosti uživatelům odečítačů působí problémy, neboť správné směrování fokusu přispívá k zorientování se v prostředí. Pro takového uživatele je fokus středobodem všeho, neboť ve většině situací skrze odečítač není schopen vnímat dění na obrazovce v širších souvislostech. Ne nadarmo základní nastavení odečítače je takové, že je čteno jen to, co má fokus, protože při zvolení jiné strategie je uživatel často zahlcen informacemi o zcela nepodstatných změnách na obrazovce.

Zkrocení fokusu

První krok, který nás nic nestojí, neboť nevyžaduje zásah do funkcí v Javascriptu, je označení oblastí stránky, jež se chovají jako dialog, pomocí ARIA role Dialog. Prohlížeč podporující ARIA tak může provést změnu fokusu, která je relevantní k dění na obrazovce a odečítač podporující ARIA může oznámit jméno zobrazeného dialogu, jenž je nejčastěji ukryto v atributu title elementu označeného jako dialog. Fakt je ovšem ten, že drtivé většině uživatelů toto řešení vzhledem k používaným verzím odečítačů a prohlížečů vůbec nepomůže, nehledě na to, že se tím nevyřeší ztráta fokusu při zavírání dialogu.

Aby vše tedy pracovalo tak, jak bylo popsáno výše pro desktopové aplikace, je třeba již zásah do kódu v Javascriptu, který na druhou stranu není nijak drastický:

1. Element aktivující dialog musí říct dialogu, kdo jej aktivoval.
2. Dialog se postará o přemístění fokusu na první fokusovatelný element v něm.
3. Dialog před odstraněním svého obsahu ze stránky přemístí fokus zpět na element, jenž jej vyvolal.

Fokus na webu jako na desktopu

Aby byly přetaveny zmíněné tři body do praxe, implementoval jsem je do diskuzního fóra, kde klikáním na odkazy Odpovědět a v zápětí na tlačítko Storno u jednotlivých příspěvků můžete sledovat, co se s fokusem děje. Konkrétně veškeré kouzlení v této oblasti má na starost funkce toggleForumApp() v knihovně funkcí, které se jako parametry předávají název hlavní oblasti fóra, název oblasti dialogu a objekt odkazu, který dialog vyvolává. Za zapamatování odkazu, jenž dialog vyvolal má zodpovědnost řádek:

if (typeof(appFocus)!="undefined")
$(appMain).data("appFocus",appFocus);

A za návrat fokusu na původní místo před zavřením dialogu tento kód:

if (typeof($(appMain).data("appFocus"))!="undefined")
{
$(appMain).data("appFocus").focus();
$(appMain).removeData("appFocus");
}

Kód je psán za mohutného přispění knihovny JQuery, tudíž případné nejasnosti konzultujte v její nápovědě.

Autorem článku je Roman Kabelka.