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

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

يجب أن يكون مربع الحوار مميزًا بصريًا عن الخلفية لمساعدة المستخدمين على فهم تغيير السياق.

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

• نسبة التباين بين النص والخلفية ≥ 4.5:1 (للنص العادي) أو ≥ 3:1 (للنص الكبير)
• يجب أن يحتوي مربع الحوار على حد واضح أو ظل لفصله عن الخلفية المظللة، ويجب أن تلبي جميع النصوص نسبة التباين 4.5:1.
• يجب أن تلتزم مؤشرات التركيز (مثل outline أو underline أو تغيير الخلفية) بنسبة تباين لا تقل عن 3:1
• استخدم حدًا مرئيًا للإشارة إلى علامات التبويب النشطة/المحددة، فهذا يوفر إشارة غير لونية (شكل/اتصال) لتوضيح أي تبويب نشط
• مظهر التركيز (Focus Appearance) (WCAG 2.4.13): تأكد من أن جميع العناصر التفاعلية تمتلك مؤشر تركيز مرئي، مثل قاعدة [role="tab"]:focus-visible. يستخدم ذلك محيطًا عالي التباين بعرض 4px وoutline-offset لتوضيح موضع التركيز لمستخدمي لوحة المفاتيح.
• تأكد من تمييز مربع الحوار بصريًا عن الخلفية لمساعدة المستخدمين على فهم تغيير السياق.

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

• تأكد من أن زر "إغلاق" وأي أزرار إجراءات لا يقل حجمها عن 24px × 24px (ويفضل 44px على الجوال) لاستيعاب المستخدمين ذوي المهارة الحركية المحدودة.

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

يُعد التفاعل عبر لوحة المفاتيح الجزء الأهم في إمكانية وصول المودال. يجب ألا يتمكن المستخدم من "الخروج" عبر Tab إلى محتوى الخلفية أثناء فتح المودال.

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

• Tab / Shift + Tab: ينقل التركيز إلى العنصر التفاعلي التالي/السابق داخل المودال.
• Escape: يغلق المودال ويعيد التركيز إلى الزر الذي فتحه.
• Enter / Space: يُفعّل الأزرار داخل المودال.

مبدأ المفاتيح (Key Principles)

• حصر التركيز (Focus Trapping): كما يظهر في جافاسكريبت أعلاه، نقوم "بحصر" مفتاح Tab بحيث إذا قام المستخدم بالضغط بعد زر "حفظ التغييرات"، يعود التركيز إلى زر "إغلاق".
• استعادة التركيز (Focus Restoration): عند إغلاق المودال، يجب إعادة التركيز إلى الزر الذي فتحه. إذا فُقد التركيز، قد يضطر مستخدمو قارئ الشاشة إلى بدء التنقل من أعلى الصفحة مرة أخرى.

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

تسمح عناصر HTML الدلالية وسمات ARIA للتقنيات المساعدة بوصف غرض المودال وحالته.

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

• role="dialog": يخبر قارئ الشاشة أن المستخدم داخل نافذة حوار، مما يغير طريقة تعامل قارئ الشاشة مع التنقل.
• aria-modal="true": يخبر المتصفح أن المحتوى خارج هذا العنصر غير تفاعلي (inert).
• aria-labelledby="ID": يشير إلى عنوان المودال (مثل <h2>). هذا أول ما يعلنه قارئ الشاشة عند فتح المودال (مثلاً: "إعدادات الحساب، مربع حوار").
• aria-describedby="ID": يشير إلى نص الوصف الرئيسي للمودال، ويوفر سياقًا فوريًا لسبب ظهور المودال.
• aria-label: على زر الإغلاق: بما أن "×" مجرد رمز، فإن aria-label="إغلاق مربع الحوار" يوفر اسمًا واضحًا للإجراء.