أتذكر أول مرة حاولت فيها شرح الامتثال لمعايير WCAG لأحد العملاء في دبي. قال: "هل تعني أنه يجب عليك جعل هذا الموقع يعمل للجميع؟" نعم. هذا هو الهدف من ذلك.
قبل بضعة أشهر، سلمت مشروع Laravel/Next.js لشركة لوجستية في الرياض. فشل موقعهم القديم في كل اختبار تباين الألوان لأن الخط العربي كان فاتحًا جدًا على الخلفية. استغرق إصلاح ذلك ست ساعات من التصحيح، لكن العميل لم يهتم حتى رأى انخفاضًا في معدل الخطأ من 38٪ إلى 0.
اللغات التي تُكتب من اليمين إلى اليسار ليست فكرة ثانوية
دعم الكتابة من اليمين إلى اليسار (RTL) ليس اختياريًا لمواقع الويب العربية. لكن مجرد قلب التصميم ليس كافيًا. لقد رأيت مطورين يستخدمون dir="rtl" على <html> ويعتبرون أنهم انتهوا. خطأ كبير.
عندما أعدت بناء منصة الحجز الخاصة بـ Tawasul Limo، اختبرت كل مكون بكلتا اللغتين. كان يجب عكس قوائم التنقل، ومحاذاة تسميات النماذج إلى اليمين، وحتى أدوات اختيار التاريخ كان يجب أن تتعامل مع أنظمة التقويم العربية.
الأدوات التي أعتمد عليها:
- •
postcss-rtlcssلإنشاء أنماط RTL تلقائيًا من CSS الخاص بي LTR - •إضافة Tailwind
rtlللمرافق الاتجاهية - •بيئة اختبار RTL الخاصة بـ BrowserStack
إحدى الأخطاء المحبطة: أراد أحد العملاء في عجمان شريط تمرير (slider) مع عناصر تحكم LTR/RTL. كان مكون React التابع لجهة خارجية يضع الإبهام بشكل غير صحيح. أعدت كتابته باستخدام <input type="range"> مع سمات dir ديناميكية. استغرق يومين بدلاً من خمس دقائق.
استخدم عناصر HTML الأصلية، وليس JavaScript البراقة
هذه ليست مجرد قاعدة إمكانية الوصول - إنها عملية. لقد ورثت ذات مرة مشروع Vue حيث استبدل أحد المطورين جميع <button>s بـ <div role="button"> لإضافة "نمط". صرخت قارئات الشاشة حول حالات التركيز المفقودة.
بالنسبة لمنصة عقارية في أبو ظبي (Reach Home Properties)، التزمت بعناصر HTML الدلالية:
<header>
<nav aria-label="Main navigation">
<ul class="menu">
<li><a href="/properties">عقارات</a></li>
</ul>
</nav>
</header>ميزة إضافية: هذا يحسن SEO. مقالتي حول Arabic SEO تتعمق في كيفية تأثير الترميز على الترتيب.
لا تثق بالأدوات الآلية وحدها
استخدمت أول تدقيق لإمكانية الوصول WAVE و Axe DevTools. كذب مطلق. لقد فاتهم 30٪ من المشكلات لأنهم لم يفهموا بنية المحتوى العربي.
الآن أنا أجمع بين:
- الاختبار اليدوي: فحوصات
@charsetباستخدام أدوات المطور في المتصفح - التحقق من جانب الخادم باستخدام
axe-coreفي Laravel - اختبارات موضعية لقارئ الشاشة (JAWS + تبديل اللغة العربية)
كاد أحد العملاء في جدة أن يطلق موقعًا فشل في التنقل باستخدام لوحة المفاتيح في القوائم العربية. استغرق مني ثلاث ساعات لإصلاح نمط :focus باستخدام &:focus-visible في Tailwind.
سمات البيانات تنقذ الأرواح (أحيانًا)
عملت مؤخرًا على Laravel API تعامل مع عمليات إرسال النماذج العربية. بدت أخطاء التحقق كالتالي:
{
"error": "حقل الهاتف غير مكتمل"
}كيف تجعل رسائل الخطأ مفهومة لقارئات الشاشة؟ أضفت مناطق aria-live="polite" واستخدمت data-error-code لتعيين الأخطاء برمجيًا لتنبيهات سهلة الوصول.
أيضًا - لا تنس أبدًا تعيين lang="ar" على كتل المحتوى العربي. فاتني ذلك مرة واحدة في موقع إعلانات عقارات ثنائي اللغة. بدأ Google في فهرسة الصفحات العربية على أنها إنجليزية. أوقات ممتعة.
الاختبار مع أناس حقيقيين (نعم، إنه إلزامي)
لن تلتقط كل شيء من خلال التعليمات البرمجية. في العام الماضي، تعاونت مع مجموعة اختبار إمكانية الوصول في الكويت. ما هي النتائج التي توصلوا إليها؟
- •40٪ من المستخدمين عانوا من حقول إدخال التاريخ العربية
- •18٪ لم يتمكنوا من التنقل في دائري مدونة ثنائية اللغة
- •لم يتمكن أحد المستخدمين ضعاف البصر من فتح رابط تنزيل PDF لأنه يفتقر إلى
aria-expanded
أعدنا تصميم مكون منتقي التاريخ لقراءة تاريخ ووقت التقويم الهجري بصوت عالٍ جنبًا إلى جنب مع الميلادي. ألم في المؤخرة. ضروري 100٪.
أسئلة يتكرر طرحها
هل تنطبق معايير WCAG على مواقع الويب العربية فقط في الإمارات العربية المتحدة؟
نعم. أصدرت دولة الإمارات العربية المتحدة المرسوم بقانون اتحادي رقم 5 لسنة 2022 بشأن حقوق الأشخاص ذوي الإعاقة، والذي يشير إلى معايير إمكانية الوصول الدولية. تتطلب مبادرة دبي للمدينة الذكية أيضًا الامتثال لمواقع الحكومة.
كيفية التعامل مع اقتطاع النص العربي في قوائم الهاتف المحمول؟
تجنب text-overflow: ellipsis في CSS. بدلاً من ذلك، استخدم أزرار توسيع قائمة على JavaScript مع aria-expanded. لقد استخدمت هذا النهج في قائمة تطبيق Greeny Corner للعناية بالنباتات، والذي يأتي مع React Native 0.74.
ما هو أكبر خطأ في إمكانية الوصول في المواقع العربية؟
تباين الألوان الضعيف. تتطلب علامات التشكيل العربية (تَشْدِيدَة، إلخ) نسب تباين لا تقل عن 4.5: 1 مقابل الخلفيات. لا تزال العديد من الشركات في الإمارات العربية المتحدة تستخدم نصًا رماديًا باهتًا على خلفية بيضاء، مما يؤدي إلى إخفاق WCAG AA.
ما هي الأدوات التي تختبر الامتثال للغة العربية على وجه التحديد؟
استخدم مكون AChecker الإضافي للغة العربية جنبًا إلى جنب مع مدقق التدويل W3C. أتحقق من صحة سمات HTML lang عبر صفحات Next.js ثنائية اللغة باستخدام next-intl - راجع دليل الإعداد متعدد اللغات.
إذا كنت تعيد بناء موقع ثنائي اللغة لشركة في الإمارات العربية المتحدة وتحتاج إلى شخص اختبر بالفعل 40+ مشروعًا في هذه المنطقة، هيا نتحدث. سأوفر لك 20 ساعة من الإحباط بسبب WCAG.