Sekmeler Arasında Ok Tuşlarıyla Gezinme
Kullanıcıların klavyeyle sekmeler arasında hareket etmesini sağlayın.
Sekmeler Arasında Ok Tuşlarıyla Gezinme, CoddyKit'te ücretsiz bir Web Accessibility Academy dersidir. Bu, 4 dersinin 2. 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, Web Accessibility Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Web Accessibility Academy kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
Tabs Are Not Just Clickable
A correct tab set is driven by the keyboard, not the mouse alone. The APG pattern expects arrow keys to move between tabs.
The Tablist Is One Tab Stop
Pressing Tab should land on the tab set just once, not stop on every tab. The whole tablist behaves as a single stop in the page order.
Only One Tab Is Tabbable
Give the active tab tabindex="0" and every other tab tabindex="-1". This is the roving tabindex that keeps Tab from hitting them all.
<button role="tab" tabindex="0">Profile</button>Arrow Keys Move Focus
Inside a horizontal tablist, Right and Left arrows move focus from tab to tab. This is how keyboard users explore the set.
Up and Down for Vertical Tabs
If your tabs stack vertically, use Up and Down arrows instead. Set aria-orientation="vertical" so assistive tech knows the layout.
<div role="tablist" aria-orientation="vertical">...</div>Wrap Around at the Ends
When focus is on the last tab and the user presses the next arrow, wrap back to the first. Looping keeps navigation smooth and predictable.
Home and End Jump Far
Add two shortcuts: Home moves focus to the first tab and End moves it to the last. Long tab sets become much faster to navigate.
Move the Roving Index
When an arrow shifts focus, update the tabindex: set the newly focused tab to 0 and the old one to -1, then call focus on it.
newTab.tabIndex = 0; oldTab.tabIndex = -1; newTab.focus();Automatic Activation
With automatic activation, focusing a tab also selects it and shows its panel. It feels instant but can be heavy if panels are costly.
Manual Activation
With manual activation, arrows only move focus; the user presses Enter or Space to select. Prefer this when revealing a panel is expensive.
Why This Matters
Without arrow support, keyboard users must Tab through every tab and panel. Proper key handling makes the widget efficient, not just reachable.
Quick Check
Focus is on a tab in a horizontal tablist. The user presses the Right arrow. What should happen?
Recap: Arrow Navigation
You learned tabs use a roving tabindex with arrow keys, plus Home and End. Choose automatic or manual activation based on panel cost.
Sıkça Sorulan Sorular
“Sekmeler Arasında Ok Tuşlarıyla Gezinme” dersi ücretsiz mi?
Evet — “Sekmeler Arasında Ok Tuşlarıyla Gezinme” 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 Web Accessibility Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Web Accessibility Academy kursu toplamda 4 dersten oluşur.
“Sekmeler Arasında Ok Tuşlarıyla Gezinme” dersinde ne öğreneceğim?
Kullanıcıların klavyeyle sekmeler arasında hareket etmesini sağlayın. Web Accessibility 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.
Web Accessibility Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Web Accessibility 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 2. dersidir.
“Sekmeler Arasında Ok Tuşlarıyla Gezinme” 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 Web Accessibility Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Web Accessibility 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
- Sekmeler Kalıbı: tablist, tab, tabpanel
- Sekmeler Arasında Ok Tuşlarıyla Gezinme
- Düğme ve aria-expanded ile Akordeonlar
- Açılır Bölüm mü Sekmeler mi: Doğru Seçimi Yapın