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