دليل بناء عنصر Carousel قابل للوصول (WCAG 2.2)

1. التصميم والأدراك البصري (Perceivable)

يجب أن يكون Carousel واضح التمييز، وأن تكون عناصر التحكم سهلة الرؤية والاستخدام حتى للمستخدمين ذوي ضعف البصر.

تباين الألوان (WCAG 1.4.3)

• تأكد من أن أي captions أو نصوص overlay تحقق نسبة تباين ≥ 4.5:1.
• يجب أن تتمتع أزرار "Next" و"Previous" و"Pause" بتباين واضح مع الخلفية (أو الصورة خلفها) بنسبة لا تقل عن 3:1.
• يجب أن تكون أيقونات الأسهم وأيقونات Pause واضحة الرؤية بشكل كامل.

مؤشر التركيز Focus (WCAG 2.4.13)

• تأكد من أن جميع العناصر التفاعلية (الأسهم، مشغلات الشرائح، زر pause) تحتوي على مؤشر focus واضح بدرجة عالية.

أهداف اللمس(WCAG 2.5.5)

• تأكد من أن أسهم "Next/Previous" ومشغلات "Enlarge" لا يقل حجمها عن 44px x 44px على الأجهزة المحمولة. فازدحام الأسهم قد يؤدي إلى نقرات غير مقصودة على الشريحة الخاطئة.

2. قابلية الاستخدام عبر لوحة المفاتيح (Operable)

يُعد التفاعل عبر لوحة المفاتيح أمرًا أساسيًا للمستخدمين الذين لا يستطيعون استخدام الفأرة. يجب أن يمتلك المستخدم تحكمًا كاملاً في دوران الشرائح والقدرة على الدخول والخروج من وضع "Enlarged" دون فقدان موقعه.

نمط التفاعل القياسي

• Tab / Shift + Tab: ينقل focus بين عناصر التحكم (Previous, leftarrow, Pause, rightarrow, Next) ثم إلى الشرائح الظاهرة.
• Escape: عند تكبير الصورة (Modal view)، يقوم هذا المفتاح بإغلاق العرض.
• Enter / Space: يفعّل أزرار "Next/Previous"، ويبدّل "Play/Pause"، ويشغّل زر "Enlarge" داخل الشريحة.

Key Principles

• Pause Mechanism (WCAG 2.2.2): قد تكون الحركة التلقائية (autoplay) مشتتة أو تسبب صعوبة في القراءة، لذلك يجب أن يتمكن المستخدم من إيقاف Carousel مؤقتًا.
• Trapping: عند تكبير الصورة، يتم حصر focus داخل modal (بالتنقل بين "Close" وحاوية الصورة).
• Restoration: من الضروري أنه عند إغلاق الصورة المكبرة، يعود focus إلى الصورة المصغرة المحددة التي قام المستخدم بالنقر عليها.

3. قارئات الشاشة والتقنيات المساعدة (Understandable & Robust)

تساعد Semantic HTML وخصائص ARIA في تحويل مفهوم "slide" البصري إلى تجربة يمكن للمستخدم الكفيف فهمها.

ARIA Roles, Properties, and States

• role="region" & aria-roledescription="carousel": يعرّف الحاوية كعنصر carousel بدلاً من قائمة عامة.
• aria-label: يحدد اسم carousel (مثل "Photo Gallery") حتى يعرف المستخدم نوع المحتوى الذي يتم تدويره.
• aria-live="polite": يُستخدم على عنصر حالة مخفي بصريًا للإعلان عن تحديثات الشرائح (مثل "Showing slide 2 of 4") بعد توقف المستخدم عن التفاعل، مما يمنع الإعلانات الصوتية المزعجة.
• aria-live="off": يجب ضبط مسار الصور المتحركة الفعلي على "off" حتى لا يحاول قارئ الشاشة قراءة HTML في كل مرة يتغير فيها DOM أثناء الحركة.
• role="group" & aria-roledescription="slide": يتم تطبيقها على كل عنصر فردي
• . هذا يُخبر قارئ الشاشة: "هذا عنصر ضمن مجموعة"، مما يسمح له بالإعلان مثل "Slide 1 of 4."
• aria-label: يجب أن تحتوي الأزرار التي تتضمن أيقونات (مثل الأسهم أو pause) على تسميات نصية مثل aria-label="Next Slide" أو aria-label="Pause Automatic Slide Show".