كنت أجلس مع الفريق في مكتبنا الصغير، رائحة القهوة تملأ المكان، وشعور بالفخر يغمرنا. أطلقنا للتو النسخة الجديدة من منصتنا التعليمية بعد شهور من العمل الشاق. التصميم كان عصريًا، والألوان جذابة، والرسوم المتحركة سلسة… “تحفة فنية”، هكذا وصفها أحد الزملاء، واتفقنا جميعًا. احتفلنا في ذلك المساء ونحن نراقب أرقام الزوار ترتفع.
بعد يومين، وصلني بريد إلكتروني بعنوان “مشكلة في استخدام موقعكم”. فتحت الرسالة بلامبالاة، متوقعًا أن تكون شكوى بسيطة عن خطأ عابر. لكن ما قرأته صعقني. كانت الرسالة من طالب جامعي كفيف، يستخدم قارئ شاشة لتصفح الإنترنت. كتب بكلمات بسيطة ومؤثرة: “تصميم موقعكم جميل جدًا، لكنني لا أستطيع استخدامه. الصور ليس لها وصف، والأزرار مجرد مربعات فارغة بالنسبة لي، ولا أستطيع التنقل بين أقسام الدورة. أشعر وكأن هذا المكان ليس لي”.
قرأت الرسالة مرة، ومرتين، وثلاث. شعرت بالخجل الشديد. تحفتنا الفنية التي احتفلنا بها كانت في الحقيقة جدارًا ضخمًا أمام هذا الشاب وغيره الكثيرين. “يا جماعة، تعالوا شوفوا!”، صرخت في المكتب، وعرضت الرسالة على الشاشة الكبيرة. ساد صمت رهيب. في تلك اللحظة، أدركنا أننا لم نرتكب مجرد خطأ تقني، بل ارتكبنا خطأً إنسانيًا عميقًا. لقد صممنا تجربة تستبعد الملايين بصمت. ومن هنا، بدأت رحلتنا الحقيقية مع ما يسمى بـ “الوصولية” (Accessibility).
ما هي الوصولية (Accessibility) حقاً؟ أبعد من مجرد “شيء لطيف”
بصراحة، قبل تلك الحادثة، كنا ننظر للوصولية على أنها إضافة ثانوية، شيء “لطيف” نفعله إذا توفر الوقت والميزانية. لكننا كنا مخطئين تمامًا. الوصولية ليست ميزة، بل هي حق أساسي للمستخدم، تمامًا كحق أي شخص في دخول مبنى عام عبر منحدر مخصص للكراسي المتحركة.
ببساطة، الوصولية تعني تصميم وتطوير المواقع والتطبيقات بحيث يمكن للأشخاص ذوي الإعاقة استخدامها. وهذا يشمل مجموعة واسعة من الإعاقات:
- بصرية: مثل العمى، ضعف البصر، وعمى الألوان.
- حركية: مثل صعوبة أو عدم القدرة على استخدام اليدين، مما يتطلب الاعتماد على لوحة المفاتيح أو تقنيات مساعدة أخرى.
- سمعية: مثل الصمم أو ضعف السمع، مما يتطلب وجود نصوص بديلة للمحتوى الصوتي.
- إدراكية: مثل صعوبات التعلم، أو تشتت الانتباه، مما يتطلب تصميمًا واضحًا وبسيطًا.
المعيار العالمي الذي ينظم هذا المجال هو “إرشادات الوصول إلى محتوى الويب” (WCAG). هذه الإرشادات لا تضعها شركة واحدة، بل هي نتاج جهد عالمي لضمان أن يكون الإنترنت مكانًا للجميع. وهي مبنية على أربعة أعمدة أساسية:
- قابل للإدراك (Perceivable): يجب أن تكون المعلومات والمكونات قابلة للإدراك من قبل المستخدمين، أي لا يمكن أن تكون مخفية عن جميع حواسهم.
- قابل للتشغيل (Operable): يجب أن تكون مكونات واجهة المستخدم والتنقل قابلة للتشغيل. لا يمكن أن يتطلب الموقع تفاعلًا لا يستطيع المستخدم القيام به.
- مفهوم (Understandable): يجب أن تكون المعلومات وتشغيل واجهة المستخدم مفهومة.
- متين (Robust): يجب أن يكون المحتوى متينًا بما يكفي ليتم تفسيره بشكل موثوق من قبل مجموعة واسعة من وكلاء المستخدم، بما في ذلك التقنيات المساعدة.
الأخطاء القاتلة التي كنا نرتكبها (وكيف أصلحناها)
بعد تلك الرسالة، شكلنا فريق عمل صغير وبدأنا في تشريح “تحفتنا الفنية”. كانت النتائج صادمة. إليكم أبرز الأخطاء التي اكتشفناها، وكيف يمكنكم تجنبها.
“الصورة بألف كلمة”… لكن ليس للجميع: أهمية النص البديل (Alt Text)
كان موقعنا مليئًا بالصور والرسوم البيانية الرائعة، ولكننا نسينا أهم شيء: النص البديل. بالنسبة لقارئ الشاشة، الصورة بدون نص بديل هي مجرد فراغ. البرنامج سيقول شيئًا مثل “صورة” أو “رسم” ويصمت، تاركًا المستخدم في حيرة.
الحل بسيط ومباشر: أضف السمة alt لكل صورة تحمل معنى.
نصيحة من أبو عمر: النص البديل الجيد يصف محتوى الصورة ووظيفتها في السياق. لا تكتب “صورة”، بل اكتب “مبرمج يكتب كود على شاشة حاسوب محمول”. إذا كانت الصورة مجرد زخرفة، اترك النص البديل فارغًا
alt=""حتى تتجاهلها التقنيات المساعدة.
<!-- ❌ خطأ شائع -->
<img src="chart.png">
<!-- ✅ الطريقة الصحيحة -->
<img src="chart.png" alt="رسم بياني يوضح نمو أعداد المستخدمين بنسبة 30% في الربع الأخير">
<!-- ✅ لصورة زخرفية -->
<img src="background-pattern.svg" alt="">
جحيم الألوان: عندما يكون التباين هو المنقذ
اخترنا لوحة ألوان “مودرن” و”هادئة”، والتي كانت تعني استخدام درجات رمادي فاتح على خلفية بيضاء. تبدو أنيقة، أليس كذلك؟ المشكلة أن هذه الألوان كانت شبه مستحيلة القراءة لمن يعانون من ضعف البصر أو حتى لمن يتصفح الموقع تحت أشعة الشمس.
الحل: التأكد من أن نسبة التباين (Contrast Ratio) بين لون النص ولون الخلفية تتوافق مع معايير WCAG (النسبة الموصى بها هي 4.5:1 للنص العادي). هناك أدوات مجانية كثيرة على الإنترنت لفحص التباين، مثل “WebAIM Contrast Checker”.
الفأرة ليست كل شيء: التنقل عبر لوحة المفاتيح
كثير من المستخدمين، ليس فقط المكفوفين، يعتمدون على لوحة المفاتيح للتنقل. قد يكونون من المطورين المحترفين الذين يفضلون الاختصارات، أو أشخاصًا يعانون من إصابات تمنعهم من استخدام الفأرة. في تصميمنا “الأنيق”، قمنا بإخفاء مؤشر التركيز (focus outline) الذي يظهر حول الأزرار والروابط عند التنقل باستخدام زر Tab، لأنه “يقبح التصميم”. يا لها من كارثة!
الحل: إياك ثم إياك أن تكتب هذا الكود:
/* ❌ لا تفعل هذا أبدًا! */
:focus {
outline: none;
}
بدلاً من ذلك، قم بتصميم مؤشر تركيز واضح وجميل يتناسب مع هوية موقعك.
/* ✅ افعل هذا بدلاً منه */
:focus-visible {
outline: 2px solid #007bff; /* أزرق واضح */
outline-offset: 2px;
border-radius: 4px;
}
استخدام :focus-visible هو الحل الأحدث والأفضل، حيث يظهر المؤشر فقط عند التنقل بلوحة المفاتيح، وليس عند النقر بالفأرة، مما يرضي المصممين والمستخدمين على حد سواء.
“اضغط هنا” – اللعنة الدلالية للروابط الغامضة
كانت مقالاتنا مليئة بجمل مثل “لقراءة المزيد، اضغط هنا”. مستخدمو قارئات الشاشة غالبًا ما يتنقلون عبر الصفحة عن طريق استعراض قائمة بالروابط فقط. تخيل قائمة تبدو هكذا: “اضغط هنا”، “اضغط هنا”، “اقرأ المزيد”، “هنا”. إنها عديمة الفائدة تمامًا!
الحل: اجعل نص الرابط وصفيًا وواضحًا حتى وهو خارج السياق.
- ❌ سيء: لمعرفة المزيد عن خدماتنا، اضغط هنا.
- ✅ ممتاز: تعرف على المزيد عن خدماتنا في تطوير البرمجيات.
العناوين ليست للديكور: قوة الهيكلية الدلالية (Semantic HTML)
لجعل العناوين تبدو بالطريقة التي نريدها، كنا نستخدم وسوم <div> أو <p> ونقوم بتكبير حجم الخط وتثقيله عبر CSS. هذا خطأ فادح. قارئات الشاشة تستخدم وسوم العناوين (<h1>, <h2>, <h3>) لبناء خريطة للمحتوى، مما يسمح للمستخدم بالقفز مباشرة إلى القسم الذي يريده.
الحل: استخدم وسوم HTML للغرض الذي صُنعت من أجله. <h1> للعنوان الرئيسي للصفحة (واحد فقط)، <h2> للعناوين الفرعية الرئيسية، وهكذا. لا تختر الوسم بناءً على شكله الافتراضي، بل بناءً على وظيفته الهيكلية.
<!-- ❌ خطأ -->
<div class="page-title">عنوان المقالة</div>
<div class="section-title">العنوان الفرعي الأول</div>
<!-- ✅ صحيح -->
<main>
<h1>عنوان المقالة</h1>
<section>
<h2>العنوان الفرعي الأول</h2>
<p>نص الفقرة...</p>
</section>
</main>
الوصولية ليست قائمة مهام، بل هي ثقافة وفكر
إصلاح هذه الأخطاء كان الجزء السهل. الجزء الصعب كان تغيير عقليتنا كفريق. أدركنا أن الوصولية ليست مجرد “فحص جودة” نقوم به في نهاية المشروع. إنها ثقافة يجب أن تكون متجذرة في كل مرحلة:
- في التصميم: المصمم يجب أن يفكر في التباين، حجم الخط، ووضوح التخطيط منذ البداية.
- في التطوير: المطور يجب أن يكتب كودًا دلاليًا (semantic) ويهتم بالتنقل عبر لوحة المفاتيح.
- في إنشاء المحتوى: كاتب المحتوى يجب أن يكتب نصوصًا بديلة للصور وعناوين واضحة.
لم نعد نسأل “هل لدينا وقت للوصولية؟”، بل أصبح السؤال “هل هذا المنتج شامل ويمكن للجميع استخدامه؟”. هذا التحول لم يجعل منتجنا أفضل للمستخدمين ذوي الإعاقة فحسب، بل حسّن التجربة للجميع. الموقع أصبح أسرع، أسهل في الاستخدام على الشاشات المختلفة، وحتى ترتيبه في محركات البحث (SEO) تحسن، لأن محركات البحث تتصرف بشكل كبير مثل قارئات الشاشة!
خلاصة الحكي… ✍️
تلك الرسالة الإلكترونية التي بدت كنقد لاذع في البداية، كانت في الحقيقة أعظم هدية تلقاها فريقنا. لقد أجبرتنا على الخروج من فقاعتنا ورؤية تأثير عملنا على أناس حقيقيين بظروف واحتياجات مختلفة. لقد تعلمنا أن التصميم الجيد ليس فقط ما يبدو جميلاً، بل ما يعمل بشكل جيد للجميع.
نصيحتي لك، سواء كنت مطورًا، مصممًا، أو صاحب منتج: لا تنتظر رسالة مثل التي وصلتنا. ابدأ اليوم. افتح موقعك وحاول تصفحه باستخدام لوحة المفاتيح فقط. استخدم أداة لفحص تباين الألوان. هل يمكنك فهم محتوى موقعك لو كنت تستمع إليه بدلاً من رؤيته؟
الإنترنت هو أقوى أداة للمساواة في عصرنا، ولكن فقط إذا بنيناه ليكون كذلك. مهمتنا كمبدعين في هذا الفضاء الرقمي ليست بناء جدران جميلة، بل بناء جسور قوية ومفتوحة للجميع. لا تستبعد الملايين بصمت. 🙏
