قبل عدة سنوات، كنت في زيارة لبيت العائلة في فلسطين. كعادتي، كنت “أتباهى” أمام الوالد (الحج أبو محمد) بآخر تطبيق قمت بتطويره. كان تطبيقاً لإدارة المهام، بتصميم عصري وألوان جذابة، وحركات “أنيميشن” سلسة. قلت له بكل فخر: “شوف يا حج، هالتطبيق راح يغير حياتك، بنظّملك كل إشي بضغطة زر!”.
مددت له الهاتف، وراقبته وهو يحاول استخدامه. رأيت التجاعيد حول عينيه تزداد وهو يقرّب الهاتف ويبعده، محاولاً قراءة النصوص الصغيرة ذات الألوان الباهتة. أصابعه، التي تحمل خبرة السنين وتعبها، كانت تجد صعوبة في الضغط على الأيقونات الصغيرة والدقيقة. بعد دقيقة من الصمت المحبط، نظر إليّ وقال بلهجته الحنونة: “منيحة يا بوي، بس مش شايف إشي… الخط صغير كثير والألوان فايتة ببعضها”.
في تلك اللحظة، شعرت وكأن أحدهم سكب عليّ دلواً من الماء البارد. تطبيقي “المثالي” كان عديم الفائدة تماماً لشخص أحبه. لم يكن المشكل في والدي، بل كان المشكل فيّ وفي تطبيقي الذي بنيته دون التفكير فيه وفي الملايين من أمثاله. هذه الحادثة البسيطة كانت بداية رحلتي مع عالم “إمكانية الوصول الرقمي” أو الـ Accessibility، والمفهوم الذي أنقذني من بناء جدران رقمية بدلاً من جسور: إرشادات الوصول إلى محتوى الويب (WCAG).
ما هي “إرشادات الوصول الرقمي” (WCAG)؟ وليش هي “إشي” مهم؟
ببساطة، الـ WCAG (Web Content Accessibility Guidelines) هي ليست مجرد توصيات تقنية، بل هي دستور عالمي لبناء إنترنت للجميع. هي مجموعة من المعايير والإرشادات التي وضعها اتحاد شبكة الويب العالمية (W3C) لضمان أن المحتوى الرقمي (مواقع، تطبيقات، ملفات PDF، إلخ) يكون قابلاً للاستخدام من قبل أكبر عدد ممكن من الناس، بغض النظر عن قدراتهم الجسدية أو العقلية.
عندما نتحدث عن “الجميع”، فنحن نعني:
- ذوي الإعاقات البصرية: من عمى الألوان إلى الكفيف الذي يعتمد كلياً على قارئ الشاشة (Screen Reader).
- ذوي الإعاقات السمعية: الذين يحتاجون إلى نصوص بديلة للفيديوهات والصوتيات.
- ذوي الإعاقات الحركية: الذين قد لا يستطيعون استخدام الفأرة ويعتمدون على لوحة المفاتيح أو تقنيات أخرى.
- ذوي الإعاقات الإدراكية والمعرفية: الذين يستفيدون من التصاميم البسيطة والواضحة واللغة السهلة.
لكن الأمر أعمق من ذلك. هذه الإرشادات تفيد أيضاً كبار السن (مثل والدي)، أو شخصاً يعاني من إصابة مؤقتة في يده، أو حتى أنت عندما تحاول استخدام هاتفك تحت أشعة الشمس الساطعة ولا تستطيع رؤية الشاشة جيداً بسبب التباين الضعيف. إمكانية الوصول هي تصميم جيد للجميع.
أركان الوصول الأربعة: كيف نفهم WCAG ببساطة؟
قد تبدو وثائق WCAG معقدة ومخيفة في البداية، لكنها مبنية على أربعة مبادئ أساسية، سهلة الفهم. أنا أسميها “أركان البيت الرقمي الشامل”. أي تطبيق أو موقع يفتقد لأحد هذه الأركان، فهو ببساطة آيل للسقوط.
1. قابل للإدراك (Perceivable): “مش شايف؟ اسمع! مش سامع؟ اقرأ!”
يجب أن تكون المعلومات وواجهة المستخدم قابلة للإدراك بحاسة واحدة على الأقل. لا يمكنك الاعتماد على أن المستخدم يرى أو يسمع.
- النص البديل للصور (Alt Text): هذه أبسط قاعدة وأكثرها إهمالاً. إذا كانت لديك صورة تنقل معلومة، يجب أن توفر وصفاً نصياً لها يقرأه قارئ الشاشة.
<!-- خطأ شائع -->
<img src="graph.png">
<!-- الطريقة الصحيحة -->
<img src="graph.png" alt="رسم بياني يوضح زيادة أرباح الربع الرابع بنسبة 20%">نصيحة من أبو عمر: اسأل نفسك دائماً: لو اختفت هذه الصورة، ما هي المعلومة التي ستضيع على المستخدم؟ اكتب هذه المعلومة في الـ `alt`. إذا كانت الصورة للزينة فقط، اترك الـ `alt` فارغاً (`alt=””`) حتى تتجاهلها قارئات الشاشة.
- تباين الألوان (Color Contrast): النص يجب أن يكون واضحاً ومقروءاً على خلفيته. تذكر قصة والدي؟ كانت الألوان “فايتة ببعضها”. إرشادات WCAG تحدد نسب تباين دنيا (4.5:1 للمستوى AA). هناك أدوات مجانية رائعة مثل WebAIM Contrast Checker لفحص ألوانك.
- النصوص المصاحبة للفيديو (Captions): أي محتوى فيديو يحتوي على حوار يجب أن يتضمن نصوصاً متزامنة (Captions) لمساعدة ضعاف السمع أو أي شخص يشاهد الفيديو في بيئة صامتة.
2. قابل للتشغيل (Operable): “الكيبورد هو صديق الجميع”
يجب أن يتمكن المستخدم من التفاعل مع جميع عناصر التحكم والملاحة في واجهتك. لا تفترض أن الجميع يستخدم فأرة أو شاشة لمس.
- الوصول عبر لوحة المفاتيح: يجب أن يكون كل شيء يمكن الضغط عليه بالفأرة، قابلاً للوصول والتشغيل باستخدام لوحة المفاتيح فقط (غالباً عبر مفاتيح Tab و Enter و Space).
هذا يعني وجود مؤشر تركيز (focus indicator) واضح. المتصفحات توفر واحداً افتراضياً (عادة إطار أزرق)، لكن الكثير من المطورين يزيلونه للأسف بحجة “الشكل الجمالي”!
/* لا تفعل هذا أبداً! */
:focus {
outline: none;
}
/* افعل هذا بدلاً منه: صمم مؤشر تركيز جميل ومتوافق مع تصميمك */
:focus-visible {
outline: 2px solid #007bff;
outline-offset: 2px;
border-radius: 4px;
}نصيحة من أبو عمر: أغلق عينيك (أو اطلب من زميلك) وحاول التنقل في موقعك باستخدام مفتاح `Tab` فقط. هل يمكنك الوصول لكل الأزرار والروابط؟ هل تعرف أين أنت في كل لحظة؟ إذا كانت الإجابة “لا”، فلديك عمل يجب القيام به.
- وقت كافٍ: لا تفاجئ المستخدم بمحتوى يختفي بسرعة أو جلسات تنتهي دون سابق إنذار. امنحه القدرة على إيقاف أو تمديد الوقت.
3. قابل للفهم (Understandable): “خليك واضح ومباشر، الله يرضى عليك”
يجب أن تكون المعلومات وطريقة عمل الواجهة واضحة وسهلة الفهم. الغموض هو عدو الاستخدام.
- لغة واضحة وبسيطة: تجنب المصطلحات المعقدة والمختصرات غير المفهومة. اكتب كأنك تشرح لوالدتك.
- تصفح متوقع (Predictable Navigation): حافظ على ثبات أماكن عناصر التصفح الرئيسية عبر صفحات الموقع. لا تجعل المستخدم يعيد تعلم موقعك مع كل صفحة جديدة.
- مساعدة في إدخال البيانات: عند وجود خطأ في نموذج ما، لا تكتفِ بالقول “خطأ”. حدد الحقل بالضبط، واشرح المشكلة، واقترح حلاً.
مثال على رسالة خطأ سيئة: “فشل التحقق من صحة النموذج.”
مثال على رسالة خطأ جيدة: “صيغة البريد الإلكتروني غير صحيحة في حقل ‘البريد الإلكتروني’. الرجاء التأكد من وجود علامة ‘@’ ونطاق مثل ‘example.com’.”
4. متين (Robust): “الكود النظيف مش بس للمبرمجين”
يجب أن يكون المحتوى قوياً ومتيناً بما يكفي ليتم تفسيره بشكل موثوق من قبل مجموعة واسعة من وكلاء المستخدم، بما في ذلك التقنيات المساعدة (مثل قارئات الشاشة).
هذا المبدأ تقني بحت ويتعلق بكتابة كود نظيف ودلالي (Semantic HTML). استخدم عناصر HTML للغرض الذي صُنعت من أجله.
- استخدم
<nav>لمنطقة التصفح. - استخدم
<main>للمحتوى الرئيسي. - استخدم
<button>للأزرار التي تقوم بفعل، و<a>للروابط التي تنقل إلى مكان آخر.
<!-- طريقة سيئة: تعتمد على JavaScript وتصعّب المهمة على قارئات الشاشة -->
<div class="button" onclick="submitForm()">إرسال</div>
<!-- طريقة ممتازة: دلالية، تعمل بدون JavaScript، ومفهومة للجميع -->
<button type="submit">إرسال</button>عندما تكتب كوداً دلالياً، فأنت لا تساعد محركات البحث فقط، بل تقدم خريطة واضحة للتقنيات المساعدة لفهم بنية صفحتك وتقديمها للمستخدم بأفضل طريقة ممكنة.
من وين أبدأ يا أبو عمر؟ خطوات عملية لتطبيق WCAG
قد يبدو الأمر كبيراً، لكن لا داعي للهلع. يمكنك البدء بخطوات صغيرة تحدث فرقاً كبيراً:
- ثقّف نفسك وفريقك: ابدأ بمشاركة هذه المقالة. اجعل إمكانية الوصول جزءاً من ثقافة فريقك، وليست مهمة مؤجلة لنهاية المشروع.
- استخدم الأدوات الآلية: أدوات مثل Lighthouse (مدمجة في Chrome)، و axe DevTools، و WAVE هي نقطة بداية ممتازة لاكتشاف المشاكل الواضحة مثل نقص الـ alt text أو ضعف التباين.
- الاختبار اليدوي هو الأهم: لا تعتمد على الأدوات فقط.
- اختبار لوحة المفاتيح: كما ذكرت، تصفح موقعك بالكامل باستخدام `Tab` و `Shift+Tab` و `Enter`.
- تجربة قارئ الشاشة: قم بتنزيل قارئ شاشة مجاني مثل NVDA (للويندوز) أو استخدم VoiceOver (المدمج في أجهزة آبل). حاول إنجاز مهمة أساسية في تطبيقك باستخدامه. ستكون تجربة كاشفة ومُ humbling.
- ابدأ بالأساسيات: ركز على تحقيق “الانتصارات السهلة” أولاً: النصوص البديلة، تباين الألوان، الوصول عبر لوحة المفاتيح، والكود الدلالي. هذه الأمور تغطي جزءاً كبيراً من المشاكل الشائعة.
- استمع للمستخدمين: إذا أمكن، قم بإجراء اختبارات قابلية استخدام مع أشخاص من ذوي الإعاقات. ملاحظاتهم لا تقدر بثمن وستفتح عينيك على مشاكل لم تكن لتتخيلها.
الخلاصة: من الإقصاء إلى الاحتواء… بضع أسطر من الكود 🙏
بعد تلك الحادثة مع والدي، عدت لمكتبي وبدأت بتعديل التطبيق. كبّرت الخط، اخترت ألواناً ذات تباين عالٍ، تأكدت من أن كل زر يمكن الوصول إليه بلوحة المفاتيح، وأضفت تسميات واضحة لكل شيء. بعد أسبوع، أريته النسخة الجديدة.
رأيت ابتسامة الرضا على وجهه وهو يتنقل في التطبيق بسهولة ويضيف مهمته الأولى: “سقاية شجر الليمون”. تلك اللحظة كانت أكثر إشباعاً من أي إشادة تقنية حصلت عليها في حياتي. لقد حوّلت تجربة محبطة ومقصية إلى تجربة ممكنة ومرحبة.
إمكانية الوصول الرقمي ليست “ميزة إضافية” أو “عمل خيري”. إنها جوهر التصميم الجيد والهندسة المسؤولة. إنها اعتراف بأن الإنترنت يجب أن يكون فضاءً مفتوحاً للجميع، لا نادياً حصرياً للأصحاء. بضع دقائق إضافية من التفكير وبضعة أسطر من الكود يمكن أن تفتح أبواب عالمك الرقمي لملايين كانوا يقفون خارجه. فلنبنِ شبكة لا تستبعد أحداً. 💻❤️
