يا جماعة الخير، السلام عليكم. معكم أخوكم أبو عمر.
قبل كم سنة، كنت فخور جدًا بتطبيق عملته للعيلة. تطبيق بسيط، زي ألبوم صور رقمي، بنحط فيه صورنا وذكرياتنا عشان الكل يشوفها، خصوصًا القرايب اللي مغتربين. في أول جمعة للعيلة بعد ما خلصته، مسكت تلفوني بحماس ورحت عند ستّي (جدتي) الله يطول بعمرها، وقلتلها: “شوفي يا ستّي شو عملت!”.
فتحت التطبيق قدامها، وبديت أقلّب في الصور. كانت ستّي مبسوطة وهي تشوف صور أولادها وأحفادها، بس لاحظت إنها بتميل راسها وبتقرّب عيونها كثير من الشاشة. بعد شوي، سألتني سؤال بسيط بس وقعه كان زي الصاعقة عليّ: “ليش يا سيدي هيك الخط صغير والأزرار ألوانها باهتة؟ مش شايفة اشي والله”.
في هذيك اللحظة، حسيت بغصة. أنا، المبرمج الخبير بالتقنيات الحديثة، عملت تطبيق جميل وقوي، بس نسيت أهم حدا: ستّي. تطبيقي كان “غير قابل للاستخدام” بالنسبة لإنسانة نظرها ضعيف شوي بسبب العمر. يومها، ما تعلمت درس في البرمجة، بل تعلمت درس في الإنسانية. وهذا الدرس هو مدخلنا لموضوع اليوم: إمكانية الوصول والتصميم الشامل.
شو القصة؟ ما هي إمكانية الوصول والتصميم الشامل؟
خلونا نبسط المفاهيم. كثير ناس بتخلط بينهم، بس في فرق جوهري:
- إمكانية الوصول (Accessibility – a11y): هي النتيجة النهائية. هل يستطيع شخص من ذوي الإعاقة (بصرية، سمعية، حركية، إدراكية) استخدام منتجك الرقمي بنجاح؟ هي أشبه بقائمة تحقق (checklist) نتأكد من خلالها أننا نتبع معايير معينة، أشهرها إرشادات الوصول إلى محتوى الويب (WCAG).
- التصميم الشامل (Inclusive Design): هي العملية والفلسفة. كيف نصمم منتجاتنا من اليوم الأول مع الأخذ في الاعتبار أوسع شريحة ممكنة من المستخدمين، باختلاف قدراتهم وخلفياتهم وظروفهم؟ التصميم الشامل لا يركز على الإعاقة فقط، بل على التنوع البشري بأكمله. هو اللي بيخلينا نسأل “مين ممكن نستثني بتصميمنا هذا؟” بدل ما نسأل “هل امتثلنا للقواعد؟”.
باختصار، إمكانية الوصول هي “ماذا” نفعل، والتصميم الشامل هو “كيف” و”لماذا” نفعله.
ليش لازم نهتم؟ أكثر من مجرد قانون
صحيح، القوانين بتصير أشد. مثلاً، في أمريكا، من أبريل 2026، لازم كل الهيئات الحكومية تمتثل لمعيار WCAG 2.1 Level AA. وهذا إشي مهم ومحفز. لكن القصة أعمق من هيك:
- أخلاقيًا وإنسانيًا: من حق الجميع الوصول للمعلومات والخدمات الرقمية. استبعاد شريحة من المجتمع هو شكل من أشكال التمييز.
- تجاريًا: الأشخاص ذوو الإعاقة وأسرهم يمثلون قوة شرائية هائلة. لما تصمم للجميع، أنت بتوسع قاعدة عملائك المحتملين.
- لتحسين تجربة الجميع: وهذا هو السر. التصميم الشامل يحسّن التجربة لكل المستخدمين، وليس فقط لذوي الإعاقة. هل عمرك شفت فيديو بدون صوت لأنك في مكان عام؟ أنت استخدمت ميزة الترجمة (captions) المصممة أساسًا لضعاف السمع. هل عمرك حاولت تشوف شاشة تلفونك تحت الشمس؟ أنت استفدت من التباين اللوني العالي (high contrast) المصمم لضعاف البصر. هذا ما يسمى بـ “تأثير الرصيف المنحدر” (Curb-Cut Effect).
تحديات شفتها بعيني في الميدان
الطريق مش دايماً سهلة، وفي تحديات حقيقية واجهتني وواجهت فرقي في الشغل:
التكلفة والوقت: “بدها مصاري ووقت يا أبو عمر!”
أكثر جملة بسمعها. صحيح، إعادة تصميم موقع قديم ليتوافق مع المعايير ممكن تكون مكلفة. لكن التكلفة الأكبر هي تكلفة تجاهل الموضوع. الحل؟ لا تخليها خطوة أخيرة. ابدأ بدمج إمكانية الوصول من أول يوم في أي مشروع جديد. بتصير جزء من العملية الطبيعية، وتكلفتها بتقل كثير.
الفهم المحدود: القصة مش بس alt text
كثير مطورين ومصممين بيفكروا إن إمكانية الوصول هي مجرد إضافة النص البديل للصور (alt text). يا جماعة، القصة أكبر من هيك بكثير. هي تشمل:
- بنية المحتوى المنطقية (Semantic HTML): هل تستخدم العناوين
<h1>,<h2>بشكل صحيح؟ هل تستخدم<nav>للملاحة و<main>للمحتوى الرئيسي؟ هذا أساسي لقارئات الشاشة. - التنقل بلوحة المفاتيح: هل يمكن للمستخدم التنقل في كل صفحتك باستخدام زر “Tab” فقط؟ وهل مؤشر التركيز (focus indicator) واضح؟
- إدارة الحالات الديناميكية (Dynamic states): لما تظهر رسالة خطأ، هل قارئ الشاشة بيعلن عنها؟
تضارب المتطلبات: اللي بزبط لواحد، بخرب على التاني
مثال مشهور: الوضع الداكن (Dark Mode). كثير ناس بتحبه، لكن بعض الأشخاص اللي عندهم “استجماتيزم” ممكن يلاقوا صعوبة في قراءة النص الأبيض على خلفية سوداء. الحل مش إنك تختار طرف على حساب التاني، الحل هو توفير الخيارات. اسمح للمستخدم يختار الوضع اللي بريحه.
غياب أصحاب الشأن: “لا شيء عنا بدوننا”
أكبر خطأ ممكن نرتكبه هو التصميم لمجموعة من الناس بدون إشراكهم. شعار مجتمع ذوي الإعاقة هو “Nothing About Us Without Us”. لو فريقك كله من الشباب اللي نظرهم 6/6 وما عندهم أي إعاقات، كيف ممكن يفهموا تحديات شخص كفيف أو شخص عنده صعوبة في استخدام الماوس؟
الحلول العملية: من وين نبدأ يا جماعة؟
طيب يا أبو عمر، حكيتلنا المشاكل، وين الحلول؟ تفضلوا خارطة طريق عملية ومجربة.
1. الفحص الدوري (Audits) – أدوات بتساعدك تشوف بعيون غيرك
ابدأ بفحص وضعك الحالي. في أدوات رائعة ومجانية بتساعدك تكتشف المشاكل الأساسية:
- Lighthouse: مدمجة في أدوات المطورين في متصفح جوجل كروم. بتعطيك تقرير عن الأداء وإمكانية الوصول وغيره.
- WAVE by WebAIM: إضافة للمتصفح (extension) بتحلل صفحتك وبتعرض الأخطاء والتنبيهات بشكل بصري مباشر على الصفحة.
- Axe DevTools: أداة قوية جدًا للمطورين بتكتشف نسبة كبيرة من مشاكل الوصول بشكل آلي.
نصيحة من أبو عمر: هذه الأدوات ممتازة للبداية، لكنها تكتشف 30-40% فقط من المشاكل. لا تعتمد عليها كليًا.
2. البنية السليمة هي الأساس (Semantic HTML)
قبل أي لمسة جمالية، تأكد أن هيكل صفحتك سليم. قارئات الشاشة تعتمد على هذا الهيكل لفهم المحتوى.
مثال سيء (Non-semantic):
<div class="header">
<div class="logo">...</div>
<div class="nav">...</div>
</div>
<div class="main-content">
<div class="article-title">عنوان المقال</div>
<p>...</p>
</div>مثال جيد (Semantic):
<header>
<a href="/">...</a>
<nav>...</nav>
</header>
<main>
<article>
<h1>عنوان المقال</h1>
<p>...</p>
</article>
</main>الفرق شاسع بالنسبة لقارئ الشاشة. في المثال الثاني، يستطيع المستخدم القفز مباشرة إلى المحتوى الرئيسي <main> أو إلى قائمة التنقل <nav>.
3. التنقل بالـ “تاب”: حرية الحركة بدون ماوس
جرب بنفسك الآن: اترك الماوس وحاول تتصفح موقعك المفضل باستخدام زر Tab للتنقل وزر Enter للتفعيل. هل التجربة سلسة؟ هل ترى بوضوح أين أنت في كل خطوة؟
تأكد من أن مؤشر التركيز (focus indicator) واضح جدًا. لا تكتب أبدًا outline: none; بدون توفير بديل واضح.
مثال CSS لتحسين مؤشر التركيز:
/*
استخدم :focus-visible لتظهر الحلقة فقط عند التنقل بالكيبورد
وليس عند النقر بالماوس، وهذا يحسن التجربة للجميع.
*/
:focus-visible {
outline: 3px solid #007bff;
outline-offset: 2px;
border-radius: 4px;
}4. التباين اللوني ووضوح الخط (Color Contrast & Font Clarity)
مثل ما صار مع ستّي، التباين الضعيف يجعل القراءة مستحيلة للكثيرين. معايير WCAG 2.1 AA تتطلب نسبة تباين 4.5:1 للنص العادي. استخدم أدوات مثل WebAIM Contrast Checker أو إضافة Stark لبرامج التصميم (Figma, Sketch) لتتأكد من ألوانك.
5. الاختبار مع مستخدمين حقيقيين
وهذه أهم خطوة بالزبط. كل القوائم والأدوات في العالم لا تغني عن جلسة اختبار واحدة مع شخص كفيف يستخدم قارئ شاشة، أو شخص عنده إعاقة حركية يستخدم الكيبورد فقط. ستتعلم في ساعة واحدة معهم أكثر مما ستتعلمه في أسبوع من القراءة.
6. نظرة للمستقبل: الاستعداد لـ WCAG 3.0
العالم يتطور، والمعايير أيضًا. الإصدار القادم من الإرشادات، WCAG 3.0، سيغير المعادلة. بدلًا من نموذج النجاح/الرسوب الحالي، سيقدم نموذج تقييم متدرج (برونزي، فضي، ذهبي). التركيز سيتحول من “هل اتبعت القاعدة؟” إلى “ما مدى جودة التجربة الفعلية للمستخدم؟”. هذا يعني أن الاختبار مع المستخدمين الحقيقيين سيصبح أكثر أهمية من أي وقت مضى.
أمثلة من الواقع بتلهمنا
- Netflix: لا تقدم فقط ترجمة عادية (subtitles)، بل ترجمة مغلقة (Closed Captions – CC) تصف الأصوات المهمة مثل [موسيقى مشوقة] أو [صوت انفجار]، بالإضافة للوصف الصوتي (Audio Description) الذي يروي ما يحدث على الشاشة للمكفوفين.
- Duolingo: مثال رائع على التصميم الشامل. التطبيق لا يوفر فقط خيارات لتعطيل التمارين التي تتطلب التحدث (لمن لا يستطيعون الكلام أو في مكان عام)، بل يتكيف مع سرعة تعلمك وأخطائك، وهذا مفيد جدًا للمستخدمين الذين يعانون من تشتت الانتباه (ADHD) أو عسر القراءة (Dyslexia).
- WordPress VIP: منصة كاملة تركز على الشركات الكبرى، وتجعل الامتثال لمعايير WCAG نقطة بيع أساسية، مما يدل على أن إمكانية الوصول أصبحت مطلبًا تجاريًا مهمًا.
الخلاصة: نصيحة من أخوكم أبو عمر
يا جماعة، قصة ستّي علمتني أن الكود الذي نكتبه ليس مجرد أسطر على شاشة، بل هو جسر يصل بين الناس والعالم الرقمي. واجبنا كصنّاع لهذا العالم أن نبني جسورًا قوية وواسعة تتسع للجميع، لا أن نبني حواجز تستثني أحدًا.
إمكانية الوصول والتصميم الشامل ليست مشروعًا له بداية ونهاية، بل هي رحلة مستمرة من التعلم والتحسين والتعاطف. لا تخف من البداية. ابدأ بخطوة صغيرة اليوم: افحص صفحتك الرئيسية بأداة WAVE، أو جرب تصفح موقعك بدون ماوس.
ابنِ منتجك القادم وأنت تفكر في ستّك، وفي جارك الذي يعاني من عمى الألوان، وفي الشاب الذي يده مكسورة، وفي كل إنسان يستحق تجربة رقمية كريمة ومحترمة. 🙏
