انتقل إلى المحتوى
طبقات بيانات شفافة متراكمة، وخط مسح بنفسجي يعبرها أفقيا وسط مؤشرات برتقالية على الحافة

التقني

إتاحة الوصول للموقع (WCAG) في الخليج: ما هي ولماذا تهم القارئ العربي

إلياس المسعودي6 دقائق قراءة

الإجابة المختصرة

إتاحة الوصول تعني أن يستطيع أي شخص استخدام موقعك: من يقرأ بقارئ شاشة، ومن لا يميز الألوان، ومن يتصفح بيد واحدة تحت الشمس، ومن أصابعه أكبر من أزرارك. معايير WCAG هي القائمة العالمية لذلك، وإصدارها الحالي 2.2. في الخليج تلزم بها الجهات الحكومية مواقعها، وللقطاع الخاص السبب أبسط: أغلب ما تطلبه المعايير هو ما يجعل الموقع العربي مقروءا على الجوال لكل زائر، فيرفع الطلبات. خمسة فحوص تكشف أغلب المشاكل: تباين الألوان، حجم الخط العربي والمسافة بين السطور، النص البديل للصور، إمكانية استخدام الموقع بلوحة المفاتيح، وحجم الأزرار والمسافة بينها.

ما تعنيه بلا مصطلحات

WCAG هي إرشادات إتاحة محتوى الويب، قائمة عالمية من المعايير التي تجعل الموقع قابلا للاستخدام من أكبر عدد من الناس بأكبر عدد من الطرق. إصدارها الحالي 2.2، ولها ثلاثة مستويات: A الأساسي، وAA الذي تشترطه أغلب الجهات، وAAA الأعلى.

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

لماذا تهم في الخليج تحديدا

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

الفحوص الخمسة التي تكشف أغلب المشاكل

الفحص ما تبحث عنه الحد الأدنى
تباين الألوان نص رمادي فاتح على أبيض، أو أبيض على صورة نسبة تباين 4.5 إلى 1 للنص العادي
الخط العربي حجم صغير، وزن خفيف، سطور متلاصقة 17 بكسل تقريبا على الجوال، ارتفاع سطر 1.6 فأكثر
النص البديل صور بلا وصف، أو وصف «صورة1» وصف قصير لما في الصورة، وفارغ للصور الزخرفية
لوحة المفاتيح هل تصل إلى كل رابط وزر بالضغط على Tab، وهل ترى أين أنت كل شيء قابل للوصول وظاهر التركيز
الأزرار صغيرة ومتلاصقة، أو أيقونة بلا اسم 44 بكسل تقريبا، ومسافة بينها، واسم لكل زر

أضف إليها: العناوين بترتيب صحيح (h1 ثم h2 ثم h3)، والنماذج بحقول مسماة ورسائل خطأ واضحة، والفيديو بترجمة نصية، ولغة الصفحة محددة في الشفرة حتى ينطقها قارئ الشاشة بالعربية لا بالإنجليزية.

الأخطاء المتكررة في المواقع العربية

  1. نص عربي رمادي فاتح بوزن خفيف لأنه «أنيق».
  2. أيقونات واتساب والهاتف والقائمة بلا اسم، فقارئ الشاشة يقول «زر» فقط.
  3. لغة الصفحة في الشفرة إنجليزية بينما المحتوى عربي.
  4. صور المنتجات والخدمات بلا نص بديل، وهي تضر السيو أيضا.
  5. أداة إتاحة جاهزة فوق موقع لم يصلح شيء فيه.
  6. التركيز عند التنقل بلوحة المفاتيح غير مرئي، فالمستخدم لا يعرف أين هو.

أين تبدأ

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

أين يدخل هذا في الفحص

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

أسئلة متكررة

هل إتاحة الوصول إلزامية للمواقع التجارية في السعودية أو الإمارات؟
الإلزام الواضح على الجهات الحكومية وما يرتبط بها، ولكل دولة معاييرها المستندة إلى WCAG. للقطاع الخاص الوضع يتغير ويختلف بالقطاع، فاسأل مختصا قانونيا إن كنت تتعامل مع جهات حكومية أو في قطاع منظم. لكن السبب التجاري لا يحتاج إلزاما: الموقع الذي لا يقرأ تحت الشمس أو لا تضغط أزراره بالإبهام يخسر طلبات من كل الزوار لا من فئة واحدة.
هل تكفي إضافة أداة إتاحة (widget) جاهزة للموقع؟
الأدوات الجاهزة التي تضيف قائمة لتكبير الخط وتغيير التباين لا تصلح بنية الموقع: الصور بلا نص بديل تبقى كذلك، والأزرار غير المسماة تبقى كذلك، ومستخدم قارئ الشاشة يعاني معها أحيانا أكثر. هي تجميل لا إصلاح، وبعض الجهات تعتبرها غير كافية. الإصلاح في القالب والمحتوى نفسه.
ما الأداة المجانية لاختبار إتاحة الوصول؟
Lighthouse في متصفح كروم يعطي درجة وقائمة مشاكل، وإضافة axe DevTools تفصل أكثر، وWAVE يعرض المشاكل على الصفحة نفسها. وأهم اختبار مجاني: افتح موقعك بقارئ الشاشة المدمج في هاتفك (VoiceOver أو TalkBack) وحاول الوصول إلى زر واتساب بلا أن تنظر إلى الشاشة.