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

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

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

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

ما هي “معايير الوصول الرقمي” (WCAG)؟ وليش هي مهمة؟

ببساطة شديدة يا جماعة، الـ Web Content Accessibility Guidelines أو (WCAG) هي مش مجرد كتالوج تقني أو قوانين جامدة. هي فلسفة، هي بوصلة أخلاقية بتوجهنا عشان نبني منتجات رقمية (مواقع، تطبيقات، أنظمة) للجميع، بدون أي استثناء.

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

الأهمية مش بس أخلاقية وإنسانية، مع إنها أهم إشي. الأهمية كمان تجارية! لما تصمم للجميع، أنت بتوسع شريحة مستخدميك بشكل هائل. وبتكسب ولائهم، لأنه المستخدم اللي بتحترمه وبتسهل عليه حياته، عمره ما بينساك.

الأركان الأربعة للوصول الرقمي (POUR)

عشان تسهل علينا المهمة، جماعة الخير اللي وضعوا معايير WCAG لخصوا كل المبادئ في أربعة أركان أساسية، وسموها (POUR). خلينا نفصصهم وحدة وحدة:

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

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

نصيحة أبو عمر: غمّض عيونك لمرة، وخلّي حدا يوصفلك موقعك. هل الوصف واضح؟ إذا لأ، عندك مشكلة.

أمثلة عملية:

• النص البديل للصور (Alt Text): هاي مش بس عشان الـ SEO! قارئات الشاشة بتستخدمها عشان توصف الصورة للمستخدم الكفيف. الصورة بدون نص بديل هي مجرد فراغ بالنسبة له.

<!-- خطأ -->
<img src="knafeh.jpg">

<!-- صح -->
<img src="knafeh.jpg" alt="صورة لطبق كنافة نابلسية ساخنة بالجبنة البيضاء والقطر الذهبي">

• التباين اللوني (Color Contrast): مشكلة أبو أحمد الأساسية. لازم يكون في تباين كافٍ بين لون النص ولون الخلفية عشان الناس اللي عندها ضعف نظر أو عمى ألوان تقدر تقرأ بسهولة. في أدوات مجانية كثير بتفحصلك هالشي (زي “Adobe Color” أو إضافات للمتصفح مثل “WAVE”).
• التعليقات النصية للفيديو (Captions): أي فيديو فيه حكي لازم يكون معه تعليقات نصية (Captions)، مش بس للناس اللي عندها ضعف سمع، بل كمان للي بيتصفح في مكان عام وما معه سماعات!

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

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

نصيحة أبو عمر: قبل ما تسلّم أي صفحة، اترك الماوس على جنب، وحاول تتصفح كل إشي باستخدام كيبوردك فقط (مفاتيح Tab, Shift+Tab, Enter, Space). إذا علّقت في مكان وما قدرت تطلع منه (ما يسمى بالـ Keyboard Trap)، أو ما قدرت توصل لزر معين، معناها عندك شغل لازم تعمله.

أمثلة عملية:

• التنقل بالكيبورد: لازم المستخدم يقدر ينتقل بين كل العناصر التفاعلية باستخدام زر Tab، ويشوف بوضوح هو وين واقف (Focus Indicator). هاي أهم نقطة!
• استخدم العناصر الصحيحة (Semantic HTML): البركة في البساطة. ليش تخترع العجل وتعمل زر من عنصر `
  ` وتبرمجه من الصفر، بينما HTML معطيك عنصر `` جاهز ومفهوم لكل المتصفحات وقارئات الشاشة وبيشتغل مع الكيبورد؟

<!-- خطأ فادح -->
<div class="my-button" onclick="submitForm()">إرسال</div>

<!-- صح الصح -->
<button onclick="submitForm()">إرسال</button>

• لا تعتمد على الوقت: إذا عندك رسالة بتظهر وبتختفي بعد 3 ثواني، ممكن مستخدم بطيء أو بيستخدم تقنية مساعدة ما يلحق يقرأها. أعطِ المستخدم دائمًا خيار يغلق الرسالة بنفسه.

3. قابلية الفهم (Understandable)

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

أمثلة عملية:

• رسائل الخطأ الواضحة: بدل ما تكتب للمستخدم “خطأ”، اشرحله شو صار وكيف ممكن يحل المشكلة.
• مثال سيء: “فشل التحقق.”
• مثال جيد: “عفوًا، كلمة المرور يجب أن تحتوي على 8 أحرف على الأقل، حرف كبير، ورقم.”
• التناسق (Consistency): خلّي القائمة الرئيسية بنفس المكان في كل الصفحات. خلّي شكل الأزرار والروابط متناسق. المستخدم لما يتعلم إشي في صفحة، لازم يقدر يطبقه في باقي الصفحات. لا تفاجئه كل شوي.
• لغة الصفحة: دائمًا حدد لغة الصفحة الرئيسية في الـ HTML. هاي بتساعد قارئات الشاشة تعرف كيف تلفظ الكلمات باللهجة الصحيحة.

<html lang="ar" dir="rtl">
  ...
</html>

4. المتانة (Robust)

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

أمثلة عملية:

• كود HTML سليم (Valid HTML): استخدم أدوات مثل W3C Validator عشان تتأكد إنك مش ناسي تغلق وسم (tag) أو عامل أخطاء بسيطة ممكن تسبب مشاكل كبيرة للتقنيات المساعدة.
• استخدام ARIA بحكمة: (Accessible Rich Internet Applications) هي مجموعة خصائص بتضيفها للـ HTML عشان توضح “دور” العناصر المعقدة (زي القوائم المنسدلة المخصصة، أو التبويبات). استخدمها لما يكون الـ HTML العادي غير كافٍ، لكن لا تفرط في استخدامها.

<!-- مثال على تنبيه ديناميكي يقرأه قارئ الشاشة تلقائيًا -->
<div role="alert">
  تم تحديث سلة مشترياتك بنجاح.
</div>

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

بعد سنين من الشغل في هالمجال، تعلمت كم شغلة باللحم الحي، وحابب أشارككم إياها:

1. ابدأ من اليوم الأول: الوصول الرقمي مش “بهار” بتضيفه آخر إشي. هو جزء من “العجينة” الأساسية. التفكير فيه من مرحلة التصميم الأولية بيوفر عليك وقت وجهد وفلوس ما بتتخيلها.
2. استخدم الأدوات المتاحة: متصفحك كنز. أداة Lighthouse في Chrome DevTools فيها قسم كامل للـ Accessibility. إضافات مثل WAVE و Axe for Web ممتازة وبتعطيك تقرير فوري عن المشاكل في صفحتك.
3. استمع لمستخدميك (جدًا): أهم أداة فحص هي المستخدم نفسه. ابحث عن أشخاص من ذوي الإعاقات واطلب منهم يجربوا منتجك، وادفع لهم مقابل وقتهم وخبرتهم. ملاحظاتهم أغلى من الذهب.
4. هي مش بس عن قارئات الشاشة: الوصول الرقمي عالم واسع. فكر في اللي عندهم صعوبات حركية (ما بيقدروا يستخدموا الماوس بدقة)، واللي عندهم صعوبات إدراكية (بيصعب عليهم فهم الواجهات المعقدة)، واللي عندهم صرع حساس للضوء، والقائمة تطول.

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

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

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

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