تحتوي عناصر التحكم المخصصة على تصنيفات مرتبطة

يجب أن تكون عناصر التحكّم التفاعلية المخصَّصة قابلة للتركيز. إذا كنت تستخدم JavaScript لتحويل <div> إلى قائمة منسدلة فاخرة، لن يتم إدراجه تلقائيًا في ترتيب التنقل بـ Tab. تحتاج إلى التحقّق يدويًا من أنّ جميع عناصر التحكّم المخصّصة يمكن التركيز عليها باستخدام لوحة المفاتيح. راجِع أيضًا أساسيات الوصول إلى لوحة المفاتيح.

كيفية إجراء الاختبار يدويًا

لاختبار إمكانية التركيز على عنصر التحكّم المخصّص، اضغط على المفتاح TAB للتنقّل في الموقع الإلكتروني:

هل يمكنك الوصول إلى جميع عناصر التحكم التفاعلية في الصفحة؟ وإذا لم يكن الأمر كذلك، قد تحتاج إلى استخدام tabindex لتحسين إمكانية التركيز على عناصر التحكّم هذه. راجِع أيضًا التحكّم في التركيز باستخدام مؤشر Tabindex.

كيفية إصلاحه

ولجعل عنصر تحكم مخصص قابل للتركيز، أدرج عنصر التحكم المخصص في ترتيب علامات التبويب الطبيعي باستخدام tabindex="0". مثال:

<div tabindex="0">Focus me with the TAB key</div>

سبب أهمية ذلك

بالنسبة للمستخدمين الذين لا يستطيعون أو يختارون عدم استخدام الماوس، فإن التنقل بلوحة المفاتيح هو الوسيلة الأساسية للوصول إلى كل شيء على الشاشة. تعتمد تجارب استخدام لوحة المفاتيح الجيدة على ترتيب التنقل بـ Tab منطقي وأنماط تركيز واضحة. وإذا لم يتمكن مستخدم لوحة المفاتيح من رؤية الصفحة محل التركيز، لن يكون لديه أي طريقة للتفاعل مع الصفحة.

تعرَّف على مزيد من المعلومات في مقالة كيفية إجراء مراجعة لتسهيل الاستخدام.

المراجِع