JavaScript ile erişilebilirlik
JavaScript ile erişilebilirlik, sipariş denetiminin klavyeden çalışması ve durum değişiminin duyurulması demektir. Bu sayfa gerçek bir düğme kullanır. click görünen satırı tea / regular yapar.
Bu hatalar sayfası değil
Önceki sayfa missing size fırlatmıştı. Satırı caught / missing size okunuyordu. Bu sayfa throw kullanmaz. Denetim sayfada kalır ve sonuç görünen yere yazılır.
Bir düğme kullan
<button type="button"> kendi click dinleyicisini fare tıklaması, Enter ve Space için çalıştırır. Yalnızca click dinleyen bir div klavyeyi yok sayar. Düğmenin metni duyulan addır.
const button = document.querySelector("button");
const line = document.querySelector("#line");
button.addEventListener("click", () => {
line.textContent = "tea / regular";
});
Satır tea / regular olur. Enter ve Space aynı dinleyiciyi çalıştırır.
Yeni satırı duyur
textContent ekranı günceller. Ekran okuyucu sessiz bir değişikliği kaçırabilir. aria-live="polite" yeni metni geçerli cümlenin ardından söylemesini ister.
<p id="line" aria-live="polite">…</p>
Değişiklik duyurulur ve geçerli cümleyi kesmez. assertive araya girer. Bu sayfa polite kullanır.
size yoksa düğme kapanır
Sipariş { drink: "tea" } ve size yok. button.disabled değerini true yap. Düğme görünür kalır. click dinleyicisi çalışmaz.
const order = { drink: "tea" };
const button = document.querySelector("button");
if (!order.size) {
button.disabled = true;
}
Düğme hâlâ sayfadadır ve siparişi vermez. Öğeyi kaldırma.
Odağı düğmede bırak
Düğmeyi çalıştıran kişi zaten oradadır. Satırı yaz, sonra button.focus() çağır. line.focus() çağırma ve çerçeveyi gizleme.
const button = document.querySelector("button");
const line = document.querySelector("#line");
button.addEventListener("click", () => {
line.textContent = "tea / regular";
button.focus();
});
Odak düğmede kalır. Satırın tabindex değerine ihtiyacı yoktur. Çerçeve görünür kalır.
Dört alışkanlık
Her satır bu sipariş denetimi için bir karardır.
📊 Erişilebilir sipariş denetimi
| Alışkanlık | Kullan | Kaçın |
|---|---|---|
| Eylem | type="button" olan button |
yalnızca click dinleyen div |
| Durum | satırda aria-live="polite" |
sessiz metin değişimi |
| Kullanılamaz | button.disabled = true |
düğmeyi kaldırmak |
| Odak | button.focus() ve görünen çerçeve |
line.focus() veya outline: none |
Düğme eylemi alır. Canlı satır sonucu söyler. disabled çalışamayan bir denetimi yerinde tutar. Çerçeve odağın yerini gösterir.
Sayfanın satırı
Sayfa bir düğmeyi canlı satıra bağlar. Hiçbir şey fırlatılmaz.
<!DOCTYPE html>
<html>
<body>
<button id="order" type="button">Place order</button>
<p id="line" aria-live="polite">…</p>
<script>
const button = document.getElementById("order");
const line = document.getElementById("line");
button.addEventListener("click", () => {
line.textContent = "tea / regular";
button.focus();
});
</script>
</body>
</html>
click sonrasında satır tea / regular okunur. Enter ve Space aynı işi yapar. caught / missing size hatalar sayfasına aitti.
Tezgâhta
- Düğmeye tıkla. Satır tea / regular okunur.
- Aynı düğmede Enter tuşuna bas. Dinleyici yeniden çalışır.
- Yeni metin duyurulsun diye satıra aria-live="polite" koy.
- size yokken button.disabled değerini true yap. Düğme kalır ve click çalışmaz.
- Başarılı bir click sonrasında button.focus() çağır. line.focus() çağırma.
Sık düşülen hatalar
Bir div üzerindeki click klavye denetimi değildir. disabled, düğmeyi silmekle aynı şey değildir.
- Sipariş eylemi için bir
divkullanmak - Satırı güncelleyip
aria-liveunutmak sizeyokken düğmeyi kaldırmak- Başarılı siparişten sonra
line.focus()çağırmak - Odak çerçevesini gizlemek
- Satırı caught / missing size diye okumak
Bunu tut
- Bir
buttonsipariş eylemini fare, Enter ve Space ile çalıştırır aria-live="polite",tea / regularmetnini kesmeden duyurursizeyoksabutton.disableddeğeritrueolur ve düğme sayfada kalır- Odak düğmede kalır
- Sayfa satırı tea / regular olur
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek