يجب أن تكون عناصر التحكّم التفاعلية المخصّصة قابلة للتركيز. على سبيل المثال، إذا كنت تستخدم JavaScript لتحويل <div>
إلى قائمة منسدلة رائعة، لا يتم إدراج هذه القائمة المنسدلة تلقائيًا في ترتيب علامات التبويب الصحيح.
عليك التحقّق يدويًا من أنّ جميع عناصر التحكّم المخصّصة قابلة للتركيز باستخدام لوحة المفاتيح.
استخدِم، إن أمكن، عناصر HTML الدلالية التي تتيح التفاعل.
كيفية الاختبار
لاختبار إمكانية التركيز على عنصر التحكّم المخصّص،
اضغط على مفتاح TAB
للتنقّل في الموقع الإلكتروني:
هل يمكنك الوصول إلى جميع عناصر التحكّم التفاعلية على الصفحة؟
إذا لم يكن الأمر كذلك، قد تحتاج إلى استخدام tabindex
لتحسين إمكانية التركيز على عناصر التحكّم هذه.
راجِع أيضًا مقالة التحكّم في التركيز باستخدام tabindex.
كيفية حلّ المشكلة
لجعل عنصر التحكّم المخصّص قابلاً للتركيز، أدرِج عنصر التحكّم المخصّص في
ترتيب التبويب الطبيعي باستخدام tabindex="0"
.
على سبيل المثال:
<div tabindex="0">Focus me with the TAB key</div>
أهمية ذلك
بالنسبة إلى المستخدمين الذين لا يمكنهم استخدام الماوس أو يختارون عدم استخدامه، يكون التنقّل باستخدام لوحة المفاتيح هو الوسيلة الأساسية للوصول إلى كل العناصر على الشاشة. تعتمد تجارب لوحة المفاتيح الجيدة على ترتيب التنقل بـ Tab منطقي وأنماط تركيز واضحة. في حال لم يتمكّن مستخدم لوحة المفاتيح من رؤية المحتوى الذي يتم التركيز عليه، يعني ذلك أنّه ليست لديه أي طريقة للتفاعل مع الصفحة.
إذا كنت مبتدئًا في اختبار تسهيل الاستخدام، ننصحك بالاطّلاع على مزيد من المعلومات حول اختبار تسهيل الاستخدام اليدوي واختبار التكنولوجيا المساعِدة.