ضمان أن عنصر علامات التبويب يتماشى مع إرشادات التصميم الموحد (كود المنصات)
علامات التبويب تقسم محتوى صفحة واحدة. ويطلب المعيار عناوين قصيرة تُقرأ في لمحة لا جملًا كاملة، وأن يتبدّل المحتوى فعليًا مع التبويب، وأن تكون العلامة النشطة ظاهرة.
وهو من المعايير الأساسية في فئة العناصر من دليل كود المنصات، نظام التصميم الموحد للمملكة، الصادر عن هيئة الحكومة الرقمية.
المعيار في مثال واحد
علامات التبويب، مرة بعناوين قصيرة ومرة بجمل كاملة.
كيف تقيس الأداة هذا المعيار
تُقرأ القيمة المطبَّقة من الصفحة وتُقارن بالقيمة المعتمدة في كود المنصات، فيصدر الحكم عن قياس لا عن تقدير، وتُرفق القيمة المرصودة والقيمة المتوقعة معًا.
وتشترك معايير العناصر في بنية واحدة: الالتزام بالتصميم الأساسي دون تعديل، ثم الحالات التفاعلية، ثم الحالات السياقية. ويُرصد كذلك العنصر المطابق شكلًا دون أي إشارة إلى مكتبة كود المنصات، إذ يدل ذلك على بناء يدوي منفصل عن المكتبة لا تصله تحديثاتها.
النص الرسمي ونقاط التحقق
يقوم هذا المعيار على ٤ من نقاط التحقق المنشورة في كود المنصات، وهي المرجع عند الحكم عليه.
صفحة هذا المعيار في الموقع الرسمي لكود المنصاتنقاط التحقق، نقطة نقطة
لكل نقطة من نقاط التحقق أدناه إجابة مستقلة: ما تشترطه، وما الذي يجتازها وما الذي يسقط فيها، وكيف تُقاس أو يُتحقق منها، وكيف تُعالَج. ولكل نقطة رابط مباشر يمكن مشاركته.
علامات التبويب: مطابقة الشكل والحواف واللون والمسافات
مقيس آليًاDGA-025-aتشترط هذه النقطة استدعاء علامات التبويب من مكتبة كود المنصات واستعماله بخصائصه المعتمدة دون تعديل على تصميمه الأساسي، وأخصّها هنا ارتفاع التبويبة وحدّها السفلي وألوانها ومسافاتها. وتعديل أي منها يخرج العنصر عن المكتبة ولو بقي شبيهًا بها في المظهر.
تقيس الأداة هذه النقطة آليًا، وترفق القيمة المرصودة والقيمة المتوقعة معًا.
ما الذي يجتازها: تبويبات مستدعاة من المكتبة، مبنية بخصائص التبويب الدلالية، ومحتوى كل تبويبة مرتبط بها برمجيًا.
ما الذي يسقط فيها: تبويبات مبنية بروابط تنقل، فتتحول من تبديل عرض إلى انتقال بين صفحات وتفقد سلوك التبويب كله.
كيف تُقاس أو يُتحقق منها: تُرصد التبويبات بخصائصها الدلالية أولًا، ثم بأسماء أصنافها، ثم بالهندسة عند غيابهما، فمنصات كثيرة تبني التبويبات بعناصر عامة.
كيف تُعالَج: ابنوا التبويبات على الخصائص الدلالية المعتمدة، فتأتي حركة الأسهم وحالة الاختيار معها.
نقاط متصلة:علامات التبويب: الحالات التفاعلية (Default · Hovered · Focused · Disabled) ·علامات التبويب: الحالات السياقية (Selected / Unselected) ·وضوح نص التبويب وتوازن التبويبات بصريًا
علامات التبويب: الحالات التفاعلية (Default · Hovered · Focused · Disabled)
يتحقق منه فريقكمDGA-025-bتشترط هذه النقطة أن يحمل علامات التبويب حالاته التفاعلية المعتمدة كاملة (Default · Hovered · Focused · Disabled) بالقيم المنصوص عليها في كود المنصات. وغياب حالة واحدة منها يمنع بلوغ التطبيق الكلي في المعيار.
لا تُقاس هذه النقطة آليًا، فحكمها يقتضي تفاعلًا مع الصفحة، وأخلاقيات الزحف تمنع التفاعل مع منصات الجهات.
ما الذي يجتازها: التنقل بين التبويبات بالأسهم يعمل، ومؤشر التركيز ظاهر على التبويبة الجارية.
ما الذي يسقط فيها: تبويبات لا تبلغها لوحة المفاتيح إلا بضغطة تنقل لكل واحدة، وهو أثر بنائها بعناصر عامة.
كيف تُقاس أو يُتحقق منها: حالات التمرير والضغط والتركيز والتعطيل لا تُقرأ من صفحة ساكنة، فهي تحتاج تفاعلًا مع العنصر، وأخلاقيات الزحف تمنع التفاعل مع منصات الجهات. تحققوا منها بلوحة المفاتيح وحدها: انتقلوا إلى العنصر وارصدوا مؤشر التركيز، ثم مرّوا عليه بالمؤشر وارصدوا تغيّر الحالة.
كيف تُعالَج: اعتمدوا نمط التبويب الدلالي كاملًا، فحركة الأسهم جزء منه لا إضافة عليه.
نقاط متصلة:علامات التبويب: الحالات السياقية (Selected / Unselected) ·علامات التبويب: مطابقة الشكل والحواف واللون والمسافات ·القائمة: الحالات التفاعلية (Default · Hovered · Pressed · Focused · Disabled)
علامات التبويب: الحالات السياقية (Selected / Unselected)
يتحقق منه فريقكمDGA-025-cتشترط هذه النقطة أن يعبّر علامات التبويب عن حالته السياقية (Selected / Unselected) بالشكل المعتمد في كود المنصات، وأن تكون الحالة مقروءة برمجيًا لا بصريًا وحدها. وهذه الحالة تظهر عند تحميل الصفحة دون تفاعل، فهي في متناول القياس.
لا تُقاس هذه النقطة آليًا، فحكمها يقتضي تفاعلًا مع الصفحة، وأخلاقيات الزحف تمنع التفاعل مع منصات الجهات.
ما الذي يجتازها: التبويبة النشطة تحمل خاصية الاختيار المقروءة برمجيًا، ومحتواها وحده ظاهر.
ما الذي يسقط فيها: تمييز التبويبة النشطة بحدّ سفلي وحده، فلا يعلم قارئ الشاشة أي تبويبة مفتوحة.
كيف تُقاس أو يُتحقق منها: تُقرأ خاصية الاختيار من الصفحة عند التحميل، فهي حالة سياقية في متناول القياس.
كيف تُعالَج: اربطوا خاصية الاختيار بالحالة الفعلية، وأبقوا التمييز البصري إلى جانبها لا بديلًا عنها.
نقاط متصلة:علامات التبويب: الحالات التفاعلية (Default · Hovered · Focused · Disabled) ·مبدل المحتوى: الحالات السياقية (Selected) ·القائمة: الحالات السياقية (Selected)
وضوح نص التبويب وتوازن التبويبات بصريًا
مقيس آليًاDGA-025-dتشترط هذه النقطة وضوح نص التبويب خطًا وحجمًا ومحاذاةً، مع توازن بصري بين التبويبات كلها. فالتبويبة التي يقطع نصها أو تختلف عن جاراتها تكسر الصف وتُقرأ عنصرًا آخر.
تقيس الأداة هذه النقطة آليًا، وترفق القيمة المرصودة والقيمة المتوقعة معًا.
ما الذي يجتازها: نصوص التبويبات بخط ومقاس واحد، محاذاة موحدة، ولا يُقطع نص تبويبة على أي مقاس.
ما الذي يسقط فيها: تبويبة طويلة الاسم يُقطع نصها بثلاث نقاط على مقاس اللوحي، فيتعذّر تمييزها عن جارتها.
كيف تُقاس أو يُتحقق منها: تُقرأ خصائص نصوص التبويبات ويُفحص قطعها عند ثلاثة مقاسات، فالقطع قيمة تُرصد من الالتقاط.
كيف تُعالَج: قصّروا أسماء التبويبات بدل قطعها، أو انقلوا الزائد منها إلى قائمة «المزيد» المعتمدة.
نقاط متصلة:علامات التبويب: مطابقة الشكل والحواف واللون والمسافات ·متغيرات الخط: العرض (Display) والنصوص (Text) ·استجابة شريط التنقل لجميع أحجام الشاشات
كيف تتحققون منه يدويًا
وهذه خطوات المراجعة الكاملة للمعيار، وبعضها أوسع مما تغطيه القاعدة الآلية اليوم.
- اقرأوا عناوين التبويبات: العنوان القصير يُقرأ في لمحة، مثل «دليل التسجيل» أو «الأسئلة الشائعة»، والجملة الكاملة تُبطل غرض التبويب
- بدّلوا وتحققوا من تغيّر المحتوى فعليًا
- افحصوا
aria-selectedساكنًا - افحصوا سلوك التبويبات على مقاس الجوال
أخطاء شائعة في هذا المعيار
| الخطأ | لماذا يضر |
|---|---|
| تُكتب عناوين التبويبات جملًا كاملة لا عناوين قصيرة | فيبطل غرض التبويب أصلًا. |
| لا يتبدّل المحتوى فعليًا مع تبديل التبويب | فيبدو العنصر عاملًا وهو معطّل. |
يغيب aria-selected عن التبويب النشط | فلا يعلم قارئ الشاشة أيّها مفتوح. |
| تفيض التبويبات عن عرض الشاشة على الجوال | فتُقطع بعضها دون سبيل إليها. |
| يتعذّر التنقل بين التبويبات بالأسهم | السلوك المتوقع فيها. |
| عنصر يطابق الشكل بصريًا دون أي من إشارات مكتبة كود المنصات، وهو مؤشر على بناء يدوي منفصل عن المكتبة | فلا تصل إليه تحديثاتها. |
| غياب مؤشر تركيز مرئي واضح عند التنقل بلوحة المفاتيح | |
| مساحة لمس دون ٤٤ بكسل في العناصر التفاعلية | |
استخدام عنصر غير دلالي مكان العنصر الصحيح، مثل div بدل button |
كيف يُعالَج
- اختصروا العناوين إلى كلمتين أو ثلاث، مثل «دليل التسجيل» أو «الأسئلة الشائعة».
- اربطوا
aria-selectedبالحالة الفعلية للتبويب. - عالجوا الفيض على الجوال بتمرير أفقي داخل الشريط لا بقطع التبويبات.
- فعّلوا التنقل بالأسهم بين التبويبات.
- استدعوا العنصر من المكتبة، فتأتي حالاته السياقية مضبوطة.
معايير متصلة
وفي الدليل: أزرار كود المنصات: المواصفة والحالات وأكثر المخالفات تكرارًا · التبويبة عنصر إجراء تحكمه حالات الزر نفسها
لم تطبّقه أي من ٢٤ منصة حكومية مقيسة
- ٦ منصات
- ٣ منصات
- ٢ منصتان
- ٢ منصتان
- ٢ منصتان
والقياس على عيّنة من المنصات المنشورة للعموم بالمنهجية نفسها المنشورة في صفحة المنهجية.
أين تقف منصتكم من هذا المعيار؟
يصدر الفحص تقديرًا استرشاديًا خلال دقائق، ويبيّن لكل ملاحظة قيمتها المرصودة والمتوقعة وموضعها.