Dialogové okno

Proč je to přístupné

Modální okna bývají pastí: zaměření klávesnice z nich uniká do stránky pod nimi, odečítač obrazovky čte obsah, který není vidět, a po zavření se člověk ocitne na začátku stránky. Nativní prvek dialog otevřený metodou showModal() řeší všechny tři problémy sám: zbytek stránky je neaktivní (inert), zaměření z okna neunikne, Escape ho zavře a prohlížeč vrátí zaměření na tlačítko, které okno otevřelo.

Okno má název z nadpisu, takže odečítač obrazovky při otevření řekne, o co jde. Nemá pevnou výšku: pokud je obsah delší než obrazovka, roluje se v rámci okna, ne pod ním.

Vyzkoušejte si sami

Klávesnice

Tab na tlačítko, Enter otevře okno.
Tab a Shift+Tab kroužují jen mezi prvky v okně.
Escape zavře okno a zaměření se vrátí na původní tlačítko.

Odečítač obrazovky

Při otevření uslyšíte „dialogové okno, Podmínky spolupráce“ a nadpis.
Virtuální kurzor se nedostane na obsah stránky pod oknem.

Zvětšení a přizpůsobení obsahu

Při 400% zvětšení okno vyplní téměř celou obrazovku a jeho obsah se roluje uvnitř okna.

Bez JavaScriptu

Okno je vykreslené otevřené přímo ve stránce jako obyčejný rámec s obsahem. Tlačítko pro otevření není zobrazeno, protože by nemělo co dělat.

Kód

<ad-dialog>
  <button type="button" class="button" data-dialog-open>Zobrazit podmínky spolupráce</button>
  <dialog open aria-labelledby="terms-title">
    <h2 id="terms-title">Podmínky spolupráce</h2>
    <p>…</p>
    <form method="dialog" class="dialog__actions">
      <button class="button">Zavřít</button>
    </form>
  </dialog>
</ad-dialog>
<link rel="stylesheet" href="/assets/js/components/ad-dialog/ad-dialog.css">
<script type="module" src="/assets/js/components/ad-dialog/ad-dialog.js"></script>

Ukázka