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

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

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

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

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

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

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

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

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

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

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

أهمية ذلك

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

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

الموارد