تحقق يدويًا من أن جميع عناصر التحكم المخصصة قابلة للتركيز واعرض مؤشر تركيز. يجب أن يهدف الترتيب الذي يتم التركيز به على العناصر إلى اتباع ترتيب DOM. وإذا لم تكن متأكدًا من العناصر التي يجب التركيز عليها، فراجع مقدمة عن التركيز.
كيفية إجراء الاختبار يدويًا
لاختبار عنصر التحكّم المخصّص الذي يمكن التركيز عليه ويعرض مؤشرًا للتركيز، ابدأ من خلال التنقّل في موقعك الإلكتروني.
استخدِم TAB (أو SHIFT +
TAB) للتنقّل بين عناصر التحكّم، واستخدِم مفاتيح الأسهم وENTER وSPACE للتحكم في القيم (راجِع أيضًا أساسيات الوصول إلى لوحة المفاتيح):
هل يمكنك الوصول إلى جميع عناصر التحكم التفاعلية في الصفحة؟ هل هناك مؤشر تركيز على كل عنصر تحكم تفاعلي؟
كيفية إصلاحه
إذا لم تتمكن من التنقل بين جميع العناصر في الصفحة،
قد تحتاج إلى استخدام tabindex لتحسين إمكانية التركيز على عناصر التحكم هذه.
لجعل عنصر تحكم مخصص قابل للتركيز،
أدخِل عنصر التحكم المخصص في ترتيب علامات التبويب الطبيعي باستخدام tabindex="0"
(راجع أيضًا التحكم في التركيز باستخدام مؤشر Tab).
مثلاً:
<div tabindex="0">Focus me with the TAB key</div>
قد تحتاج أيضًا إلى إضافة أدوار ARIA المناسبة إلى عناصر التحكّم المخصّصة. يُرجى الاطّلاع على تتضمّن عناصر التحكّم المخصَّصة أدوار ARIA.
إذا لم يظهر مؤشر التركيز،
يمكنك استخدام :focus لإظهار مؤشر التركيز دائمًا.
وبغض النظر عما إذا كنت تستخدم ماوس أو لوحة مفاتيح للانتقال إليه، سيظهر مؤشر التركيز للزر كما هو دائمًا
(راجع أيضًا التركيز على النمط).
سبب أهمية ذلك
بالنسبة للمستخدمين الذين لا يستطيعون أو يختارون عدم استخدام الماوس، فإن التنقل بلوحة المفاتيح هو الوسيلة الأساسية للوصول إلى كل شيء على الشاشة. تعتمد تجارب استخدام لوحة المفاتيح الجيدة على ترتيب التنقل بـ Tab منطقي وأنماط تركيز واضحة. وإذا لم يتمكن مستخدم لوحة المفاتيح من رؤية الصفحة محل التركيز، لن يكون لديه أي طريقة للتفاعل مع الصفحة.
تعرَّف على مزيد من المعلومات في مقالة كيفية إجراء مراجعة لتسهيل الاستخدام.