Frontend Academy · Ders

Klavye Gezinmesi ve Odak Yönetimi

Tüm etkileşimli öğelere Tab ile ulaşılabildiğinden emin olun, iletişim kutularında ve yönlendirmede odağı programlı olarak yönetin ve görünür odak göstergeleri oluşturun.

4. ders / 414 adım

Klavye Gezinmesi ve Odak Yönetimi, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

Klavye Gezinmesi Neden Önemlidir?

Birçok kullanıcı fare kullanamaz: hareket kısıtlılıkları olanlar, ekran okuyucu kullanıcıları ve klavyeyi tercih eden ileri düzey kullanıcılar. Uygulamanız klavyeyle gezilemiyorsa onlar için bozuktur.

Tab ve Shift+Tab

Tab focus'u sonraki etkileşimli öğeye taşır. Shift+Tab önceki öğeye taşır. Sıra varsayılan olarak DOM sırasını izler — buna karşı çıkmayın; sekme sıranız DOM tarafından belirlensin.

Varsayılan Olarak Neler Focus Alabilir?

Yerel etkileşimli öğeler focus alabilir: a[href], button, input, select, textarea, summary. Özel öğelerde tabindex gerekir.

tabindex Değerleri

tabindex="0": DOM konumunda sekme sırasına dahil edilir. tabindex="-1": yalnızca JS üzerinden focus alabilir (betik focus'u, Tab ile değil). tabindex=">0": kötü bir kullanımdır — kafa karıştırıcı bir focus sırası oluşturur, hiçbir zaman kullanmayın.

<!-- Custom button (still: use real <button>!): -->
<div role="button" tabindex="0" onkeydown="...">Custom</div>

<!-- Programmatically focusable, skipped by Tab: -->
<div tabindex="-1" id="error-summary"></div>

Görünür Focus Göstergesi

Yerine başka bir gösterge koymadan focus çerçevelerini asla kaldırmayın. WCAG, focus alabilen her öğede görünür bir gösterge bulunmasını gerektirir.

/* BAD: hides focus for everyone */
*:focus { outline: none; }

/* GOOD: only show focus from keyboard (not mouse click) */
:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

:focus-visible

:focus-visible sözde sınıfı yalnızca focus fare tıklamasından değil, klavyeden geldiğinde etkinleşir. Klavye focus'unu gösterirken fare stillerini sade tutmanızı sağlar.

İçeriğe Atla Bağlantısı

Focus alabilen ilk öğe, klavye kullanıcılarının üst bilgi gezinmesini geçip doğrudan ana içeriğe atlayabilmesi için bir atlama bağlantısı olmalıdır.

<a href="#main" class="skip-link">Skip to main content</a>
...
<main id="main" tabindex="-1">...</main>

/* CSS */
.skip-link {
  position: absolute; left: -10000px;
}
.skip-link:focus {
  left: 1rem; top: 1rem;
  background: white; padding: 0.5rem 1rem;
}

Modallarda Focus Tuzağı

Bir modal açıldığında focus içeride tutulmalıdır — son öğeden Tab ile geçildiğinde ilk öğeye, ilk öğeden Shift+Tab ile geçildiğinde son öğeye dönülmelidir. Escape tuşuna basmak modalı kapatır.

// On modal open:
modal.querySelector('h2').focus(); // move focus into modal
lastFocused = document.activeElement;

// On Tab in modal: detect leaving and wrap to first focusable.
// On Escape: close modal and restore focus:
lastFocused.focus();

dialog Öğesini Kullanın

HTML'nin yerel <dialog> öğesi focus tuzağını, Escape ile kapatmayı ve modal arka plan perdesini otomatik olarak yönetir.

<dialog id="signup">
  <h2>Sign up</h2>
  <form method="dialog">
    <input name="email" required>
    <button>Submit</button>
    <button value="cancel">Cancel</button>
  </form>
</dialog>

<script>
  document.getElementById('signup').showModal(); // opens with focus trap
</script>

Yönlendirme Değişikliğinden Sonra Focus Yönetimi

SPA'ler sayfayı yeniden yüklemez; bu nedenle ekran okuyucu kullanıcıları gezinmenin gerçekleştiğine dair bir sinyal alamaz. Yönlendirme değişikliğinde focus'u yeni sayfanın h1 öğesine veya main öğesine taşıyın.

// On route change:
document.getElementById('main')?.focus();
// or focus the new h1:
newPage.querySelector('h1')?.setAttribute('tabindex', '-1');
newPage.querySelector('h1')?.focus();

Focus Sırası Görsel Sırayla Eşleşmelidir

DOM sırasının görsel akışla eşleştiğinden emin olun. CSS öğelerin sırasını değiştirirse (flex order, grid yerleşimi, position absolute), sekme sırası eşleşmez — bu herkes için kafa karıştırıcıdır.

Farenizi Bir Kenara Bırakarak Sınayın

En yararlı erişilebilirlik sınaması şudur: farenizi çıkarın ve tüm uygulamanızı Tab, Shift+Tab, Enter, Space ve ok tuşlarıyla kullanmayı deneyin. Takılırsanız kullanıcılarınız da takılır.

Hızlı Kontrol

Focus çerçevesini yalnızca focus fare tıklamasından değil, klavyeden geldiğinde biçimlendirmenizi sağlayan CSS sözde sınıfı hangisidir?

İnteraktif derste cevapla

Özet: Klavye Gezinmesi

Yerel etkileşimli öğeler varsayılan olarak focus alabilir. tabindex=0 değerini yalnızca özel bileşenlerde kullanın; tabindex>0 değerini hiçbir zaman kullanmayın. Focus'u her zaman gösterin — :focus-visible kullanın. İçeriğe atlama bağlantısı ekleyin. Modallarda focus'u tuzağa alın ve kapanırken geri yükleyin. Mümkün olduğunda yerel <dialog> öğesini kullanın. Yönlendirme değişikliğinde focus'u h1/main öğesine taşıyın. Farenizi bir kenara bırakarak sınayın.

Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 41
Dersler: 163

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Klavye Gezinmesi ve Odak Yönetimi” dersi ücretsiz mi?

Evet — “Klavye Gezinmesi ve Odak Yönetimi” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“Klavye Gezinmesi ve Odak Yönetimi” dersinde ne öğreneceğim?

Tüm etkileşimli öğelere Tab ile ulaşılabildiğinden emin olun, iletişim kutularında ve yönlendirmede odağı programlı olarak yönetin ve görünür odak göstergeleri oluşturun. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Klavye Gezinmesi ve Odak Yönetimi” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Frontend Academy Sayfasına Dön