دليل بناء قائمة موقع إلكتروني قابلة للوصول (WCAG 2.2)

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

قبل كتابة أي كود، يجب أن يكون التصميم البصري واضحًا وسهل الاستخدام للجميع.

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

• نسبة التباين بين النص والخلفية ≥ 4.5:1 (للنص العادي) أو ≥ 3:1 (للنص الكبير)
• يجب أن تحقق مؤشرات التركيز (مثل outline أو underline أو تغيير الخلفية) نسبة تباين لا تقل عن 3:1
• لا تعتمد على اللون فقط — استخدم أيقونات أو خطًا سفليًا أو خطًا عريضًا للحالة النشطة/المحددة

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

• يجب أن تكون العناصر التفاعلية (عناصر القائمة، أيقونة الهامبرغر) بمساحة لمس لا تقل عن 24px × 24px في نسخة الجوال

السلوك المتجاوب (WCAG 1.4.10)

• سطح المكتب: شريط قائمة أفقي مع قوائم منسدلة
• الجوال: قائمة هامبرغر قابلة للطي
• يجب أن تعيد القوائم ترتيب نفسها بشكل صحيح عند التكبير حتى 400%

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

يجب أن تكون جميع وظائف القائمة قابلة للتشغيل باستخدام لوحة المفاتيح فقط. يجب أن يكون المستخدم قادرًا على تنفيذ كل إجراء يمكن لمستخدم الفأرة القيام به، مع الحفاظ على جميع ميزات الوصول.

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

• Tab / Shift + Tab: التنقل بين عناصر القائمة الرئيسية والدخول إلى الروابط الفرعية
• Enter أو Space: فتح القائمة الفرعية أو تفعيل الرابط
• أسهم الاتجاهات (أعلى، أسفل، يمين، يسار): التنقل بين العناصر، وهذا من أفضل الممارسات للقوائم المعقدة
• Escape: إغلاق القائمة الفرعية المفتوحة وإرجاع التركيز إلى الزر الذي فتحها

المبادئ الأساسية

• عدم وجود فخاخ لوحة المفاتيح (WCAG 2.1.2): يجب أن يكون المستخدم قادرًا على الدخول والخروج من القائمة باستخدام لوحة المفاتيح فقط دون أن "يعلق". الاستثناء الوحيد هو في الحوارات المنبثقة (مثل قائمة الجوال الكاملة)، حيث يجب حصر التركيز حتى يغلق المستخدم الحوار.
• ترتيب تركيز منطقي (WCAG 2.4.3): يجب أن ينتقل التركيز بين عناصر القائمة بترتيب منطقي ومتوقع.

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

تعد خصائص HTML وARIA الصحيحة ضرورية لمستخدمي قارئ الشاشة لفهم بنية القائمة وحالتها. جميع ألوان القائمة، مؤشرات التركيز، وميزات الوصول الأخرى محفوظة كما هي.

HTML الدلالي

• <nav>: يعرّف الحاوية ككتلة تنقل رئيسية.
• <ul>: قائمة غير مرتبة لتجميع عناصر القائمة
• <li>: عنصر قائمة لكل رابط قائمة فردي

أدوار ARIA وخصائصها وحالاتها

• role="menubar": حاوية القائمة
• role="menuitem": كل عنصر قابل للتنفيذ
• role="menu": حاوية القائمة الفرعية
• role="navigation": تحديد منطقة القائمة
• aria-hidden="true": لإخفاء المحتوى عن قارئ الشاشة والتقنيات المساعدة
• aria-haspopup="true": توضع على عنصر <button> الذي يتحكم في قائمة منسدلة، وتخبر قارئات الشاشة بأن "هذا الزر يفتح قائمة."
• aria-expanded="true/false": توضع أيضًا على عنصر <button>، وتوضح حالة القائمة الفرعية — false عند الإغلاق و true عند الفتح. يتطلب JavaScript لتبديل هذه القيمة.
• aria-controls="ID_of_submenu": توضع على عنصر <button> لربط الزر برمجيًا بالقائمة الفرعية <ul> التي يتحكم بها، مما يساعد التقنيات المساعدة على فهم العلاقة.
• aria-label="Mobile Menu": توضع على زر hamburger. وبما أن الزر غالبًا لا يحتوي على نص مرئي، فإنها توفّر اسمه القابل للوصول