Přístupnost dialogů – Jak na přístupnost

Dialog je okno překrývající obsah webové stránky na jeho pozadí nebo jiné dialogové okno a typicky vybízí k nějaké akci nebo jistou akci potvrzuje. Dialogy jsou častým prvkem, se kterým se uživatelé při procházení webu potýkají. Dodržováním několika pravidel týkajících se přístupnosti můžete zejména uživatelům odečítačů obrazovky jako autoři webových stránek práci s dialogy značně usnadnit či zpřehlednit.

Základní pravidla

Pro zlepšení přístupnosti dialogů je dobré zajistit následující:

• Na HTML elementu, který obaluje celý dialog, doporučujeme:

  • Nastavit atribut role="dialog". Tím uživatelům odečítačů při přesunu do dialogu předáte informaci, že vstupují do dialogu.

  • Pojmenovat ho pomocí atributu aria-label, anebo pomocí aria-labelledby odkazujícího se na id hlavního nadpisu uvnitř dialogu. Toto pojmenování bude rovněž přečteno odečítačem v momentě vstupu do dialogu.

  • Nastavit atribut aria-describedby, aby se odkazoval na id elementu s obsahem dialogu pod jeho hlavním nadpisem. To způsobí, že text dialogu v tomto elementu bude odečítačem automaticky předčítán v momentě zobrazení dialogu, což je důležité proto, aby se uživatel odečítače dozvěděl, k čemu jej dialog vybízí. Atribut aria-describedby však není doporučeno nastavovat v případě, že daný element s obsahem dialogu nezahrnuje žádný text, anebo zahrnuje strukturovaný obsah jako seznamy nebo tabulky, jejichž automatické předčítání v momentě zobrazení dialogu jako jediného souvislého textového řetězce by pro uživatele odečítače bylo nesrozumitelné.

• Hlavní nadpis uvozující obsah dialogu by měl být realizován pomocí elementu <h2>.

• Dialog by měl obsahovat alespoň jeden interaktivní prvek, jako např. tlačítko „OK“ nebo „Zavřít“.

• Po zobrazení dialogu by se fokus klávesnice měl přesunout na první interaktivní prvek uvnitř dialogu. Pokud je v dialogu jen tlačítko „OK“ nebo „Zavřít“, tak by se fokus měl přesunout právě na něj. Jestliže však dialog obsahuje dlouhý text nebo strukturovaný obsah zahrnující například seznamy nebo tabulky, tak doporučujeme fokus přesunout na první statický element v tomto obsahu, např. na první odstavec textu, který bude muset mít nastaven atribut tabindex="-1", aby jej bylo možné programově zaměřit. V tomto případě počáteční přesouvání fokusu na první text doporučujeme proto, aby po zobrazení dialogu nebyl jeho dlouhý obsah odrolován například na tlačítko „OK“ nacházející se až na jeho konci, kdy by začátek textu dialogu nebyl při počátečním zobrazení dialogu viditelný.

• Jestliže se jedná o jednoduchý dialog nevyžadující složitou interakci, tak:

  • Vybízí-li dialog jen k potvrzení nebo zamítnutí nějaké závažné nebo nevratné operace, tak doporučujeme počáteční fokus při zobrazení dialogu umístit na tlačítko pro zamítnutí takové operace, aby bylo minimalizováno riziko jejího nechtěného potvrzení.

  • V opačném případě doporučujeme fokus umístit na tlačítko, které bude uživatel chtít s největší pravděpodobností použít.

• Dialog by mělo být možné zavřít klávesou Escape a zamítnout tak akci, ke které dialog vybízí, pokud nějaká taková akce je.

• Po zavření dialogu by se fokus klávesnice měl vrátit na prvek, který dialog otevřel. Jestliže tento prvek již neexistuje, tak fokus přesuňte na prvek, který dává největší smysl z hlediska dalšího pokračování procházení webové stránky.

Element <dialog>

Docílení správné implementace chování dialogu může usnadnit použití HTML elementu <dialog> za předpokladu, že vám nevadí chybějící podpora funkcionality tohoto elementu ve starších webových prohlížečích, viz podrobnosti na stránce o kompatibilitě elementu <dialog> na webu MDN. Příklady použití tohoto elementu včetně zdrojového kódu najdete rovněž na odkazované stránce.

Modální dialogy

Modální dialogy jsou takové, které neumožňují interakci s obsahem nacházejícím se mimo zobrazený dialog. Kromě výše uvedený/ch pravidel doporučujeme v případě modálních dialogů zajistit ještě následující:

• Elementu, který obaluje celý dialog, nastavit atribut aria-modal="true". Tím bude dialog při zobrazení odečítačem ohlášen jako modální.

• Dialog by nemělo být možné opustit pomocí klávesnice. Tomuto opatření se věnuje následující kapitola.

Z hlediska přístupnosti doporučujeme dialogy pokud možno implementovat právě jako modální. Pro uživatele odečítačů je totiž srozumitelnější, když je po zobrazení dialogu navigace uvnitř něj omezena pouze na dialog.

Omezení navigace klávesnicí jen na vnitřek modálního dialogu

Pro omezení navigace klávesnicí jen na vnitřek modálního dialogu je potřeba současně zajistit obě následující opatření:

• Neumožnit navigaci mimo dialog pomocí příkazů odečítače, např. pohybem po řádcích klávesovými šipkami dolů nebo nahoru. Tohoto omezení navigace pro odečítače lze docílit přidáním atributu aria-modal="true" na element obalující dialog.

• Neumožnit navigaci mimo dialog nejen pro uživatele odečítačů, ale také pro všechny uživatele, kteří se na stránce pohybují pomocí tabulátoru a přes Shift + tabulátor. Toho nelze docílit pouhým přidáním atributu aria-modal="true", a je tedy nutné sáhnout například po jednom z následujících řešení:

  • Použít globální HTML atribut inert. Tento atribut je potřeba nastavit na okolním obsahu nacházejícím se mimo dialog. Toto řešení je poměrně jednoduché, ale nezaručí zamezení přesunu fokusu z dialogu na prvky uživatelského rozhraní webového prohlížeče (např. do adresního řádku) přes tabulátor nebo Shift + tabulátor.

  • Ovlivnit chování klávesy tabulátor a Shift + tabulátor přes JavaScript tak, aby stisk tabulátoru na posledním interaktivním prvku uvnitř dialogu přesunul fokus na první interaktivní prvek uvnitř dialogu a naopak aby stisk kláves Shift + tabulátor na prvním interaktivním prvku uvnitř dialogu přesunul fokus na poslední interaktivní prvek uvnitř dialogu. Vzorová implementace tohoto cyklického chování tabulátoru a Shift + tabulátoru uvnitř dialogu je včetně zdrojového kódu k dispozici níže v odkazované funkční ukázce.

Funkční ukázka se zdrojovým kódem

Funkční řešení modálního dialogu je možné vyzkoušet na této ukázce od W3C, kde je k dispozici také zdrojový kód ukázky a  podrobnější vysvětlení této konkrétní implementace.

Související kritéria úspěšnosti standardu WCAG

Výše uvedená doporučení vycházejí jednak z dobré praxe, jednak z následujících takzvaných kritérií úspěšnosti webového standardu WCAG 2.2:

• 1.3.1 – Info and Relationships.

• 2.1.1 – Keyboard.

• 2.4.6 – Headings and Labels.

• 4.1.2 – Name, Role, Value.

Autor: Adam Samec