Přístupný modální dialog

Aktualizováno 14. října 2026 · Čtení na 5 min

Vyskakovací okna s newsletterem, rychlý náhled, tabulky velikostí, překryvy „přidáno do košíku“, přihlašovací formuláře, nastavení cookies — e-shopy jsou plné modálních dialogů a ty patří k nejčastějším důvodům, proč uživatelé klávesnice a čteček obrazovky uvíznou. Tato stránka ukazuje správný vzor. Je součástí série přístupné vzory UI.

Kdy použít modální dialog

APG definuje dialog jako „okno překrývající primární okno nebo jiné dialogové okno“ a říká: „okna pod modálním dialogem jsou neaktivní (inert)“ — uživatel nemůže se stránkou pracovat, dokud se dialog nezavře. Modální okno použijte, když uživatel musí úkol dokončit nebo zrušit, než bude pokračovat: potvrzení smazání, přihlášení, výběr varianty v rychlém náhledu. U informace, která úkol neblokuje („Přidáno do košíku“), obvykle méně ruší nemodální zpráva nebo stavová zpráva.

Související kritéria WCAG

2.1.1 Klávesnice (A) a 2.1.2 Žádná past pro klávesnici (A): dialog jde ovládat a zavřít klávesnicí. Udržet fokus uvnitř modálního okna je v pořádku, pokud ho uživatel může opustit.
2.4.3 Pořadí fokusu (A): fokus se přesune do dialogu a potom zpět na spouštěcí prvek.
2.4.11 Fokus není zakrytý (minimum) (AA): W3C uvádí, že správně postavené modální okno vždy vyhoví, kdežto nemodální překryvy mohou prvek s fokusem zakrýt.
4.1.2 Název, role, hodnota (A): role dialog a název.
1.3.1 Informace a vztahy (A): nadpis je nadpisem, struktura je v kódu.
1.4.10 Přizpůsobení obsahu (AA): dialog se vejde na úzkou obrazovku i při přiblížení na 400 % bez posouvání ve dvou směrech.
2.2.1 Nastavitelné časování (A): vyskakovací okna se nesmějí zavřít po časovém limitu dřív, než je lidé stihnou přečíst.

Příklad kódu

<button type="button" id="open-size-guide">Tabulka velikostí</button>

<dialog id="size-guide" aria-labelledby="size-guide-title">
  <h2 id="size-guide-title">Tabulka velikostí</h2>
  <table>…</table>
  <button type="button" id="close-size-guide">Zavřít</button>
</dialog>

<script>
  const dialog = document.getElementById('size-guide');
  document.getElementById('open-size-guide')
    .addEventListener('click', () => dialog.showModal());
  document.getElementById('close-size-guide')
    .addEventListener('click', () => dialog.close());
</script>

Co podle standardu HTML dělá nativní prvek:

showModal() umístí dialog do horní vrstvy (top layer), zablokuje dokument, takže zbytek je neaktivní (inert), zapamatuje si prvek, který měl předtím fokus, a provede kroky pro nastavení fokusu dialogu, které respektují atribut autofocus.
Požadavek na zavření (například Escape) vyvolá zrušitelnou událost cancel a pak dialog zavře. Atribut closedby určuje, zda ho zavře i kliknutí mimo něj.
close() vrátí fokus na prvek, který ho měl předtím, pokud byl dialog modální.

Pokud dialog stavíte sami s ARIA, postupujte podle APG: kontejner má role="dialog", aria-modal="true" a aria-labelledby odkazující na viditelný nadpis; aria-describedby je volitelné a je lepší ho vynechat, když obsah obsahuje seznamy nebo tabulky. Pozadí pak musíte znepřístupnit, udržet Tab uvnitř dialogu, obsloužit Escape a vrátit fokus sami.

Ovládání klávesnicí

Podle vzoru dialog (modální) v APG:

Klávesa	Funkce
Tab	Další prvek uvnitř dialogu, na který lze přejít tabulátorem; z posledního zpět na první
Shift + Tab	Předchozí prvek uvnitř dialogu; z prvního na poslední
Escape	Zavře dialog

Fokus při otevření: „fokus se přesune na prvek obsažený v dialogu“, obvykle na první prvek, který může získat fokus. Fokus při zavření: „vrátí se na prvek, který dialog vyvolal“, pokud ten prvek ještě existuje — jinak na jiný prvek, který zachová logický průběh práce. Po „Odebrat položku“ může fokus jít například na nadpis košíku.

