Native dialog ile klavye uyumlu modal pencere

0cevap 2okunma

#dialog #erişilebilirlik #JavaScript #klavye

Etiketler 4

#dialog #erişilebilirlik #JavaScript #klavye

Yapay zekâ özeti

Konu, vanilla JavaScript ile yerleşik <dialog> elementini kullanarak klavye uyumlu modal oluşturmayı ele alıyor. Modal açıldığında odağın ilk etkileşimli elemana taşınması, Tab ve Shift+Tab ile modal içinde tutulması, Esc veya Kapat düğmesiyle kapanması ve kapanışta odağın açma düğmesine dönmesi öneriliyor. Ayrıca aria-labelledby bağlantısının ve dinamik içerikte başlangıç odağının test edilmesi vurgulanıyor.

Üye

0 Puan0 / 300 Puan · Sonraki: Demir 2

🏅 İlk Adım🏅 Konu Ustası

25 Ekim 2026, 21:27

Amaç ve temel yapı

Vanilla JavaScript ile açılan bir modal; fare kullanmayan ziyaretçilerin içeriğe ulaşabilmesini, Esc ile kapatabilmesini ve pencere kapandığında odağın açma düğmesine dönmesini sağlamalıdır. Bunun için mümkün olduğunda yerleşik

<dialog>

elementini kullanmak, özel bir div tabanlı modal yazmaktan daha az kod ve daha doğru varsayılan davranış sağlar.


<button id="openSettings" type="button">Ayarları aç</button>

<dialog id="settingsDialog" aria-labelledby="settingsTitle">
  <h2 id="settingsTitle">Ayarlar</h2>
  <label>
    Tema
    <select>
      <option>Açık</option>
      <option>Koyu</option>
    </select>
  </label>
  <button id="closeSettings" type="button">Kapat</button>
</dialog>

Odak yönetimi ve kapatma


const dialog = document.querySelector('#settingsDialog');
const openButton = document.querySelector('#openSettings');
const closeButton = document.querySelector('#closeSettings');
let previouslyFocused = null;

const focusableSelector = [
  'button:not([disabled])',
  'input:not([disabled])',
  'select:not([disabled])',
  'textarea:not([disabled])',
  '[href]'
].join(',');

openButton.addEventListener('click', () => {
  previouslyFocused = document.activeElement;
  dialog.showModal();
  dialog.querySelector(focusableSelector)?.focus();
});

function closeDialog() {
  if (!dialog.open) return;
  dialog.close();
  previouslyFocused?.focus();
}

closeButton.addEventListener('click', closeDialog);

dialog.addEventListener('cancel', (event) => {
  event.preventDefault();
  closeDialog();
});

dialog.addEventListener('keydown', (event) => {
  if (event.key !== 'Tab') return;

  const elements = [...dialog.querySelectorAll(focusableSelector)];
  if (elements.length === 0) return;

  const first = elements[0];
  const last = elements[elements.length - 1];

  if (event.shiftKey && document.activeElement === first) {
    event.preventDefault();
    last.focus();
  } else if (!event.shiftKey && document.activeElement === last) {
    event.preventDefault();
    first.focus();
  }
});

Kontrol listesi

Açma düğmesine klavyeyle odaklanıp Enter veya Space tuşuna basın.
Modal açıldığında odağın ilk etkileşimli elemana geçtiğini kontrol edin.
Tab ve Shift+Tab ile odağın modal dışına kaçmadığını test edin.
Esc tuşuna ve Kapat düğmesine basarak modalı kapatın; odağın tekrar açma düğmesine döndüğünü doğrulayın.
Başlık ile pencere arasındaki
```
aria-labelledby
```
bağlantısını tarayıcı erişilebilirlik araçlarıyla kontrol edin.

Dialog içeriği dinamik olarak değişiyorsa, her açılışta odaklanacak ilk öğeyi bilinçli seçin. Modalı yalnızca görsel olarak gizlemek yerine

