Dialógové okno

Prečo je to prístupné

Modálne okná bývajú pascou: zameranie klávesnice z nich uniká do stránky pod nimi, čítač obrazovky číta obsah, ktorý nevidno, a po zavretí sa človek ocitne na začiatku stránky. Natívny prvok dialog otvorený metódou showModal() rieši všetky tri problémy sám: zvyšok stránky je neaktívny (inert), zameranie z okna neunikne, Escape ho zavrie a prehliadač vráti zameranie na tlačidlo, ktoré okno otvorilo.

Okno má názov z nadpisu, takže čítač obrazovky pri otvorení povie, o čo ide. Nemá pevnú výšku: ak je obsah dlhší ako obrazovka, roluje sa v rámci okna, nie pod ním.

Vyskúšajte si sami

Klávesnica

Tab na tlačidlo, Enter otvorí okno.
Tab a Shift+Tab krúžia iba medzi prvkami v okne.
Escape zavrie okno a zameranie sa vráti na pôvodné tlačidlo.

Čítač obrazovky

Pri otvorení počujete „dialógové okno, Podmienky spolupráce“ a nadpis.
Virtuálny kurzor nevie prejsť na obsah stránky pod oknom.

Priblíženie a reflow

Pri 400 % priblížení okno vyplní takmer celú obrazovku a jeho obsah sa roluje vnútri okna.

Bez JavaScriptu

Okno je vykreslené otvorené priamo v stránke ako obyčajný rámik s obsahom. Tlačidlo na otvorenie nie je zobrazené, pretože by nemalo čo robiť.

Kód

<ad-dialog>
  <button type="button" class="button" data-dialog-open>Otvoriť podmienky</button>
  <dialog open aria-labelledby="terms-title">
    <h2 id="terms-title">Podmienky spolupráce</h2>
    <p>…</p>
    <form method="dialog" class="dialog__actions">
      <button class="button">Zavrieť</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ážka