tabindex 0, -1 ve Pozitif Değerlerden Kaçınma
Nelerin odaklanılabilir, nelerin yalnızca betikle çalıştırılabilir olduğunu denetleyin.
tabindex 0, -1 ve Pozitif Değerlerden Kaçınma, CoddyKit'te ücretsiz bir Web Accessibility Academy dersidir. Bu, 4 dersinin 1. 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.
What tabindex Controls
The tabindex attribute decides whether an element can receive keyboard focus and how it fits into the Tab order. It is your dial for focusability.
Most Things Are Already Focusable
Links, buttons, and inputs are focusable by default, so you rarely touch tabindex on them. Reach for it only when the native element cannot do the job.
tabindex 0 Joins the Order
Setting tabindex="0" puts a normally non-focusable element into the natural Tab order, right where it sits in the DOM.
<div role="button" tabindex="0">Custom action</div>When to Use 0
Use tabindex="0" on a custom widget you built from a div or span that must be reachable by keyboard, like a scripted toggle.
tabindex -1 Means Scriptable Only
With tabindex="-1", an element is skipped by the Tab key but can still be focused from JavaScript using element.focus().
<div id="panel" tabindex="-1">Result area</div>Why -1 Is So Useful
You use tabindex="-1" to move focus to a region after an action, like a results panel, without adding it to every Tab press. 🎯
Never Use Positive Values
A positive tabindex like 3 jumps that element ahead of everything, scrambling the order and trapping you in a maze. Avoid it.
<input tabindex="3">Positive Values Break the Flow
Any element with a positive value is visited before all the tabindex="0" and default elements, so the focus order stops matching the visual order.
Let the DOM Set the Order
The cleanest Tab order comes from DOM order itself. Arrange your markup logically and most focus problems disappear on their own.
Do Not Make Everything Focusable
Adding tabindex="0" to plain text or whole containers creates noise, forcing keyboard users to Tab through stops that do nothing.
A Simple Rule of Thumb
Use 0 to add a custom control to the order, -1 to focus by script only, and never a positive number. That covers almost everything.
Quick Check
Which tabindex value makes an element focusable by script but skips it in the Tab order?
Recap
You now own the tabindex dial: 0 adds custom controls to the order, -1 enables scripted focus, and positive values are off-limits. 👍
Sıkça Sorulan Sorular
“tabindex 0, -1 ve Pozitif Değerlerden Kaçınma” dersi ücretsiz mi?
Evet — “tabindex 0, -1 ve Pozitif Değerlerden Kaçınma” 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.
“tabindex 0, -1 ve Pozitif Değerlerden Kaçınma” dersinde ne öğreneceğim?
Nelerin odaklanılabilir, nelerin yalnızca betikle çalıştırılabilir olduğunu denetleyin. 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 1. dersidir.
“tabindex 0, -1 ve Pozitif Değerlerden Kaçınma” 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
- tabindex 0, -1 ve Pozitif Değerlerden Kaçınma
- Bir Eylemden Sonra Odağı Taşıma
- Bir Katman Kapandığında Odağı Geri Getirme
- Bileşenlerde Hareketli tabindex Yönetimi