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

تاريخ النشر: 2 أيار (مايو) 2019

تحقَّق يدويًا من أنّ جميع عناصر التحكّم المخصّصة يمكن التركيز عليها باستخدام لوحة المفاتيح وعرض مؤشر التركيز. يجب أن يهدف ترتيب العناصر التي يتم التركيز عليها إلى اتّباع ترتيب نموذج العناصر في المستند (DOM). إذا لم تكن متأكدًا من العناصر التي يجب أن يتم التركيز عليها، يمكنك الاطّلاع على وحدة التركيز في دورة تعلُّم إمكانية الوصول على web.dev.

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

لاختبار ما إذا كان عنصر التحكّم المخصّص قابلاً للتركيز عليه ويعرض مؤشر تركيز، ابدأ بالتنقل بين عناصر موقعك الإلكتروني باستخدام مفتاح Tab. استخدِم TAB (أو SHIFT + TAB) للتنقّل بين عناصر التحكّم، واستخدِم مفاتيح الأسهم وENTER وSPACE لتعديل قيمها (راجِع أيضًا أساسيات الوصول باستخدام لوحة المفاتيح):

هل يمكنك الوصول إلى جميع عناصر التحكّم التفاعلية على الصفحة؟ هل يتوفّر مؤشر تركيز على كل عنصر تحكّم تفاعلي؟

كيفية حلّ المشكلة

إذا لم تتمكّن من التنقّل بين جميع العناصر على الصفحة باستخدام مفتاح Tab، قد تحتاج إلى استخدام tabindex لتحسين إمكانية التركيز على عناصر التحكّم هذه.

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

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

قد تحتاج أيضًا إلى إضافة أدوار ARIA المناسبة إلى عناصر التحكّم المخصّصة. اطّلِع على عناصر التحكّم المخصّصة لها أدوار ARIA.

إذا لم يظهر مؤشر التركيز، ننصحك باستخدام :focus لعرض مؤشر التركيز دائمًا. وبغض النظر عمّا إذا كنت تستخدم الماوس أو لوحة المفاتيح للانتقال إلى الزر، سيبدو مؤشر التركيز الخاص بالزر دائمًا بالشكل نفسه (راجِع أيضًا التركيز على الأسلوب).

أهمية ذلك

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

يمكنك الاطّلاع على مزيد من المعلومات حول أدوات تسهيل الاستخدام في Learn Accessibility.

الموارد