Časté chyby v e-shopech

Vyskakovací okno s newsletterem při načtení stránky, které ukradne fokus, nemá název a nemá zavírací tlačítko dosažitelné klávesnicí.
Zavírací „×“ bez přístupného názvu, nebo zavírací ikona, která je div.
Fokus zůstává za překryvem: Tab prochází stránkou pod tmavým pozadím.
Nefunguje Escape a na mobilu není viditelný způsob zavření, jakmile je dialog delší než obrazovka.
Fokus se po zavření ztratí a skočí na začátek stránky místo na tlačítko „Rychlý náhled“.
Dialogy rychlého náhledu, které znovu sestaví stránku produktu s duplicitními ID a vnořenými formuláři.
Cookie lišty, které nejsou ani modální, ani mimo cestu, a zakrývají prvek s fokusem u spodního okraje obrazovky — podle W3C selhání 2.4.11.

Co najde automatická kontrola a co ruční testování

Automaticky (pravidlo axe-core)	Co najde
`aria-dialog-name`	`role="dialog"` nebo `alertdialog` bez názvu
`button-name`	Zavírací tlačítka bez názvu
`aria-hidden-focus`	Prvky, které mohou získat fokus, uvnitř obsahu skrytého pomocí `aria-hidden="true"`
`aria-hidden-body`	`aria-hidden="true"` na prvku body
`aria-valid-attr-value`	`aria-labelledby` odkazující na neexistující ID
`color-contrast`, `target-size`	Nízký kontrast a malé cíle uvnitř otevřeného dialogu

Všechna jsou kartami v naší knihovně pravidel. Týdenní sken vidí stránku tak, jak se načte: zavřený dialog se netestuje, automaticky otevřené vyskakovací okno ano. S rozšířením prohlížeče můžete dialog otevřít a pak spustit kontrolu. Ruční testování: otevřete dialog klávesnicí, projděte ho tabulátorem až na konec a zpět, stiskněte Escape, ověřte, kam se fokus vrátí, přibližte na 400 % a poslechněte si, jak ho oznamuje čtečka obrazovky. Postup najdete v článku jak testovat WCAG.

Spusťte bezplatnou kontrolu jedné stránky. Je to automatizovaná kontrola, nikoli úplný audit.

Časté otázky

Co dělá modální dialog přístupným?

Při otevření se fokus přesune do dialogu, Tab a Shift + Tab zůstávají uvnitř, Escape dialog zavře, fokus se vrátí na tlačítko, které ho otevřelo, obsah v pozadí je neaktivní (inert) a dialog má název podle svého viditelného nadpisu.

Mám použít HTML prvek dialog?

U modálního okna udělá prvek dialog otevřený pomocí showModal() velkou část práce: podle standardu HTML ho umístí do horní vrstvy (top layer), zbytek dokumentu znepřístupní (inert), postará se o počáteční fokus a zavře ho při požadavku na zavření, například klávesou Escape. Otestujte ho v prohlížečích a čtečkách obrazovky, které používají vaši zákazníci.

Kam má jít fokus, když se dialog otevře?

Podle APG se fokus přesune na prvek uvnitř dialogu, obvykle na první prvek, který může získat fokus. U dlouhého textu může být lepší přesunout fokus na začátek obsahu. U prvku dialog ho určíte atributem autofocus.

Jen pokud je tak postavená. Nemodální lišta nesmí zakrývat prvky s fokusem: podle W3C pevná cookie lišta nesplňuje 2.4.11 Fokus není zakrytý, pokud úplně zakryje komponentu, která dostává fokus.

Otestuje modální okno automatická kontrola?

Částečně. Najde dialogy bez názvu, zavírací tlačítka bez názvu a prvky s fokusem skryté pomocí aria-hidden. Neotestuje přesun fokusu, udržení fokusu v dialogu ani Escape a zavřený dialog nekontroluje vůbec.

Zdroje

W3C WAI, APG Dialog (Modal) pattern: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
WHATWG, HTML Living Standard, the dialog element: https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element
W3C, Understanding 2.4.11 Focus Not Obscured (Minimum): https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html