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

يا جماعة الخير، السلام عليكم ورحمة الله. معكم أخوكم أبو عمر.

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

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

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

ما هي “إمكانية الوصول” (Accessibility) يا أبو عمر؟

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

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

إمكانية الوصول ليست “ميزة إضافية” (feature)، بل هي حق أساسي للمستخدم، ومبدأ أساسي في الهندسة والتصميم الجيد.

ليش لازم نهتم؟ القصة مش بس “عمل خير”

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

1. توسيع قاعدة المستخدمين (والعملاء)

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

2. تحسين تجربة المستخدم للجميع (UX for All)

كثير من ممارسات إمكانية الوصول بتحسّن التجربة لكل المستخدمين، مش بس لذوي الإعاقة. مثلاً:

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

3. تعزيز مكانتك في محركات البحث (SEO)

محركات البحث مثل Google هي عبارة عن “مستخدم أعمى”. هي ما بتشوف تصميمك وألوانك، هي بتقرأ الكود والبنية التحتية. لما تستخدم HTML بشكل سليم (Semantic HTML)، أنت بتساعد محركات البحث تفهم محتواك بشكل أفضل، وهذا يؤدي لترتيب أعلى في نتائج البحث.

4. تجنب المشاكل القانونية

في العديد من دول العالم، هناك قوانين تفرض على المواقع والخدمات الرقمية (خاصة الحكومية والشركات الكبرى) الالتزام بمعايير إمكانية الوصول العالمية، وأشهرها WCAG (Web Content Accessibility Guidelines). تجاهل هذه المعايير قد يعرضك لمساءلة قانونية وغرامات.

من وين نبدأ؟ خطوات عملية لتحطيم الجدران

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

الأساس المتين: السيمانتك HTML (Semantic HTML)

قارئ الشاشة بيعتمد على بنية الصفحة ليفهمها. استخدم الوسوم (Tags) الصحيحة للمعنى الصحيح. لا تبني كل شيء باستخدام <div>!

<!-- ❌ ممارسة سيئة: كل شيء عبارة عن div -->
<div class="header">...</div>
<div class="main-content">
  <div class="article">
    <div class="title">عنوان المقال</div>
  </div>
</div>
<div class="footer">...</div>

<!-- ✅ ممارسة ممتازة: استخدام الوسوم الدلالية -->
<header>...</header>
<main>
  <article>
    <h1>عنوان المقال</h1>
  </article>
</main>
<footer>...</footer>

بهذه الطريقة، يستطيع قارئ الشاشة أن يخبر المستخدم: “أنت الآن في الرأس (header)” أو “هذا هو العنوان الرئيسي للصفحة (h1)”.

النص البديل للصور (Alt Text): الصورة بألف كلمة، لكن لمين؟

دائماً أضف وصفاً نصياً للصور المهمة باستخدام السمة alt. هذا الوصف هو ما سيقرأه قارئ الشاشة للمستخدم الكفيف.

<!-- ❌ سيء -->
<img src="sale-graph.png">

<!-- ❌ لا يزال سيئاً -->
<img src="sale-graph.png" alt="رسم بياني">

<!-- ✅ ممتاز -->
<img src="sale-graph.png" alt="رسم بياني يوضح نمو المبيعات بنسبة 30% في الربع الثالث">

<!-- إذا كانت الصورة للزينة فقط، اترك الوصف فارغاً -->
<img src="decorative-line.png" alt="">

حرر المستخدم من الفأرة: التحكم عبر لوحة المفاتيح

بعض المستخدمين لا يستطيعون استخدام الفأرة بسبب إعاقات حركية. تأكد أن كل شيء في موقعك يمكن الوصول إليه والتحكم فيه باستخدام لوحة المفاتيح فقط (خاصة أزرار Tab, Shift+Tab, Enter, Space).

نصيحة عملية: أغلق عينيك (أو لا تستخدم الفأرة) وحاول التنقل في موقعك باستخدام زر Tab فقط. هل تستطيع الوصول لكل الأزرار والروابط؟ هل ترى بوضوح أين أنت في كل خطوة (ما يسمى بـ focus state)؟ هذه التجربة ستكشف لك الكثير من المشاكل.

لافتات إرشادية إضافية: سمات ARIA

أحياناً، لا يكفي HTML وحده لوصف العناصر المعقدة (مثل قائمة منسدلة مخصصة، أو شريط تقدم). هنا يأتي دور ARIA (Accessible Rich Internet Applications). هي مجموعة من السمات التي يمكنك إضافتها لعناصر HTML لتعطي معلومات إضافية لقارئات الشاشة.

<!-- مثال على زر تبديل (toggle button) -->
<button aria-pressed="false" aria-label="تشغيل الوضع الليلي">
  <!-- أيقونة القمر هنا -->
</button>

هنا، aria-pressed="false" تخبر قارئ الشاشة أن الزر “غير مضغوط” حالياً. وعندما يضغط عليه المستخدم، يجب عليك تحديث هذه السمة إلى "true" عبر JavaScript.

نصائح من خبرة أبو عمر

• فكّر فيها من أول يوم: إدخال إمكانية الوصول في نهاية المشروع أصعب وأكثر تكلفة. اجعلها جزءاً من عملية التصميم والبرمجة من البداية.
• استخدم الأدوات المتاحة: هناك أدوات رائعة ومجانية تساعدك على فحص موقعك، مثل Lighthouse (مدمج في متصفح Chrome)، وaxe DevTools، وWAVE.
• جرّب بنفسك يا خال: أفضل طريقة لتفهم الموضوع هي أن تضع نفسك مكان المستخدم. قم بتنزيل قارئ شاشة مجاني مثل NVDA على ويندوز، أو استخدم VoiceOver المدمج في أجهزة آبل. حاول استخدام تطبيقك لمدة 15 دقيقة. ستكون تجربة صادمة ومفيدة جداً.
• اسمع من المستخدمين: إيميل محمد كان نقطة تحول لنا. لا تخف من التواصل مع المستخدمين من ذوي الإعاقة، واطلب منهم تقييم منتجك. ملاحظاتهم لا تقدر بثمن.

الخلاصة: من جدار منيع إلى باب مفتوح للجميع

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

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