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