نقل التركيز بعد تنفيذ إجراء
وجّهوا التركيز إلى المكان الذي يحتاج إليه المستخدم تالياً
نقل التركيز بعد تنفيذ إجراء درس مجاني في Web Accessibility Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Web Accessibility Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Web Accessibility Academy 4 دروس في المجموع.
بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.
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. ✨
الأسئلة الشائعة
هل درس «نقل التركيز بعد تنفيذ إجراء» مجاني؟
نعم — نص درس «نقل التركيز بعد تنفيذ إجراء» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Web Accessibility Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Web Accessibility Academy 4 دروس في المجموع.
ماذا ستتعلم في «نقل التركيز بعد تنفيذ إجراء»؟
وجّهوا التركيز إلى المكان الذي يحتاج إليه المستخدم تالياً تتمرن على Web Accessibility Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Web Accessibility Academy؟
لا تُشترط خبرة سابقة. Web Accessibility Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «نقل التركيز بعد تنفيذ إجراء»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Web Accessibility Academy هذا؟
نعم. كل درس في Web Accessibility Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- tabindex 0 و-1، وعدم استخدام القيم الموجبة
- نقل التركيز بعد تنفيذ إجراء
- إعادة التركيز عند إغلاق طبقة
- إدارة roving tabindex في الأدوات