زر التبديل والتبويب

• تنظيم المحتوى المرتبط في أقسام منفصلة.
• تقليل الحاجة إلى التمرير في الصفحات الغنية بالمحتوى.
• تمكين المستخدمين من التنقل بين العروض أو التصنيفات المختلفة.
• عرض المعلومات المرتبطة دون الحاجة إلى الانتقال إلى صفحة جديدة.

تُستخدم أزرار التبويب بشكل شائع في صفحات الخدمات، ولوحات التحكم، والوثائق، وصفحات الملف الشخصي، وصفحات الإعدادات.

النمط الافتراضي المستخدم في معظم الخدمات الرقمية، ويوفر مظهرًا بسيطًا ومتوازنًا يناسب التنقل بين أقسام المحتوى.

الاستخدامات الشائعة:

• صفحات المحتوى
• عرض الوثائق
• أقسام المعلومات

الخصائص:

• تصميم بسيط وواضح
• حالة نشطة واضحة
• مناسب لمعظم حالات الاستخدام

نمط بسيط يعتمد على خط سفلي لإبراز علامة التبويب النشطة، ويوفر مظهرًا هادئًا مع الحفاظ على وضوح التنقل.

الاستخدامات الشائعة:

• التنقل الثانوي
• صفحات الوثائق
• الصفحات الغنية بالمحتوى

الخصائص:

• معالجة بصرية مبسطة
• يتم تمييز العنصر النشط بخط سفلي
• يركز على المحتوى أكثر من عناصر التنقل

نمط أكثر بروزًا، حيث يتم تمييز علامة التبويب النشطة بخلفية ممتلئة، ويُستخدم عندما تكون الحاجة إلى إبراز العنصر النشط بشكل أكبر.

الاستخدامات الشائعة:

• لوحات التحكم
• الصفحات التعريفية
• التطبيقات التفاعلية

الخصائص:

• إبراز بصري مرتفع
• حالة نشطة واضحة وسهلة التمييز
• مناسب للواجهات التي تركز على إنجاز المهام

• حاوية أزرار التبويب
• عناصر أزرار التبويب
• مؤشر العنصر النشط
• لوحة المحتوى المرتبطة

• يؤدي اختيار زر تبويب إلى عرض لوحة المحتوى المرتبط بها.
• يجب أن يكون زر التبويب واحد فقط في الحالة النشطة في كل مرة.
• يجب أن تكون الحالة النشطة واضحة وسهلة التمييز.
• ينبغي أن تكون تسميات علامات التبويب مختصرة وواضحة.

• يجب أن تدعم علامات التبويب التنقل الكامل باستخدام لوحة المفاتيح.
• استخدم أدوار ARIA المناسبة مثل tablist وtab وtabpanel.
• احرص على توضيح أزرار التبويب النشطة لتقنيات المساعدة.
• وفّر حالات تركيز (Focus) واضحة لمستخدمي لوحة المفاتيح.
• احرص على توفير تباين لوني كافٍ في جميع الأنماط.

• ينبغي أن تتكيف علامات التبويب بسلاسة مع مختلف أحجام الشاشات.
• على الشاشات الصغيرة، يمكن أن تصبح علامات التبويب قابلة للتمرير أفقيًا عند ضيق المساحة.
• يجب أن تبقى التسميات واضحة وسهلة القراءة دون اقتطاع المعلومات المهمة.