إمكانية الوصول في المواقع (WCAG): كيف تجعل موقعك متاحًا للأشخاص ذوي الإعاقة؟

يتصفح بعض زوار موقعك بطريقة لا يراها فريق التصميم عادة: شخص كفيف يستمع إلى الصفحة عبر قارئ الشاشة، وآخر لا يستطيع استخدام الفأرة فيتنقل بلوحة المفاتيح، وثالث يعاني ضعفًا في الإبصار فيكبّر النص. وإمكانية الوصول تعني أن يستطيع هؤلاء جميعًا استخدام الموقع دون عوائق.

في هذا المقال نشرح إرشادات WCAG بلغة مبسطة، ونعرض خطوات عملية لتطبيقها مع مراعاة خصوصية المواقع العربية.

1. ما المقصود بإمكانية الوصول في المواقع؟

إمكانية الوصول (Accessibility) هي تصميم الموقع وبناؤه بحيث يستطيع الأشخاص ذوو الإعاقة البصرية أو السمعية أو الحركية أو الإدراكية إدراك محتواه والتفاعل معه. ولا يقتصر أثرها على هذه الفئة، فكبار السن، ومن يتصفح في ضوء الشمس، ومن يحمل طفلًا بيد واحدة، يستفيدون جميعًا من الموقع المتاح.

ويرتبط هذا الموضوع بقيم الشمول التي تؤكد عليها رؤية المملكة 2030 في تمكين الأشخاص ذوي الإعاقة من المشاركة في الحياة العامة والعمل. كما أن كثيرًا من ممارسات الإتاحة، كالعناوين المنظمة والنصوص البديلة للصور، تحسّن فهم محركات البحث للصفحة أيضًا، فيجتمع الأثر الإنساني والأثر التجاري في القرار نفسه.

2. إرشادات WCAG ومبادئها الأربعة

إرشادات WCAG معيار دولي يصدره اتحاد الشبكة العالمية (W3C)، ويُعتمد مرجعًا لقياس إتاحة المواقع في كثير من الدول والجهات. وتنقسم معاييره إلى ثلاثة مستويات تطابق هي A وAA وAAA، ويُتخذ المستوى AA عادة هدفًا عمليًا للمواقع.

• قابلية الإدراك: أن يُقدَّم المحتوى بصيغ يدركها الجميع، كالنص البديل للصور والترجمة النصية للفيديو.
• قابلية التشغيل: أن تعمل كل الوظائف بلوحة المفاتيح، وأن يملك المستخدم وقتًا كافيًا للتفاعل.
• قابلية الفهم: أن تكون النصوص واضحة، والتنقل متوقعًا، ورسائل الأخطاء مفهومة.
• المتانة: أن تُبنى الصفحة بشيفرة سليمة تفهمها المتصفحات والتقنيات المساعدة كقارئات الشاشة.

3. النصوص البديلة والوسائط المتعددة

قارئ الشاشة لا يرى الصورة، بل يقرأ النص البديل المكتوب لها في الخاصية alt. فإذا غاب هذا النص أو كان اسم ملف لا معنى له، فقد المستخدم الكفيف المعلومة التي تحملها الصورة.

والقاعدة أن يصف النص البديل وظيفة الصورة في سياقها لا شكلها فقط. فصورة زر البحث نصها «بحث»، وصورة مخطط بياني تحتاج إلى وصف لخلاصته أو إلى جدول مرافق، أما الصور الزخرفية البحتة فيُترك نصها البديل فارغًا حتى يتجاوزها القارئ. وتحتاج مقاطع الفيديو إلى ترجمة نصية متزامنة تخدم الأشخاص الصم وضعاف السمع، ويُستحسن توفير نص مكتوب للمقاطع الصوتية. ولا تشغّل الصوت أو الفيديو تلقائيًا، لأنه يتداخل مع صوت قارئ الشاشة ويربك المستخدم.

4. التباين والألوان وحجم النص

ضعف التباين بين النص والخلفية من أكثر مشكلات الإتاحة انتشارًا، خاصة مع الاتجاه إلى الألوان الرمادية الفاتحة في التصاميم الحديثة. وتحدد إرشادات WCAG نسب تباين دنيا يمكن قياسها بأدوات مجانية قبل اعتماد هوية الموقع.

مثال توضيحي: لنفترض أن موقع جهة خدمية يعرض حالة الطلب بلون أخضر للمقبول وأحمر للمرفوض، دون أي نص أو رمز إضافي. الشخص المصاب بعمى الألوان قد لا يميز بين الحالتين، فيضطر إلى الاتصال بالدعم ليعرف نتيجة طلبه. أما إذا أُضيفت كلمة «مقبول» أو «مرفوض» بجانب اللون، فتصبح المعلومة واضحة للجميع. وينطبق المبدأ نفسه على الحقول الإلزامية في النماذج وعلى الروابط داخل النص.

5. التنقل بلوحة المفاتيح والتركيز المرئي

