كان تطبيقنا جميلاً ولكن أعمى: كيف أنقذتنا ‘إمكانية الوصول’ من جحيم استبعاد 15% من المستخدمين؟

يا جماعة الخير، اسمحولي أحكيلكم هالسالفة. قبل كم سنة، كنت أنا وفريقي شغالين ليل نهار على تطبيق جديد. تطبيق كان “ابننا المدلل”، صرفنا عليه وقت وجهد وقهوة ما إلها عدد. التصميم كان إشي فاخر من الآخر، ألوان متناسقة، حركات (animations) ناعمة، وكل زر وكل أيقونة مرسومة بالمسطرة. لما أطلقناه، الاحتفالات كانت كبيرة والكل كان مبسوط. كنا نحكي لحالنا: “هيك الشغل الصح، عملنا تطبيق ‘مرتب’ والكل رح يحبه”.

وبالفعل، أول فترة كانت التعليقات إيجابية… إلى أن وصلتني رسالة على البريد الإلكتروني غيّرت كل شي. الرسالة كانت من مستخدم اسمه “محمد”، وكان كفيف البصر. كتب محمد بلغة بسيطة ومؤدبة: “مرحباً أبو عمر، سمعت الكثير عن تطبيقكم الرائع وحاولت استخدامه عبر قارئ الشاشة (Screen Reader)، ولكن للأسف، لم أستطع فعل أي شيء. كل ما أسمعه هو ‘زر غير مسمى’، ‘صورة’، ‘زر’. التطبيق بالنسبة لي عبارة عن جدار أصم”.

قرأت الرسالة مرة ومرتين وثلاث. شعرت بوخزة في قلبي، خليط من الخجل والإحراج والغضب على نفسي. كيف غاب عن بالنا كل هذا؟ تطبيقنا الجميل، اللي بنتباهى فيه، كان في الحقيقة “أعمى” تماماً أمام فئة كبيرة من الناس. اكتشفنا أننا، وبدون قصد، بنينا جداراً رقمياً عزلنا فيه ما يقارب 15% من المستخدمين المحتملين. كانت هذيك اللحظة هي صفعة الصحوة اللي خلتنا نعيد التفكير في كل سطر كود كتبناه وفي كل قرار تصميم اتخذناه. من يومها، صارت “إمكانية الوصول” أو الـ Accessibility مش مجرد بند في قائمة المهام، بل صارت جزء من روح الفريق.

ما هي ‘إمكانية الوصول’ (Accessibility)؟ ولماذا هي ليست مجرد ‘ميزة إضافية’؟

لما نحكي “إمكانية الوصول” (أو a11y اختصاراً)، كثير ناس بفكروا إنها بس للمكفوفين. وهذا خطأ شائع. إمكانية الوصول هي تصميم وبناء المنتجات الرقمية (مواقع، تطبيقات، إلخ) بحيث يمكن لأي شخص استخدامها، بغض النظر عن قدراته أو إعاقته.

هذا يشمل، على سبيل المثال لا الحصر:

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

ولكن القصة أعمق من هيك. إمكانية الوصول تفيد الجميع! هل عمرك حاولت تشوف شاشة موبايلك تحت شمس قوية؟ هنا تباين الألوان الجيد (مبدأ من مبادئ الوصول) بساعدك. هل عمرك حضرت فيديو في مكان عام بدون سماعات؟ هنا الترجمة النصية (Captions) بتنقذك. هل انكسرت إيدك مرة واضطريت تستخدم الكمبيوتر بإيد وحدة؟ هنا التنقل عبر لوحة المفاتيح بصير صديقك المفضل.

نصيحة أبو عمر: لا تفكر بإمكانية الوصول على أنها “مساعدة ذوي الإعاقة”، بل فكر فيها على أنها “بناء منتج أفضل للجميع”. هي ليست عمل خيري، بل هي أساس التصميم الجيد والهندسة الذكية.

أركان الوصول الأربعة: كيف تبني تجربة للجميع؟ (مبادئ WCAG)

حتى ما نضل نحكي كلام عام، المنظمة العالمية W3C وضعت إرشادات اسمها (Web Content Accessibility Guidelines – WCAG). هاي الإرشادات مبنية على أربع أعمدة أساسية، بحب أسميها “أركان البيت الرقمي المتين”. لو أي ركن منهم وقع، البيت كله بصير مهدد بالسقوط.

الركن الأول: قابل للإدراك (Perceivable)

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

مثال عملي: النص البديل للصور (Alt Text)

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

الكود السيء (الأعمى):

<img src="cat-playing.jpg">
<!-- قارئ الشاشة سيقول: "صورة، cat-playing.jpg" -->

الكود الجيد (المُبصِر):

<img src="cat-playing.jpg" alt="قطة رمادية صغيرة تلعب بكرة صوف حمراء">
<!-- قارئ الشاشة سيقول: "صورة، قطة رمادية صغيرة تلعب بكرة صوف حمراء" -->

فرق كبير، صح؟ طيب لو الصورة مجرد زخرفة؟ بسيطة، اترك الـ `alt` فاضي، وهيك قارئ الشاشة بتجاهلها تماماً.

<img src="decorative-line.png" alt="">

الركن الثاني: قابل للتشغيل (Operable)

لازم المستخدم يقدر يتفاعل مع كل مكونات واجهة المستخدم. أهم اختبار هون هو “اختبار الـ Tab”. هل بتقدر تستخدم كل وظائف التطبيق باستخدام لوحة المفاتيح فقط (Tab للتنقل، Enter للاختيار)؟

لما استلمنا رسالة محمد، أول إشي عملته هو إني تركت الماوس وحاولت أستخدم تطبيقنا بالكيبورد. كانت كارثة! التركيز (focus) كان يقفز بشكل عشوائي، وأحياناً يختفي تماماً. أزرار عملناها بـ `

<div class="fake-button" onclick="submitForm()">إرسال</div>
<!-- هذا العنصر لا يمكن الوصول إليه بـ Tab، ولا يعمل بـ Enter -->

<button class="real-button" onclick="submitForm()">إرسال</button>
<!-- هذا العنصر يعمل بالماوس، باللمس، بالكيبورد، ومع قارئ الشاشة -->

سجل دخولك لعمل نقاش تفاعلي

تسجيل الدخول

أبو عمر يكتب...