Bir modal (dialog) bileşenini erişilebilir yapmak için neler gerekir?

1. Rol ve isim: role="dialog", aria-modal="true", aria-labelledby ile başlığa bağlantı
2. Odak yönetimi: açılınca odak modalın içindeki ilk anlamlı elemana gider; kapanınca modalı açan butona geri döner
3. Odak tuzağı (focus trap): Tab tuşu modalın dışına çıkmamalı
4. Escape ile kapanma
5. Arka plan: sayfanın geri kalanı etkileşime kapalı olmalı (inert niteliği)
6. Kaydırmanın arka planda engellenmesi

Yerel <dialog> elemanı ve showModal() bunların çoğunu (odak tuzağı, Escape, arka planı devre dışı bırakma) kendiliğinden sağlar:

<dialog id="onay" aria-labelledby="onay-baslik">
  <h2 id="onay-baslik">Silmek istediğinize emin misiniz?</h2>
  <button value="iptal">İptal</button>
  <button value="sil">Sil</button>
</dialog>
<script>document.getElementById("onay").showModal();</script>