Bir Eylemden Sonra Odağı Taşıma
Odağı kullanıcının sırada ihtiyaç duyduğu yere gönderin.
Bir Eylemden Sonra Odağı Taşıma, 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.
Focus Is the User's Cursor
For keyboard and screen reader users, focus is where they are on the page. After an action, you decide where that point lands next.
Why Move Focus at All
When a button reveals new content, focus often stays put and the user never learns anything changed. Moving focus brings them to the result.
The focus Method
You move focus in JavaScript by calling element.focus() on the target you want the user to land on next.
document.getElementById('results').focus();Make the Target Focusable First
A plain div will not accept focus, so give the destination tabindex="-1" so your script can move focus to it.
<div id="results" tabindex="-1">3 matches found</div>Example: Reveal and Focus
After loading new content, show it and then send focus there so the screen reader starts reading the new region. 🔎
panel.hidden = false;
panel.focus();Focus the Heading, Not the Whole Region
Pointing focus at the new section's heading often reads best, giving the user a clear title for where they just arrived.
Deleting an Item
When the user removes a row, focus would otherwise be lost. Move it to the next item or a nearby control so they can keep going.
Avoid the Focus-to-Top Jolt
Letting focus snap back to the page top after every action is jarring. Aim it at the relevant spot instead so context is preserved.
Do Not Steal Focus Randomly
Only move focus in response to a user action. Grabbing it during background updates yanks people out of whatever they were doing.
Confirm It Worked
Test by triggering the action with the keyboard and watching the focus ring land where you intended, every single time.
One Move Per Action
Each meaningful action should result in exactly one deliberate focus move. Predictable beats clever every time.
Quick Check
You want to move focus to a freshly shown div after a button click. What must the div have?
Recap
You learned to move focus on purpose: make the target focusable with tabindex="-1", call focus() after the action, and aim for the most useful spot. ✨
Sıkça Sorulan Sorular
“Bir Eylemden Sonra Odağı Taşıma” dersi ücretsiz mi?
Evet — “Bir Eylemden Sonra Odağı Taşıma” 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.
“Bir Eylemden Sonra Odağı Taşıma” dersinde ne öğreneceğim?
Odağı kullanıcının sırada ihtiyaç duyduğu yere gönderin. 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.
“Bir Eylemden Sonra Odağı Taşıma” 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