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