إمكانية الوصول في المواقع: كيف تبني موقعًا يستخدمه الجميع

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

ما هي إرشادات WCAG

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

المبادئ الأربعة

النص البديل للصور

النص البديل (Alt Text) هو ما يقرؤه قارئ الشاشة بدلًا من الصورة، وما يظهر إذا لم تُحمَّل. والقاعدة: صف وظيفة الصورة ومعناها في سياقها، لا شكلها المجرد.

• الصور الزخرفية تأخذ نصًا بديلًا فارغًا (alt="")، لا أن تُحذف السمة.
• الأيقونة التي تعمل رابطًا أو زرًا تُوصف بوظيفتها: «بحث» لا «عدسة مكبرة».
• الصورة التي تحتوي على نص يُكتب نصها في البديل.
• لا تبدأ بعبارة «صورة لـ»، فقارئ الشاشة يعلن بنفسه أنها صورة.
• اكتب البديل بلغة الصفحة، واجعله موجزًا.

والنص البديل الجيد يفيد أيضًا في البحث عن الصور، وهو من أساسيات السيو التقني.

التباين والألوان

يشترط المستوى AA نسبة تباين لا تقل عن 4.5:1 بين النص العادي وخلفيته، و3:1 للنص الكبير (18 نقطة، أو 14 نقطة بوزن عريض، أي نحو 24 و18.66 بكسل)، و3:1 لعناصر الواجهة والرموز الرسومية المهمة، كحدود الحقول والأيقونات. والخطوط العربية الرفيعة بأحجام صغيرة أصعب قراءةً، فامنحها حجمًا أكبر أو وزنًا أثقل.

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

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

كثير من المستخدمين لا يستخدمون الفأرة: ذوو الإعاقات الحركية، ومستخدمو قارئات الشاشة، ومن يفضّلون لوحة المفاتيح. اختبر موقعك بمفتاحي Tab وShift+Tab للتنقل، وEnter والمسافة للتفعيل، والأسهم داخل القوائم، وEsc للإغلاق.

• مؤشر تركيز ظاهر: لا تحذف الإطار الافتراضي حول العنصر المحدد دون بديل واضح.
• ترتيب منطقي: يتبع التركيز ترتيب القراءة البصري، وهو في الصفحة العربية من اليمين إلى اليسار. وتجنب قيم tabindex الموجبة.
• رابط التخطي: رابط في أول الصفحة مثل «انتقل إلى المحتوى» يوفر على المستخدم المرور على القائمة كاملة في كل صفحة.
• النوافذ المنبثقة: ينتقل التركيز إليها عند فتحها ويبقى داخلها، ويغلقها مفتاح Esc، ثم يعود التركيز إلى الزر الذي فتحها.
• العناصر الأصلية أولًا: استخدم عنصر button للأفعال وعنصر a للانتقال، لأن عنصر div المزوّد بحدث نقر لا يصل إليه مستخدم لوحة المفاتيح تلقائيًا.
• الحركة التلقائية: شرائح العرض التي تتحرك وحدها أكثر من خمس ثوانٍ تحتاج إلى زر إيقاف، ويجب ألا يومض شيء أكثر من ثلاث مرات في الثانية.
• أهداف النقر: اجعلها كبيرة بما يكفي. ويشترط الإصدار 2.2 من WCAG في المستوى AA حدًا أدنى قدره 24×24 بكسل CSS، مع استثناءات محددة.

a:focus-visible,
button:focus-visible {
  outline: 3px solid #1a5fb4;
  outline-offset: 2px;
}

النماذج والتسميات

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

<label for="phone">رقم الجوال</label>
<input id="phone" type="tel" autocomplete="tel" dir="ltr" aria-describedby="phone-error">
<p id="phone-error">أدخل رقم الجوال مع رمز الدولة.</p>

الفيديو والصوت

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

وتفاصيل إعداد الترجمة وتنسيقها في دليل الترجمة والنصوص على الفيديو.

الاختبار: الأدوات الآلية وقارئات الشاشة

1. الفحص الآلي: أدوات مثل Lighthouse المدمجة في متصفح كروم وaxe وWAVE تكشف مشكلات واضحة، كنقص النص البديل وضعف التباين، لكنها تغطي جزءًا فقط من المعايير، ولا تحكم مثلًا على جودة النص البديل.
2. اختبار لوحة المفاتيح: ابتعد عن الفأرة، وأكمل المهام الأساسية: التنقل، والبحث، وملء نموذج التواصل، وإتمام الشراء.
3. التكبير: كبّر الصفحة إلى 200% ثم 400%، وتأكد أن المحتوى يعاد ترتيبه دون تمرير أفقي.
4. قارئات الشاشة: NVDA المجاني وJAWS على ويندوز، وVoiceOver المدمج في أجهزة Apple، وTalkBack المدمج في أندرويد. جرّب التنقل بالعناوين والمعالم وقائمة الروابط، واستمع لما يُعلَن عند ملء النماذج.
5. المستخدمون الحقيقيون: لا شيء يعوّض ملاحظة شخص يستخدم التقنيات المساعدة يوميًا وهو يجرب موقعك.

اعتبارات خاصة بالعربية

• اضبط lang="ar" بدقة لينطق قارئ الشاشة بصوت عربي، ووسّم الكلمات الإنجليزية داخل النص العربي بالسمة lang="en"، كما يشرح دليل الموقع الثنائي اللغة.
• تأكد من توفر صوت عربي في نظام التشغيل وقارئ الشاشة المستخدمَين في الاختبار، فتوفر الأصوات وجودتها يختلفان بين الأنظمة.
• الأصوات العربية تستنتج التشكيل من السياق، فقد تخطئ في نطق الكلمات الملتبسة. وقد يساعد تشكيل كلمة ملتبسة في موضع مهم، ولا حاجة إلى تشكيل النصوص كاملة.
• تجنب حرف التطويل (ـ) لمد الكلمات زخرفيًا، لأنه قد يربك القراءة الآلية والبحث.
• لا تعرض العناوين والنصوص المهمة صورًا بخط عربي مزخرف دون نص حقيقي مقابل.
• في التخطيط من اليمين إلى اليسار، يجب أن يطابق ترتيب العناصر في الشيفرة ترتيبها البصري، وإلا قرأ قارئ الشاشة المحتوى وتنقّل التركيز بترتيب يختلف عما يراه المستخدم.

قائمة تحقق عملية

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

وإمكانية الوصول جزء من جودة المشروع منذ التصميم، لا مرحلة تُضاف في النهاية؛ فراجع موقعها ضمن الدليل الشامل لبناء موقع شركتك، وأساسها في أساسيات تصميم واجهات المستخدم وتجربة المستخدم.