إمكانية الوصول Accessibility للمواقع العربية: لماذا هي مسألة تجارية
الحديث عن إمكانية الوصول عادة ما يبدأ بنبرة أخلاقية، وينتهي في آخر قائمة الأولويات. النبرة صحيحة لكنها غير مقنعة لصاحب عمل يوازن بين عشرة بنود، فلنبدأ من الجانب الآخر.
موقع لا يمكن استخدامه بلوحة المفاتيح، أو نصه رمادي فاتح على أبيض، أو نماذجه لا تشرح أخطاءها، لا يخسر فئة صغيرة من الزوار. هو يخسر أيضاً كل من يتصفح تحت الشمس، وكل من يستخدم شاشة صغيرة، وكل من يقرأ بسرعة. هؤلاء ليسوا حالة خاصة، هم أغلب الزيارات من الموبايل.
الفكرة المختصرة: أغلب تحسينات إمكانية الوصول هي في الواقع تحسينات في قابلية الاستخدام لكل الزوار. التباين الكافي وحجم النص المريح وترتيب التركيز المنطقي تفيد الجميع، ولا يلاحظها إلا من كان يعاني منها.
المعايير بالأرقام وليس بالانطباع
المرجع العالمي هنا هو إرشادات WCAG الصادرة عن W3C، وهي مبنية على أربعة مبادئ: أن يكون المحتوى قابلاً للإدراك، وقابلاً للتشغيل، ومفهوماً، ومتيناً. ولها ثلاثة مستويات التزام: A و AA و AAA، والمستوى المستهدف عملياً في أغلب المشاريع هو AA.
خذ مثالاً واحداً محدداً لأنه الأكثر شيوعاً في الفشل. معيار التباين الأدنى 1.4.3 Contrast (Minimum) عند المستوى AA يشترط نسبة تباين لا تقل عن 4.5:1 بين النص والخلفية، وتُخفَّف إلى 3:1 للنص كبير الحجم. والنص كبير الحجم معرَّف بأنه 18 نقطة على الأقل، أو 14 نقطة إذا كان عريضاً، أي ما يعادل تقريباً 24 بكسل و 18.5 بكسل.
وهناك استثناءات منصوص عليها: النص الذي يشكل جزءاً من عنصر واجهة غير نشط، أو الزخرفة الخالصة، أو النص غير المرئي، أو النص الذي يشكل جزءاً من شعار أو اسم علامة تجارية، لا ينطبق عليه شرط التباين.
الرقم هنا هو المفيد. عبارة «الألوان مريحة» رأي، و 4.5:1 قابلة للقياس بأداة مجانية في دقيقة، وهي الفرق بين نقاش ذوق ونقاش هندسي.
ما الذي يتغير فعلاً في موقع من اليمين لليسار
هنا يقع الخلل الأكثر تكراراً في المواقع العربية: تطبيق دليل مترجم عن الإنجليزية دون التفكير في الاتجاه. المعايير نفسها لا تتغير، لكن طريقة تحقيقها تتغير.
الأساس تقني وبسيط ويُهمَل باستمرار. توثيق W3C عن الترميز البنيوي والنص من اليمين لليسار في HTML يوضح أن الخوارزمية ثنائية الاتجاه في Unicode تتطلب اتجاهاً أساسياً لكل كتلة نصية، وأن هذا الاتجاه يُضبط عبر الخاصية dir على العنصر، وأن القيمة الافتراضية لها هي ltr.
افتراضية ltr هي بيت المشكلة. الصفحة العربية التي لم تُضبط فيها dir="rtl" على مستوى الجذر ستعمل «تقريباً»، وستنهار في المواضع المختلطة تحديداً: رقم هاتف، سعر بعملة، اسم منتج بالإنجليزية داخل جملة عربية، رابط. هذه هي المواضع التي يشتكي منها المستخدم ولا يعرف كيف يصفها.
وبجانب dir، خاصية lang تحدد لغة المحتوى، والغرض منها تمكين المتصفحات وبرامج قراءة الشاشة من عرض المحتوى بما يناسب اللغة. عملياً: قارئ شاشة لا يعرف أن الصفحة عربية قد ينطقها بقواعد لغة أخرى، والنتيجة غير مفهومة تماماً.
ثلاث نقاط عملية: اضبط lang="ar" و dir="rtl" على عنصر html. غلّف أي مقطع إنجليزي داخل نص عربي بعنصر يحمل lang و dir المناسبين. واختبر الصفحات التي تخلط الأرقام والعملات والأسماء الأجنبية، لأنها بالضبط ما ينكسر.
لو مش متأكد من حالة موقعك الحالية، ابدأ بتشخيص سريع يحدد المشاكل بالترتيب قبل أي تعديل.
احصل على تشخيص مجانيالخط العربي وحجمه: تفصيلة تُفشل مواقع كاملة
تعريف «النص كبير الحجم» في WCAG مبني على نقاط وبكسلات، وهو تعريف محايد لغوياً. لكن الخط العربي ليس محايداً: التشكيل والنقاط وتفاوت ارتفاع الحروف تجعل القراءة عند الأحجام الصغيرة أصعب مما يوحي به الرقم المجرد.
النتيجة العملية أن موقعاً عربياً قد يحقق الحد الأدنى للتباين وحجم النص على الورق، ويظل صعب القراءة فعلياً. الاستنتاج هنا ليس أن المعيار خاطئ، بل أن المعيار حد أدنى وليس هدفاً. عامل حجم النص العربي على أنه أرضية تبني فوقها، لا سقف تقف عنده.
وهناك بند آخر يُنسى: المستخدم يجب أن يقدر على تكبير النص دون أن ينكسر التخطيط. جرّب التكبير حتى 200 بالمئة على صفحة عربية وشاهد ماذا يحدث للقوائم والجداول. في أغلب المواقع التي نراجعها، هذا الاختبار وحده يكشف نصف المشاكل.
النماذج ورسائل الخطأ
النموذج هو المكان الذي تتحول فيه مشكلة إمكانية الوصول إلى خسارة مبيعات مباشرة، لأنه آخر خطوة قبل التحويل.
- كل حقل له تسمية مرئية، لا نص داخلي يختفي عند الكتابة. النص الداخلي وحده يترك المستخدم بلا مرجع بعد أول حرف.
- رسالة الخطأ تقول ما الخطأ وكيف يُصلَح، لا «حدث خطأ». وتكون قريبة من الحقل نفسه لا في أعلى الصفحة فقط.
- الخطأ لا يعتمد على اللون وحده. إطار أحمر بلا نص لا يصل لمن لا يميز الألوان.
- النموذج قابل للإكمال بلوحة المفاتيح من أوله لآخره، وترتيب التنقل منطقي في الاتجاه من اليمين لليسار.
- عناصر التحكم حجمها كافٍ للمس، وهذا يخص كل مستخدم موبايل وليس فئة بعينها.
قائمة فحص تنفذها هذا الأسبوع
ليست إعادة بناء. هذه أشياء تُنجز في يوم عمل وتغطي أغلب ما يفشل فعلاً.
1. الاتجاه واللغة
تأكد من lang و dir على مستوى الصفحة، ثم افحص المقاطع المختلطة.
2. التباين
افحص النص الأساسي والنص الرمادي الثانوي وأزرار الحث على الإجراء بأداة قياس، مقابل 4.5:1.
3. لوحة المفاتيح
تصفح الصفحة الرئيسية وصفحة التواصل بمفتاح التنقل وحده، وتأكد أن مؤشر التركيز مرئي.
4. التكبير
كبّر إلى 200 بالمئة وافحص القوائم والجداول والنماذج.
5. النصوص البديلة
الصور التي تحمل معلومة لها وصف، والصور الزخرفية تُترك فارغة عمداً.
6. الفيديو
أي فيديو تسويقي يحتاج نصاً مصاحباً، وهذا يخدم أيضاً من يشاهد بلا صوت.
حدود صادقة
أولاً، أدوات الفحص الآلي تكشف جزءاً فقط. هي ممتازة في التباين والسمات الناقصة، وعاجزة عن الحكم على ما إذا كان النص البديل يصف الصورة فعلاً أو أن ترتيب التركيز منطقي. النتيجة الخضراء ليست شهادة.
ثانياً، ما يُسمى «أدوات إمكانية الوصول» التي تُضاف بسطر واحد وتَعِد بحل كل شيء، حلها سطحي في الغالب. الطبقة المضافة لا تصلح ترميزاً خاطئاً تحتها، وقد تتعارض مع برامج قراءة الشاشة التي يستخدمها الزائر أصلاً.
ثالثاً، المستوى AAA ليس هدفاً واقعياً لموقع تجاري عادي، و W3C نفسها لا توصي باعتماده كمتطلب عام. استهدف AA وأنجزه فعلاً، فهو أنفع من AAA على ورقة عرض.
رابعاً، لا نملك بيانات منشورة عن الأثر التجاري لإمكانية الوصول في السوق المصري أو السعودي تحديداً، ولن نخترع رقماً. ما يمكن قوله بثقة أن الحواجز التي تصفها المعايير حواجز حقيقية، وأن إزالتها تحسّن تجربة كل زائر.
الجزء التقني المجاور: السرعة
إمكانية الوصول والأداء يتقاطعان أكثر مما يبدو. صفحة تتأخر في الاستجابة تعاقب المستخدم البطيء في التفاعل قبل غيره، وصفحة تُعيد ترتيب عناصرها أثناء التحميل تربك من يعتمد على تسلسل ثابت.
لو موقعك بطيء على الموبايل تحديداً، هناك تسلسل تشخيصي عملي عند Rivl في دليل تشخيص بطء الموقع على الموبايل. المقال بالإنجليزية وموجه للجانب الهندسي، وهو مفيد هنا لأنه يفصل بين ما يُقاس فعلاً وما هو انطباع، وهي نفس النقلة المطلوبة في إمكانية الوصول.
عايز ترتيب أولويات واضح لموقعك بدل قائمة عامة؟ ابدأ بتشخيص يحدد الأعلى أثراً أولاً.
احصل على تشخيص مجانيأسئلة شائعة
ما نسبة التباين المطلوبة في المواقع العربية؟
النسبة لا تختلف باختلاف اللغة. معيار WCAG عند المستوى AA يشترط 4.5:1 للنص العادي و 3:1 للنص كبير الحجم، والنص كبير الحجم معرّف بـ 18 نقطة أو 14 نقطة عريضة.
هل يكفي ضبط dir="rtl" على الصفحة؟
هو الأساس وليس كل شيء. المقاطع المختلطة مثل الأرقام والعملات والأسماء الإنجليزية داخل جملة عربية تحتاج ضبطاً على مستواها، وإلا ظهرت بترتيب خاطئ.
هل أدوات إمكانية الوصول الجاهزة تحل المشكلة؟
جزئياً وسطحياً في الغالب. الطبقة المضافة لا تصحح ترميزاً خاطئاً تحتها، وقد تتعارض مع برامج قراءة الشاشة. الإصلاح في الترميز نفسه أدوم.
ما المستوى الذي يجب استهدافه؟
المستوى AA هو الهدف العملي لأغلب المواقع التجارية. المستوى AAA ليس متطلباً عاماً واقعياً، وإنجاز AA فعلياً أنفع من ادعاء AAA.
هل إمكانية الوصول تؤثر على السيو؟
لا يوجد عامل ترتيب معلن اسمه إمكانية الوصول. لكن كثيراً من ممارساتها، مثل البنية الواضحة والنصوص البديلة والترميز السليم، هي نفسها ممارسات سيو جيدة.