التحقق من استخدام عنصر شريط التنقل العلوي وفقًا لمعايير التصميم الموحد (كود المنصات)
شريط التنقل العلوي أكثر عنصر يتكرر في المنصة، فمخالفته تظهر في كل صفحة. ويطلب المعيار التركيب المعتمد بالشعار والتنقل والبحث والدخول، وسلوكه على الجوال، وبقاء الوصول إلى التنقل بعد طيّه.
وهو من المعايير الأساسية في فئة العناصر من دليل كود المنصات، نظام التصميم الموحد للمملكة، الصادر عن هيئة الحكومة الرقمية.
كيف تقيس الأداة هذا المعيار
تُقرأ القيمة المطبَّقة من الصفحة وتُقارن بالقيمة المعتمدة في كود المنصات، فيصدر الحكم عن قياس لا عن تقدير، وتُرفق القيمة المرصودة والقيمة المتوقعة معًا.
وتشترك معايير العناصر في بنية واحدة: الالتزام بالتصميم الأساسي دون تعديل، ثم الحالات التفاعلية، ثم الحالات السياقية. ويُرصد كذلك العنصر المطابق شكلًا دون أي إشارة إلى مكتبة كود المنصات، إذ يدل ذلك على بناء يدوي منفصل عن المكتبة لا تصله تحديثاتها.
النص الرسمي ونقاط التحقق
يقوم هذا المعيار على ٥ من نقاط التحقق المنشورة في كود المنصات، وهي المرجع عند الحكم عليه.
صفحة هذا المعيار في الموقع الرسمي لكود المنصاتنقاط التحقق، نقطة نقطة
لكل نقطة من نقاط التحقق أدناه إجابة مستقلة: ما تشترطه، وما الذي يجتازها وما الذي يسقط فيها، وكيف تُقاس أو يُتحقق منها، وكيف تُعالَج. ولكل نقطة رابط مباشر يمكن مشاركته.
شريط التنقل العلوي: مطابقة الشكل والحواف واللون والمسافات
مقيس آليًاDGA-029-aتشترط هذه النقطة استدعاء شريط التنقل العلوي من مكتبة كود المنصات واستعماله بخصائصه المعتمدة دون تعديل على تصميمه الأساسي، وأخصّها هنا ارتفاعه وخلفيته وموضع الشعار ومسافات عناصره. وتعديل أي منها يخرج العنصر عن المكتبة ولو بقي شبيهًا بها في المظهر.
تقيس الأداة هذه النقطة آليًا، وترفق القيمة المرصودة والقيمة المتوقعة معًا.
ما الذي يجتازها: شريط مستدعى من المكتبة، معلن بعلامته الدلالية، وارتفاعه وخلفيته من المعتمد.
ما الذي يسقط فيها: شريط مبني بعناصر عامة بلا علامة دلالية، فلا يعرفه قارئ الشاشة شريط تنقل وإن رآه الجميع.
كيف تُقاس أو يُتحقق منها: يُرصد الشريط بعلامته الدلالية، ثم بخصائص الوصولية بالعربية والإنجليزية معًا، ثم بأسماء الأصناف، ثم بالهندسة. وقد حملت منصات مبنية بأنماط تنسيق خدمية حكمًا خاطئًا بغياب الشريط قبل إضافة الطبقة الهندسية.
كيف تُعالَج: أعلنوا الشريط بعلامته الدلالية وضعوا الروابط داخل عنصر تنقل، فيصير مقروءًا بنيويًا لا بصريًا وحده.
نقاط متصلة:شريط التنقل العلوي: الحالات السياقية (Selected) ·استجابة شريط التنقل لجميع أحجام الشاشات ·التذييل: مطابقة الشكل والحواف واللون والمسافات
تبويبات شريط التنقل وقوائمه الفرعية: الحالات التفاعلية (Default · Hovered · Pressed · Focused · Disabled)
يتحقق منه فريقكمDGA-029-bتشترط هذه النقطة أن يحمل تبويبات شريط التنقل وقوائمه الفرعية حالاته التفاعلية المعتمدة كاملة (Default · Hovered · Pressed · Focused · Disabled) بالقيم المنصوص عليها في كود المنصات. وغياب حالة واحدة منها يمنع بلوغ التطبيق الكلي في المعيار.
لا تُقاس هذه النقطة آليًا، فحكمها يقتضي تفاعلًا مع الصفحة، وأخلاقيات الزحف تمنع التفاعل مع منصات الجهات.
ما الذي يجتازها: القوائم الفرعية تُفتح بلوحة المفاتيح كما تُفتح بالمؤشر، ومؤشر التركيز ظاهر على كل عنصر.
ما الذي يسقط فيها: قائمة فرعية تُفتح بالتمرير وحده، فلا يبلغها من يتنقل بلوحة المفاتيح ولا من يستعمل شاشة لمس.
كيف تُقاس أو يُتحقق منها: حالات التمرير والضغط والتركيز والتعطيل لا تُقرأ من صفحة ساكنة، فهي تحتاج تفاعلًا مع العنصر، وأخلاقيات الزحف تمنع التفاعل مع منصات الجهات. تحققوا منها بلوحة المفاتيح وحدها: انتقلوا إلى العنصر وارصدوا مؤشر التركيز، ثم مرّوا عليه بالمؤشر وارصدوا تغيّر الحالة.
كيف تُعالَج: اجعلوا فاتح القائمة عنصرًا تفاعليًا يعمل بالنقر وبالمفاتيح، ولا تعتمدوا على التمرير وحده.
نقاط متصلة:شريط التنقل العلوي: الحالات السياقية (Selected) ·شريط التنقل العلوي: مطابقة الشكل والحواف واللون والمسافات ·القائمة: الحالات التفاعلية (Default · Hovered · Pressed · Focused · Disabled)
شريط التنقل العلوي: الحالات السياقية (Selected)
يتحقق منه فريقكمDGA-029-cتشترط هذه النقطة أن يعبّر شريط التنقل العلوي عن حالته السياقية (Selected) بالشكل المعتمد في كود المنصات، وأن تكون الحالة مقروءة برمجيًا لا بصريًا وحدها. وهذه الحالة تظهر عند تحميل الصفحة دون تفاعل، فهي في متناول القياس.
لا تُقاس هذه النقطة آليًا، فحكمها يقتضي تفاعلًا مع الصفحة، وأخلاقيات الزحف تمنع التفاعل مع منصات الجهات.
ما الذي يجتازها: العنصر المطابق للصفحة الحالية يحمل خاصية الحالة الحالية، فيعرف قارئ الشاشة موضع المستخدم.
ما الذي يسقط فيها: تمييز الصفحة الحالية بلون أو خط عريض وحده، وهو أكثر ما يسقط من هذا العنصر على المنصات الحكومية.
كيف تُقاس أو يُتحقق منها: تُقرأ خاصية الحالة الحالية من الشريط عند تحميل الصفحة، فهي في متناول القياس دون تفاعل.
كيف تُعالَج: أضيفوا خاصية الحالة الحالية واربطوها بالمسار المفتوح، فهي أرخص معالجة في هذا المعيار وأكبرها أثرًا.
نقاط متصلة:شريط التنقل العلوي: مطابقة الشكل والحواف واللون والمسافات ·القائمة: الحالات السياقية (Selected) ·اتساق مسار التصفح مع خريطة الموقع
استجابة شريط التنقل لجميع أحجام الشاشات
مقيس آليًاDGA-029-dتشترط هذه النقطة استجابة شريط التنقل لكل أحجام الشاشات والأجهزة مع بقاء قابليته للاستخدام وسهولة التنقل به. فالشريط الذي يعمل على المكتب ويتكسر على الجوال مخالف، وإن ظهرت عناصره كلها.
تقيس الأداة هذه النقطة آليًا، وترفق القيمة المرصودة والقيمة المتوقعة معًا.
ما الذي يجتازها: شريط ينتقل إلى قائمة مطوية على الجوال، ويبلغ المستخدم وجهاته الرئيسية بخطوة واحدة على كل مقاس.
ما الذي يسقط فيها: شريط يلتف إلى ثلاثة أسطر على مقاس ٣٧٥ بكسل فيأكل نصف الشاشة، أو روابط تُحذف من الجوال بدل أن تُطوى.
كيف تُقاس أو يُتحقق منها: يُلتقط الشريط عند ثلاثة مقاسات ويُقاس ارتفاعه والتفاف عناصره، فالالتفاف قيمة هندسية تُقرأ من الالتقاط.
كيف تُعالَج: اطووا الروابط في قائمة على المقاسات الصغيرة ولا تحذفوها من الصفحة، فالزائر على صفحة داخلية يحتاج رؤية الوجهات الرئيسية.
نقاط متصلة:شريط التنقل العلوي: مطابقة الشكل والحواف واللون والمسافات ·إعادة ترتيب الأعمدة والمكونات حسب مقاس الشاشة ·قابلية الاستخدام الكاملة على الأجهزة المحمولة
أيقونة الرابط الخارجي في تبويبات شريط التنقل
مقيس آليًاDGA-029-eتشترط هذه النقطة وجود أيقونة الرابط الخارجي داخل أي تبويبة أو قائمة فرعية تقود إلى خارج المنصة. وهي النقطة نفسها التي يحكمها معيار الرابط، مطبَّقة على شريط التنقل.
تقيس الأداة هذه النقطة آليًا، وترفق القيمة المرصودة والقيمة المتوقعة معًا.
ما الذي يجتازها: كل وجهة خارجية في الشريط تحمل الأيقونة المعتمدة بجوار نصها.
ما الذي يسقط فيها: تبويبة تقود إلى منصة جهة أخرى بلا أيقونة، فيظن المستخدم أنه ما زال داخل المنصة نفسها.
كيف تُقاس أو يُتحقق منها: يُقارن نطاق كل وجهة بنطاق المنصة، ثم يُفحص وجود الأيقونة. والقاعدة نفسها المنتظرة في معيار الرابط تغطي هذه النقطة.
كيف تُعالَج: أضيفوا الأيقونة في مكوّن عنصر التنقل مشروطة باختلاف النطاق، فتُطبَّق على الشريط والتذييل معًا.
نقاط متصلة:أيقونة الرابط الخارجي (External link) ·شريط التنقل العلوي: مطابقة الشكل والحواف واللون والمسافات ·العناصر الإلزامية في التذييل: التواصل والخصوصية والشعارات
كيف تتحققون منه يدويًا
وهذه خطوات المراجعة الكاملة للمعيار، وبعضها أوسع مما تغطيه القاعدة الآلية اليوم.
- افحصوا كل تبويبة خارجية بحثًا عن أيقونة الرابط الخارجي، وهي النقطة نفسها المتروكة في معيار ١٤
- افتحوا القوائم الفرعية بلوحة المفاتيح
- افحصوا
aria-currentعلى القسم الحالي - اطووا الشريط على الجوال وتحققوا من بلوغ كل المسارات
أخطاء شائعة في هذا المعيار
| الخطأ | لماذا يضر |
|---|---|
| تغيب أيقونة الرابط الخارجي عن التبويبات التي تغادر نطاق الجهة | فينتقل المستخدم دون علم. |
| يختفي التنقل على الجوال دون بديل يصل إليه المستخدم فعليًا | |
يغيب aria-current عن القسم الحالي | فلا يعلم قارئ الشاشة موضع المستخدم. |
| تُفتح القوائم الفرعية بالمرور وحده | فيتعذّر فتحها بلوحة المفاتيح. |
| يتغيّر ترتيب عناصر الشريط بين الصفحات | فيفقد المستخدم مرجعه الثابت. |
| عنصر يطابق الشكل بصريًا دون أي من إشارات مكتبة كود المنصات، وهو مؤشر على بناء يدوي منفصل عن المكتبة | فلا تصل إليه تحديثاتها. |
| غياب مؤشر تركيز مرئي واضح عند التنقل بلوحة المفاتيح | |
| مساحة لمس دون ٤٤ بكسل في العناصر التفاعلية | |
استخدام عنصر غير دلالي مكان العنصر الصحيح، مثل div بدل button |
كيف يُعالَج
- أضيفوا أيقونة الرابط الخارجي آليًا لكل تبويبة تغادر النطاق، وهي النقطة نفسها المتروكة في معيار ١٤.
- فعّلوا فتح القوائم الفرعية بلوحة المفاتيح إلى جانب المؤشر.
- أضيفوا
aria-currentواربطوها بالقسم الحالي. - اختبروا درج الجوال بالاستعمال إلى مسار عميق ثم بالعودة منه.
- ثبّتوا ترتيب الشريط في القالب المشترك.
معايير متصلة
وفي الدليل: هل يشمل كود المنصات تطبيقات الجوال؟ · شريط التنقل أول ما ينكسر على مقاس الجوال
لم تطبّقه أي من ٢٩ منصة حكومية مقيسة
- ٧ منصات
- ١ منصة
- ١ منصة
- ١ منصة
- ١ منصة
والقياس على عيّنة من المنصات المنشورة للعموم بالمنهجية نفسها المنشورة في صفحة المنهجية.
أين تقف منصتكم من هذا المعيار؟
يصدر الفحص تقديرًا استرشاديًا خلال دقائق، ويبيّن لكل ملاحظة قيمتها المرصودة والمتوقعة وموضعها.