الفحص الآلي كبداية فقط
axe وLighthouse على عينة من الصفحات لالتقاط التباين والتسميات المفقودة والبنية. حسب W3C لا توجد أداة بمفردها تحدد إن كان الموقع يستوفي المعايير؛ التقييم البشري ضروري.
فحص وتحسين إمكانية الوصول لموقعك وفق معايير WCAG
أفحص تجربة الموقع بالكيبورد وقارئات الشاشة وعلى مختلف أحجام العرض، وأحدد العوائق في النماذج والتنقل والتباين والمكونات التفاعلية، ثم أساعدك على إصلاحها وإعادة اختبارها.
- فحص آلي ويدوي معًا، لأن الأدوات وحدها لا تكفي
- كل مشكلة مرتبطة بمعيار WCAG 2.2 وخطوات إعادة إنتاج
- إصلاح في الكود الأصلي، لا طبقة إضافية فوق الموقع
قبل: تباين غير كافٍ وهدف صغير1.4.3 تباين النص و2.5.8 حجم الهدف
بعد: تباين 4.5:1 على الأقل وهدف 24 بكسل فأكثرنص داكن على خلفية فاتحة أو العكس، وارتفاع لا يقل عن 24 بكسل CSS
قبل: حلقة التركيز محذوفة2.4.7 التركيز مرئي و2.4.11 التركيز غير محجوب
بعد: تركيز واضح لا يختفي خلف عناصر ثابتةحلقة بسماكة وتباين كافيين، والهيدر الثابت لا يغطي العنصر المركز عليه
قبل: حقل بلا تسمية ورسالة خطأ بصرية فقط1.3.1 المعلومات والعلاقات، 3.3.1 تحديد الخطأ، 4.1.3 رسائل الحالة
بعد: تسمية مرتبطة وخطأ يُعلَن لقارئ الشاشةlabel مرتبط بالحقل، وaria-describedby للرسالة، وإعلان عبر منطقة حية
أمثلة توضيحيةأرقام المعايير من WCAG 2.2
لمن هذه الخدمة
مناسبة للمواقع التي يستخدمها جمهور واسع أو تخضع لمتطلبات جهة
الخدمة مناسبة لك إذا
- شركة أو مؤسسة أو جهة خدمات يستخدم موقعها جمهور متنوع، وتريد تقليل العوائق أمام من يستخدم الكيبورد أو قارئ الشاشة أو التكبير.
- متجر يخسر زوارًا لا يستطيعون إتمام النموذج أو القائمة على الجوال بسبب مكونات لا تعمل إلا بالفأرة.
- فريق منتج يحتاج سجل مشكلات مرتبطًا بالمعايير يمكن توزيعه على المطورين بأولويات.
- موقع عربي أو ثنائي اللغة يحتاج اختبار اتجاه RTL والنص المختلط وتسميات قارئ الشاشة بالعربية.
ليست الخطوة الصحيحة الآن إذا
- تريد شهادة امتثال قانوني أو ختم «متوافق 100%»: لا أقدم ذلك؛ التقييم ضمن نطاق الصفحات والمعايير المفحوصة، والامتثال القانوني يحدده مستشارك والجهة المعنية.
- تريد تركيب إضافة Overlay لتظهر أيقونة إمكانية وصول: الطبقات الإضافية لا تُصلح HTML غير دلالي أو مكونات لا تعمل بالكيبورد.
- الموقع قيد إعادة بناء كاملة: الأفضل إدماج المعايير في التصميم الجديد؛ راجع إعادة تصميم WordPress وسأشارك كمراجع.
- تريد تحسين معدل التحويل عمومًا: إمكانية الوصول تساعده، لكن التشخيص الأوسع في تحسين تجربة المستخدم والتحويل.
الأعراض الشائعة
أربع عوائق تتكرر في المواقع العربية، ولا تظهر في الفحص الآلي غالبًا
- 01قوائم لا تُفتح أو تُغلق بالكيبورد
القائمة المنسدلة تعمل بالتمرير بالفأرة فقط، أو تُفتح بـ Tab ولا تُغلق بـ Escape، أو يبقى التركيز محبوسًا داخلها. مستخدم الكيبورد لا يصل إلى نصف الموقع.
أين يظهر: اختبار يدوي بـ Tab وEnter وEscape على القائمة الرئيسية والجوال. - 02نموذج لا يوضح الخطأ لقارئ الشاشة
الحقل يحمرّ ويظهر نص صغير، لكن لا شيء يُعلَن، ولا رابط بين الرسالة والحقل. مستخدم قارئ الشاشة يضغط إرسال مرارًا بلا تفسير.
أين يظهر: تشغيل NVDA أو VoiceOver وإرسال النموذج بحقل فارغ. - 03عناصر بلا تسميات أو بتباين ضعيف
أيقونات بلا اسم، أزرار بنص «اضغط هنا»، نص رمادي فاتح على أبيض، وروابط لا تتميز إلا باللون.
أين يظهر: الفحص الآلي يلتقط معظمها، والمراجعة اليدوية تلتقط التسميات غير المفهومة. - 04حركة لا تحترم تفضيل تقليل الحركة
تمرير سلس إجباري، ظهور تدريجي يخفي المحتوى حتى يكتمل، ونوافذ تتحرك باستمرار. من يفعّل prefers-reduced-motion في جهازه لا يجد فرقًا.
أين يظهر: تفعيل تقليل الحركة في نظام التشغيل وإعادة تحميل الصفحة.
ما الذي أفحصه أولًا
النطاق يُحدَّد قبل الفحص: أي صفحات، أي قوالب، وأي مستوى
لا يُفحص كل الموقع صفحةً صفحة. تُختار الصفحات والقوالب والمكونات التي تمثل كل ما يراه المستخدم، ويُحدَّد المستوى المستهدف (عادةً AA من WCAG 2.2)، ثم يُقاس ما وُجد على هذا النطاق تحديدًا.
الكيبورد وترتيب التركيز
التنقل الكامل بالكيبورد وحده: هل يُرى التركيز؟ هل ترتيبه منطقي في RTL؟ هل يُحجب خلف هيدر ثابت؟ هل تُغلق النوافذ بـ Escape ويعود التركيز إلى مكانه؟
قارئات الشاشة
اختبارات أساسية بـ NVDA على ويندوز وVoiceOver على iOS وmacOS حسب الأجهزة المتاحة: المعالم والعناوين والأسماء المتاحة، وصحة ARIA، وإعلان رسائل الحالة، ونطق النص العربي والمختلط.
العرض والتكبير
إعادة التدفق عند عرض 320 بكسل CSS بلا تمرير أفقي، تكبير 200%، تباعد النص، الاتجاهين الأفقي والرأسي، وأحجام الأهداف (24 بكسل كحد أدنى في المعيار 2.5.8).
نطاق التنفيذ
ما يُفحص ويُصلح في تدقيق إمكانية الوصول، وما يبقى خارجه
- ضمن النطاق يُنفَّذ في كل اتفاق
- اختياري حسب الحاجة والصلاحيات
- خارج النطاق خدمة أخرى أو جهة أخرى
ضمن النطاق
تحديد نطاق الصفحات والقوالب والمكونات الحرجة ومستوى WCAG المستهدف
وثيقة نطاق معتمدة قبل البدء؛ هي حدود أي تقييم لاحق.
ضمن النطاق
فحص آلي بـ axe وLighthouse كمرحلة كشف أولية
النتائج تُراجع يدويًا لاستبعاد الإيجابيات الخاطئة.
ضمن النطاق
التنقل بالكيبورد والتركيز المرئي وترتيبه وعدم حبسه
على كل مكون تفاعلي في النطاق.
ضمن النطاق
المعالم الدلالية والعناوين والأسماء المتاحة وصحة ARIA
بما فيها إزالة ARIA غير الضروري الذي يضر أكثر مما ينفع.
ضمن النطاق
اختبارات قارئ الشاشة الأساسية
NVDA وVoiceOver حسب الأجهزة المتاحة؛ تُوثَّق الأداة والإصدار والمتصفح لكل اختبار.
ضمن النطاق
التباين وإعادة التدفق والاتجاه وتباعد النص وأحجام الأهداف
وفق المعايير 1.4.3 و1.4.10 و1.4.11 و1.4.12 و2.5.8.
ضمن النطاق
النماذج: التسميات والتلميحات والتحقق وإعلان الأخطاء
مع مراعاة المعيار الجديد 3.3.7 بعدم طلب المعلومة نفسها مرتين.
ضمن النطاق
النوافذ والقوائم والأكورديون والعارضات وفق تفاعلات الكيبورد المتوقعة
وإتاحة بديل لأي تفاعل يعتمد على السحب (المعيار 2.5.7).
ضمن النطاق
RTL العربية والنص المختلط وسمات lang
اتجاه المكونات، وسم اللغة على المقاطع اللاتينية، ونطق قارئ الشاشة.
ضمن النطاق
سجل مشكلات: معرّف، المعيار، الخطورة، خطوات إعادة الإنتاج، الإصلاح المقترح
بصيغة يمكن توزيعها على المطورين مباشرة.
اختياري
الإصلاح اليدوي في الكود واختبار الانحدار
على الصفحات الممثلة، عند تضمين التنفيذ في الاتفاق. على WordPress وShopify أُصلح الثيم والمكونات مباشرة.
اختياري
مسودة بيان إمكانية الوصول
فقط إذا وفّر العميل الصياغة القانونية المعتمدة؛ أوفر الجزء التقني منها.
خارج النطاق
الامتثال القانوني العام أو شهادة رسمية
لا يُقدَّم بدون تدقيق قانوني ومتطلبات الجهة المختصة.
خارج النطاق
إضافات Accessibility Overlay
ليست بديلًا عن إصلاح الأصل، ولا تُركَّب كحل.
خارج النطاق
ما هو خارج النطاق المتفق عليه
صفحات أو مكونات لم تُفحص لا يشملها التقييم.
المرجع
ما الذي أضافه WCAG 2.2، ولماذا يهم المواقع العربية تحديدًا
تسعة معايير جديدة أُضيفت في WCAG 2.2، وحُذف معيار واحد (4.1.1 Parsing). معظم الإضافات تمس النماذج والتركيز والأهداف اللمسية، وهي بالضبط ما يتعثر فيه المستخدم على الجوال.
| المعيار | الاسم | المستوى | ما يعنيه عمليًا | أين يظهر غالبًا |
|---|---|---|---|---|
| 2.4.11 | Focus Not Obscured (Minimum) | AA | العنصر المركز عليه لا يُحجب كليًا خلف هيدر ثابت أو شريط ملفات تعريف الارتباط | هيدر ثابت + Tab إلى رابط أسفله مباشرة |
| 2.4.12 | Focus Not Obscured (Enhanced) | AAA | لا يُحجب أي جزء من العنصر المركز عليه | اختياري للمستوى AA |
| 2.4.13 | Focus Appearance | AAA | حلقة التركيز بحجم وتباين محددين | اختياري للمستوى AA |
| 2.5.7 | Dragging Movements | AA | أي وظيفة بالسحب لها بديل بنقرة واحدة | عارضات الصور، شرائح الأسعار، إعادة الترتيب |
| 2.5.8 | Target Size (Minimum) | AA | أهداف النقر 24×24 بكسل CSS على الأقل مع استثناءات محددة | أيقونات الهيدر، أزرار الكمية، روابط الفوتر |
| 3.2.6 | Consistent Help | A | وسائل المساعدة (الدردشة، التواصل) في الموضع نفسه عبر الصفحات | زر WhatsApp يتنقل بين الصفحات |
| 3.3.7 | Redundant Entry | A | لا يُطلب من المستخدم إدخال المعلومة نفسها مرتين في العملية نفسها | عنوان الشحن ثم عنوان الفوترة |
| 3.3.8 | Accessible Authentication (Minimum) | AA | تسجيل الدخول لا يعتمد على اختبار معرفي (حفظ كلمة مرور، حل لغز) بلا بديل | CAPTCHA بلا بديل، منع اللصق في حقل كلمة المرور |
| 3.3.9 | Accessible Authentication (Enhanced) | AAA | بدون استثناءات التعرف على الأشياء أو المحتوى الشخصي | اختياري للمستوى AA |
| 4.1.1 | Parsing | محذوف | لم يعد موجودًا في 2.2؛ من يلتزم بـ 2.0/2.1 قد يظل مطالبًا به | تقارير قديمة لا تزال تذكره |
المصدر: W3C، صفحة «What's New in WCAG 2.2» ووثيقة التوصية WCAG 2.2. تُراجع عند كل تدقيق لأن المواصفة تُحدَّث.
شكل سجل المشكلات الذي يستلمه فريقك
صفوف توضيحية لبنية السجل. كل صف قابل للتوزيع على مطور بلا شرح إضافي، ويحمل حالته بعد إعادة الاختبار.
| المعرّف | المعيار | الخطورة | الموضع | إعادة الإنتاج | الإصلاح المقترح | الحالة |
|---|---|---|---|---|---|---|
| A11Y-001 | 2.1.1 لوحة المفاتيح | حرجة | القائمة الرئيسية، كل الصفحات | Tab إلى «الخدمات»، Enter: لا تُفتح القائمة | زر حقيقي بـ aria-expanded وفتح بـ Enter/Space وإغلاق بـ Escape | أُصلح وأُعيد اختباره |
| A11Y-002 | 3.3.1 تحديد الخطأ | عالية | نموذج التواصل، حقل الجوال | إرسال بحقل فارغ: يحمرّ بلا إعلان | رسالة مرتبطة بـ aria-describedby ومنطقة حية aria-live | أُصلح |
| A11Y-003 | 1.4.3 التباين | متوسطة | نص الفوتر الثانوي | نسبة التباين أقل من 4.5:1 (قياس بأداة) | تغميق اللون إلى قيمة تحقق 4.5:1 على الأقل | أُصلح |
| A11Y-004 | 2.5.8 حجم الهدف | متوسطة | أزرار الكمية في السلة، الجوال | ارتفاع الزر 18 بكسل | رفعه إلى 24 بكسل على الأقل أو ضمان تباعد كافٍ | قيد التنفيذ |
| A11Y-005 | 1.3.1 المعلومات والعلاقات | منخفضة | صفحة المنتج، جدول المقاسات | جدول بلا رؤوس th | إضافة رؤوس الأعمدة وscope | استثناء موثق: يُعاد بناء الصفحة لاحقًا |
المخطط التقني
ثلاث مشكلات كما تبدو قبل الإصلاح وبعده
أمثلة توضيحية مبنية في الصفحة نفسها، لا لقطات من موقع عميل. كل مثال يذكر المعيار الذي يخصه.
قبل: تباين غير كافٍ وهدف صغير1.4.3 تباين النص و2.5.8 حجم الهدف
بعد: تباين 4.5:1 على الأقل وهدف 24 بكسل فأكثرنص داكن على خلفية فاتحة أو العكس، وارتفاع لا يقل عن 24 بكسل CSS
قبل: حلقة التركيز محذوفة2.4.7 التركيز مرئي و2.4.11 التركيز غير محجوب
بعد: تركيز واضح لا يختفي خلف عناصر ثابتةحلقة بسماكة وتباين كافيين، والهيدر الثابت لا يغطي العنصر المركز عليه
قبل: حقل بلا تسمية ورسالة خطأ بصرية فقط1.3.1 المعلومات والعلاقات، 3.3.1 تحديد الخطأ، 4.1.3 رسائل الحالة
بعد: تسمية مرتبطة وخطأ يُعلَن لقارئ الشاشةlabel مرتبط بالحقل، وaria-describedby للرسالة، وإعلان عبر منطقة حية
- 1التباين وحجم الهدف: أداة الفحص تقيس النسبة، لكن قرار اللون النهائي يراعي هوية الموقع؛ أقترح أقرب قيمة تحقق 4.5:1 للنص العادي و3:1 للنص الكبير والعناصر غير النصية. الأهداف اللمسية 24 بكسل على الأقل، أو تباعد يعوّض ذلك.
- 2حلقة التركيز: كثير من القوالب تحذف outline لأغراض جمالية. البديل حلقة بتصميم الموقع لا حذفها، مع التأكد أن الهيدر الثابت لا يغطي العنصر المركز عليه (المعيار 2.4.11 الجديد).
- 3النموذج: تسمية مرئية ومرتبطة برمجيًا، تلميح للصيغة المتوقعة قبل الخطأ، ورسالة خطأ تُقرأ بقارئ الشاشة وتشرح كيف يُصحَّح. التحقق يقبل الصيغ المحلية للهاتف.
عن الفحص الآلي: يلتقط ما يمكن قياسه (تباين، تسميات مفقودة، بنية)، ويفوّت ما يحتاج حكمًا بشريًا: هل التسمية مفهومة؟ هل ترتيب التركيز منطقي؟ هل البديل النصي للصورة مفيد؟ لذلك لا أسلّم تقريرًا من أداة وحدها.
العربية وRTL
ما يختلف في تدقيق موقع عربي عن القوائم الجاهزة
اتجاه التنقل
في RTL يتوقع المستخدم أن ينقل السهم الأيمن إلى العنصر السابق في التبويبات والعارضات. مكونات كثيرة مكتوبة لـ LTR تعكس ذلك، فيصبح التنقل بالكيبورد مربكًا رغم «عمله».
النص المختلط وسمة lang
أسماء المنتجات والأكواد والعلامات بالحروف اللاتينية داخل جمل عربية تحتاج عزلًا اتجاهيًا صحيحًا، ووسم lang على المقاطع حتى ينطقها قارئ الشاشة باللغة الصحيحة بدل أن يقرأ الإنجليزية بنطق عربي.
التسميات العربية
aria-label مترجم آليًا أو متروك بالإنجليزية في موقع عربي شائع جدًا. كل اسم متاح يُراجع بالعربية الواضحة: «فتح القائمة» لا «menu»، و«الصفحة الرئيسية» لا «home».
خطوات التنفيذ
خمس خطوات من تحديد النطاق إلى إعادة الاختبار وتوثيق الاستثناءات
- 01
النطاق ومعايير النجاح
اختيار الصفحات والقوالب والمكونات الممثلة، وتحديد المستوى المستهدف، والأجهزة وقارئات الشاشة التي ستُستخدم.
معيار القبول: وثيقة نطاق معتمدة تذكر بالاسم ما سيُفحص وما لن يُفحص. - 02
الفحص الآلي واليدوي
axe وLighthouse على العينة، ثم الكيبورد وقارئات الشاشة والتكبير وإعادة التدفق على كل صفحة في النطاق.
معيار القبول: سجل مشكلات أولي، لكل مشكلة معيار وموضع وخطوات إعادة إنتاج وأداة الاكتشاف. - 03
الأدلة والأولويات
لقطات أو تسجيلات قصيرة لكل مشكلة، وتصنيف الخطورة بحسب أثرها على إكمال المهمة (الشراء، التواصل) لا بحسب عدد التكرار فقط.
معيار القبول: سجل مرتب بالخطورة والجهد، يمكن توزيعه على المطورين بدون اجتماع. - 04
الإصلاح في الكود
عند تضمينه: إصلاح المكونات والقوالب في الثيم أو الكود الأصلي، لا بطبقة فوقه، مع عدم كسر التصميم أو الوظائف.
معيار القبول: كل إصلاح له commit أو وصف تغيير محدد، ويعمل على المتصفحات والأجهزة المتفق عليها. - 05
إعادة الاختبار والاستثناءات
إعادة نفس الاختبارات على الصفحات المصلحة، وتوثيق ما بقي ولماذا (قيود منصة، مكون طرف ثالث، قرار مؤجل).
معيار القبول: لكل مشكلة في السجل حالة نهائية: أُصلح وأُعيد اختباره، أو استثناء موثق بسببه وخطة معالجته.
التسليمات والحدود
ما تستلمه من تدقيق إمكانية الوصول، وما لا أعد به
ما تستلمه فعليًا
- Accessibility Audit محدد بالنطاق المتفق عليه من القوالب والصفحات، بالأدوات والأجهزة المستخدمة.
- Issue Register بربط كل مشكلة بمعيار WCAG 2.2 وأدلة إعادة الإنتاج.
- Remediation Plan بأولويات حسب الأثر والجهد.
- Evidence of retest وKnown exceptions: ما أُعيد اختباره وما بقي ولماذا.
- مسودة بيان إمكانية الوصول فقط إذا وفّرت الصياغة القانونية المعتمدة من جهتك.
خارج النطاق وحدود صريحة
- لا وعد بالامتثال القانوني العام أو بشهادة رسمية بدون تدقيق قانوني ومتطلبات الجهة المختصة.
- الاختبار الآلي لا يغني عن اليدوي، والعكس؛ التقرير يذكر طريقة اكتشاف كل مشكلة.
- إضافات Overlay ليست بديلًا عن إصلاح الأصل ولا تُركَّب.
- ما خرج عن النطاق المتفق عليه لا يشمله التقييم، ولا يُقال «الموقع متوافق» بل «الصفحات المفحوصة تستوفي المعايير المذكورة باستثناء ما وُثِّق».
- مكونات الطرف الثالث (بوابات الدفع، الدردشة) قد لا يمكن إصلاحها إلا من مزودها؛ تُوثَّق كاستثناء مع البديل.
أسئلة شائعة
أسئلة عن الأدوات والشهادات والمواقع العربية
هل اختبار Lighthouse كافٍ؟
لا. Lighthouse وaxe يكتشفان جزءًا من المشكلات القابلة للقياس آليًا، ولا يحكمان على وضوح التسميات أو منطق ترتيب التركيز أو جودة البدائل النصية. W3C تنص على أن أي أداة بمفردها لا تحدد استيفاء الموقع للمعايير وأن التقييم البشري ضروري. الفحص الآلي عندي خطوة أولى تُتبع بالكيبورد وقارئات الشاشة.
هل يصبح الموقع متوافقًا 100% تلقائيًا؟
لا، ولا يصح قول ذلك عن أي موقع. التقييم يكون ضمن نطاق الصفحات والمعايير المفحوصة، ويُسجَّل ما بقي كاستثناء موثق. الصياغة الصادقة: الصفحات المفحوصة تستوفي معايير المستوى المستهدف باستثناء ما وُثِّق، ولا يوجد ضمان عام خارج النطاق.
هل إضافة Accessibility Widget تحل المشكلة؟
لا تغني عن إصلاح المكونات الأساسية. الطبقة الإضافية لا تجعل قائمة تعمل بالكيبورد، ولا تربط تسمية بحقل، ولا تصلح ترتيب العناوين. قد تضيف خيارات عرض لبعض المستخدمين، لكنها ليست بديلًا عن HTML دلالي وتفاعل صحيح، وأحيانًا تتعارض مع أدوات المستخدم نفسه.
هل تعمل على مواقع عربية؟
نعم، وهذا جزء أساسي من الخدمة: اختبار اتجاه RTL في المكونات التفاعلية، النص المختلط وسمات lang، اتجاه التنقل بالأسهم، والأسماء المتاحة بالعربية الواضحة. المواقع ثنائية اللغة تُفحص في الاتجاهين.
ماذا عن Shopify وWordPress؟
في WordPress أُصلح الثيم والمكونات مباشرة. في Shopify أُصلح الثيم وأقسامه، أما صفحات الدفع فتخضع لقيود المنصة ويُوثَّق ما لا يمكن تغييره كاستثناء. مكونات الطرف الثالث (تطبيقات الدردشة والتقييمات) تُبلَّغ لمزودها ويُقترح بديل عند الحاجة.
ما المدة والتكلفة؟
تعتمد على عدد القوالب والمكونات في النطاق والمستوى المستهدف وما إذا كان التنفيذ مشمولًا. يُقدَّم عرض بعد جولة أولية على الموقع لتقدير حجم النطاق؛ لا أذكر رقمًا قبل ذلك.
أرسل رابط موقعك وسأرد بثلاث ملاحظات من اختبار الكيبورد وقارئ الشاشة
جولة أولية بلا صلاحيات ولا التزام: ما يظهر من القائمة والنموذج والتباين خلال دقائق. ثم نحدد النطاق والمستوى إن أردت تدقيقًا كاملًا.