التنقل بالكيبورد وخاصية tabindex | إتاحة الويب وتدقيق الكود في لغة HTML

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تعتبر إمكانية تشغيل الموقع بالكامل عبر لوحة المفاتيح ركيزة جوهرية من ركائز النفاذ الرقمي؛ فالكثير من المستخدمين ذوي الإعاقات الحركية والبصرية يعتمدون كلياً على أزرار Tab و Shift+Tab و Enter ومسافة المسطرة والأسهم للتنقل وتشغيل العناصر دون استخدام الفأرة.

الصف 2 كود برمجي

HTML

<!-- Natural focus order for custom interactive card -->
<div class="action-card" tabindex="0" role="button">
  Select Plan
</div>

<!-- Programmatic-only focus for modal window -->
<dialog id="user-dialog" tabindex="-1">
  <h3>Confirmation</h3>
</dialog>

جرّب بنفسك

الصف 3 شرح توضيحي

تتحكم خاصية tabindex في بؤرة تركيز لوحة المفاتيح؛ فإسناد القيمة tabindex="0" يدرج العنصر داخل تسلسل التنقل الطبيعي بزر Tab. وإسناد القيمة tabindex="-1" يمنع وصول زر Tab إليه مع السماح بالتركيز عليه برمجياً عبر دوال جافا سكريبت مثل focus(opts). وتجنب تماماً القيم الموجبة لأنها تفسد التسلسل المنطقي.

الصف 4 ملاحظة هامة

Keyboard Navigation and tabindex التنقل بالكيبورد وخاصية tabindex

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (إتاحة الويب وتدقيق الكود في لغة HTML)