showModal()

close()

akışını kullanmak, tarayıcının modal davranışından yararlanmayı kolaylaştırır.

[b]Amaç ve temel yapı[/b]

Vanilla JavaScript ile açılan bir modal; fare kullanmayan ziyaretçilerin içeriğe ulaşabilmesini, Esc ile kapatabilmesini ve pencere kapandığında odağın açma düğmesine dönmesini sağlamalıdır. Bunun için mümkün olduğunda yerleşik [code]<dialog>[/code] elementini kullanmak, özel bir div tabanlı modal yazmaktan daha az kod ve daha doğru varsayılan davranış sağlar.

[code]
<button id="openSettings" type="button">Ayarları aç</button>

<dialog id="settingsDialog" aria-labelledby="settingsTitle">
  <h2 id="settingsTitle">Ayarlar</h2>
  <label>
    Tema
    <select>
      <option>Açık</option>
      <option>Koyu</option>
    </select>
  </label>
  <button id="closeSettings" type="button">Kapat</button>
</dialog>
[/code]

[b]Odak yönetimi ve kapatma[/b]

[code]
const dialog = document.querySelector('#settingsDialog');
const openButton = document.querySelector('#openSettings');
const closeButton = document.querySelector('#closeSettings');
let previouslyFocused = null;

const focusableSelector = [
  'button:not([disabled])',
  'input:not([disabled])',
  'select:not([disabled])',
  'textarea:not([disabled])',
  '[href]'
].join(',');

openButton.addEventListener('click', () => {
  previouslyFocused = document.activeElement;
  dialog.showModal();
  dialog.querySelector(focusableSelector)?.focus();
});

function closeDialog() {
  if (!dialog.open) return;
  dialog.close();
  previouslyFocused?.focus();
}

closeButton.addEventListener('click', closeDialog);

dialog.addEventListener('cancel', (event) => {
  event.preventDefault();
  closeDialog();
});

dialog.addEventListener('keydown', (event) => {
  if (event.key !== 'Tab') return;

const elements = [...dialog.querySelectorAll(focusableSelector)];
  if (elements.length === 0) return;

const first = elements[0];
  const last = elements[elements.length - 1];

if (event.shiftKey && document.activeElement === first) {
    event.preventDefault();
    last.focus();
  } else if (!event.shiftKey && document.activeElement === last) {
    event.preventDefault();
    first.focus();
  }
});
[/code]

[b]Kontrol listesi[/b]

[list]
[*]Açma düğmesine klavyeyle odaklanıp Enter veya Space tuşuna basın.
[*]Modal açıldığında odağın ilk etkileşimli elemana geçtiğini kontrol edin.
[*]Tab ve Shift+Tab ile odağın modal dışına kaçmadığını test edin.
[*]Esc tuşuna ve Kapat düğmesine basarak modalı kapatın; odağın tekrar açma düğmesine döndüğünü doğrulayın.
[*]Başlık ile pencere arasındaki [code]aria-labelledby[/code] bağlantısını tarayıcı erişilebilirlik araçlarıyla kontrol edin.
[/list]

Dialog içeriği dinamik olarak değişiyorsa, her açılışta odaklanacak ilk öğeyi bilinçli seçin. Modalı yalnızca görsel olarak gizlemek yerine [code]showModal()[/code] ve [code]close()[/code] akışını kullanmak, tarayıcının modal davranışından yararlanmayı kolaylaştırır.

Cevaplar (0)

Bu konuya henüz yanıt yazılmamış. İlk yanıtı siz yazın!

Şu An Bu Konuyu Okuyanlar

Toplam: 1

+ 1 Ziyaretçi

Topluluğa katılın

Yanıt yazmak için giriş yapın veya hesap oluşturun.

Bu konuya yanıt verebilmek için üye hesabınızla devam edin. Hesabınız yoksa birkaç adımda kayıt olabilirsiniz.

Giriş Yap Kayıt Ol

0 alıntı seçildi