كان تطبيقنا صندوقاً أسود للمكفوفين: قصة إنقاذنا بـ ‘الوصولية الرقمية’ (a11y)

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

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

والله يا جماعة، حسيت كأن حدا ضربني كف على وجهي. كل الفخر اللي كنت حاسس فيه تبخر في لحظة. تطبيقنا، اللي صرفنا عليه شهور من التعب والتصميم، كان فعلياً قطعة بلاستيك عديمة الفائدة لشريحة كاملة من الناس. أحمد لم يكن ينتقد، كان يصف واقعاً مؤلماً. وقتها أدركت الكارثة: نحن لم نبنِ تطبيقاً، بل بنينا جداراً رقمياً جميلاً يستبعد الناس. هذه الحادثة كانت بداية رحلتنا مع عالم لم نكن نلقي له بالاً: عالم “الوصولية الرقمية” أو كما يُعرف اختصاراً بـ a11y.

ما هي “الوصولية الرقمية” (a11y) التي أنقذتنا؟

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

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

الاختصار “a11y” هو مجرد طريقة مختصرة لكتابة “Accessibility”، حيث يوجد 11 حرفاً بين حرف الـ ‘a’ وحرف الـ ‘y’. إنها ليست مجرد “ميزة” نضيفها في النهاية، بل هي حق أساسي للمستخدم، وجزء لا يتجزأ من بناء منتج احترافي ومحترم.

دستور الوصولية: الأعمدة الأربعة لـ WCAG (POUR)

عندما بدأنا رحلتنا في إصلاح التطبيق، كان مرجعنا الأساسي هو “إرشادات الوصولية لمحتوى الويب” (WCAG). هذه الإرشادات هي بمثابة الدستور العالمي للوصولية، وهي مبنية على أربعة أعمدة رئيسية، يُشار إليها بالاختصار POUR. خلونا نفصّلها ونشوف كيف طبقناها عملياً.

1. قابل للإدراك (Perceivable)

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

نصيحة من أبو عمر: النص البديل للصور ليس رفاهية!

أول شيء اكتشفناه هو أن كل الصور الرائعة في تطبيقنا كانت بلا معنى لقارئ الشاشة. كان يقرؤها كـ “صورة” أو “image5.png”. هذا كان أول وأسهل شيء قمنا بإصلاحه.

مثال سيء (ما كنا نفعله):

<img src="user-avatar.jpg">

مثال جيد (ما نفعله الآن):

<img src="user-avatar.jpg" alt="الصورة الشخصية للمستخدم عمر">

إذا كانت الصورة مجرد عنصر زخرفي لا يضيف معلومة، نترك الـ `alt` فارغاً (`alt=””`) حتى يتجاهله قارئ الشاشة ولا يزعج المستخدم.

لا تنسَ تباين الألوان! استخدمنا أدوات مثل “Adobe Color Contrast Checker” للتأكد من أن لون النص وخلفيته واضح بما فيه الكفاية للجميع، خصوصاً لمن يعانون من عمى الألوان أو ضعف البصر.

2. قابل للتشغيل (Operable)

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

نصيحة من أبو عمر: افصل الفأرة وجرّب تطبيقك!

هذا كان الاختبار الصادم الثاني. فصلت الفأرة عن الكمبيوتر وحاولت استخدام موقعنا… وكانت كارثة. لم أستطع الوصول لمعظم الأزرار أو القوائم. السبب؟ كنا نستخدم عناصر `

<div class="custom-button" onClick="submitForm()">إرسال</div>

<button class="custom-button" onClick="submitForm()">إرسال</button>

عرض المقال كاملاً

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

تسجيل الدخول

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

كافة المحادثات خاصة ولا يتم عرضها على الموقع نهائياً

تم إغلاق هذه المحادثة بعد نشر رأيك. شكراً لمشاركتك!

شكرا لك اسعدني نقاشك وتم نشر ملخص نقاشنا بناء على طلبك!