خلّوني أحكيلكم قصة صارت معي زمان، في بدايات شغلي مع واحد من الفرق الذكية اللي اشتغلت معها. كنّا يا جماعة الخير شغالين ليل نهار على تطبيق جديد، تطبيق “بكسّر الدنيا” على حد تعبيرنا. تصميم عصري، ألوان بتجنن، وحركات (animations) بتخلي المستخدم يحس حاله في فيلم خيال علمي. وبعد شهور من القهوة والكود، أطلقنا التطبيق وكنا طايرين من الفرحة.
بعد كم يوم، وصلتني رسالة على الإيميل من مستخدم اسمه “خالد”. الرسالة كانت قصيرة ومباشرة، كلماتها لهلأ بترن في بالي. كتب خالد: “تطبيقكم شكله حلو من الصور اللي شفتها، بس للأسف ما قدرت أستخدمه بالمرة. أنا كفيف وبستخدم قارئ الشاشة، وتطبيقكم عبارة عن أزرار بدون أسماء وصور بدون وصف. حسيت حالي واقف قدام حيط مسدود”.
بتعرفوا شعور حدا كبّ عليك سطل ميّة باردة بنص عز الصيف؟ هاد إشي بسيط جنب اللي حسيته وقتها. يا زلمة، إحنا اللي مفكرين حالنا بنبني المستقبل، كنا بكل بساطة بنبني حيطان! تطبيقاتنا كانت بتستبعد خالد والملايين اللي زيه. في هذيك اللحظة، أدركت إننا كنا عايشين في “جحيم التجربة المنقوصة”، مش بس للمستخدم، إلنا إحنا كمان كمطورين فشلنا في مهمتنا الأساسية: بناء أدوات للجميع.
هذيك الرسالة كانت بداية رحلتي مع عالم الـ “الوصولية الرقمية”، أو زي ما بنحب نسميها في عالم المطورين: a11y.
إيش هي الوصولية الرقمية (a11y)؟ وليش اسمها هيك؟
بكل بساطة، الوصولية الرقمية (Digital Accessibility) هي تصميم وتطوير المواقع والتطبيقات الرقمية بحيث يمكن للجميع استخدامها، بغض النظر عن قدراتهم أو إعاقاتهم. هاد “الجميع” بيشمل الناس اللي عندهم:
- إعاقات بصرية (من عمى كلي لضعف بصر أو عمى ألوان).
- إعاقات سمعية (من صمم كلي لضعف سمع).
- إعاقات حركية (صعوبة في استخدام اليدين أو الفأرة).
- إعاقات إدراكية أو معرفية (مثل صعوبات التعلم أو تشتت الانتباه).
وحتى بتشمل الحالات المؤقتة، مثل حدا إيده مكسورة، أو حدا ماسك طفل بإيد وبيستخدم التطبيق بالإيد التانية، أو حتى حدا بيستخدم موبايله تحت شمس قوية ومش شايف الشاشة منيح.
طيب ليش (a11y)؟
هاي من الشغلات اللي بنحبها إحنا المبرمجين. الكلمة الإنجليزية هي “Accessibility”. لو تعد الحروف بين أول حرف (a) وآخر حرف (y)، بتلاقيهم 11 حرف. فبدل ما نكتب الكلمة الطويلة، بنختصرها بـ “a11y”. سهلة وحلوة وبتدل على إنك “فاهم الطبخة”.
ليش لازم نهتم؟ القصة مش بس “عمل خير”
لما طرحت الموضوع على الفريق وقتها، أول رد فعل كان: “يا أبو عمر، مش فاضيين هلأ، عنا ألف شغلة أهم”. وهذا تفكير شائع ومغلوط جداً. الاهتمام بالوصولية مش رفاهية أو عمل خيري بنعمله لما يفيض معنا وقت، هو جزء أساسي من أي منتج ناجح.
البعد الإنساني والأخلاقي
هذا هو الأساس. الإنترنت صار جزء لا يتجزأ من حياتنا اليومية: شغل، تعليم، تواصل، خدمات حكومية، تسوق. لما تبني منتج غير متاح للجميع، أنت عملياً بتحرم فئة من المجتمع من حق أساسي في الوصول للمعلومة والخدمات. من الناحية الأخلاقية، واجبنا كمطورين ومصممين إنه نضمن إنه التكنولوجيا اللي بنبنيها بتوحّد الناس مش بتفرقهم.
البعد التجاري الذكي
إذا ما أقنعك البعد الإنساني (وإن شاء الله يكون أقنعك)، خلّونا نحكي لغة البزنس. حسب منظمة الصحة العالمية، حوالي 15-20% من سكان العالم بعانوا من شكل من أشكال الإعاقة. يعني لو تطبيقك بيستهدف مليون مستخدم، أنت تلقائياً بتخسر شريحة تصل لـ 200 ألف مستخدم محتمل! هل في أي بزنس عاقل بيرمى هيك رقم في الزبالة؟ طبعاً لأ.
نصيحة من خبرتي: الشركات اللي بتبنّى الوصولية بتكسب ولاء العملاء. المستخدم اللي بيلاقي تطبيقك سهل ومريح لإعاقته، مش بس حيضل يستخدمه، بل حيصير أكبر مسوّق إلك.
تحسين محركات البحث (SEO)
بتعرف مين أكبر مستخدم “أعمى” في العالم؟ إنه جوجل! محركات البحث عبارة عن برامج (crawlers) بتزحف على موقعك وما بتشوف التصميم والألوان، هي “بتقرأ” الكود والبنية. لما يكون موقعك مبني بطريقة سليمة من ناحية الوصولية (عناوين واضحة، نصوص بديلة للصور، بنية منطقية)، جوجل بيفهمه أحسن، وبالتالي بيعطيك ترتيب أعلى في نتائج البحث. الوصولية والـ SEO صحاب وحبايب.
خطوات عملية لتحقيق الوصولية: من وين أبلّش يا أبو عمر؟
حلو الكلام النظري، بس كيف نطبق؟ الموضوع أبسط مما بتتخيل، وما بحتاج ميزانيات ضخمة، بحتاج تغيير في طريقة التفكير وشوية ممارسات بسيطة.
1. استخدم HTML ببنيته السليمة (Semantic HTML)
هاي أهم وأول خطوة. بدل ما تبني صفحتك كلها باستخدام <div> و <span>، استخدم الوسوم (Tags) اللي إلها معنى. قارئ الشاشة بيعتمد على هاي الوسوم عشان يفهم بنية الصفحة.
مثال سيء (Div Soup):
<div class="header">...</div>
<div class="main-content">
<div class="article">...</div>
</div>
<div class="footer">...</div>مثال ممتاز (Semantic HTML):
<header>...</header>
<main>
<article>...</article>
</main>
<footer>...</footer>الفرق بسيط في الكود، لكنه فرق شاسع في التجربة لمستخدم قارئ الشاشة.
2. النص البديل للصور (alt attribute) هو صديقك
كل صورة في موقعك لازم يكون إلها وصف نصي في الـ alt attribute. هذا الوصف هو اللي بيقرأه قارئ الشاشة للمستخدم الكفيف.
- إذا كانت الصورة مهمة للمحتوى: اكتب وصف دقيق ومختصر.
<!-- سيء --> <img src="chart.png" alt="رسم بياني"> <!-- جيد --> <img src="chart.png" alt="رسم بياني يوضح نمو المبيعات بنسبة 20% في الربع الأخير"> - إذا كانت الصورة للزينة فقط (Decorative): اترك الـ
altفارغاً. هذا بيخلي قارئ الشاشة يتجاهلها تماماً وما يزعج المستخدم.<img src="background-pattern.png" alt="">
3. تباين الألوان: لا تكن “رمادياً”
كثير مصممين بحبوا يستخدموا درجات الرمادي الفاتح للنصوص على خلفية بيضاء. شكلها “مودرن” وأنيق، لكنها كارثة للناس اللي عندهم ضعف بصر. لازم يكون في تباين (Contrast) كافي بين لون النص ولون الخلفية.
نصيحة عملية: استخدم أدوات مثل WebAIM Contrast Checker لتتأكد إن ألوانك متوافقة مع معايير الوصولية (WCAG). القاعدة الذهبية هي نسبة تباين 4.5:1 للنص العادي.
4. الوصولية عبر لوحة المفاتيح: حرّر المستخدم من الفأرة
جرب تتصفح موقعك بدون ما تستخدم الفأرة نهائياً، بس باستخدام زر الـ Tab للتنقل وزر Enter للتفعيل. هل قدرت توصل لكل الأزرار والروابط وتستخدمها؟
كثير من المستخدمين، خاصة اللي عندهم إعاقات حركية، بيعتمدوا كلياً على لوحة المفاتيح. تأكد من أن:
- كل العناصر التفاعلية (روابط، أزرار، حقول إدخال) يمكن الوصول إليها بالـ Tab.
- ترتيب التنقل (Tab order) منطقي ويتبع الترتيب البصري للصفحة.
- هناك مؤشر واضح للتركيز (focus outline) يوضح للمستخدم أين هو الآن. رجاءً، لا تكتب
*:focus { outline: none; }في ملف الـ CSS تبعك! إذا كان شكله مش عاجبك، صمم واحد أحلى، بس لا تحذفه.
5. استخدم ARIA عند الحاجة فقط
ARIA (Accessible Rich Internet Applications) هي مجموعة من السمات (attributes) اللي ممكن تضيفها لعناصر HTML عشان تعطي معلومات إضافية لقارئ الشاشة، خاصة في المكونات المعقدة (مثل القوائم المنسدلة المخصصة، نوافذ الحوار Modals، إلخ).
القاعدة الأولى في ARIA هي: “لا تستخدم ARIA إذا كان في وسم HTML أصلي بيعمل نفس الشغلة”. لكن لما تضطر تبني مكون مخصص، ARIA بتصير ضرورية.
مثال: زر يحتوي على أيقونة فقط بدون نص.
<!-- بدون ARIA، قارئ الشاشة ما بعرف شو هاد الزر -->
<button><i class="fa fa-times"></i></button>
<!-- مع ARIA، الوضع ممتاز -->
<button aria-label="إغلاق"><i class="fa fa-times"></i></button>الخلاصة: الوصولية ليست “ميزة”، بل هي الأساس
بعد قصة خالد، تغير كل شيء في طريقة عملنا. صارت الوصولية جزء من كل مرحلة: من التصميم الأولي، للتطوير، للاختبار. بطلت “شغلة إضافية” بنعملها آخر المشروع، صارت أساس بنبني عليه.
التحول نحو بناء منتجات شاملة للجميع هو رحلة مستمرة، مش وجهة بنوصلها وبنوقف. كل يوم بنتعلم إشي جديد. لكن أهم درس تعلمته هو أن التطبيق “الجميل” ليس الذي يبدو جميلاً فقط، بل الذي يجعل الجميع يشعرون بالترحيب والقدرة على استخدامه بسهولة وكرامة.
نصيحتي الأخيرة إلك: ابدأ اليوم. ابدأ بخطوة صغيرة. افتح موقعك وحاول تتصفحه بلوحة المفاتيح فقط. استخدم أداة لفحص تباين الألوان. أضف النص البديل لصورة واحدة. كل خطوة صغيرة هي انتصار في معركة بناء عالم رقمي أكثر عدلاً وإنسانية للجميع. 🙏
