إمكانية الوصول بالعربية: ما الذي يكسره قارئ الشاشة في موقعك

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

ترتيب القراءة: أول ما ينكسر

قارئ الشاشة يتبع ترتيب العناصر في شيفرة الصفحة، لا ترتيبها البصري. حين يُرتَّب التخطيط بصريًا عبر خصائص تنسيق تغيّر مواضع العناصر، قد يقرأ القارئ الصفحة بترتيب مختلف تمامًا عمّا يراه المبصر.

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

العناوين: هيكل لا أحجام

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

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

ثلاث قواعد تحسم أغلب الحالات:

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

النماذج

كل حقل يحتاج تسمية مرتبطة به برمجيًا عبر label وfor. النائب داخل الحقل ليس تسمية: يختفي عند الكتابة، ولا تقرأه بعض القارئات.

ورسائل الخطأ يجب أن تُنطَق حين تظهر، لا أن تظهر بصريًا فقط. اربط الرسالة بالحقل عبر aria-describedby، وانقل التركيز إلى ملخّص الأخطاء عند فشل الإرسال، واكتب الخطأ بما يقول ما العمل: «اكتب رقم جوال يبدأ بـ05» أفضل من «قيمة غير صحيحة».

لوحة المفاتيح وحدها

جرّب موقعك بمفتاح الجدولة فقط. ثلاثة أشياء يجب أن تتحقّق: كل عنصر تفاعلي يمكن الوصول إليه؛ وحلقة التركيز مرئية بوضوح على كل خلفية؛ ولا توجد مصيدة تحبس التركيز داخل نافذة لا تُغلق. وأضف رابط «تخطَّ إلى المحتوى» في أعلى الصفحة ليتجاوز الزائر القائمة الطويلة.

ما يخصّ العربية تحديدًا

• اضبط lang="ar" وdir="rtl" على المستند. بدونهما قد ينطق القارئ العربية بلفظ لغة أخرى.
• المقاطع الأجنبية: أحِط الكلمات الإنجليزية داخل النصّ العربي بعنصر يحمل lang="en" حتى تُنطَق صحيحة.
• الأرقام وأرقام الهواتف: أحِطها بـdir="ltr" حتى لا تُقرأ معكوسة.
• الأيقونات وحدها: زرّ بأيقونة بلا نصّ يحتاج aria-label بالعربية يصف ما يفعله الزرّ.

التباين وحجم الأهداف

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

الحركة والوميض

الرسوم المتحرّكة المستمرّة والعناصر الوامضة تسبّب إزعاجًا حقيقيًا لبعض المستخدمين، وقد تسبّب دوارًا. احترم تفضيل النظام بتقليل الحركة عبر prefers-reduced-motion، وأوقف عندها كل حركة غير ضرورية. وأي شريط متحرّك أو عرض تلقائي يحتاج زرّ إيقاف ظاهرًا، لا مخفيًا خلف تمرير الفأرة.

كيف تختبر عمليًا

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

نعامل هذا كجزء من تصميم تجربة المستخدم، لا كمرحلة تصحيح بعد الإطلاق.