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