يا جماعة الخير، السلام عليكم ورحمة الله. معكم أخوكم أبو عمر.
قبل كم سنة، كنت أنا وفريقي شغالين ليل نهار على تطبيق جديد، فكرته كانت بسيطة وحلوة: منصة بتساعد الحرفيين وأصحاب المشاريع الصغيرة يعرضوا شغلهم ويبيعوه أونلاين. الأيام والأسابيع مرت واحنا سهرانين، أكواب القهوة ما كانت تفارق مكاتبنا، وريحة الكود كانت معبّية المكان. وصلنا لمرحلة متقدمة جداً، والتصميم كان “آخر موضة”، ألوان زاهية، حركات (animations) ناعمة، وكل شي كان يبدو مثالياً على شاشاتنا الفاخرة.
في ليلة من الليالي، قبل الإطلاق الرسمي بأسابيع قليلة، كنا مجتمعين في المكتب وبنحتفل بإنجاز مرحلة مهمة. جبنا كنافة نابلسية عشان “نحلّي” على الإنجاز. وأنا مروّح على البيت، خطر ببالي أفرجي التطبيق لعمي أبو أحمد، رجل كبير في السن، نظره ضعيف شوي، لكنه يحب التكنولوجيا وبحب يشجعنا. قلت في نفسي: “أكيد رح ينبسط ويشوف شغل ابن أخوه”.
فتحت التطبيق على جوالي وأعطيته إياه. شفت الحماس على وجهه وهو بيمسك الجوال، لكن هالحماس شوي شوي تحول لارتباك، وبعدها لإحباط. حاول يقرأ أسماء المنتجات، ما قدر. الألوان الفاتحة على الخلفية البيضاء كانت شبه مستحيلة للقراءة بالنسبة له. حاول يضغط على زر “إضافة للسلة”، لكن الزر كان صغير وأيقونة فقط بدون نص، فما عرف شو بيعمل. بعد دقيقتين من المحاولة، رجّعلي الجوال بحسرة وقال: “والله يا عمي شغلكم حلو ومرتب، بس مش إلي. ما فهمت منه إشي ولا شفت منه إشي”.
كلماته كانت زي المي الباردة اللي انرمت علي بنص عز الشتا. في هذيك اللحظة، أدركت الكارثة. تصميمنا “الرائع” كان يستبعد عمي أبو أحمد، وملايين غيره. كنا نبني جدران بدل ما نبني جسور. كنا نعيش في جحيم التصميم الإقصائي واحنا مش عارفين. هذه القصة كانت نقطة التحول في مسيرتي المهنية كلها، ومن يومها أصبحت “إمكانية الوصول” أو الـ Accessibility هي البوصلة اللي بتوجه كل سطر كود بكتبه وكل تصميم بشارك فيه.
ما هي “إمكانية الوصول” (Accessibility) بالمشرمحي؟
لما نحكي عن إمكانية الوصول (أو اختصاراً a11y)، البعض بفكر إنها شغلة معقدة أو ميزة إضافية “للناس اللي عندهم إعاقات”. هذا أكبر خطأ ممكن نقع فيه.
ببساطة، إمكانية الوصول هي تصميم المنتجات والخدمات الرقمية بحيث يمكن لكل شخص استخدامها، بغض النظر عن قدراته الجسدية، الحسية، أو الإدراكية. فكر فيها زي ما بتفكر في المنحدر (الرامب) جنب الدرج في المباني. صحيح هو انعمل أساساً لمستخدمي الكراسي المتحركة، لكن مين كمان بيستفيد منه؟
- الأم اللي معها عرباية طفل.
- عامل التوصيل اللي معه عرباية بضاعة.
- الشخص اللي رجله مكسورة مؤقتاً.
- حتى أنا وأنت لما نكون تعبانين ومش قادرين نرفع رجلينا على الدرج!
الكل بيستفيد. وهكذا هو الحال تماماً في العالم الرقمي. التصميم المتاح للجميع هو تصميم أفضل للجميع.
الكوارث الخفية في تصميمنا القديم (وكيف تتجنبها)
بعد صدمة عمي أبو أحمد، رجعنا على المشروع وفتحنا عيوننا من جديد. وبدأنا نشوف الكوارث اللي كانت مخفية قدامنا طول الوقت. خليني أشارككم أبرزها عشان ما تقعوا بنفس الفخ.
1. عمى الألوان والتباين الكارثي
كان تصميمنا يعتمد بشكل كبير على الألوان. رسائل الخطأ باللون الأحمر، ورسائل النجاح باللون الأخضر. المشكلة؟ حوالي 8% من الرجال في العالم عندهم شكل من أشكال عمى الألوان، وما بيقدروا يميزوا بين هالألوان. بالنسبة لهم، الشاشة كانت عبارة عن طلاسم.
المشكلة الأكبر: نسبة التباين (Contrast Ratio) بين لون النص ولون الخلفية كانت منخفضة جداً. استخدمنا لون رمادي فاتح على خلفية بيضاء لأنه “شكله مودرن وأنيق”. النتيجة؟ كان صعب القراءة حتى للي نظرهم سليم، ومستحيل للي عندهم ضعف نظر بسيط مثل عمي.
نصيحة من أبو عمر: لا تعتمد على اللون وحده لنقل المعلومة. استخدم أيقونات، نص واضح، أو حدود مميزة بجانب اللون. ودائماً، دائماً، افحص نسبة التباين. في أدوات مجانية ممتازة مثل WebAIM Contrast Checker بتساعدك تتأكد إنك ماشي على الطريق الصحيح (المعيار الأدنى هو 4.5:1 للنص العادي).
2. فخ “انقر هنا”: النصوص الرابطة عديمة المعنى
المستخدمون اللي بيعتمدوا على قارئات الشاشة (Screen Readers) – وهم المكفوفون وضعاف البصر – غالباً ما يتنقلون في الصفحة من خلال القفز بين الروابط. تخيل معي قارئ الشاشة وهو بيقول:
“رابط: انقر هنا”
“رابط: اضغط للمزيد”
“رابط: هنا”
هذا الكلام لا معنى له بدون سياق! للأسف، تطبيقنا كان مليان بهالروابط الغامضة.
مثال سيء (لا تفعله):
<p>لمعرفة المزيد عن منتجاتنا، <a href="/products">انقر هنا</a>.</p>مثال جيد (افعله):
<p>يمكنك <a href="/products">تصفح جميع منتجاتنا الحرفية</a> من هذا الرابط.</p>في المثال الثاني، نص الرابط وصفي وواضح حتى لو تم قراءته خارج السياق.
3. الصور الصامتة: حين تفقد الصور معناها
كنا فخورين جداً بالصور عالية الجودة لمنتجات الحرفيين في تطبيقنا. لكن بالنسبة لقارئ الشاشة، هاي الصور كانت مجرد “فراغ”. ليش؟ لأننا ببساطة نسينا نضيف النص البديل (Alt Text).
النص البديل هو وصف نصي للصورة، بيقرأه قارئ الشاشة للمستخدم، وبيظهر لو الصورة فشلت في التحميل. بدون هذا النص، الصورة تصبح بلا قيمة للمستخدم الكفيف.
مثال سيء (صورة صامتة):
<img src="/images/kufiya.jpg">(قارئ الشاشة قد يقول: “صورة، kufiya.jpg” – غير مفيد بالمرة)
مثال جيد (صورة ناطقة):
<img src="/images/kufiya.jpg" alt="كوفية فلسطينية باللونين الأبيض والأسود مصنوعة يدوياً من القطن">(قارئ الشاشة سيقرأ الوصف الدقيق والمفيد)
ملاحظة: إذا كانت الصورة للزينة فقط ولا تحمل أي معلومة، اترك النص البديل فارغاً `alt=””` حتى يتجاهلها قارئ الشاشة ولا يزعج المستخدم.
4. التنقل بالكيبورد؟ انسَ الموضوع!
في كثير مستخدمين ما بيستخدموا الماوس أبداً. منهم المبرمجين المحترفين (Power Users)، ومنهم الأشخاص اللي عندهم إعاقات حركية بتصعّب عليهم استخدام الماوس. هؤلاء يعتمدون كلياً على لوحة المفاتيح (زر Tab للتنقل، Enter و Space للتفعيل).
في تصميمنا، كنا قد ارتكبنا الخطيئة الكبرى في عالم الويب: قمنا بإخفاء مؤشر التركيز (Focus Indicator) – وهو الإطار اللي بيظهر حول الأزرار والروابط لما تتنقل بالكيبورد – لأنه “بشع وبيخرب التصميم”.
/* الكود الشيطاني الذي يجب أن تتجنبه كالموت */
:focus {
outline: none;
}بفعلتنا هذه، جعلنا التنقل بالكيبورد مستحيلاً. المستخدم كان يضغط على Tab، لكن ما كان يعرف هو وين وصل في الصفحة. كأنه بيمشي في غرفة مظلمة تماماً.
نصيحة من أبو عمر: إياك ثم إياك أن تحذف الـ `outline`. إذا كان شكله لا يعجبك، لا تحذفه، بل قم بتصميمه بشكل أجمل! اجعله جزءاً من هوية علامتك التجارية.
/* طريقة أفضل بكثير */ :focus-visible { /* استخدم focus-visible لاستهداف مستخدمي الكيبورد فقط */ outline: 2px solid #007bff; /* لون واضح ومتناسق مع تصميمك */ outline-offset: 2px; border-radius: 4px; /* لمسة جمالية */ }
كيف بدأنا رحلة الإنقاذ؟ خطوات عملية لكل مطور ومصمم
تصحيح الأخطاء كان شغلة مش هينة، لكنها علمتنا الكثير. وهذه هي خلاصة خبرتنا في رحلة التحول نحو التصميم الشامل:
- تبني التفكير الشامل من اليوم الأول: إمكانية الوصول ليست طبقة طلاء تضعها في النهاية. يجب أن تكون في صميم عملية التفكير من أول رسمة على ورق (wireframe) حتى آخر سطر كود. اسأل نفسك دائماً: “كيف يمكن لشخص يستخدم قارئ شاشة أن يستعمل هذه الميزة؟” “هل هذا اللون واضح لشخص لديه ضعف في البصر؟”.
- استخدام HTML الدلالي (Semantic HTML): قبل ما تفكر في أي مكتبة JavaScript معقدة، ارجع للأساسيات. استخدم الوسوم الصحيحة للغرض الصحيح. استخدم `
- تعلم أساسيات ARIA: أحياناً، HTML لوحده لا يكفي، خاصة مع المكونات المعقدة (مثل القوائم المنسدلة المخصصة). هنا يأتي دور ARIA (Accessible Rich Internet Applications). هي مجموعة من السمات (attributes) يمكنك إضافتها لعناصر HTML لتعطي معلومات إضافية لقارئات الشاشة. لكن احذر، استخدام ARIA بشكل خاطئ أسوأ من عدم استخدامه على الإطلاق. القاعدة الذهبية: “No ARIA is better than bad ARIA”.
- الاختبار، ثم الاختبار، ثم الاختبار!: لا تعتمد على افتراضاتك.
- الاختبار الآلي: استخدم أدوات مثل Lighthouse في متصفح Chrome أو Axe DevTools لفحص صفحتك واكتشاف المشاكل الشائعة.
- الاختبار اليدوي: هذا أهم شي. جرب بنفسك! اترك الماوس وحاول تصفح موقعك باستخدام الكيبورد فقط. قم بتنزيل قارئ شاشة مجاني (مثل NVDA على ويندوز، أو استخدم VoiceOver المدمج في أجهزة آبل) وحاول استخدامه. ستنصدم من حجم المشاكل التي ستكتشفها.
- اختبار المستخدمين: إن أمكن، قم بدعوة أشخاص من ذوي الإعاقة لتجربة منتجك. ملاحظاتهم لا تقدر بثمن.
الخلاصة… والزبدة 🚀
يا جماعة، قصة عمي أبو أحمد غيرت فيّ الكثير. علمتني أن الكود والتصميم لا يتعلقان فقط بالجماليات والكفاءة التقنية، بل بالإنسانية قبل كل شيء. إمكانية الوصول ليست مجرد قائمة مهام نشطب عليها، بل هي عقلية وتفكير. هي أن تتذكر أن على الطرف الآخر من الشاشة يوجد إنسان بكل تنوعه واختلافه.
الاستثمار في إمكانية الوصول ليس فقط الشيء الصحيح الذي يجب فعله من الناحية الأخلاقية، بل هو أيضاً قرار ذكي من الناحية التجارية. أنت توسع قاعدة جمهورك، تحسن تجربة المستخدم للجميع، وتعزز سمعة علامتك التجارية. والأهم من ذلك، أنك تساهم في بناء عالم رقمي أكثر عدلاً وإنصافاً.
نصيحتي الأخيرة لك، سواء كنت مطوراً، مصمماً، أو مدير منتج: لا تبنِ جداراً، بل ابنِ جسراً. فكر في كل مستخدم، واجعل من عملك أداة تمكين لا أداة إقصاء. والله ولي التوفيق.
