يا جماعة الخير، السلام عليكم ورحمة الله وبركاته. معكم أخوكم أبو عمر.
خلوني أحكي لكم قصة صارت معي ومع فريقي قبل كم سنة، قصة غيرت نظرتنا للبرمجة والتصميم من جذورها. كنا وقتها فخورين جدًا بمشروع ضخم أطلقناه لعميل مهم، كان متجرًا إلكترونيًا بتصميم عصري وأنيق، ألوان هادئة، وحركات “أنيميشن” سلسة. كنا بنحتفل بالنجاح المبدئي، لحد ما وصل الإيميل المشؤوم.
الإيميل كان من مدير المشروع عند العميل، وكان معصّب. محتوى الرسالة كان إعادة توجيه لشكوى من مستخدم، بس ما كانت شكوى عادية. المستخدم كان شخص كفيف، بيستخدم قارئ شاشة (Screen Reader) عشان يتصفح الإنترنت، وكان بيحاول يشتري منتج ضروري من المتجر وفشل فشلًا ذريعًا. وصف بالتفصيل كيف إن الموقع بالنسبة له كان عبارة عن “فوضى من العناصر غير المفهومة”، الصور بدون وصف، الأزرار بدون تسميات، وعملية الدفع كانت مستحيلة. الأسوأ من هيك، الشكوى كانت تحمل تلميحات واضحة لإجراء قانوني محتمل بسبب التمييز ضد ذوي الإعاقة.
شعرت وقتها بخليط من الصدمة والإحراج. إحنا، الفريق اللي بيفتخر بشغله “المتقن”، بنينا منتجًا يستبعد فئة كاملة من الناس عن قصد أو عن غير قصد. كانت لحظة صحوة قاسية. تصميمنا “الجميل” كان جميلًا فقط في عيوننا، لكنه كان جحيمًا لغيرنا. من هنا بدأت رحلتنا الحقيقية مع عالم لم نكن نلقي له بالًا: عالم إمكانية الوصول الرقمي، أو الـ “Accessibility”.
ما هي معايير الوصول الرقمي (WCAG) وليش هي مهمة هالقد؟
بعد الصدمة الأولى، غصنا في البحث لنفهم وين غلطنا. كل الطرق كانت تؤدي إلى أربعة حروف: WCAG. في البداية، بدا الأمر معقدًا ومجموعة من القواعد الصارمة اللي راح تخرب علينا “إبداعنا”. لكن مع الوقت، اكتشفنا إنها العكس تمامًا.
شو قصة الـ WCAG هاي؟
ببساطة، WCAG هي اختصار لـ (Web Content Accessibility Guidelines)، وهي عبارة عن مجموعة من الإرشادات والمعايير الدولية اللي نشرها اتحاد شبكة الويب العالمية (W3C). الهدف منها هو وضع أساس واضح لجعل محتوى الويب متاحًا للجميع، بغض النظر عن قدراتهم الجسدية أو العقلية.
هاي المعايير بتشمل توصيات للمصممين والمطورين وكتّاب المحتوى عشان يتأكدوا إن مواقعهم وتطبيقاتهم قابلة للاستخدام من قبل:
- الأشخاص ذوي الإعاقات البصرية (مثل المكفوفين أو ضعاف البصر).
- الأشخاص ذوي الإعاقات السمعية.
- الأشخاص ذوي الإعاقات الحركية (اللي ممكن ما يستخدموا الماوس).
- الأشخاص ذوي الإعاقات الإدراكية أو صعوبات التعلم.
المعايير مقسمة لثلاث مستويات: A (الأدنى)، AA (المتوسط)، و AAA (الأعلى). معظم الشركات والمؤسسات بتستهدف تحقيق المستوى AA لأنه بيحقق توازن ممتاز بين الوصول الشامل والتطبيق العملي.
طيب، ليش لازم نهتم؟ مش مجرد “إشي حلو يكون موجود”؟
هذا بالضبط كان تفكيرنا في البداية، ولكن الواقع أثبت لنا العكس. الاهتمام بإمكانية الوصول ليس رفاهية، بل هو ضرورة لعدة أسباب جوهرية:
- الجانب الأخلاقي والإنساني: الإنترنت أصبح جزءًا أساسيًا من حياتنا اليومية للتعليم والعمل والتسوق والتواصل. من غير المنطقي ولا الأخلاقي أن نحرم شريحة كبيرة من المجتمع (تقدرها منظمة الصحة العالمية بحوالي 15% من سكان العالم) من هذا الحق الأساسي. “الإنترنت للكل، مش لفئة معينة.”
- الجانب التجاري والعملي: لما تستبعد 15% من المستخدمين المحتملين، أنت فعليًا تخسر شريحة كبيرة من السوق. هؤلاء المستخدمون وعائلاتهم يملكون قوة شرائية، وإذا كان موقعك سهل الاستخدام لهم، فسوف يكسب ولاءهم.
- الجانب القانوني: مثل ما صار معنا، الكثير من دول العالم لديها قوانين تُلزم المؤسسات بتوفير وصول رقمي متكافئ (مثل قانون ADA في أمريكا وغيره). تجاهل هذه القوانين يعرضك لخطر الشكاوى والغرامات المالية الضخمة التي قد تدمر سمعة شركتك.
- تحسين محركات البحث (SEO): العديد من ممارسات إمكانية الوصول، مثل استخدام الهيكلة السليمة للنص (Semantic HTML) والنصوص البديلة للصور، هي نفسها ممارسات ممتازة لتحسين ترتيب موقعك في جوجل ومحركات البحث الأخرى. يعني بتضرب عصفورين بحجر واحد.
المبادئ الأربعة اللي غيّرت كل إشي: رحلتنا العملية مع WCAG
معايير WCAG مبنية على أربعة مبادئ أساسية، بنلخصها بكلمة POUR. فهم هذه المبادئ كان نقطة التحول في طريقة تفكيرنا. خلوني أشرح لكم كل مبدأ مع أمثلة عملية من الأخطاء اللي وقعنا فيها وكيف صلحناها.
1. قابل للإدراك (Perceivable): هل يمكن للمستخدم استيعاب المحتوى؟
المبدأ الأول يعني أن المعلومات وواجهة المستخدم لازم تكون قابلة للعرض للمستخدمين بطرق يمكنهم إدراكها. يعني مش لازم يعتمد المحتوى على حاسة واحدة فقط (مثل البصر).
نصيحة أبو عمر: فكّر دائمًا: “لو المستخدم ما بيقدر يشوف هذا العنصر، هل في طريقة بديلة يفهم فيها محتواه؟”
- مشكلتنا: صور المنتجات في متجرنا كانت بدون أي نص بديل (alt text). بالنسبة للمستخدم الكفيف، كانت الصور مجرد فراغ.
- الحل: إضافة وصف دقيق ومختصر لكل صورة.
<!-- خطأ فادح ❌ -->
<img src="shoe-1.jpg">
<!-- الحل الصحيح ✅ -->
<img src="shoe-1.jpg" alt="حذاء رياضي أبيض رجالي مع ثلاثة خطوط زرقاء على الجانب">
- مشكلتنا الثانية: استخدمنا لون رمادي فاتح جدًا للنصوص على خلفية بيضاء. كان التصميم “رايق” بنظرنا، لكنه كان شبه شفاف لضعاف البصر وكبار السن.
- الحل: استخدمنا أدوات فحص تباين الألوان (مثل WebAIM Contrast Checker) للتأكد من أن نسبة التباين بين النص والخلفية تحقق على الأقل معيار AA (نسبة 4.5:1 للنص العادي).
2. قابل للتشغيل (Operable): هل يمكن للمستخدم التفاعل مع واجهتك؟
هذا المبدأ يضمن أن جميع مكونات الواجهة والتنقل قابلة للتشغيل. مش كل الناس بتستخدم الماوس. في ناس بتستخدم الكيبورد فقط، أو أجهزة تحكم صوتية، أو غيرها من التقنيات المساعدة.
نصيحة أبو عمر: افصل الماوس عن جهازك وحاول تتصفح موقعك باستخدام مفتاح Tab للتنقل و Enter للاختيار. هل استطعت الوصول لكل شيء وإتمام مهمة كاملة؟ هذه التجربة ستفتح عينيك على الكثير من المشاكل.
- مشكلتنا: النافذة المنبثقة (Modal) لعرض تفاصيل المنتج كانت “فخًا للكيبورد” (Keyboard Trap). بمجرد فتحها، كان المستخدم الذي يعتمد على الكيبورد لا يستطيع إغلاقها أو الخروج منها، ويضطر لإعادة تحميل الصفحة كلها.
- الحل: برمجنا النافذة بحيث يمكن إغلاقها بمفتاح (Escape)، وتأكدنا من أن التنقل بمفتاح (Tab) يبقى محصورًا داخلها طالما هي مفتوحة، وعند إغلاقها يعود التركيز (focus) إلى الزر الذي فتحها.
3. قابل للفهم (Understandable): هل المحتوى والواجهة واضحان ومنطقيان؟
المعلومات وطريقة عمل الواجهة يجب أن تكون مفهومة. هذا يتجاوز مجرد اللغة، ليشمل الوضوح، التنبؤ، وبساطة التصميم.
- مشكلتنا: في نماذج (Forms) الدفع، اعتمدنا على النص المؤقت (placeholder) داخل حقول الإدخال ليكون هو التسمية (label). مثلًا، حقل مكتوب بداخله “الاسم الأول”. بمجرد أن يبدأ المستخدم بالكتابة، يختفي النص، وإذا تركه ورجع له، قد ينسى ما هو الحقل المطلوب. هذا يسبب إرباكًا شديدًا للجميع، وخصوصًا لمن يعانون من صعوبات في الذاكرة أو التركيز.
- الحل: استخدمنا دائمًا وسم
<label>المرتبط بشكل برمجي بحقل الإدخال. هذا يضمن أن التسمية مرئية دائمًا، وقارئات الشاشة تقرأها بشكل صحيح.
<!-- تصميم سيء ومربك ❌ -->
<input type="text" placeholder="الاسم الأول">
<!-- تصميم واضح ومفهوم ✅ -->
<label for="first-name">الاسم الأول:</label>
<input type="text" id="first-name" name="first-name">
بالإضافة إلى ذلك، تأكدنا من أن رسائل الخطأ واضحة ومحددة. بدلًا من رسالة “خطأ في الإدخال”، أصبحنا نظهر رسالة مثل “صيغة البريد الإلكتروني غير صحيحة”.
4. متين (Robust): هل يمكن للتكنولوجيا المساعدة الاعتماد على الكود الخاص بك؟
المحتوى يجب أن يكون متينًا بما يكفي ليتم تفسيره بشكل موثوق من قبل مجموعة واسعة من المتصفحات والتقنيات المساعدة (مثل قارئات الشاشة). هذا المبدأ تقني بحت ويتعلق بنظافة الكود وجودته.
نصيحة أبو عمر: توقفوا عن بناء كل شيء باستخدام
<div>! لغة HTML أعطتنا كنوزًا من الوسوم ذات المعنى (Semantic HTML)، استخدموها.
- مشكلتنا: هيكل صفحتنا كان عبارة عن بحر من وسوم
<div>.<div class="header">،<div class="nav">،<div class="main-content">. بالنسبة لقارئ الشاشة، هذه كلها مجرد “مجموعات” بدون معنى. - الحل: أعدنا هيكلة الصفحة باستخدام الوسوم الدلالية الصحيحة:
<header>،<nav>،<main>،<article>،<footer>. هذا أعطى قارئات الشاشة خريطة واضحة للصفحة، مما سمح للمستخدم بالتنقل مباشرة إلى القسم الذي يريده (مثل القفز مباشرة إلى المحتوى الرئيسي وتجاوز القائمة).
الخلاصة: من وجع الراس القانوني إلى الإبداع الشامل ✨
الشكوى التي وصلتنا كانت بمثابة صفعة مؤلمة، لكنها كانت أفضل شيء حدث لنا. أجبرتنا على الخروج من فقاعتنا والنظر إلى منتجاتنا من عيون مستخدمين لم نفكر بهم من قبل. رحلتنا مع معايير WCAG لم تكن مجرد إصلاح أخطاء لتجنب دعوى قضائية، بل كانت تحولًا ثقافيًا في فريقنا.
أصبحنا نرى إمكانية الوصول ليس كقيد على الإبداع، بل كمصدر له. كيف نصمم واجهة جميلة وعملية للجميع؟ كيف نقدم المعلومة بطرق متعددة؟ هذه التحديات جعلتنا مصممين ومطورين أفضل.
نصيحتي الأخيرة لك: لا تنتظر حتى تصلك شكوى أو تخسر عملاء. ابدأ اليوم. استخدم الأدوات المجانية مثل Lighthouse في متصفح كروم، أو إضافة WAVE، أو Axe DevTools. اقرأ عن المبادئ الأربعة. والأهم من كل ذلك، حاول أن تضع نفسك مكان المستخدمين المختلفين.
في النهاية، مهمتنا كمبدعين في هذا العصر الرقمي ليست بناء جدران جميلة، بل بناء جسور متينة تصل بين منتجاتنا وكل إنسان، مهما كانت قدراته. ❤️
