إمكانية الوصول WCAG والاختبار البصري: لماذا لم يعد بإمكان هذين التخصصين تجاهل بعضهما البعض
إمكانية الوصول إلى الويب، وفقًا لـ W3C، تعني «تصميم وتطوير مواقع الويب والأدوات والتقنيات بحيث يتمكن الأشخاص ذوو الإعاقة من استخدامها» (المصدر: W3C، مبادرة إمكانية الوصول إلى الويب). مهما كان اتساع هذا التعريف، فإنه يعتمد بشكل كبير على المعايير البصرية. تباين الألوان، حجم النص، وضوح تركيز لوحة المفاتيح، المسافات بين العناصر: كل هذه الجوانب هي في الوقت نفسه متطلبات لإمكانية الوصول وخصائص قابلة للقياس بصريًا.
ومع ذلك، تعامل معظم الفرق إمكانية الوصول والاختبار البصري كممارستين منفصلتين، يديرهما أشخاص مختلفون، بأدوات مختلفة، في مراحل مختلفة من دورة التطوير.
هذا خطأ استراتيجي. إمكانية الوصول البصرية قابلة للاختبار تلقائيًا، والاختبار البصري هو الأداة الأكثر طبيعية لمراقبتها بشكل مستمر.
جدول المحتويات
- ما الذي تتطلبه WCAG بصريًا
- لماذا أدوات إمكانية الوصول التقليدية غير كافية
- الاختبار البصري كشبكة أمان لإمكانية الوصول
- معايير WCAG التي يكتشفها الاختبار البصري بشكل أصلي
- كيفية إعداد مراقبة بصرية لإمكانية الوصول
- الأسئلة الشائعة
ما الذي تتطلبه WCAG بصريًا
تحتوي WCAG (إرشادات إمكانية الوصول إلى محتوى الويب) في نسختها 2.2 على 86 معيار نجاح موزعة على ثلاثة مستويات امتثال: A وAA وAAA. من بين هذه المعايير، تتعلق نسبة كبيرة مباشرة بالمظهر البصري للواجهات.
لنستعرض أهمها.
تباين الألوان (المعيار 1.4.3 للمستوى AA، 1.4.6 لـ AAA) يفرض نسبة تباين لا تقل عن 4.5:1 للنص العادي و3:1 للنص كبير الحجم. هذا المعيار بصري بحت: يتم التحقق منه بمقارنة ألوان النص وخلفيته.
حجم النص (المعيار 1.4.4) يتطلب أن يكون المحتوى قابلاً للتكبير حتى 200% دون فقدان المعلومات أو الوظائف. هذا يعني أنه عند تكبير 200%، يجب ألا يتجاوز النص حدود حاوياته، ويجب ألا تتداخل العناصر، ويجب أن تبقى المعلومات مقروءة. كل ذلك قابل للتحقق بصريًا.
مؤشر التركيز (المعيار 2.4.7 لـ AA، المعزز بـ 2.4.11 و2.4.12 في WCAG 2.2) يتطلب أن يعرض كل عنصر تفاعلي مؤشرًا مرئيًا عند تلقيه تركيز لوحة المفاتيح. يجب أن يكون لهذا المؤشر تباين كافٍ ومساحة سطحية دنيا. مرة أخرى، هذا معيار بصري.
تباعد النص (المعيار 1.4.12) يتطلب أن يظل المحتوى وظيفيًا عندما يعدّل المستخدم ارتفاع السطر إلى 1.5 ضعف حجم الخط، وتباعد الفقرات إلى ضعفين، وتباعد الحروف إلى 0.12 ضعف، وتباعد الكلمات إلى 0.16 ضعف. إذا أدت هذه التعديلات إلى كسر التخطيط، فهذا انتهاك لإمكانية الوصول قابل للكشف بصريًا.
إعادة تدفق المحتوى (المعيار 1.4.10، المعروف أيضًا بـ "reflow") يفرض عرض المحتوى دون تمرير أفقي عند عرض 320 بكسل CSS. هذا بالضبط ما يتحقق منه الاختبار المتجاوب.
الخلاصة واضحة: جزء كبير من الامتثال لـ WCAG يعتمد على خصائص بصرية قابلة للقياس.
لماذا أدوات إمكانية الوصول التقليدية غير كافية
أدوات تدقيق إمكانية الوصول مثل axe-core أو Lighthouse لا غنى عنها. فهي تحلل DOM، وتتحقق من سمات ARIA، وتكتشف العلامات المفقودة، وتشير إلى الانتهاكات الهيكلية. لا أحد يشكك في ذلك.
لكن هذه الأدوات لديها قيد جوهري: إنها تحلل الكود، لا العرض المرئي. تتحقق مما يصرّح به HTML وCSS، لا مما يراه المستخدم فعلاً.
مثال ملموس. تخيل زرًا بنص أبيض على خلفية زرقاء، بنسبة تباين مطابقة قدرها 5.2:1. أثناء تحديث CSS، يغير المطور لون خلفية الزر ليصبح أفتح دون لمس النص. تنخفض النسبة إلى 2.8:1. يمكن لـ axe-core اكتشاف ذلك في بعض الحالات، ولكن فقط إذا تم تفسير ورقة الأنماط بشكل صحيح بواسطة محرك التحليل. أما الاختبار البصري فيلتقط هذا التراجع فورًا، لأنه يقارن العرض الفعلي للزر قبل التعديل وبعده.
حالة شائعة أخرى: مؤشر التركيز محدد في CSS، لكن تحديث الإطار يحذف أو يتجاوز نمط outline. وظيفيًا، يظل الزر قابلاً للنقر. هيكليًا، HTML سليم. لكن بصريًا، اختفى التركيز. لا توجد أداة تحليل DOM تشير إلى هذه المشكلة بشكل موثوق. الاختبار البصري يكتشف فرق العرض.
هذه الأدوات أيضًا لا تكتشف المشاكل المتعلقة بالتكبير. عندما يكبّر المستخدم النص إلى 200%، فإن التجاوزات والتداخلات والنصوص المقطوعة هي مشاكل بصرية بحتة. لا تظهر في التحليل الثابت للكود.
أدوات إمكانية الوصول التقليدية ضرورية لكنها غير كافية. تغطي المعايير الهيكلية (البدائل النصية، هيكل العناوين، أدوار ARIA)، لكنها تترك نقطة عمياء في كل ما يتعلق بالعرض البصري.
الاختبار البصري كشبكة أمان لإمكانية الوصول
يتمثل الاختبار البصري الآلي في التقاط لقطات شاشة لصفحاتك ومكوناتك، ثم مقارنتها بمرجع (baseline) لاكتشاف أي تغيير بصري غير مقصود. عند تطبيقه على إمكانية الوصول، يصبح هذا الآلية شبكة أمان هائلة.
إليك السبب.
يكتشف التراجعات، وليس الانتهاكات فقط. يخبرك تدقيق إمكانية الوصول ما إذا كان موقعك متوافقًا في لحظة معينة. الاختبار البصري ينبهك بمجرد أن يُضعف تغيير في الكود إمكانية الوصول البصرية. إنه الفرق بين التشخيص ونظام الإنذار.
يعمل على العرض الفعلي. يلتقط الاختبار البصري ما يعرضه المتصفح فعلاً، بعد تطبيق جميع أوراق الأنماط وسكريبتات JavaScript وحسابات التخطيط. لا يفسّر CSS — بل يلاحظ النتيجة.
يغطي حالات المتصفحات المتعددة والدقات المتعددة. تختلف مشاكل إمكانية الوصول البصرية باختلاف المتصفحات وأحجام الشاشة. قد لا يكون التباين المتوافق في Chrome متوافقًا في Safari إذا تم عرض الخطوط بشكل مختلف. الاختبار البصري عبر المتصفحات يلتقط هذه الاختلافات.
يتكامل مع CI/CD. من خلال تشغيل الاختبارات البصرية مع كل pull request، تكتشف تراجعات إمكانية الوصول قبل وصولها إلى الإنتاج. هذه وقاية، وليست تصحيحًا.
لا يتطلب خبرة في إمكانية الوصول للإعداد. يمكن لأي عضو في الفريق إعداد اختبار بصري يلتقط الصفحات بمستويات تكبير مختلفة أو بأنماط تركيز مفروضة. المقارنة تلقائية.
معايير WCAG التي يكتشفها الاختبار البصري بشكل أصلي
لنستعرض معيارًا بمعيار الجوانب WCAG التي يغطيها الاختبار البصري بفعالية.
المعياران 1.4.3 و1.4.6 — التباين. من خلال الجمع بين الاختبار البصري ومرشحات محاكاة عمى الألوان أو استخراج الألوان من لقطات الشاشة، يمكنك التحقق من بقاء التباين متوافقًا بعد كل تعديل. سيكون أي تغيير في لوحة الألوان يُضعف التباين مرئيًا فورًا في مقارنة لقطات الشاشة.
المعيار 1.4.4 — تغيير حجم النص. التقط صفحاتك بتكبير 200%. أي تراجع (نص مقطوع، عناصر متداخلة، حاويات متجاوزة) سيُكتشف بالمقارنة البصرية.
المعيار 1.4.10 — إعادة التدفق. التقط صفحاتك بعرض 320 بكسل CSS. يتحقق الاختبار البصري المتجاوب من أن المحتوى يتكيف بشكل صحيح دون تمرير أفقي.
المعيار 1.4.12 — تباعد النص. أدخل أنماط التباعد المطلوبة بالمعيار (ارتفاع السطر 1.5، تباعد الفقرات 2x، الحروف 0.12em، الكلمات 0.16em) والتقط النتيجة. قارن مع baseline لاكتشاف العناصر التي تنكسر تحت هذه القيود.
المعايير 2.4.7 و2.4.11 و2.4.12 — التركيز المرئي. افرض تركيز لوحة المفاتيح على كل عنصر تفاعلي والتقط النتيجة. يكتشف الاختبار البصري اختفاء أو تدهور مؤشر التركيز.
المعيار 1.4.11 — تباين العناصر غير النصية. الأيقونات، حدود حقول النماذج، مؤشرات الحالة: يجب أن تتمتع جميع هذه العناصر بنسبة تباين لا تقل عن 3:1. يراقبها الاختبار البصري بشكل طبيعي.
كيفية إعداد مراقبة بصرية لإمكانية الوصول
يعتمد التنفيذ العملي على بضعة مبادئ بسيطة.
أنشئ baseline في ظروف إمكانية الوصول. لا تقتصر على التقاط صفحاتك في حالتها الافتراضية. أنشئ baseline إضافية: بتكبير 200%، بعرض 320 بكسل، مع أنماط تباعد WCAG المُدخلة، ومع التركيز المفروض على العناصر التفاعلية.
ادمج هذه الاختبارات في خط أنابيب CI/CD الخاص بك. يجب أن يؤدي كل pull request إلى تشغيل مقارنة بصرية عبر جميع هذه الظروف. إذا أدى تغيير CSS إلى تدهور إمكانية الوصول البصرية، يمنع الاختبار الدمج.
استخدم عتبات تسامح مناسبة. لاختبارات إمكانية الوصول، قلّل عتبة الفرق المقبول. قد يجعل تغيير 2 بكسل في مؤشر التركيز غير متوافق. يجب أن يكون التسامح أكثر صرامة من الاختبار البصري العام.
وثّق baseline إمكانية الوصول الخاصة بك. يجب ربط كل baseline بمعيار WCAG الذي يتحقق منه. هذا يسهل التدقيق وإمكانية التتبع في حال التفتيش.
ادمج مع أدوات التحليل الثابت. الاختبار البصري لا يحل محل axe-core أو Lighthouse. إنه يكملها. استخدم أدوات التحليل للمعايير الهيكلية (البدائل النصية، هيكل العناوين، ARIA)، والاختبار البصري لمعايير العرض. معًا، يغطيان عمليًا جميع WCAG.
أداة مثل Delta-QA، التي تتيح تكوين اختبارات بصرية دون كتابة كود، تجعل هذا النهج متاحًا للفريق بأكمله، بما في ذلك مسؤولي إمكانية الوصول الذين ليسوا مطورين.
إمكانية الوصول البصرية ليست ترفًا — إنها التزام
منذ يونيو 2025، يُلزم القانون الأوروبي لإمكانية الوصول (EAA) الشركات في الاتحاد الأوروبي بجعل منتجاتها وخدماتها الرقمية متاحة. في المنطقة العربية، تتزايد التشريعات المتعلقة بإمكانية الوصول الرقمي، خاصة في قطاعات الحكومة الإلكترونية والخدمات المالية.
العقوبات المالية موجودة وتتزايد. لكن بعيدًا عن المخاطر القانونية، إمكانية الوصول ميزة تنافسية. وفقًا لمنظمة الصحة العالمية، يعيش أكثر من مليار شخص في العالم مع شكل من أشكال الإعاقة. تجاهل إمكانية الوصول يعني تجاهل سوق هائل.
إمكانية الوصول البصرية هي الجزء الأسهل أتمتةً من هذا الالتزام. لا تحتاج إلى خبير WCAG لالتقاط لقطات شاشة في ظروف مختلفة ومقارنة النتائج. تحتاج إلى أداة اختبار بصري مُعدة بشكل صحيح.
الأسئلة الشائعة
هل يحل الاختبار البصري محل تدقيق إمكانية الوصول WCAG الكامل؟
لا. يغطي الاختبار البصري المعايير البصرية لـ WCAG (التباين، التركيز، التباعد، التكبير، إعادة التدفق)، لكن ليس المعايير الهيكلية مثل البدائل النصية أو التنقل عبر لوحة المفاتيح أو أدوار ARIA. يكمل التدقيق ولا يحل محله. حوالي 30 إلى 40% من معايير WCAG 2.2 لها مكون بصري مباشر.
ما مستويات الامتثال WCAG التي يساعد الاختبار البصري في التحقق منها؟
الاختبار البصري مفيد لجميع المستويات الثلاثة: A وAA وAAA. المستوى AA، الأكثر شيوعًا في المتطلبات التنظيمية، يحتوي على عدة معايير بصرية رئيسية (التباين 1.4.3، التركيز المرئي 2.4.7، إعادة التدفق 1.4.10، التباعد 1.4.12). المستوى AAA يعزز متطلبات التباين (1.4.6 بنسبة 7:1) ويضيف معايير إضافية، جميعها قابلة للتحقق بصريًا.
كيف تختبر إمكانية الوصول البصرية دون مهارات تقنية؟
باستخدام أداة no-code مثل Delta-QA، تقوم بتكوين الصفحات المراد اختبارها، وتحدد الظروف (حجم الشاشة، التكبير، المتصفح)، وتقوم الأداة تلقائيًا بالتقاط لقطات الشاشة ومقارنتها. لا حاجة لأي سطر من الكود. تُظهر لك الواجهة الفروقات البصرية وأنت تقرر ما إذا كانت مقبولة أم لا.
كم مرة يجب التحقق من إمكانية الوصول البصرية؟
مع كل تعديل في كود الواجهة الأمامية. التكامل مع CI/CD هو أفضل نهج: كل pull request يُطلق الاختبارات تلقائيًا. إذا لم تتمكن من الأتمتة عند هذا المستوى، فإن اختبارًا أسبوعيًا هو الحد الأدنى المقبول لاكتشاف التراجعات قبل تراكمها.
هل يكتشف الاختبار البصري مشاكل إمكانية الوصول على الأجهزة المحمولة؟
نعم، بشرط تكوين اختبارات بالدقات المحمولة الشائعة (360 بكسل، 375 بكسل، 414 بكسل عرضًا). يلتقط الاختبار البصري المتجاوب العرض الفعلي عند كل دقة ويكتشف مشاكل إعادة التدفق والنصوص المقطوعة والعناصر الصغيرة جدًا للتفعيل باللمس والتباينات المتدهورة بالعرض المحمول.
هل ينطبق القانون الأوروبي لإمكانية الوصول على شركتي؟
إذا كنت تبيع منتجات أو خدمات رقمية للمستهلكين في الاتحاد الأوروبي، نعم. يُطبق EAA منذ يونيو 2025 على مواقع التجارة الإلكترونية والخدمات المصرفية والإعلام والنقل والاتصالات، من بين أمور أخرى. تستفيد المؤسسات الصغيرة جدًا التي يقل عدد موظفيها عن 10 ورقم أعمالها عن 2 مليون يورو من إعفاءات، لكن الباقي ملزم بالامتثال.
الخلاصة
إمكانية الوصول البصرية والاختبار البصري وجهان لعملة واحدة. معايير WCAG الأكثر انتهاكًا (التباين، التركيز، التباعد، التكبير) هي خصائص بصرية قابلة للقياس تلقائيًا. تغطي أدوات تحليل DOM جزءًا فقط من المشكلة. يملأ الاختبار البصري هذه النقطة العمياء بالتحقق مما يراه المستخدم فعلاً.
بدلاً من معاملة إمكانية الوصول كتدقيق يُجرى مرة في السنة، ادمج الاختبار البصري في خط أنابيبك لتحويله إلى مراقبة مستمرة. إنه أكثر فعالية وأكثر موثوقية وأقل تكلفة بما لا يُقاس من التصحيح المتأخر.