Kako modal učiniti pristupačnim

Modal je jedna od najčešćih prepreka na webu. Tipične pogreške: tipkovnica može doći u pozadinu, Escape ne zatvara ništa, čitač zaslona nikad ne najavi da je dijalog otvoren, a nakon zatvaranja fokus nigdje ne završi. Jedan element koji preglednik već ima rješava sva četiri problema.

Problem

Ovaj obrazac izgleda kao dijalog, ali za asistivnu tehnologiju to nije: nema ulogu, naziv, zamku fokusa ni Escape.

<button onclick="openModal()">Newsletter abonnieren</button>

<div class="modal" id="modal" style="display: none">
  <div class="modal-box">
    <h2>Newsletter</h2>
    <p>Melde dich fuer unseren Newsletter an.</p>
    <input type="email" placeholder="E-Mail" />
    <button onclick="closeModal()">Schliessen</button>
  </div>
</div>

• Pozadina ostaje dostupna tipkom Tab (fokus napušta dijalog).
• Escape ne zatvara dijalog.
• Čitač zaslona ne najavljuje dijalog jer nedostaju uloga i naziv.
• Nakon zatvaranja fokus je izgubljen.

Rješenje: nativni <dialog> element

showModal() obavlja većinu posla: zadržava fokus u dijalogu (time 2.1.2 Bez zamke tipkovnice dobiva definiran izlaz), čini ostatak stranice inertnim, prikazuje pozadinu i zatvara se na Escape. Ostaje ti samo imenovati dijalog i vratiti fokus pri zatvaranju.

<button type="button" id="open">Newsletter abonnieren</button>

<dialog id="modal" aria-labelledby="modal-title">
  <h2 id="modal-title">Newsletter</h2>
  <p>Melde dich fuer unseren Newsletter an.</p>
  <label for="email">E-Mail</label>
  <input id="email" type="email" />
  <button type="button" id="close">Schliessen</button>
</dialog>

const dialog = document.getElementById("modal");
const openBtn = document.getElementById("open");

openBtn.addEventListener("click", () => {
  // showModal() traps focus inside the dialog, makes the rest of the page inert,
  // and lets the Escape key close it. All three are WCAG requirements you no longer
  // have to hand-roll.
  dialog.showModal();
});

document.getElementById("close").addEventListener("click", () => dialog.close());

// Return focus to the trigger when the dialog closes (native or via Escape).
dialog.addEventListener("close", () => openBtn.focus());

Testiranje (samo tipkovnicom)

1. Otvori dijalog tipkom Enter/Space na gumbu.
2. Prođi kroz dijalog tipkom Tab: fokus mora kružiti unutar njega, nikad u pozadinu.
3. Escape mora zatvoriti dijalog.
4. Nakon zatvaranja fokus mora biti natrag na gumbu koji ga je otvorio.

Ako trebaš ARIA obrazac bez <dialog> (npr. zbog starih preglednika), moraš sam u JavaScriptu ponovno izraditi zamku fokusa, obradu Escape tipke i inertnost pozadine, uz role="dialog" i aria-modal="true". Nativni element uklanja upravo taj dio sklon pogreškama.