عبدالله الكندي: أخطاء إمكانية الوصول Accessibility في التطبيقات العربية

شغّل قارئ الشاشة في جوالك، وغمّض عيونك، وحاول تطلب منتجاً من أي تطبيق عربي تستخدمه. في أغلب الحالات بتسمع «زر، زر، صورة، زر» بدون ما تعرف وش يسوي أي واحد منها، أو بتسمع النص العربي بلكنة إنجليزية ما تنفهم. هذي تجربة يومية لمستخدمين حقيقيين، ومعهم كبار السن اللي يكبّرون الخط لأقصاه. عبدالله الكندي يبني التطبيقات بـ Flutter والمواقع بـ Next.js، وهذي الأخطاء اللي يدور عليها في أي واجهة عربية، لأنها تتكرر تقريباً في كل مكان، وأغلبها يتصلّح في دقائق.

الخطأ الأول: أزرار وأيقونات بلا أسماء

زر فيه أيقونة سلة، أو قلب، أو ثلاث نقاط. المستخدم المبصر يفهمه من الشكل، وقارئ الشاشة يقول «زر» وبس. كل عنصر تفاعلي يحتاج اسماً منطوقاً يوصف وظيفته، مو شكله: «أضف للمفضلة» مو «قلب». في Flutter، ويدجت IconButton يقبل خاصية tooltip تُستخدم كاسم للقارئ، ولأي عنصر مخصص فيه ويدجت Semantics تحدد له اسماً ودوراً. في الويب، الزر اللي فيه أيقونة بس يحتاج aria-label بالعربي. والعكس صحيح كمان: الصور والأيقونات الزخرفية اللي ما تضيف معلومة لازم تنخفى عن القارئ، عبر ExcludeSemantics في Flutter أو alt فاضي في الويب، عشان ما يضيع وقت المستخدم في سماع «صورة» عشرين مرة.

والاسم لحاله ما يكفي لو العنصر له حالة. مفتاح تشغيل وإيقاف، أو خيار محدد في قائمة، أو تبويب مفتوح، لازم يعلن حالته: «الإشعارات، مفعّلة». وكذلك الرسائل اللي تظهر وتختفي، مثل «تمت الإضافة للسلة» أو خطأ في الاتصال: المبصر يشوفها لثانيتين، والقارئ ما يدري عنها إلا لو أعلنتها. في الويب منطقة aria-live تخلي القارئ ينطق التغيير، وفي Flutter تقدر تعلن الرسالة عبر خدمة الدلالات في النظام.

الخطأ الثاني: قارئ الشاشة يقرأ العربي بلسان إنجليزي

هذا الخطأ عربي بامتياز. قارئ الشاشة يختار صوت النطق حسب اللغة المعلنة للمحتوى، فلو الصفحة معلنة كإنجليزية والنص عربي، يطلع كلام مشوّه. في الويب، الحل في سطر واحد: lang=ar على وسم html، ولو فيه مقطع إنجليزي داخل نص عربي، مثل اسم منتج أو مصطلح تقني، يُغلَّف بعنصر عليه lang=en فيقرأه القارئ بنطقه الصحيح. في Flutter، اضبط locale وقائمة اللغات المدعومة في MaterialApp مع حزمة flutter_localizations، عشان يعرف النظام إن الواجهة عربية. ولا تكتب أسماء الأزرار بحروف لاتينية تقرأ كلاماً عربياً، لأن القارئ بيحاول ينطقها إنجليزي.

الخطأ الثالث: تصميم ينكسر لما يكبّر المستخدم الخط

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

• اترك العناصر اللي فيها نص تاخذ ارتفاعها من محتواها، بدل ارتفاع ثابت بالبكسل.
• احترم مقياس النص اللي يجي من النظام عبر textScaler في Flutter، ووحدات rem في الويب.
• خلّ النص المهم يلتف لسطر ثاني بدل ما ينقطع بثلاث نقاط.
• اختبر كل شاشة رئيسية بأكبر حجم خط في إعدادات الجهاز، مو بالحجم الافتراضي بس.

الخطأ الرابع: ترتيب قراءة ما يمشي من اليمين

مستخدم قارئ الشاشة يتنقل بين العناصر بالسحب، والترتيب اللي يسمعه هو ترتيب العناصر في الشجرة، مو ترتيبها البصري. في واجهة عربية، لما تبني بطاقة بعناصر متموضعة بإحداثيات ثابتة فوق بعض، أو تعكس صفاً بطريقة يدوية بدل ما تعتمد على اتجاه الواجهة، ممكن تشوف الترتيب صحيحاً بعينك والقارئ يقرأ السعر قبل اسم المنتج، والزر قبل السؤال. اعتمد على Directionality في Flutter و dir=rtl في الويب بدل العكس اليدوي، ولما تحتاج تغيّر ترتيب القراءة فعلاً، فيه أدوات مخصصة له، مثل ترتيب التنقل في Semantics. وفي الويب، رتّب ترتيب التركيز بزر Tab بحيث يمشي مع القراءة العربية.

الخطأ الخامس: معلومة باللون بس، وأهداف لمس صغيرة

• حالة الطلب بالأخضر والأحمر بس: المصاب بعمى الألوان ما يفرّق بينهم، وقارئ الشاشة ما يقرأ اللون أصلاً. أضف كلمة أو أيقونة: «تم التوصيل»، «ملغي».
• الخانة الغلط في النموذج بإطار أحمر بدون رسالة: اكتب الخطأ نصاً تحت الخانة، واربطه بها عشان يسمعه القارئ.
• تباين ضعيف: نص رمادي فاتح على خلفية بيضاء يبان أنيقاً في التصميم ويختفي تحت الشمس.
• أزرار صغيرة متلاصقة: إرشادات أندرويد تقترح هدف لمس بحدود ٤٨ وحدة، وآبل حوالي ٤٤ نقطة. أيقونة إغلاق بحجم ٢٠ بكسل في زاوية الشاشة اختبار صبر.
• إيماءات بدون بديل: السحب للحذف مريح، لكن لازم يكون فيه زر أو إجراء مخصص للقارئ يسوي نفس الشي.
• نص عربي محفوظ داخل صورة: ما يكبر مع الخط، وما يقرأه القارئ، وما تقدر تترجمه.

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