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