إتاحة الموقع العربي لذوي الإعاقة: ما الذي يختلف في العربية؟

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

لماذا تختلف العربية؟

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

المشكلات وحلولها

1. المشكلة: الصفحة لا تعلن لغتها

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

الحل: أضف lang="ar" إلى وسم html. يشرح W3C في شرح المعيار 3.1.1 أن تعريف لغة الصفحة يتيح لقارئ الشاشة تحميل قواعد النطق الصحيحة، وللمتصفح عرض الحروف بشكل سليم، ولمشغلات الوسائط عرض الترجمة النصية بشكل صحيح.

2. المشكلة: اتجاه الصفحة مضبوط بالتنسيق فقط

ما يحدث: بعض القوالب «تقلب» الصفحة بقواعد CSS دون تعريف الاتجاه في HTML. تبدو الصفحة صحيحة للعين، لكن ترتيب علامات الترقيم واتجاه الفقرات قد يختلّ، خاصة مع النصوص المختلطة.

الحل: يوصي فريق التدويل في W3C بإضافة dir="rtl" إلى وسم html حين يكون اتجاه المستند من اليمين إلى اليسار، وبعدم استخدام CSS لتحديد الاتجاه الأساسي. استخدم السمة dir داخل الصفحة فقط في الحالات النادرة التي يتغير فيها الاتجاه فعلًا.

3. المشكلة: كلمات إنجليزية تُنطق بالعربية

ما يحدث: اسم منتج مثل «iPhone» أو عبارة مثل «Free Shipping» وسط فقرة عربية قد يحاول قارئ الشاشة نطقها بقواعد العربية.

الحل: المعيار 3.1.2 يطلب أن تكون لغة كل مقطع قابلة للتحديد برمجيًا، مع استثناء أسماء العلم والمصطلحات التقنية والكلمات التي صارت جزءًا من لغة النص المحيط. عمليًا: ضع lang="en" على العبارات الإنجليزية الكاملة، ولا تحتاج إليه لكلمة دخلت الاستخدام العربي اليومي.

4. المشكلة: كلمات ملتبسة دون تشكيل

ما يحدث: القارئ البشري يفهم «عَلِم» و«عَلَم» و«عِلْم» من السياق، أما محرك النطق الآلي فيخمّن، وقد يخطئ في كلمة تغيّر المعنى، خاصة في الأسماء والمصطلحات.

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

5. المشكلة: نصوص داخل الصور

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

الحل: اكتب نصًا بديلًا بالعربية يقول ما تقوله الصورة: «خصم 20% على العبايات حتى نهاية الشهر»، لا «بنر1». والأفضل أن يكون النص المهم نصًا حقيقيًا فوق الصورة لا جزءًا منها. والصور الزخرفية التي لا تحمل معلومة يُترك نصها البديل فارغًا حتى لا يقرأها قارئ الشاشة بلا فائدة.

6. المشكلة: خطوط عربية رفيعة بتباين ضعيف

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

الحل: يطلب المعيار 1.4.3 تباينًا لا يقل عن 4.5:1 للنص العادي و3:1 للنص الكبير. لكن الرقم وحده لا يكفي مع العربية: الوزن الخفيف جدًا قد يحقق نسبة التباين ويبقى صعب القراءة لأن ضربات الحروف رفيعة. استخدم الوزن العادي على الأقل للنص الأساسي، واختبر على الجوال في ضوء النهار.

7. المشكلة: التكبير يكسر التخطيط

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

الحل: يطلب المعيار 1.4.4 إمكانية تكبير النص حتى 200% دون فقدان محتوى أو وظيفة. اجعل الحاويات مرنة، وارتفاع السطر مريحًا، ولا تثبّت ارتفاع الأزرار بالبكسل. تفاصيل اختيار الخط وأحجامه تناولناها في مقال الخطوط العربية وسرعة الموقع.

8. المشكلة: نماذج تختلط فيها الاتجاهات

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

الحل: يطلب المعيار 3.3.2 عناوين أو تعليمات حين يطلب المحتوى إدخالًا من المستخدم. ضع عنوانًا عربيًا ظاهرًا ومربوطًا برمجيًا بكل خانة، ولا تعتمد على النص التوضيحي وحده. واجعل خانات البريد والأرقام باتجاه من اليسار إلى اليمين، وهي من الحالات القليلة التي يستحق فيها الاتجاه أن يتغير داخل الصفحة. واكتب رسائل الخطأ بالعربية بوضوح: «رقم الجوال يجب أن يبدأ بـ 05» أفضل من «إدخال غير صالح».

9. المشكلة: ترتيب التنقل بلوحة المفاتيح معكوس

ما يحدث: في بعض المواقع المترجمة من قالب إنجليزي، ينتقل التركيز بزر Tab من اليسار إلى اليمين بينما المحتوى معروض من اليمين، فيقفز المؤشر بشكل غير منطقي.

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

10. المشكلة: فيديو بلا ترجمة نصية عربية

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

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

هل الإتاحة إلزامية لموقع شركتي؟

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

الأسئلة الشائعة

ما المستوى المناسب من WCAG لموقع تجاري؟

المستوى AA هدف عملي معقول لموقع تجاري، ويشمل معايير مثل التباين 4.5:1 وتكبير النص 200%. ابدأ بالمستوى A كاملًا ثم المعايير الأكثر تأثيرًا من AA، بدل محاولة تطبيق كل شيء دفعة واحدة.

هل تكفي أداة إتاحة تُضاف للموقع بسطر واحد؟

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

كيف أختبر موقعي بنفسي؟

شغّل قارئ الشاشة المدمج في جوالك (VoiceOver في iPhone أو TalkBack في أندرويد) واستمع إلى صفحتك الرئيسية وصفحة منتج ونموذج التواصل. ثم تنقل في الموقع بلوحة المفاتيح وحدها، وكبّر النص إلى 200%. هذه الاختبارات الثلاثة تكشف أغلب المشكلات الكبيرة.

هل أشكّل الأرقام أو أكتبها بالحروف لقارئ الشاشة؟

لا حاجة لكتابة الأرقام بالحروف. المهم أن تكون الأرقام نصًا حقيقيًا لا صورة، وأن تلتزم بنظام أرقام واحد في الموقع كله، وأن تكتب الأسعار مع العملة بشكل واضح.

موقع يصل إلى الجميع

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