تستهدف SDAIA UI المستوى AA من معايير WCAG 2.1. تتولّى المكوّنات الأجزاء الصعبة (الأدوار، ودعم لوحة المفاتيح، والتركيز، والتسميات)، لكن الصفحة لا تكون قابلة للوصول إلا إذا كان محتواها وطريقة تركيب المكوّنات فيها قابلين للوصول أيضًا. تعرض هذه الصفحة ما تقدّمه المكوّنات وما يقع على عاتقك.
ما تقدّمه المكوّنات
| المكوّن | السلوك المدمج |
|---|---|
| إدخال النص، منطقة النص | التسمية مرتبطة بالحقل، والنص المساعد ورسالة الخطأ مرتبطان عبر aria-describedby. الخطأ يضبط aria-invalid ويُعلَن لقارئ الشاشة. نجمة الحقل المطلوب مخفية عن قارئ الشاشة، والحقل نفسه معلَّم بأنه مطلوب. |
| القائمة المنسدلة للاختيار | نمط combobox مع listbox وفق WAI-ARIA. تتنقّل الأسهم وHome وEnd وPage Up وPage Down بين الخيارات، ويختار Enter والمسافة، ويغلق Escape، والكتابة تنقل إلى الخيار المطابق. في الاختيار المتعدد لكل شريحة زر إزالة له اسم. |
| النافذة المنبثقة | role="dialog" مع aria-modal، واسمها عنوانها. ينتقل التركيز إلى داخلها ويبقى Tab داخلها، ويغلقها Escape ويعود التركيز إلى الزر الذي فتحها. لا تتمرّر الصفحة خلفها. |
| منتقي التاريخ | الشهر شبكة (grid). تنتقل الأسهم بين الأيام والأسابيع، وHome وEnd إلى بداية الأسبوع ونهايته، وPage Up وPage Down بين الأشهر (ومع Shift بين السنوات). اليوم الحالي معلَّم بـ aria-current، وتغيير الشهر يُعلَن. |
| مربع الاختيار، زر الاختيار، المفتاح | عناصر إدخال أصلية، فتعمل مع لوحة المفاتيح والنماذج. يستخدم المفتاح role="switch"، ويحقّق مساره تباين 3:1 في وضع الإيقاف. |
| شريط التقدّم، دائرة التقدّم، رفع الملف | role="progressbar" مع القيمة الحالية. يسمّي مكوّن رفع الملف كل شريط تقدّم باسم الملف وحالته. |
| الشريحة، أيقونة المساعدة | لا عناصر تفاعلية متداخلة. لزر المساعدة اسم (الافتراضي "Help") ويُغلق تلميحه بـ Escape. |
| DgaIcon | مخفية عن قارئ الشاشة ما لم تعطها عنوانًا. |
تُفحص هذه السلوكيات آليًا: يُفحص كل عرض توضيحي للمكوّنات بأداة axe في السمتين الفاتحة والداكنة وفي اتجاه RTL، وتغطي اختبارات لوحة المفاتيح القائمة المنسدلة والنافذة المنبثقة ومنتقي التاريخ وحقول النص.
ما يبقى عليك
- أعطِ كل حقل تسمية ظاهرة (
label). النص التوضيحي داخل الحقل ليس تسمية. - أعطِ الأزرار التي تحتوي أيقونة فقط
aria-label، فمكوّن الزر لا يضيفه تلقائيًا. - سمِّ شريط التقدّم ودائرة التقدّم بـ
aria-labelأوaria-labelledbyحين لا توجد تسمية ظاهرة بجانبهما. - أعطِ كل نافذة منبثقة عنوانًا (
title) ولو قصيرًا، ليكون للنافذة اسم. - استخدم عنوان
h1واحدًا في الصفحة، وحافظ على تسلسل مستويات العناوين. - اكتب نصوص روابط وأزرار ذات معنى، ونصًا بديلًا للصور (راجع صفحة كتابة المحتوى).
- مرّر الخاصية
labelsلترجمة الأسماء المدمجة للأزرار والمناطق. كثير من المكوّنات تملك هذه الخاصية (مثل القائمة المنسدلة ومنتقي التاريخ ورفع الملف والجدول ومشغّلات الوسائط والرسوم البيانية)، وبدونها تبقى هذه الأسماء بالإنجليزية.
<TextInput dir="rtl" label="رقم الهوية الوطنية" helperText="10 أرقام، يبدأ بالرقم 1 أو 2" error={idError} required labels={{ clear: 'مسح' }} // localized names for built-in buttons />
تباين الألوان
| المحتوى | الحد الأدنى للتباين |
|---|---|
| النص الأساسي والتسميات | 4.5:1 |
| النص الكبير (24px، أو 18.66px بخط عريض، فأكبر) | 3:1 |
| الأيقونات وحدود الحقول وحلقات التركيز وسائر عناصر الواجهة التي يلزم رؤيتها | 3:1 |
| العناصر المعطَّلة والزخرفية | لا حد أدنى، لكن لا تُخفِ فيها معلومات |
- استخدم رموز الألوان الدلالية (
text-*وbg-*وborder-*)، فهي مضبوطة لتحقيق هذه النسب في السمتين الفاتحة والداكنة وفي كل الهويات. - لا تعتمد على اللون وحده لإظهار الحالة. للخطأ أيقونة ورسالة أيضًا، وللعنصر المحدَّد علامة أو تغيّر في سماكة الخط.
- إن غيّرت لون الهوية، فافحص التباين من جديد في السمتين.
لوحة المفاتيح
- كل ما يمكن فعله بالفأرة يجب أن يعمل بلوحة المفاتيح: Tab وShift+Tab للتنقّل، وEnter أو المسافة للتفعيل، وEscape للإغلاق.
- اجعل ترتيب العناصر في DOM مطابقًا للترتيب المرئي، ليتبع Tab ترتيب القراءة في الاتجاهين.
- لا تستخدم قيمة موجبة لـ
tabIndex، واستخدمtabIndex={0}فقط في عناصر التحكم المخصّصة التي تحتاجه. - داخل المكوّنات المركّبة (القائمة المنسدلة، منتقي التاريخ، التبويبات، مجموعات أزرار الاختيار) تتنقّل الأسهم داخل المكوّن ويخرج Tab منه.
- في الواجهات من اليمين إلى اليسار، يتبع السهمان الأيمن والأيسر اتجاه القراءة.
التركيز
- تُظهر المكوّنات حلقة تركيز بعرض 2px بلون حدود الهوية، مع إزاحة عن العنصر، عند التركيز عبر لوحة المفاتيح فقط (
focus-visible). - لا تُزِل حلقة التركيز أبدًا دون بديل ظاهر.
- بعد كل إجراء انقل التركيز إلى مكان منطقي: إلى داخل النافذة التي تُفتح، وإلى الزر الذي فتحها عند إغلاقها، وإلى أول خطأ بعد فشل الإرسال.
قارئ الشاشة
- ابدأ بالعناصر الأصلية:
buttonللإجراءات، وaللتنقّل، وinputللبيانات. - رسائل الخطأ تُعلَن عند ظهورها، فلا تُضِف منطقة إعلان أخرى للرسالة نفسها.
- أخفِ الصور والأيقونات الزخرفية فقط، وسمِّ كل ما عداها.
- اضبط لغة الصفحة ليستخدم قارئ الشاشة الصوت الصحيح:
lang="ar"للصفحات العربية وlang="en"للإنجليزية. - اختبر بقارئ شاشة واحد على الأقل: VoiceOver (macOS وiOS) أو NVDA (Windows) أو TalkBack (Android).
الحركة
تحترم المكوّنات المتحرّكة إعداد "تقليل الحركة" في نظام التشغيل (prefers-reduced-motion)، فتُزال الحركات والانتقالات أو تُختصر. التزم بذلك في شيفرتك أيضًا:
- ضع حركاتك داخل
motion-safe:أو أزِلها بـmotion-reduce:. - لا تشغّل تلقائيًا أي محتوى متحرّك لأكثر من 5 ثوانٍ دون زر إيقاف مؤقت.
- لا تجعل المحتوى يومض أكثر من ثلاث مرات في الثانية.
السمات والاتجاه
يجب أن تبقى إمكانية الوصول متحقّقة في كل مزيج من السمة والاتجاه. بدّلهما على العنصر <html>:
<!-- السمة الداكنة: أضف theme-dark إلى <html> --> <html lang="en" class="theme-dark"> <!-- العربية: اضبط dir وlang معًا على <html> --> <html lang="ar" dir="rtl">
- السمة الداكنة: أضف الصنف
theme-darkإلى<html>، فتتبدّل كل المكوّنات ورموز الألوان الدلالية. - العربية: اضبط
dir="rtl"وlang="ar"على<html>، واضبطهما معًا. تعكسdirالتخطيط، وتعطيlangقارئَ الشاشة الصوت العربي وتتيح لأنماط CSS تطبيق قواعد العربية. - راجع صفحة RTL للاطّلاع على قواعد الواجهات من اليمين إلى اليسار كاملة.
التكبير وحجم الشاشة
- يجب أن تعمل الصفحات عند تكبير المتصفح إلى 200% وفي عرض 320px (معيار إعادة التدفق في WCAG) دون فقدان محتوى أو حاجة إلى التمرير في اتجاهين.
- اجعل مساحات اللمس 24 × 24px على الأقل، و44 × 44px للإجراءات الرئيسية على الهاتف.
- راجع صفحة السلوك المتجاوب لمعرفة نقاط التوقف المعتمدة.
قائمة الاختبار
تنقّل في الصفحة بـ Tab: كل عنصر تحكّم يمكن الوصول إليه بالترتيب ومع حلقة تركيز ظاهرة.
لكل حقل وزر وعنصر تحكّم بأيقونة فقط اسم.
رسائل الخطأ تُعلَن ومرتبطة بحقولها.
لا تُظهر أداة axe (أو Lighthouse) أي مخالفات.
تباين النص وعناصر الواجهة مقبول في السمتين الفاتحة والداكنة.
الصفحة تعمل بالعربية مع dir="rtl" وlang="ar".
الصفحة تعمل عند التكبير 200% ومع تفعيل تقليل الحركة.
تمت المراجعة بقارئ شاشة.
وجدت مشكلة في إمكانية الوصول داخل أحد المكوّنات؟ أبلغ عنها مع اسم المكوّن والمتصفح والتقنية المساعدة وخطوات إعادة إنتاج المشكلة.