كان تطبيقنا حصناً منيعاً: كيف أنقذتنا ‘الوصولية الرقمية’ (a11y) من جحيم استبعاد المستخدمين؟

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

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

رسالة أحمد كانت بسيطة ومباشرة: “مرحباً، أنا مستخدم كفيف وأعتمد على قارئ الشاشة لتصفح هاتفي. تطبيقكم جميل جداً من الصور التي وصفها لي أصدقائي، لكن للأسف لا أستطيع استخدامه. كل ما أسمعه هو ‘زر، زر، صورة، بدون عنوان’. هل هناك نسخة خاصة بالمكفوفين؟”.

قرأت الإيميل مرة ومرتين وثلاث. “نسخة خاصة بالمكفوفين؟” يا زلمة، كيف ما فكرنا فيها هاي؟ الحصن المنيع اللي بنيناه، كان في الواقع سجن لبعض المستخدمين. شعرت بوخزة في ضميري. كل هذا التعب والجهد، وفي النهاية استبعدنا فئة كاملة من الناس بدون قصد. هذه الحادثة كانت صفعة صحّتنا، وبداية رحلتنا الحقيقية مع عالم “الوصولية الرقمية” أو كما يسميها الخواجات “a11y”.

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

ببساطة شديدة، الوصولية الرقمية (Accessibility، وتختصر a11y لأن هناك 11 حرفاً بين a و y) تعني تصميم وبناء مواقع وتطبيقات يمكن للجميع استخدامها، بغض النظر عن قدراتهم الجسدية أو العقلية أو الظروف التقنية التي يستخدمونها.

فكر فيها مثل بناء مدينة. لما تبني درج فقط، أنت تخدم فئة معينة. لكن لما تبني جنب الدرج ممر منحدر (Ramp)، أنت لا تخدم فقط مستخدمي الكراسي المتحركة، بل تخدم أيضاً الأم التي معها عربة طفل، وعامل التوصيل الذي يحمل بضاعة ثقيلة، وحتى أنت نفسك لما تكون رجلك مكسورة (لا سمح الله!).

الوصولية في العالم الرقمي هي نفس المبدأ. هي ليست “ميزة إضافية” أو “عمل خيري”، بل هي أساس من أساسيات التصميم الجيد وتجربة المستخدم الشاملة. هي التي تفرق بين منتج جيد ومنتج عظيم.

تشريح الكارثة: عيوب حصننا المنيع

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

1. الأزرار الخرساء والأيقونات الصامتة

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

نصيحة أبو عمر: لا تفترض أبداً أن المستخدم يرى ما تراه. دائماً أضف تسميات نصية واضحة للأزرار والعناصر التفاعلية. في عالم الويب، استخدم `aria-label` لإنقاذ الموقف.

مثال كود (قبل وبعد):

<!-- خطأ: زر بدون أي سياق لقارئ الشاشة -->
<button class="btn-icon">
  <svg>... أيقونة الحفظ ...</svg>
</button>

<!-- صحيح: استخدام aria-label لإعطاء اسم واضح للزر -->
<button class="btn-icon" aria-label="حفظ المستند">
  <svg aria-hidden="true">... أيقونة الحفظ ...</svg>
</button>

لاحظوا `aria-hidden=”true”` على الأيقونة نفسها، هذا يخبر قارئ الشاشة بتجاهلها والتركيز فقط على التسمية التي وضعناها للزر.

2. مهرجان الألوان… على حساب الوضوح

المصمم كان يحب التدرجات اللونية والألوان الفاتحة على خلفيات فاتحة. النتيجة كانت جميلة بصرياً، لكنها كارثة بالنسبة لأي شخص يعاني من ضعف في البصر أو عمى ألوان. النصوص كانت شبه مدمجة مع الخلفية، مما يجعل قراءتها جحيماً.

نصيحة أبو عمر: الجمال ليس كل شيء. الوضوح أهم. استخدم أدوات فحص تباين الألوان (Contrast Checker) للتأكد من أن نصوصك مقروءة للجميع. معايير WCAG توصي بنسبة تباين 4.5:1 على الأقل للنص العادي.

3. فخ لوحة المفاتيح (Keyboard Trap)

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

نصيحة أبو عمر: افصل الماوس عن جهازك الآن، وحاول استخدام موقعك أو تطبيقك. هذه التجربة البسيطة ستكشف لك 80% من مشاكل التنقل. تأكد من أن ترتيب التنقل (Tab order) منطقي، وأن كل العناصر التفاعلية يمكن الوصول إليها والتحكم بها عبر لوحة المفاتيح.

4. صور بلا روح (نص بديل مفقود)

الصور بألف كلمة، بس لما تكون صامتة، بتكون ولا إشي للي ما بشوفها. تطبيقنا كان مليئاً بالصور والرسوم البيانية التي تشرح بيانات مهمة، ولكن بدون أي نص بديل (alt text). بالنسبة لأحمد، كانت هذه الصور مجرد فراغ صامت.

مثال كود (قبل وبعد):

<!-- خطأ: صورة مهمة بدون وصف -->
<img src="sales-chart.png">

<!-- صحيح: وصف دقيق ومختصر لمحتوى الصورة -->
<img src="sales-chart.png" alt="رسم بياني يوضح ارتفاع المبيعات بنسبة 20% في الربع الأخير">

<!-- صحيح أيضاً: إذا كانت الصورة للزينة فقط -->
<img src="decorative-swoosh.png" alt="">

إذا كانت الصورة للزينة فقط ولا تضيف أي معلومة، اترك الـ `alt` فارغاً، هذا يخبر قارئ الشاشة بتجاهلها تماماً.

الطريق إلى الخلاص: رحلتنا مع الوصولية

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

• التصميم: بدأ المصممون يفكرون في التباين، وحجم الخطوط، وحالات التركيز (focus states) منذ البداية.
• البرمجة: أصبحنا مهووسين باستخدام HTML الدلالي (Semantic HTML). نستخدم `
  
• الاختبار والجودة: أضفنا اختبارات الوصولية كجزء أساسي من عملية الفحص. نستخدم أدوات آلية مثل (Axe, Lighthouse) ونتأكد من إجراء اختبار يدوي باستخدام قارئ شاشة ولوحة المفاتيح فقط.

خلاصة تجربة أبو عمر 🙏

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

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

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