كنا نبني جدرانًا رقمية: كيف فتحت لنا ‘إمكانية الوصول’ (Accessibility) أبوابًا لم نكن نراها؟

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

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

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

بعدها بساعة، رجع رد منه، وهذا الرد هو اللي صعقني وصحاني من غفلتي. قال:

“يا أخي، أنا كفيف وأستخدم قارئ الشاشة (Screen Reader). عندما أصل إلى هذا الجزء من الصفحة، قارئ الشاشة لا يقرأ وجود أي زر. بالنسبة لي، هذا الزر غير موجود. أنا لا ‘أرى’ واجهتكم اللامعة، أنا ‘أسمعها’.”

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

ما هي “إمكانية الوصول” (Accessibility) حقًا؟

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

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

ليست فقط لأصحاب الهمم

من أكبر المفاهيم الخاطئة هي أن إمكانية الوصول تخدم فئة صغيرة. الحقيقة أنها تخدمنا جميعًا في مواقف مختلفة:

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

لما تصمم للجميع، الكل بستفيد. هاي هي الفكرة.

الجدران التي كنا نبنيها دون أن ندري

خلال مسيرتي، شفت كثير من “الجدران الرقمية” اللي بنبنيها بحسن نية وجهل. خلونا نحكي عن أشهرها وكيف نهدمها.

جدار الصور الصامتة: النص البديل (Alt Text)

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

الحل بسيط ومدمج في لغة HTML:

مثال سيء (جدار):

<img src="graph.png">

مثال جيد (جسر):

<img src="graph.png" alt="رسم بياني يوضح نمو أرباح الشركة بنسبة 30% في الربع الأخير">

نصيحة أبو عمر: لا تكتب `alt=”صورة”` أو `alt=”رسم بياني”`. كن وصفيًا! تخيل أنك تصف الصورة لشخص عبر الهاتف. إذا كانت الصورة زخرفية بحتة ولا تضيف معنى، استخدم `alt=””` فارغًا ليتجاهلها قارئ الشاشة.

جدار الألوان الخادعة: التباين والمعنى

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

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

جدار آخر هو الاعتماد على اللون وحده لنقل المعلومة. مثلًا، إظهار حقول الإدخال الخاطئة باللون الأحمر فقط. هذا لا يفيد من يعاني من عمى الألوان.

مثال سيء (جدار): تغيير لون حدود الحقل إلى الأحمر فقط.

مثال جيد (جسر): تغيير لون الحدود + إضافة أيقونة خطأ + عرض رسالة نصية واضحة مثل “هذا الحقل مطلوب”.

جدار التنقل بالماوس فقط: سحر لوحة المفاتيح

كثير من المستخدمين، سواء بسبب إعاقة حركية أو ببساطة لأنهم “Power Users”، يعتمدون على لوحة المفاتيح للتنقل (باستخدام مفتاح Tab). إذا بنيت عنصرًا تفاعليًا باستخدام `

` وأضفت له حدث `onClick` بالجافاسكريبت، فأنت تبني جدارًا ضد هؤلاء.

الحل: استخدم عناصر HTML الدلالية (Semantic HTML) كلما أمكن.

مثال سيء (جدار):

<!-- لا يمكن الوصول إليه بلوحة المفاتيح، ولا يعلن عنه قارئ الشاشة كزر -->
<div class="custom-button" onclick="submitForm()">إرسال</div>

مثال جيد (جسر):

<!-- يمكن الوصول إليه والتركيز عليه بلوحة المفاتيح، ويعلن عنه كزر، ويعمل بـ Enter/Space -->
<button class="custom-button" onclick="submitForm()">إرسال</button>

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

جدار الهيكل العشوائي: قوة الدلالات (Semantics)

في الماضي، كانت صفحات الويب عبارة عن “حساء من الـ `

`”. `div` هنا و `div` هناك. هذا يجعل الصفحة مفهومة بصريًا، لكنها بالنسبة لقارئ الشاشة تشبه قراءة كتاب بدون فصول أو عناوين.

الحل: استخدم عناصر HTML5 الدلالية. هذه العناصر هي الخريطة التي تعطيها لقارئ الشاشة.

• استخدم `<header>`، `<nav>`، `<main>`، `<article>`، `<aside>`، `<footer>` لتقسيم صفحتك.
• استخدم `<h1>` لعنوان الصفحة الرئيسي (واحد فقط)، ثم `<h2>`, `<h3>` بالترتيب المنطقي. لا تقفز من `<h1>` إلى `<h4>` فقط لأن الخط يبدو أجمل.

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

كيف فتحت لنا “إمكانية الوصول” أبوابًا جديدة؟

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

باب تجربة المستخدم الأفضل للجميع

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

باب الابتكار التقني

التفكير في القيود يولد الإبداع. عندما تفكر “كيف يمكن لشخص لا يرى الشاشة أن يستخدم هذا؟”، تبدأ في التفكير في واجهات صوتية، أوامر صوتية، واهتزازات لمسية (Haptic Feedback). الكثير من التقنيات التي نستخدمها اليوم، مثل المساعدات الصوتية (Siri, Alexa)، بدأت كتقنيات مساعدة (Assistive Technologies).

باب الوصول إلى شريحة أكبر من الجمهور

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

نصائح أبو عمر العملية للبدء

طيب يا أبو عمر، كلام جميل، بس من وين أبدأ؟ الشغلة تبدو كبيرة.

• ابدأ صغيرًا: لا تحاول إصلاح كل شيء دفعة واحدة. في مشروعك القادم، ركز على شيء واحد: مثلًا، التأكد من أن كل الصور لها `alt text` صحيح.
• استخدم الأدوات: المتصفحات الحديثة (Chrome, Firefox) فيها أدوات مدمجة رائعة (مثل Lighthouse) لفحص إمكانية الوصول. هناك أيضًا إضافات مثل axe-dev-tools و WAVE.
• اختبر بلوحة المفاتيح: هذه أسهل وأسرع طريقة لاكتشاف مشاكل كبيرة.
• استمع لموقعك: نزل قارئ شاشة مجاني مثل NVDA (للويندوز) أو استخدم VoiceOver (المدمج في أجهزة آبل). جرب أن “تسمع” موقعك. ستكون تجربة صادمة ومفيدة.
• اجعلها جزءًا من العملية: لا تترك إمكانية الوصول للنهاية. فكر فيها من مرحلة التصميم، مرورًا بالتطوير، وانتهاءً بالاختبار.

الخلاصة: ليست مجرد “ميزة إضافية”

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

لا تبنوا جدرانًا. ابنوا جسورًا. ابنوا بوابات. ابنوا عالمًا رقميًا يرحب بالجميع. 🚀

الوسوم:

إمكانية الوصول تجربة المستخدم تصميم شامل تطوير الويب

شارك المقال:

عرض المقال كاملاً

سجل دخولك لعمل نقاش تفاعلي

تسجيل الدخول

أبو عمر يكتب...

كافة المحادثات خاصة ولا يتم عرضها على الموقع نهائياً

تم إغلاق هذه المحادثة بعد نشر رأيك. شكراً لمشاركتك!

شكرا لك اسعدني نقاشك وتم نشر ملخص نقاشنا بناء على طلبك!

مراجعة رأيك قبل النشر

×

هذا ملخص تلقائي لنقاشك. يمكنك تعديله قبل النشر.

إلغاء نشر الرأي

آراء من النقاشات

لا توجد آراء منشورة بعد. كن أول من يشارك رأيه!