يا جماعة الخير، بالصلاة على النبي… أذكر مرة، قبل كم سنة، كنت أنا وفريقي شغالين على مشروع، منصة تعليمية إلكترونية. صرفنا عليها شهور طويلة، سهرنا الليالي، وطلعنا بتصميم، والله يا جماعة، كان تحفة فنية. ألوان متناسقة، حركات (animations) سلسة، وتجربة بصرية تخطف الأنفاس. يوم الإطلاق، كانت الاحتفالات في المكتب “ع الحارك”، والكل مبسوط بالإنجاز.
بعد أسبوع، وصلني إيميل غيّر نظرتي لكل شيء. الإيميل كان من شب اسمه “أحمد”، طالب جامعي كفيف، كان متحمس جدًا يستخدم منصتنا. كتب في الإيميل: “يا عمي أبو عمر، يعطيكم العافية شغلكم بجنن من الصور اللي وصفولي إياها أصحابي، بس أنا مش شايف إشي! قارئ الشاشة تبعي (Screen Reader) ضايع، بحكيلي ‘زر’، ‘صورة’، ‘رابط’ بدون أي معنى. كأني ماشي في مدينة غريبة بعيون معصوبة”.
كلماته كانت زي الكف على وجهي. إحنا، بكل غرورنا بـ “التحفة الفنية”، بنينا جدارًا عاليًا أمام أحمد وكل اللي مثله. موقعنا الجميل كان جحيمًا لأي شخص لا يرى. هذه الحادثة كانت نقطة تحول، مش بس للمشروع، بل لفلسفتي كلها في البرمجة والتطوير. من يومها، صارت “الوصولية” أو الـ “Accessibility” (a11y) جزء لا يتجزأ من أي سطر كود بكتبه.
ما هي “الوصولية” (Accessibility)؟ ولماذا هي ليست رفاهية؟
ببساطة، الوصولية (والتي نختصرها أحيانًا بـ a11y لأن هناك 11 حرفًا بين الـ ‘a’ والـ ‘y’ في كلمة Accessibility) هي ممارسة تصميم وتطوير المواقع والتطبيقات بحيث يمكن للجميع استخدامها، بغض النظر عن قدراتهم الجسدية، الحسية، أو الإدراكية.
فكر فيها هيك: لما تبني عمارة، القانون بجبرك تعمل ممر للكراسي المتحركة ومصعد. ليش؟ عشان المبنى يكون للكل. نفس المبدأ تمامًا ينطبق على العالم الرقمي. الإنترنت صار جزء أساسي من حياتنا للتعليم والعمل والتواصل، ومن غير المقبول أخلاقيًا وتقنيًا إننا نستبعد شريحة كبيرة من المجتمع.
“الوصولية ليست ميزة إضافية (feature)، بل هي حق أساسي للمستخدم.” – أبو عمر
جحيم الاستبعاد: كيف يبدو موقعك “غير المتاح”؟
عشان تحس بمشكلة أحمد، خلينا نشوف كيف “بتشوف” التقنيات المساعدة (Assistive Technologies) موقعك المصمم بشكل سيء:
- للمستخدم الكفيف (قارئ الشاشة): إذا كانت صورك بدون نص بديل (alt text)، قارئ الشاشة سيقول “صورة” أو “graphic-12345.jpg”. إذا كان الزر عبارة عن أيقونة بدون تسمية، سيقول “زر”. تجربة محبطة ومستحيلة.
- للمستخدم الذي لديه إعاقة حركية: إذا كان موقعك لا يمكن التنقل فيه باستخدام لوحة المفاتيح فقط (بدون ماوس)، فهذا المستخدم محبوس. لا يستطيع الوصول للقوائم أو ملء النماذج.
- للمستخدم الذي يعاني من ضعف البصر: إذا كان تباين الألوان ضعيفًا (مثلاً نص رمادي فاتح على خلفية بيضاء)، فالنص يكون غير قابل للقراءة.
- للمستخدم الأصم أو ضعيف السمع: إذا كان محتواك يعتمد على الفيديو أو الصوت بدون توفير نصوص أو ترجمات (captions)، فقد ضاع المحتوى تمامًا بالنسبة له.
المعايير المنقذة: مبادئ WCAG الأربعة
الحمد لله، لسنا ضائعين في هذا المجال. هناك معايير عالمية واضحة اسمها “إرشادات الوصول إلى محتوى الويب” أو (Web Content Accessibility Guidelines – WCAG). هذه الإرشادات قائمة على أربعة مبادئ أساسية، سهلة التذكر (POUR):
- Perceivable (قابل للإدراك): يجب أن يكون المحتوى متاحًا للحواس. هذا يعني توفير بدائل نصية للصور، وترجمات للفيديو.
- Operable (قابل للتشغيل): يجب أن تكون واجهة المستخدم قابلة للتحكم. هذا يعني أن كل شيء يعمل بالماوس يجب أن يعمل بلوحة المفاتيح.
- Understandable (مفهوم): يجب أن يكون المحتوى والمعلومات واضحة وسهلة الفهم. لغة بسيطة، وتصميم متوقع (predictable).
- Robust (متين): يجب أن يكون الكود نظيفًا وقويًا بما يكفي ليتم تفسيره بشكل موثوق من قبل مختلف المتصفحات والتقنيات المساعدة.
خطوات عملية لإنقاذ موقعك: نصائح من خبصة أبو عمر
الكلام النظري حلو، بس كيف نطبق؟ إليك خلاصة خبرتي في خطوات عملية مع أمثلة كود.
1. استخدم HTML الدلالي (Semantic HTML) كأنه قانون
هذه أهم نصيحة على الإطلاق. الـ HTML فيه عناصر مصممة لتعطي معنى للتركيب، مش بس شكل. قارئ الشاشة يفهمها.
مثال سيء (لا تفعله!):
<!-- هذا ليس زرًا حقيقيًا! -->
<div class="button" onclick="submitForm()">إرسال</div>مثال ممتاز (افعله دائمًا):
<!-- هذا زر حقيقي، مفهوم للكل -->
<button type="submit">إرسال</button>استخدم <nav> للشريط العلوي، <main> للمحتوى الرئيسي، <footer> للتذييل، <article> للمقالات. هذا يعطي خريطة واضحة لموقعك للمستخدمين والتقنيات المساعدة.
2. النص البديل للصور (Alt Text) ليس خيارًا
كل صورة تنقل معلومة يجب أن تحتوي على وصف في السمة alt. الوصف يجب أن يكون موجزًا ومفيدًا.
مثال سيء:
<img src="chart.png" alt="صورة">مثال ممتاز:
<img src="chart.png" alt="رسم بياني يوضح زيادة أرباح الربع الرابع بنسبة 20%">إذا كانت الصورة للزينة فقط (decorative)، اترك الـ alt فارغًا (alt="") حتى يتجاهلها قارئ الشاشة.
3. لا تقتل التحديد (Outline) في CSS
كم مرة رأيت هذا الكود اللعين في ملفات الـ CSS؟
/* الجريمة الكبرى في عالم الوصولية */
*:focus {
outline: none;
}هذا الكود يجعل التنقل باستخدام لوحة المفاتيح مستحيلًا، لأن المستخدم لا يرى أين هو مؤشر الـ “focus”. إذا كنت لا تحب الشكل الافتراضي، قم بتصميمه بنفسك.
الحل الأفضل:
/* بديل جميل ومفيد */
*:focus-visible {
outline: 2px solid #007bff;
outline-offset: 2px;
border-radius: 4px;
}4. تباين الألوان هو صديقك
التصميم الجميل لا يعني استخدام ألوان باهتة. تأكد من أن تباين الألوان بين النص والخلفية كافٍ. هناك أدوات كثيرة أونلاين لفحص هذا، مثل “WebAIM Contrast Checker”. القاعدة العامة هي أن تكون النسبة 4.5:1 للنص العادي على الأقل.
5. استخدم ARIA عند الضرورة فقط
ARIA (Accessible Rich Internet Applications) هي مجموعة من السمات التي يمكنك إضافتها لعناصر HTML لجعلها أكثر قابلية للوصول، خاصة للمكونات المعقدة (مثل القوائم المنسدلة المخصصة).
القاعدة الأولى لـ ARIA هي: “لا تستخدم ARIA”. بمعنى، إذا كان هناك عنصر HTML أصلي يقوم بالوظيفة، استخدمه. إذا لم يكن موجودًا، حينها فقط استخدم ARIA بحذر.
مثال: زر أيقونة بدون نص
<!-- قارئ الشاشة لا يعرف ما هذا -->
<button><i class="fa fa-times"></i></button>
<!-- الحل باستخدام aria-label -->
<button aria-label="إغلاق النافذة"><i class="fa fa-times" aria-hidden="true"></i></button>لاحظ أننا أضفنا aria-hidden="true" على الأيقونة نفسها لأنها للزينة، والوصف المهم موجود في aria-label على الزر.
الخلاصة: من تحفة بصرية إلى تحفة إنسانية
العودة لقصة أحمد… بعد إيميله، شكلنا فريق عمل مصغر، وقضينا أسبوعين “نصلح خبصتنا”. أضفنا HTML دلالي، كتبنا نصوصًا بديلة لكل الصور، ضبطنا الألوان، وتأكدنا أن كل شيء يعمل بالكيبورد. ثم أرسلنا لأحمد نسخة تجريبية.
رده هذه المرة كان أغلى من كل المديح الذي حصلنا عليه للتصميم البصري. قال: “الآن، أشعر أن هذا المكان بُني لي أيضًا. شكرًا لكم”.
يا أصدقائي المبرمجين والمصممين، الوصولية ليست مجرد قائمة مهام تقنية. هي تغيير في العقلية. هي أن تفكر في “الجميع” عندما تبني، وليس فقط في المستخدم “المثالي” الذي يشبهك. بناء تجارب شاملة لا يقلل من جمال التصميم، بل يزيده عمقًا وإنسانية. لا تبنوا جدرانًا، بل ابنوا جسورًا. 💻❤️