بعض المستخدمين لا يستطيعون استخدام الفأرة، فيتنقلون بين عناصر الصفحة بمفتاح Tab ويضغطون Enter للتفعيل. ولكي ينجح ذلك، يجب أن يكون كل رابط وزر وحقل قابلًا للوصول بلوحة المفاتيح، وبترتيب منطقي يتبع ترتيب القراءة.

• مؤشر تركيز واضح: لا تُخفِ الإطار الذي يحدد العنصر الحالي لأسباب جمالية، بل صمّمه بما يناسب الهوية.
• رابط التخطي إلى المحتوى: رابط في أول الصفحة يتيح تجاوز القائمة الرئيسية المتكررة.
• عناصر تفاعلية حقيقية: استخدم الأزرار والروابط الأصلية بدل عناصر مزخرفة تستجيب للنقر بالفأرة وحدها.
• النوافذ المنبثقة: انقل التركيز إليها عند فتحها، وأتح إغلاقها بمفتاح Esc، وأعده إلى مكانه بعد الإغلاق.

6. النماذج ورسائل الأخطاء

النماذج هي المكان الذي تتحول فيه الزيارة إلى طلب أو تسجيل، وهي أيضًا موضع كثير من العوائق. فالحقل الذي يعتمد على نص رمادي داخله بدل تسمية ظاهرة يختفي وصفه بمجرد بدء الكتابة، ولا يقرؤه بعض قارئات الشاشة بشكل موثوق.

اربط كل حقل بتسمية مرئية، ووضّح الصيغة المطلوبة قبل الكتابة لا بعد الخطأ، كصيغة رقم الجوال أو التاريخ. وعند حدوث خطأ اعرض رسالة نصية بجانب الحقل المعني تشرح المشكلة وطريقة إصلاحها، وأعلنها للتقنيات المساعدة بدل الاكتفاء بتلوين الحقل بالأحمر. واحرص على أن يكون اختبار «لست روبوتًا» إن وُجد قابلًا للاستخدام بالصوت أو بلوحة المفاتيح، فبعض أشكاله تغلق الطريق أمام المستخدمين المكفوفين تمامًا.

7. خصوصية المواقع العربية وقارئات الشاشة

تدعم قارئات الشاشة الشائعة، مثل NVDA على ويندوز وVoiceOver على أجهزة آبل وTalkBack على أندرويد، اللغة العربية، لكن جودة النطق تعتمد على بناء الصفحة نفسها. فإذا لم تُحدَّد لغة الصفحة واتجاهها في الشيفرة، فقد يقرأ القارئ النص العربي بنطق إنجليزي لا يُفهم.

• تحديد اللغة والاتجاه: اضبط الخاصيتين lang وdir على مستوى الصفحة، وعلى المقاطع المكتوبة بلغة أخرى.
• نص حقيقي لا صور نصوص: العناوين المكتوبة داخل الصور لا تُقرأ ولا تتكبر ولا تُترجم.
• خطوط واضحة: اختر خطًا عربيًا مقروءًا بحجم مناسب، وتجنب الخطوط الزخرفية في النصوص الطويلة.
• التشكيل عند الحاجة: أضف الحركات للكلمات التي يلتبس نطقها، كأسماء الأعلام والمصطلحات.

8. الاختبار والتحسين المستمر

الأدوات الآلية مثل Lighthouse وWAVE وaxe تكشف جزءًا من المشكلات بسرعة، كغياب النصوص البديلة وضعف التباين والحقول دون تسميات. لكنها لا تستطيع الحكم على كل شيء، فهي لا تعرف هل النص البديل يصف الصورة فعلًا، ولا هل ترتيب التنقل منطقي.

مثال توضيحي: لنفترض أن فريقًا اجتاز الفحص الآلي لموقعه دون ملاحظات، ثم طلب من أحد موظفيه تجربة شراء منتج باستخدام لوحة المفاتيح وحدها. يكتشف الموظف أن قائمة اختيار المقاس لا تُفتح إلا بالفأرة، فيتوقف مسار الشراء كله. ولهذا يُستحسن الجمع بين الفحص الآلي، والاختبار اليدوي بلوحة المفاتيح وقارئ الشاشة، وإشراك مستخدمين من ذوي الإعاقة متى أمكن.

الخلاصة

إمكانية الوصول ليست ميزة إضافية تُضاف في آخر المشروع، بل جودة تُبنى منذ التصميم الأول. وتبدأ بخطوات واضحة: نصوص بديلة ذات معنى، وتباين كافٍ، وتنقل كامل بلوحة المفاتيح، ونماذج بتسميات ورسائل أخطاء مفهومة، وضبط صحيح للغة العربية واتجاهها. اجعل المستوى AA من إرشادات WCAG هدفًا مرجعيًا، وأدرج فحص الإتاحة في كل مراجعة قبل النشر، فالموقع الذي يستطيع الجميع استخدامه يخدم عملاءك كلهم. وإذا كان موقعك قائمًا، فابدأ بالصفحات الأكثر زيارة ومسارات الإجراء الأساسية كالتواصل والشراء والتسجيل، وعالج ما تجده فيها أولًا، ثم وسّع المراجعة تدريجيًا إلى بقية الموقع.