تتحرك علامة الزائد وتظهر الإجابة، لكن مستخدم لوحة المفاتيح لا يستطيع تشغيل عنوان Accordion، أو يسمع قارئ الشاشة أنه مغلق بينما محتواه ظاهر. هذه ليست مشكلة حركة فقط؛ العنوان والحالة واللوحة يجب أن يمثلوا مكوّنًا واحدًا مفهومًا.
ابدأ بزر له عنوان واضح
يصف نمط Accordion في دليل W3C APG عنوان اللوحة كزر داخل heading مناسب للبنية. ويشير aria-expanded إلى الفتح أو الإغلاق، بينما يربط aria-controls الزر بمعرف لوحة المحتوى. تغيير شكل الأيقونة وحده لا ينشئ هذه العلاقات.
في مثال افتراضي لأسئلة خدمة الدعم، ينبغي أن يعلن العنوان اسم السؤال وحالته. افحص المعرفات عند تكرار المكوّن في الصفحة حتى لا يتحكم زر في لوحة مكوّن آخر. لا تضع رابطًا تفاعليًا داخل الزر ثم تتوقع أن تكون وجهة التنشيط واضحة.
اختبر الأزرار قبل لمس الشاشة
| الإجراء | النتيجة التي تراجعها |
|---|---|
| الوصول عبر Tab | تركيز مرئي على العنوان الصحيح |
| Enter أو Space | تغيير اللوحة وفق سياسة الفتح المعتمدة |
| Shift مع Tab | عودة مفهومة دون فقد موضع التنقل |
| إغلاق لوحة بها رابط | عدم الوصول إلى رابط غير ظاهر أثناء الإغلاق |
يسمح التصميم أحيانًا بفتح أكثر من لوحة، وأحيانًا يحتفظ بواحدة فقط أو يمنع إغلاق اللوحة الوحيدة المفتوحة. حدد السياسة أولًا، ثم اجعل السلوك والحالة المعلنة متوافقين معها. لا تضع نتيجة اختبار واحدة لكل هذه الاختيارات المختلفة.
راجع الحالة بعد كل انتقال
افتح اللوحة ثم أغلقها ثم افتح لوحة مجاورة. قارن المحتوى المرئي بقيمة aria-expanded ووجهة aria-controls في كل مرة. لا يكفي تقليل الارتفاع أو جعل النص شفافًا إن بقيت الروابط المخفية ضمن مسار التركيز؛ اختبر إمكانية الوصول الفعلية للمحتوى المغلق.
وإذا تغير المحتوى بعد تحقق من نموذج داخل اللوحة، راجع أين يظهر الخطأ وكيف يصل المستخدم إليه. لا تسمح للحركة أن تخفي رسالة مطلوبة أو تنقل التركيز دون سبب مفهوم. استخدم نصوصًا تجريبية بدل بيانات عملاء في التسجيلات.
قارن اللمس والكيبورد والقراءة المساندة
في تصميم تجربة المستخدم اختبر العنوان والمحتوى على الهاتف، ثم راجع التنقل والاسم والحالة بقارئ الشاشة المستهدف. وتحتاج واجهات الويب اختبار النسخة المنشورة لا النموذج البصري فقط. معيار القبول تطابق القرار المرئي والمعلن والقابل للتنفيذ؛ نجاح هذا المكوّن لا يعد شهادة إتاحة لكل الموقع.
