1. Design and Visuals (Perceivable)

يجب أن ينقل التصميم البصري العلاقة بين علامات التبويب ولوحاتها دون الاعتماد على اللون فقط.

Color Contrast (WCAG 1.4.3)

• نسبة التباين بين النص والخلفية ≥ 4.5:1 (للنص العادي) أو ≥ 3:1 (للنص الكبير)
• يجب أن تحقق مؤشرات التركيز (مثل outline أو underline أو تغيير الخلفية) نسبة تباين لا تقل عن 3:1
• استخدم حدًا مرئيًا لتوضيح التبويب النشط/المحدد، فهذا يوفر إشارة غير لونية (شكل/وصلة) لتبيان أي تبويب نشط
• مظهر التركيز (WCAG 2.4.13): تأكد من أن جميع العناصر التفاعلية لها مؤشر تركيز مرئي، مثل قاعدة [role="tab"]:focus-visible التي تستخدم محيطًا عالي التباين بعرض 4px وoutline-offset لمساعدة مستخدمي لوحة المفاتيح على معرفة موضعهم

Touch Targets (WCAG 2.5.5)

• يجب أن تكون كل علامة تبويب بارتفاع أدنى 48px، متجاوزة الحد الأدنى 24px لضمان سهولة النقر للمستخدمين ذوي الصعوبات الحركية.

السلوك المتجاوب (Responsive) (WCAG 1.4.10)

• سطح المكتب: علامات تبويب أفقية؛ الجوال: علامات تبويب عمودية
• يجب أن تعيد اللوحات ترتيبها بشكل صحيح عند التكبير حتى 400%

2. قابلية الاستخدام عبر لوحة المفاتيح (Operable)

يجب أن تكون جميع وظائف علامات التبويب قابلة للتشغيل باستخدام لوحة المفاتيح فقط. يجب أن يتمكن المستخدم من تنفيذ كل إجراء يمكن لمستخدم الفأرة القيام به.

نمط التفاعل القياسي

• Tab / Shift + Tab: ينقل التركيز إلى قائمة علامات التبويب إلى التبويب النشط، أو يعيد التركيز إلى العنصر التفاعلي السابق.
• Enter أو Space: يفعّل التبويب المركّز، ويعرض اللوحة المقابلة له ويخفي الباقي.
• مفاتيح الأسهم (أعلى، أسفل، يمين، يسار): تنقل التركيز بين علامات التبويب المختلفة في القائمة (تنقل دائري)، وهذه أفضل ممارسة للعناصر المعقدة.
• Escape: يغلق العنصر الفرعي المفتوح حاليًا ويعيد التركيز إلى الزر الذي فتحه.

المبادئ الأساسية

• ترتيب تركيز منطقي (WCAG 2.4.3): يجب أن ينتقل التركيز عبر عناصر علامات التبويب بترتيب منطقي ومتوقع.

3. قارئات الشاشة والتقنيات المساعدة (Understandable & Robust)

بالنسبة لقارئ الشاشة، فإن "Tab" ليس مجرد زر — بل هو نمط واجهة يغير محتوى الصفحة ديناميكيًا.

ARIA Roles, Properties, and States

• role="tablist": يحدد الحاوية لمجموعة علامات التبويب.
• role="tab": يحدد العنصر الذي يتحكم في ظهور اللوحة.
• aria-selected="true/false": يخبر قارئ الشاشة أي تبويب "نشط" حاليًا.
• aria-controls="ID": يربط برمجيًا التبويب بـ role="tabpanel" الذي يفتحه.
• role="tabpanel": الحاوية للمحتوى.
• aria-labelledby="ID": يربط اللوحة بتبويبها، مما يمنح اللوحة اسمًا وصوليًا (مثال: "لوحة التصميم").
• tabindex="-1": تُستخدم على لوحات التبويب حتى يتمكن JavaScript من استدعاء
• targetPanel.focus(): لتبدأ قارئات الشاشة بقراءة المحتوى فورًا.