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