tabindex 0 و-1، وعدم استخدام القيم الموجبة
تحكموا في العناصر القابلة للتركيز وتلك التي لا يمكن تشغيلها إلا عبر البرمجة
tabindex 0 و-1، وعدم استخدام القيم الموجبة درس مجاني في Web Accessibility Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Web Accessibility Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Web Accessibility Academy 4 دروس في المجموع.
ما الذي يتحكم فيه tabindex
تحدد سمة tabindex ما إذا كان العنصر يمكنه استقبال تركيز لوحة المفاتيح، وكيف يندرج ضمن ترتيب Tab. إنها أداة ضبط قابلية التركيز.
معظم العناصر قابلة للتركيز مسبقًا
تكون الروابط والأزرار وحقول الإدخال قابلة للتركيز افتراضيًا، لذلك نادرًا ما تحتاج إلى تعديل tabindex لها. استخدمها فقط عندما يتعذر على العنصر الأصلي تنفيذ المطلوب.
تُدخل tabindex 0 العنصر في الترتيب
يؤدي ضبط tabindex="0" إلى إدخال عنصر غير قابل للتركيز عادةً في ترتيب Tab الطبيعي، في الموضع الذي يوجد فيه ضمن DOM.
<div role="button" tabindex="0">Custom action</div>متى تستخدم 0
استخدم tabindex="0" مع عنصر تحكم مخصص أنشأته من div أو span، ويجب أن يكون قابلًا للوصول باستخدام لوحة المفاتيح، مثل مفتاح تبديل مبرمج.
تعني tabindex -1 أن العنصر قابل للتركيز برمجيًا فقط
عند استخدام tabindex="-1"، يتجاوز مفتاح Tab العنصر، لكن يظل من الممكن تركيزه من JavaScript باستخدام element.focus().
<div id="panel" tabindex="-1">Result area</div>لماذا تُعد -1 مفيدة جدًا
تستخدم tabindex="-1" لنقل التركيز إلى منطقة بعد تنفيذ إجراء، مثل لوحة نتائج، من دون إضافتها إلى كل ضغطة Tab. 🎯
لا تستخدم القيم الموجبة مطلقًا
تضع tabindex الموجبة مثل 3 العنصر قبل كل العناصر الأخرى، فتربك الترتيب وتحاصرك في متاهة. تجنبها.
<input tabindex="3">تعطل القيم الموجبة التدفق
تتم زيارة أي عنصر ذي قيمة موجبة قبل جميع العناصر ذات tabindex="0" والعناصر الافتراضية، لذلك لا يعود ترتيب التركيز مطابقًا للترتيب المرئي.
دع DOM يحدد الترتيب
ينشأ أنظف ترتيب لـ Tab من ترتيب DOM نفسه. رتّب الترميز ترتيبًا منطقيًا، وستختفي معظم مشكلات التركيز تلقائيًا.
لا تجعل كل شيء قابلًا للتركيز
تؤدي إضافة tabindex="0" إلى نص عادي أو حاويات كاملة إلى إنشاء ضوضاء، إذ تجبر مستخدمي لوحة المفاتيح على المرور بعناصر توقف لا تفعل شيئًا.
قاعدة بسيطة تقريبية
استخدم 0 لإضافة عنصر تحكم مخصص إلى الترتيب، و-1 للتركيز عليه برمجيًا فقط، ولا تستخدم رقمًا موجبًا مطلقًا. يغطي ذلك كل الحالات تقريبًا.
تحقق سريع
ما قيمة tabindex التي تجعل العنصر قابلًا للتركيز برمجيًا، لكنها تتخطاه في ترتيب Tab؟
مراجعة
أصبحت الآن تتحكم في أداة tabindex: تضيف 0 عناصر التحكم المخصصة إلى الترتيب، ويتيح -1 التركيز البرمجي، بينما القيم الموجبة ممنوعة. 👍
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 30
- الدروس
- 120
الأسئلة الشائعة
هل درس «tabindex 0 و-1، وعدم استخدام القيم الموجبة» مجاني؟
نعم — نص درس «tabindex 0 و-1، وعدم استخدام القيم الموجبة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Web Accessibility Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Web Accessibility Academy 4 دروس في المجموع.
ماذا ستتعلم في «tabindex 0 و-1، وعدم استخدام القيم الموجبة»؟
تحكموا في العناصر القابلة للتركيز وتلك التي لا يمكن تشغيلها إلا عبر البرمجة تتمرن على Web Accessibility Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Web Accessibility Academy؟
لا تُشترط خبرة سابقة. Web Accessibility Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «tabindex 0 و-1، وعدم استخدام القيم الموجبة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Web Accessibility Academy هذا؟
نعم. كل درس في Web Accessibility Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- tabindex 0 و-1، وعدم استخدام القيم الموجبة
- نقل التركيز بعد تنفيذ إجراء
- إعادة التركيز عند إغلاق طبقة
- إدارة roving tabindex في الأدوات