يا جماعة الخير، السلام عليكم ورحمة الله.
اسمحولي اليوم أحكيلكم قصة صارت معي شخصياً، قصة غيرت نظرتي للبرمجة والتصميم من جذورها. قبل كم سنة، كنت أنا وفريقي الصغير فخورين جداً بالموقع الإلكتروني اللي بنيناه. تصميم عصري، ألوان جذابة، سرعة تحميل زي الصاروخ، وكود “نظيف” زي ما كنا مفكرين. كنا بنتباهى فيه وبنقول: “شوفوا الشغل الصح”. كان موقعنا، بنظرنا، تحفة فنية وقلعة تقنية حصينة.
في يوم من الأيام، وصلتني رسالة على البريد الإلكتروني من صديق قديم، شخص أحترمه جداً، وهو كفيف. كانت رسالته بسيطة ومباشرة، لكن وقعها عليّ كان زي الصاعقة. كتبلي: “أبو عمر، ألف مبروك الموقع الجديد، شكله من الصور اللي وصفولي إياها الشباب إشي بجنن. بس للأسف، لما حاولت أتصفحه باستخدام قارئ الشاشة (Screen Reader)، كان عبارة عن فراغ… صفحة بيضا ما فيها إشي. كأني واقف قدام حيط أملس، مش عارف وين الباب ولا الشباك”.
قرأت الرسالة مرة ومرتين وعشرة. شعرت بخليط من الصدمة والخجل. قلعتنا الحصينة اللي كنا فخورين فيها، كانت فعلاً حصناً منيعاً، لكنها كانت منيعة ضد مين؟ ضد صديقي، وضد ملايين المستخدمين من ذوي الإعاقة حول العالم. حسيت حالي زي اللي بنى قصر فخم ونسي يعمله باب. في تلك اللحظة، أدركت أننا لم نبنِ تحفة فنية، بل بنينا جداراً جميلاً من الاستبعاد الرقمي. ومن هنا، بدأت رحلتنا لفهم وتطبيق ما يُعرف بـ “إرشادات الوصول إلى محتوى الويب” أو WCAG.
شو قصة الـ WCAG هاي؟ وليش لازم نهتم؟
لما بلشنا نبحث عن حل، كل الطرق كانت تؤدي إلى هذا الاختصار: WCAG (Web Content Accessibility Guidelines). في البداية، الموضوع كان شكله معقد ومخيف، مليان مصطلحات تقنية وقوائم طويلة. لكن مع الوقت، فهمنا جوهره.
مش مجرد “قانون”، بل هو “بوصلة” إنسانية وأخلاقية
الـ WCAG مش مجرد مجموعة قواعد تقنية لازم نطبقها عشان نتجنب المشاكل القانونية (مع أنها مهمة في بعض الدول). هي في الأساس بوصلة أخلاقية بتوجهنا لبناء فضاء رقمي مفتوح للجميع. الإنترنت اليوم صار زي الشارع والمدرسة والمستشفى، خدمة أساسية للكل. فهل يعقل إنه نبني مدينة جديدة وننسى نعمل فيها ممرات للكراسي المتحركة أو إشارات صوتية للمكفوفين عند إشارات المرور؟ طبعاً لأ. وهذا بالضبط ما تفعله WCAG للويب.
ببساطة، هي مجموعة من التوصيات والمعايير العالمية اللي بتضمن إنه أي شخص، بغض النظر عن قدراته الجسدية أو العقلية أو التكنولوجية، يقدر يستخدم موقعك ويتفاعل معه بفعالية.
الأعمدة الأربعة للوصول: كيف نفهم WCAG ببساطة؟ (POUR)
عشان يسهلوا علينا فهم المبادئ، خبراء WCAG لخصوها في أربعة أعمدة رئيسية، بيشكّلوا كلمة “POUR”:
- Perceivable (قابلية الإدراك)
- Operable (قابلية التشغيل)
- Understandable (قابلية الفهم)
- Robust (المتانة)
خلونا نفصّلها وحدة وحدة مع أمثلة من “جرائمنا” التقنية السابقة وكيف صلحناها.
1. قابلية الإدراك (Perceivable): هل يمكن للجميع “رؤية” المحتوى؟
هذا المبدأ بيحكي إنه لازم كل المعلومات ومكونات الواجهة تكون قابلة للإدراك بحاسة واحدة على الأقل. يعني اللي ما بيقدر يشوف، لازم يقدر يسمع أو يلمس (عبر شاشات برايل).
مشكلتنا الكبرى: موقعنا كان مليان صور وأيقونات بدون أي نص بديل (Alt Text). بالنسبة لنا كانت مجرد صور جميلة، لكن بالنسبة لقارئ الشاشة تبع صديقي، كانت “فراغ” أو “image123.jpg”، يعني ولا إشي.
نصيحة أبو عمر: كنت أفكر النص البديل إشي ثانوي وممل. اليوم، ما بضيف صورة إلا والنص البديل معها، كأنه جزء من اسمها. تخيل إنك بتوصف الصورة لصديقك على التلفون. هذا هو بالضبط النص البديل.
<!-- خطأ شائع: جدار منيع أمام قارئات الشاشة -->
<img src="chart.png">
<!-- الطريقة الصحيحة: جسر من المعلومات -->
<img src="chart.png" alt="رسم بياني يوضح زيادة أرباح الشركة بنسبة 20% في الربع الأخير">
<!-- إذا كانت الصورة للزينة فقط ولا تحمل معلومة -->
<img src="decorative-line.png" alt="">
هذا المبدأ يشمل أيضاً توفير ترجمة نصية (Captions) للفيديوهات، ووصف نصي لمحتوى الصوت، والتأكد من وجود تباين كافٍ في الألوان بين النص والخلفية.
2. قابلية التشغيل (Operable): هل يمكن للجميع “استخدام” الموقع؟
لازم كل مكونات الواجهة تكون قابلة للاستخدام. أشهر مثال هنا هو الاعتماد على الفأرة (الماوس) فقط. في ناس ما بتقدر تستخدم الماوس بسبب إعاقات حركية، أو يمكن يكونوا مستخدمين محترفين بيعتمدوا على لوحة المفاتيح للسرعة.
مشكلتنا الكبرى: كان عنا قوائم منسدلة معقدة ما بتشتغل إلا بالماوس. وبعض الأزرار المهمة ما كان يوصلها مؤشر لوحة المفاتيح (Focus) أبداً. يعني المستخدم اللي بيعتمد على مفتاح “Tab” للتنقل كان يوصل لنقطة مسدودة.
نصيحة أبو عمر: اعمل لنفسك هالتجربة البسيطة: افصل الماوس عن جهازك وحاول تتصفح موقعك باستخدام لوحة المفاتيح فقط (مفتاح Tab للتنقل، Enter للاختيار، Space للمربعات). راح تنصدم من عدد “الحيطان” اللي راح تلاقيها بوشك. هاي التجربة كانت من أكثر التجارب اللي فتحت عيوني.
الحل كان بسيط تقنياً: التأكد من أن كل العناصر التفاعلية (روابط، أزرار، حقول) يمكن الوصول إليها والتركيز عليها، وتوفير مؤشر مرئي واضح لهذا التركيز (Focus Indicator).
/* في ملف الـ CSS، أضف شيئاً كهذا لإنقاذ مستخدمي لوحة المفاتيح */
a:focus,
button:focus,
input:focus {
outline: 3px solid #007bff; /* أو أي لون واضح ومناسب لتصميمك */
outline-offset: 2px;
}
3. قابلية الفهم (Understandable): هل المحتوى والواجهة واضحين؟
الموقع لازم يكون مفهوم وسهل الاستخدام. اللغة لازم تكون واضحة، والتنقل لازم يكون منطقي ومتوقع، ورسائل الخطأ لازم تكون مفيدة ومش مجرد “Error!”.
مشكلتنا الكبرى: كان عنا نموذج تسجيل، إذا المستخدم أخطأ في إدخال إيميله، بتطلعله رسالة حمرا فوق بتقول “خطأ في الإدخال”. طيب أي إدخال؟ وشو الخطأ؟ وليش؟ المستخدم المسكين لازم يقعد يخمّن.
نصيحة أبو عمر: اكتب رسائل الخطأ كأنك بتشرح المشكلة لجدتك الله يطول بعمرها. خليك واضح، لطيف، وقدم الحل. بدل “خطأ 404″، اكتب “عفواً، هاي الصفحة مش ملاقينها. يمكن انحذفت أو تغير عنوانها. تفضل ارجع للصفحة الرئيسية أو استخدم البحث”.
أحد أهم الأمور في هذا الباب هو ربط العناوين (Labels) بحقول الإدخال بشكل صحيح. هذا لا يساعد فقط قارئات الشاشة، بل يسمح لكل المستخدمين بالضغط على عنوان الحقل لتفعيله.
<!-- خطأ: مجرد شكل، لا يوجد فهم -->
<p>البريد الإلكتروني</p>
<input type="email" name="email">
<!-- الطريقة الصحيحة: علاقة واضحة ومفهومة -->
<label for="email-field">البريد الإلكتروني:</label>
<input type="email" id="email-field" name="email">
4. المتانة (Robust): هل موقعك “بفهم” على التقنيات المساعدة؟
هذا المبدأ هو الأكثر تقنية. باختصار، موقعك لازم يكون مبني على معايير الويب القياسية عشان تضمن إنه يشتغل بشكل صحيح على مختلف المتصفحات والتقنيات المساعدة (مثل قارئات الشاشة) اليوم وفي المستقبل.
مشكلتنا الكبرى: كنا من عشاق الـ <div>. كل إشي عنا كان <div>. القائمة الرئيسية <div>، رأس الصفحة <div>، تذييل الصفحة <div>. بالنسبة لقارئ الشاشة، هاي كانت زي غرفة فاضية كبيرة بدون أي معالم. مش عارف وين أولها من آخرها.
نصيحة أبو عمر: خليك صاحب مع المعايير واستخدم HTML الدلالي (Semantic HTML). لغة HTML تطورت وصار فيها وسوم (tags) مخصصة لكل جزء من الصفحة زي
<header>,<nav>,<main>,<article>,<footer>. استخدامها مش بس بينظم كودك، هو بيعطي خريطة واضحة للتقنيات المساعدة عشان تفهم بنية صفحتك وتسمح للمستخدم يتنقل بين أقسامها بسهولة.
قارن بين الهيكلين التاليين وتخيل كيف سيفهمهما قارئ الشاشة:
<!-- هيكل مبهم (طريقة الـ div لكل إشي) -->
<div class="header">...</div>
<div class="navigation">...</div>
<div class="main-content">...</div>
<div class="footer">...</div>
<!-- هيكل واضح ودلالي (الطريقة الصحيحة) -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>
من حصن منيع إلى بيت مفتوح: خطواتنا العملية لتصحيح المسار
بعد ما فهمنا الأساسيات، كان لازم نشتغل. رحلتنا كانت على مراحل:
- التدقيق والفحص: استخدمنا أدوات آلية مثل Lighthouse (موجود في متصفح كروم) و WAVE و axe DevTools عشان نلاقي المشاكل الواضحة. لكن الأهم كان الفحص اليدوي: تصفحنا الموقع بالكيبورد فقط، واستخدمنا قارئ الشاشة NVDA (مجاني) عشان نعيش التجربة اللي حكالنا عنها صديقنا.
- تحديد الأولويات: المشاكل كانت كثيرة. قررنا نبدأ بـ “الثمار الدانية” (Low-hanging fruit) اللي تأثيرها كبير وجهدها قليل: إضافة النصوص البديلة للصور، إصلاح مشاكل التنقل بالكيبورد، وزيادة تباين الألوان في الأماكن الحرجة.
- دمج الوصولية في سير العمل: هاي كانت أهم خطوة. قررنا إن الوصولية (Accessibility أو a11y اختصاراً) ما تكون مجرد “إصلاح أخطاء” في نهاية المشروع. صارت جزء أساسي من كل مرحلة: المصمم صار يفكر بتباين الألوان من البداية، المبرمج صار يكتب HTML دلالي بشكل تلقائي، ومسؤول الجودة صار يختبر الموقع بالكيبورد وقارئ الشاشة كجزء من روتينه اليومي.
الخلاصة: الوصولية مش “شغلة زيادة”، هي أساس الشغل الصح
رحلتنا مع WCAG علمتنا درس كبير. الوصولية مش مجرد إضافة أو ميزة “لطيفة”، هي من صميم مسؤوليتنا كمطورين ومصممين. بناء موقع أو تطبيق لا يمكن للجميع استخدامه هو ببساطة بناء منتج ناقص.
والأجمل من هيك، اكتشفنا إنه الاهتمام بالوصولية ما خدم بس ذوي الإعاقة. خدم الجميع:
- تحسين محركات البحث (SEO) صار أفضل بسبب الـ HTML الدلالي والنصوص البديلة.
- تجربة المستخدم (UX) للكل تحسنت، لأن الموقع صار أوضح وأسهل في التنقل.
- المستخدمين على الأجهزة المحمولة وفي ظروف إضاءة صعبة (شمس ساطعة مثلاً) استفادوا من تباين الألوان العالي.
في النهاية، يا جماعة الخير، البرمجة مش بس أكواد وشاشات. هي جسور بنبنيها بين الناس والمعلومات والخدمات. لا تخلوا الكود تبعكم يبني جدران بدل الجسور. خليكم كرماء في كودكم، وافتحوا أبواب مواقعكم للكل. صدقوني، لما وصلني إيميل ثاني من صديقي بعد التعديلات، بيقول فيه “أبو عمر، شكراً. الآن أستطيع أن أرى موقعك بيديّ وأذنيّ”، كان هذا الشعور أفضل من أي إشادة تقنية أو جائزة تصميم. 🙏
