ما هي إمكانية الوصول على الويب؟ شرح WCAG ومبدأ التصميم الشامل
إمكانية الوصول على الويب تعني بناء المواقع والتطبيقات بحيث يستطيع ذوو الإعاقة استخدامها، سواء كانوا مكفوفين يستخدمون قارئ شاشة، أو لا يستطيعون استخدام الفأرة، أو يعانون ضعفاً بصرياً أو عمى ألوان، أو صُمّاً، أو ذوي إعاقات إدراكية أو صعوبات تعلم. وعملياً ترجع إلى أمور مثل النصوص البديلة للصور، وتباين ألوان كافٍ، ونماذج لها تسميات صحيحة، وأن يعمل كل شيء بلوحة المفاتيح وحدها. والمعيار الدولي لذلك هو WCAG، أي إرشادات إمكانية الوصول إلى محتوى الويب الصادرة عن W3C.
يُختصر مصطلح Accessibility غالباً إلى a11y: حرف "a"، ثم 11 حرفاً، ثم حرف "y".
لماذا تهم إمكانية الوصول عند البناء بالذكاء الاصطناعي
تُجيد منشآت الذكاء الاصطناعي إنتاج تطبيقات تبدو صحيحة. أما إمكانية الوصول فتتعلق في معظمها بما لا يظهر في لقطة الشاشة: هل الزر زر فعلاً؟ هل للحقل تسمية تستطيع قارئة الشاشة أن تنطقها؟ هل تصل إلى القائمة بمفتاح Tab؟
لهذا يهم أن تسأل:
- يسهل أن تفوتها. قائمة منسدلة بتنسيق مخصص قد تبدو مثالية وتكون مستحيلة الاستخدام دون فأرة. لن تلاحظ ذلك ما لم تختبره.
- تكلف أقل إذا أُنجزت مبكراً. طلب مكونات قابلة للوصول من الطلب الأول لا يكلّف شيئاً تقريباً. أما تعديل تطبيق منتهٍ فيعني المساس بكل شاشة.
- تفيد الجميع. الترجمة المكتوبة تساعد من في أماكن صاخبة، والتباين الجيد يساعد من يستخدم الهاتف تحت الشمس، والتسميات الواضحة تساعد الجميع على ملء النماذج أسرع.
- تتداخل مع تحسين محركات البحث. العناوين الصحيحة والروابط الوصفية والنص البديل تساعد محركات البحث على فهم صفحاتك أيضاً، انظر تحسين محركات البحث للمواقع المبنية بالذكاء الاصطناعي.
- قد تكون مطلوبة. بحسب المكان الذي تعمل فيه والفئة التي تخدمها، قد تكون إمكانية الوصول التزاماً قانونياً.
تشبيه من الحياة اليومية
فكّر في مدخل مبنى.
الدرج يناسب كثيرين. أما المنحدر فيناسب مستخدمي الكراسي المتحركة، ويناسب أيضاً الآباء الذين يدفعون عربات الأطفال، وعمال التوصيل بعرباتهم، والمسافرين بحقائبهم. الأبواب الأوتوماتيكية واللافتات الواضحة وطريقة برايل على أزرار المصعد والإضاءة الجيدة، كل منها يزيل حاجزاً عن شخص ما.
إمكانية الوصول على الويب هي الفكرة نفسها للمساحات الرقمية: المنحدرات واللافتات والدرابزين في تطبيقك. وكما في المبنى، يكون إدراج المنحدر في المخطط أسهل بكثير من إضافته بعد أن يجفّ الإسمنت.
WCAG في سطور
تنشره مبادرة إمكانية الوصول (WAI) التابعة لـ W3C. والإصدار الحالي هو WCAG 2.2، الذي نُشر لأول مرة في أكتوبر 2023. وهو متوافق مع الإصدارات السابقة: فالمحتوى الذي يستوفي WCAG 2.2 يستوفي أيضاً 2.1 و2.0، وتشجع W3C على استخدام أحدث إصدار. ومعيار WCAG 2.2 معتمد أيضاً كمعيار دولي باسم ISO/IEC 40500:2025. أما WCAG 3 فهو مختلف جداً، وما زال في مرحلة مسودة مبكرة وليس معياراً نهائياً.
ينقسم WCAG إلى أربعة مبادئ، يُتذكّر غالباً بالاختصار POUR:
| المبدأ | معناه | أمثلة |
|---|---|---|
| قابل للإدراك (Perceivable) | يستطيع الناس استيعاب المحتوى بالحواس التي يستخدمونها | نص بديل للصور، وترجمة للفيديو، وتباين كافٍ |
| قابل للتشغيل (Operable) | يستطيع الناس استخدام عناصر التحكم والتنقل | الوصول بلوحة المفاتيح، وعدم وجود مهل زمنية لا يمكن تمديدها، وتركيز مرئي |
| قابل للفهم (Understandable) | المحتوى والسلوك منطقيان | تسميات واضحة، ورسائل خطأ مفيدة، وتنقل متسق |
| متين (Robust) | يعمل مع مجموعة من المتصفحات والتقنيات المساعدة | عناصر HTML صحيحة، وأسماء وأدوار صحيحة لعناصر التحكم |
ولكل إرشاد معايير نجاح قابلة للاختبار على ثلاثة مستويات:
- المستوى A: الحد الأدنى. إخفاق هذه المعايير يمنع بعض الناس تماماً من الاستخدام.
- المستوى AA: الهدف القياسي، وهو المستوى الذي تشير إليه معظم القوانين والسياسات.
- المستوى AAA: أعلى مستوى. مفيد لتحقيقه في مواضع محددة، لكن W3C لا توصي بجعله مطلباً لمواقع كاملة، لأن بعض المحتوى لا يستطيع بلوغه.
أضاف WCAG 2.2 تسعة معايير نجاح إلى 2.1، منها حجم الهدف (الحد الأدنى) على المستوى AA، إذ ينبغي أن تكون الأهداف القابلة للنقر بحجم 24 × 24 بكسل CSS على الأقل مع استثناءات، والمصادقة المتاحة (الحد الأدنى)، الذي يقيّد خطوات تسجيل الدخول التي تعتمد على الذاكرة أو الألغاز، مثل إجبارك على إعادة كتابة كلمة المرور دون السماح بلصقها. كما حذف المعيار القديم "Parsing" لأنه أصبح متقادماً.
مثال عملي: نموذج تسجيل
إليك نموذج تسجيل قد ينتجه الذكاء الاصطناعي، وما يكشفه فحص إمكانية الوصول:
| المشكلة | من تؤثر فيه | الإصلاح |
|---|---|---|
| الحقول تستخدم نص الإرشاد ("Email") بدلاً من التسميات | مستخدمو قارئات الشاشة، وكل من ينسى ماذا كان الحقل بمجرد أن يبدأ بالكتابة | عنصر <label> مرئي مرتبط بكل حقل |
| نص رمادي فاتح على أبيض بتباين أقل بكثير من 4.5:1 | ضعاف البصر، وكل من هو في الخارج | نص أغمق يحقق نسبة التباين 4.5:1 |
| الأخطاء تظهر فقط كحد أحمر | مصابو عمى الألوان، ومستخدمو قارئات الشاشة | رسالة نصية بجانب الحقل تنطقها قارئات الشاشة |
"Sign up" عنصر <div> منسّق، وليس <button> | مستخدمو لوحة المفاتيح وقارئات الشاشة لا يستطيعون تفعيله | استخدم عنصر <button> حقيقياً |
| لا يوجد إطار مرئي عند التنقل بـ Tab بين الحقول | مستخدمو لوحة المفاتيح يفقدون مكانهم | نمط تركيز واضح |
| صورة الشعار بلا نص بديل | مستخدمو قارئات الشاشة يسمعون اسم ملف | نص بديل مثل "Acme Bookings" |
لا تغيّر أي من هذه الإصلاحات شكل النموذج كثيراً، لكن كلها تغيّر ما إذا كان بعض الناس يستطيعون استخدامه أصلاً.
المصطلحات الأساسية
| المصطلح | معناه |
|---|---|
| قارئ الشاشة (Screen reader) | برنامج يقرأ الشاشة بصوت مسموع أو على جهاز برايل، مثل VoiceOver وNVDA وJAWS. |
| النص البديل (Alt text) | وصف نصي للصورة تقرؤه قارئات الشاشة. تحصل الصور الزخرفية على نص بديل فارغ لتُتجاوز. |
| نسبة التباين (Contrast ratio) | مدى اختلاف لون النص عن لون الخلفية، من 1:1 إلى 21:1. |
| التنقل بلوحة المفاتيح | استخدام الموقع بمفاتيح Tab وEnter والمسافة ومفاتيح الأسهم بدلاً من الفأرة. |
| مؤشر التركيز (Focus indicator) | الإطار المرئي الذي يوضح العنصر الذي تركز عليه لوحة المفاتيح. |
| HTML الدلالي (Semantic HTML) | استخدام العنصر الصحيح للمهمة، مثل <button> و<nav> و<h2>، كي تفهم المتصفحات والتقنيات المساعدة الصفحة. |
| ARIA | سمات إضافية تصف عناصر التحكم المخصصة للتقنيات المساعدة. يُستخدم باعتدال؛ فعناصر HTML الأصلية تأتي أولاً. |
| التقنيات المساعدة (Assistive technology) | الأدوات التي يستخدمها الناس للوصول إلى الحواسيب، من قارئات الشاشة إلى أجهزة التبديل والتحكم الصوتي. |
مفاهيم خاطئة شائعة
- "إمكانية الوصول تهم المكفوفين فقط." إنها تشمل الإعاقات البصرية والحركية والسمعية والكلامية والإدراكية، إضافة إلى الحالات المؤقتة مثل كسر في الذراع.
- "المواقع القابلة للوصول تبدو بسيطة." تفرض إمكانية الوصول قيوداً على أشياء قليلة، كالتباين وأنماط التركيز وحجم النص، لكن المواقع الجميلة والقابلة للوصول هي القاعدة لا الاستثناء.
- "فاحص آلي يعطي 100، إذن انتهينا." الأدوات الآلية تلتقط بعض المشكلات فقط. هل النص البديل ذو معنى فعلاً، أو هل التدفق منطقي مع قارئ الشاشة؟ هذا يحتاج إلى شخص يتحقق منه.
- "أداة تغطية (overlay) ستجعلنا متوافقين." أدوات الشريط المضافة فوق الموقع لا تستطيع إصلاح التسميات المفقودة أو تعطل التنقل بلوحة المفاتيح في شيفرتك. أصلح المصدر.
- "ليس لدينا مستخدمون من ذوي الإعاقة." ربما لا تعرف فقط. كثير من الإعاقات لا تُرى، والأشخاص الذين يصطدمون بعائق يغادرون عادةً ببساطة.
ماذا تطلب من منشئ التطبيق بالذكاء الاصطناعي
- "ابنِ هذا بحيث يستوفي WCAG 2.2 على المستوى AA."
- "استخدم HTML الدلالي: أزرار وروابط حقيقية، وعناوين بترتيب صحيح، وتسميات لكل حقل في النموذج."
- "تأكد من أن كل عنصر تفاعلي يعمل بلوحة المفاتيح وحدها ويملك نمط تركيز مرئياً."
- "افحص تباين ألوان كل النصوص والأيقونات: 4.5:1 للنص العادي، و3:1 للنص الكبير والأيقونات."
- "أضف نصاً بديلاً ذا معنى للصور المعلوماتية، ونصاً بديلاً فارغاً للصور الزخرفية."
- "اعرض أخطاء النموذج كنص مرتبط بالحقل، لا باللون وحده."
- "احترم إعداد المستخدم لتقليل الحركة في الرسوم المتحركة."
- "شغّل فحصاً آلياً لإمكانية الوصول، واذكر ما لا يستطيع اختباره حتى أتحقق منه يدوياً."
ثم اختبره بنفسك: أبعد الفأرة وحاول إكمال مسارك الرئيسي بمفاتيح Tab وShift+Tab وEnter والمسافة فقط. وجرّب قارئ الشاشة المدمج في هاتفك على الصفحة الرئيسية. وكبّر المتصفح إلى 200% وانظر إن كان أي شيء ينكسر.
إمكانية الوصول في Mythex
لا يتضمن Mythex أداة فحص مخصصة لإمكانية الوصول، لذلك تعامل معها كجزء من طلباتك واختباراتك. اطلب WCAG 2.2 AA من الطلب الأول، وافحص النتيجة في المعاينة بلوحة المفاتيح، واستخدم /test ليتصفح الوكيل مساراتك الرئيسية قبل النشر، انظر اختبار التطبيق. كما أن وصفة تحسين محركات البحث تطلب عناوين دلالية ونصوصاً بديلة ذات معنى، وهذا يخدم الهدفين معاً.
لقائمة تحقق عملية، انظر كيف تجعل موقعك قابلاً للوصول. وللتصميم، اقرأ كيف تصمم تطبيقاً جميلاً بالذكاء الاصطناعي، وقبل الإطلاق كيف تختبر تطبيقك قبل الإطلاق. والمرجع الأصلي الموثوق هو نظرة عامة على WCAG في موقع W3C.
الأسئلة
ما هي إمكانية الوصول على الويب بكلمات بسيطة؟
إمكانية الوصول على الويب تعني تصميم المواقع والتطبيقات وبنائها بحيث يستطيع ذوو الإعاقة إدراكها وفهمها والتنقل فيها واستخدامها. ويشمل ذلك المكفوفين الذين يستخدمون قارئات الشاشة، والذين لا يستطيعون استخدام الفأرة، وضعاف البصر وعمى الألوان، والصم، وذوي الإعاقات الإدراكية.
ما هو WCAG؟
WCAG (إرشادات إمكانية الوصول إلى محتوى الويب) معيار دولي لإمكانية الوصول على الويب، تنشره W3C. والإصدار الحالي هو WCAG 2.2، الذي نُشر لأول مرة في أكتوبر 2023. تُصنَّف معايير نجاحه على مستويات A وAA وAAA، ويُعدّ المستوى AA الهدف الذي تشير إليه معظم المؤسسات والقوانين.
ما نسبة التباين التي يطلبها WCAG للألوان؟
على المستوى AA، يحتاج النص العادي إلى نسبة تباين لا تقل عن 4.5:1 مع خلفيته، ويحتاج النص الكبير (نحو 18 نقطة، أو 14 نقطة عريضة) إلى 3:1 على الأقل. وتحتاج الأيقونات والأجزاء المرئية من عناصر التحكم إلى 3:1 على الأقل مقابل ما يجاورها.
هل إمكانية الوصول على الويب مطلب قانوني؟
في بلدان كثيرة ولمؤسسات كثيرة، نعم. تختلف القوانين باختلاف البلد والقطاع؛ فمثلاً يشمل قانون إمكانية الوصول الأوروبي (European Accessibility Act) كثيراً من المنتجات والخدمات الرقمية الاستهلاكية في الاتحاد الأوروبي. تحقق من القواعد التي تنطبق عليك، أو اسأل مستشاراً قانونياً.
هل تجعل أداة تغطية (overlay) أو عنصر واجهة للإمكانية موقعي متوافقاً؟
ليس بمفردها. فهذه الأدوات تضيف شريط أدوات فوق موقعك، لكنها لا تستطيع إصلاح مشكلات أساسية مثل غياب التسميات أو تعذّر التنقل بلوحة المفاتيح أو غموض البنية بشكل موثوق. الطريقة الموثوقة هي إصلاح شيفرة الموقع ومحتواه.