ما هو عارض ترتيب التركيز؟

الصق أي كود HTML وشاهد ترتيب التبويب بلوحة المفاتيح موضحًا بالكامل. تظهر علامات مرقمة على كل عنصر قابل للتركيز لتكتشف مشاكل التنقل بنظرة واحدة. مصمم لمدققي إمكانية الوصول والمطورين للتحقق من توافق WCAG.

الأداة تكتشف الروابط والأزرار وحقول النماذج ومناطق النص وقوائم select وعناصر details/summary والمناطق ذات contenteditable وأي عنصر له تعيين tabindex صريح. كل عنصر قابل للتركيز يحصل على شارة مرقمة وعلامة توضح إن كان موقعه نابعاً من ترتيب DOM (طبيعي) أو من قيمة tabindex تتجاوزه (مخصص). كما تمنح الصفحة درجة من 100، وتشير إلى عناصر التحكم التي تفتقر إلى اسم يمكن الوصول إليه (مشكلة الزر الذي يحمل أيقونة فقط)، وتوضّح كم عنصراً تفاعلياً لا يمكن الوصول إليه أبداً عبر Tab. يمكن تصدير النتائج كتقرير نصي بسيط أو كملف CSV منظم للأرشيف ومتابعة الأخطاء.

كيفية الاستخدام

1. الصق كود HTML في المحرر أو ارفع ملف HTML للتحقق من ترتيب التبويب.
2. تظهر علامات مرقمة على كل عنصر قابل للتركيز (الروابط، الأزرار، حقول الإدخال) توضح تسلسل التبويب.
3. اطّلع على درجة إمكانية الوصول ولوحة المشكلات، وأصلح العناصر غير المرتبة أو بلا اسم أو التي يتعذّر الوصول إليها بلوحة المفاتيح، ثم صدّر النتائج كتقرير نصي أو ملف CSV.

متى تستخدم

• فحص تمهيدي قبل تقديم صفحة للحصول على شهادة WCAG 2.1 AA.
• تتبّع انحدار في ترتيب التبويب بعد إعادة بناء مكوّن أو تخطيط.
• التحقق من أن نافذة modal أو قائمة جانبية تحبس التركيز كما يجب.

النتيجة

يلصق مستشار إمكانية الوصول كود HTML لنموذج تسجيل العميل. يلتقط المُصوّر أن زر 'إرسال' يحصل على التركيز قبل خانة 'شروط الخدمة'، لأن قيمة tabindex موجبة أعادت ترتيب العناصر. هذا انتهاك لمعيار WCAG 2.4.3.

الأسئلة الشائعة

هل استخدام tabindex برقم موجب خطأ دائماً؟

تقريباً دائماً نعم. القيم الموجبة (1، 2، 3…) تنقل العنصر خارج ترتيب DOM وتجعل المؤشر يقفز في الصفحة بشكل غير متوقع. استخدم tabindex="0" لجعل عنصر غير تفاعلي قابلاً للتركيز، أو tabindex="-1" لإخراجه من سلسلة Tab مع الإبقاء على إمكانية التركيز برمجياً.

ما الفرق بين «طبيعي» و«مخصص» في القائمة؟

طبيعي يعني أن موقع التبويب جاء من موضع العنصر في كود HTML. مخصص يعني أن قيمة tabindex موجبة دفعته إلى مكان آخر. المواقع المخصصة تُعلَّم لأنها السبب الأكثر شيوعاً لفشل WCAG 2.4.3.

هل تظهر العناصر المخفية في ترتيب التركيز؟

إذا كانت مخفية فعلاً (display:none أو visibility:hidden)، فإن المتصفح يتجاوزها والأداة كذلك. لكن aria-hidden وحدها لا تزيل القابلية للتركيز، وهذا خطأ شائع. القائمة ستعرضها وبيانات المستطيل تخبرك إن كانت مرئية أم لا.

هل تكشف الأداة عن غياب حبس التركيز داخل modal؟

الأداة تعرض الترتيب، لا تخبرك إن كان التركيز يخرج من النافذة. الصق HTML النافذة بحالتها المفتوحة وانظر إن كان أول وآخر عنصر قابلين للتركيز يقعان داخل الحوار. إذا قفز الترتيب إلى محتوى الصفحة الأصلي، فحبس التركيز ناقص.

لماذا يغيب من القائمة عنصر توقعت أن يكون قابلاً للتركيز؟

الحقول المعطّلة وعلامات anchor بدون href وعناصر div بدون tabindex يتم تجاوزها لأن المتصفح أصلاً لا يستطيع تركيزها. أضف tabindex="0" إذا كان div بحاجة للوصول، أو ضع href في anchor، أو أزل صفة disabled.

أدوات ذات صلة