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