يعيش أكثر من مليار شخص حول العالم مع شكل من أشكال الإعاقة. هذا يمثّل تقريبًا 15% من سكان العالم. من بينهم أشخاص مكفوفون أو ضعاف البصر، وأشخاص صُمّ أو ضعاف السمع، وأشخاص لديهم إعاقات حركية، واختلافات معرفية، أو حالات مؤقتة مثل كسر في الذراع أو صداع نصفي.
عندما نبني مواقع إلكترونية دون مراعاة هذه الحقائق، فنحن لا نصنع مجرد إزعاج. بل نحرم الناس من المعلومات والخدمات والفرص التي يعتبرها الآخرون أمرًا مُسلّمًا به. إمكانية الوصول ليست ميزة إضافية، بل هي مسؤولية.
ما تعنيه إمكانية الوصول إلى الويب
إمكانية الوصول إلى الويب تعني تصميم وتطوير المواقع بحيث يستطيع الأشخاص ذوو الإعاقة إدراكها وفهمها والتنقل فيها والتفاعل معها. كما تعني أنهم يستطيعون المساهمة في الويب.
هذا يتجاوز قارئات الشاشة. تشمل إمكانية الوصول:
- البصرية: العمى، ضعف البصر، عمى الألوان
- السمعية: الصمم، ضعف السمع
- الحركية: محدودية التحكم الحركي الدقيق، الرعاش، الشلل
- المعرفية: عسر القراءة، اضطراب نقص الانتباه وفرط الحركة (ADHD)، صعوبات الذاكرة، صعوبات التعلم
- المؤقتة والظرفية: كسر في المعصم، ضوء الشمس القوي على الشاشة، بيئة صاخبة، إنترنت بطيء
الفكرة الجوهرية هي أن التصميم المُتاح يفيد الجميع. الترجمات النصية تساعد في الأماكن الصاخبة. التباين العالي يساعد تحت الضوء الساطع. التنقل بلوحة المفاتيح يساعد المستخدمين المحترفين. الكتابة الواضحة تساعد غير الناطقين باللغة الأصلية. إمكانية الوصول ليست وضعًا خاصًا — إنها تصميم جيد.
معيار WCAG
إرشادات إمكانية الوصول إلى محتوى الويب (WCAG) هي المعيار الدولي لإمكانية الوصول إلى الويب، الصادر عن W3C. النسخة الحالية هي WCAG 2.2، وهي منظمة حول أربعة مبادئ تُعرف بالاختصار POUR:
قابل للإدراك (Perceivable)
يجب تقديم المعلومات بطرق يمكن لجميع المستخدمين إدراكها.
- البدائل النصية: كل صورة تحتاج إلى سمة
altتصف محتواها. الصور الزخرفية تستخدمalt="". - الترجمات النصية والنسخ المكتوبة: محتوى الفيديو يحتاج ترجمات نصية؛ المحتوى الصوتي يحتاج نسخًا مكتوبة.
- البنية القابلة للتكيف: يجب أن يكون المحتوى مفهومًا عند إزالة الأنماط. استخدم HTML الدلالي (
<h1>،<nav>،<main>،<article>) وليس مجرد التنسيق البصري. - المحتوى القابل للتمييز: تباين ألوان كافٍ، نص قابل لتغيير الحجم، عدم نقل المعلومات بالألوان وحدها.
قابل للتشغيل (Operable)
يجب أن يتمكن المستخدمون من تشغيل الواجهة.
- قابل للوصول بلوحة المفاتيح: كل عنصر تفاعلي يجب أن يكون قابلًا للوصول والاستخدام بلوحة المفاتيح فقط. لا تصنع مصائد الفأرة.
- وقت كافٍ: إذا كان للمحتوى حدود زمنية، يجب أن يتمكن المستخدمون من تمديدها أو تعطيلها.
- منع النوبات: تجنب المحتوى الذي يومض أكثر من ثلاث مرات في الثانية.
- قابل للتنقل: عناوين صفحات واضحة، هيكل عناوين منطقي، روابط تخطي التنقل، مؤشرات تركيز مرئية.
قابل للفهم (Understandable)
يجب أن يكون المحتوى والواجهة مفهومين.
- نص مقروء: حدّد لغة الصفحة (سمة
lang). استخدم لغة واضحة وبسيطة قدر الإمكان. - سلوك متوقع: يجب أن يكون التنقل متسقًا. يجب ألا تغير الصفحات السياق بشكل غير متوقع.
- مساعدة الإدخال: ضع تسميات واضحة لحقول النماذج. قدّم رسائل خطأ مفيدة توضح ما حدث خطأ وكيفية إصلاحه.
متين (Robust)
يجب أن يكون المحتوى متينًا بما يكفي للعمل مع التقنيات الحالية والمستقبلية.
- HTML صالح: ترميز دلالي صحيح يمكن للتقنيات المساعدة تفسيره بشكل موثوق.
- الاسم والدور والقيمة: يجب أن تكشف المكونات المخصصة عن غرضها لواجهات برمجة إمكانية الوصول (باستخدام ARIA عند الحاجة).
مستويات المطابقة
يحدد WCAG ثلاثة مستويات:
| المستوى | المعنى | مثال |
|---|---|---|
| A | الحد الأدنى لإمكانية الوصول | الصور لها نص بديل، الصفحات لها عناوين |
| AA | الهدف القياسي لمعظم المواقع | نسبة تباين الألوان 4.5:1 على الأقل للنص العادي |
| AAA | أعلى مستوى، ليس دائمًا قابلًا للتحقيق | نسبة تباين 7:1، لغة إشارة لجميع الفيديو |
تتطلب معظم التشريعات حول العالم الامتثال لـ المستوى AA. هذا هو المستوى الذي يجب أن تستهدفه.
الحواجز الشائعة وكيفية إصلاحها
النص البديل المفقود للصور
المشكلة: يسمع مستخدمو قارئ الشاشة كلمة "صورة" أو لا يسمعون شيئًا على الإطلاق.
الحل: أضف نصًا بديلًا وصفيًا alt لكل صورة إعلامية. للصور الزخرفية، استخدم alt="" حتى يتخطاها قارئ الشاشة.
<!-- Good -->
<img
src="chart.png"
alt="Bar chart showing a 40% increase in sales from January to June 2025"
/>
<!-- Decorative -->
<img src="divider.svg" alt="" />
تباين الألوان غير الكافي
المشكلة: لا يستطيع الأشخاص ضعاف البصر أو المصابون بعمى الألوان قراءة النص.
الحل: تأكد من نسبة تباين لا تقل عن 4.5:1 للنص العادي و3:1 للنص الكبير (18 بكسل أو أكبر، أو 14 بكسل عريض). استخدم أداة فحص التباين للتحقق من مجموعات الألوان.
يمكنك التحقق من تباين الألوان الآن باستخدام أداة فاحص التباين الخاصة بنا. تعرض نتائج النجاح/الفشل لمعايير WCAG AA وAAA فورًا.
تسميات النماذج المفقودة
المشكلة: لا يعرف مستخدمو قارئ الشاشة الغرض من حقل النموذج.
الحل: كل حقل إدخال يحتاج إلى عنصر <label> مرئي مرتبط عبر سمة for.
<!-- Good -->
<label for="email">Email address</label>
<input type="email" id="email" name="email" />
<!-- Bad: placeholder is not a label -->
<input type="email" placeholder="Email address" />
عدم وجود تنقل بلوحة المفاتيح
المشكلة: المستخدمون الذين لا يستطيعون استخدام الفأرة يصبحون محصورين.
الحل: استخدم عناصر HTML الأصلية (<button>، <a>، <select>) التي تكون قابلة للوصول بلوحة المفاتيح افتراضيًا. إذا بنيت مكونات مخصصة، تأكد من أنها قابلة للتركيز وتستجيب لأحداث لوحة المفاتيح. لا تزيل مخططات التركيز أبدًا دون توفير بديل.
بنية الصفحة المفقودة
المشكلة: لا يستطيع مستخدمو قارئ الشاشة التنقل بكفاءة.
الحل: استخدم HTML الدلالي. عنصر <h1> واحد لكل صفحة، تسلسل عناوين منطقي (بدون تخطي المستويات)، معالم (<nav>، <main>، <footer>).
التشغيل التلقائي للوسائط
المشكلة: الصوت غير المتوقع يُزعج مستخدمي قارئ الشاشة. الفيديو الذي يعمل تلقائيًا قد يُثير نوبات أو يسبب ضيقًا.
الحل: لا تقم أبدًا بالتشغيل التلقائي للصوت. إذا كان الفيديو يعمل تلقائيًا، تأكد من كتم الصوت افتراضيًا وتوفير أزرار الإيقاف المؤقت.
اللون وحده لا يكفي
لا تعتمد أبدًا على اللون كطريقة وحيدة لنقل المعلومات. خذ بعين الاعتبار:
- حقل النموذج ذو الحدود الحمراء للأخطاء يحتاج أيضًا إلى أيقونة خطأ أو رسالة نصية
- الرسم البياني ذو الخطوط الملونة يحتاج أيضًا إلى أنماط أو تسميات أو وسيلة إيضاح
- الرابط في النص يحتاج إلى خط سفلي أو إشارة بصرية أخرى، وليس مجرد تغيير في اللون
حوالي 8% من الرجال و0.5% من النساء لديهم شكل من أشكال نقص رؤية الألوان. التصميم مع مراعاة ذلك ليس حالة هامشية — إنه شمولية أساسية.
اختبار إمكانية الوصول
الاختبار الآلي
تكتشف الأدوات الآلية حوالي 30-40% من مشاكل إمكانية الوصول. إنها خطوة أولى جيدة وليست حلًا كاملًا.
- axe DevTools (إضافة متصفح) — تفحص الصفحة وتُبلّغ عن انتهاكات WCAG
- Lighthouse (مدمج في Chrome DevTools) — يتضمن تدقيق إمكانية الوصول
- WAVE (أداة على الويب) — طبقة بصرية تعرض المشاكل
الاختبار اليدوي
تتطلب العديد من مشاكل إمكانية الوصول حكمًا بشريًا:
- اختبار لوحة المفاتيح: افصل الفأرة وتنقل في موقعك بالكامل باستخدام Tab وEnter وEscape ومفاتيح الأسهم. هل يمكنك الوصول إلى كل شيء؟ هل ترتيب التركيز منطقي؟
- اختبار قارئ الشاشة: جرّب VoiceOver (Mac) أو NVDA (Windows، مجاني) أو TalkBack (Android). هل المحتوى مفهوم عند قراءته بصوت عالٍ؟
- اختبار التكبير: كبّر المتصفح إلى 200%. هل التخطيط لا يزال يعمل؟ هل هناك محتوى مقطوع أو متداخل؟
- تقليل الحركة: فعّل "تقليل الحركة" في إعدادات نظام التشغيل. هل تحترم الرسوم المتحركة هذا التفضيل؟
اختبار المستخدمين
أثمن الملاحظات تأتي من الأشخاص الذين يستخدمون التقنيات المساعدة فعليًا في حياتهم اليومية. إذا سمحت ميزانيتك، أشرك المستخدمين ذوي الإعاقة في عملية الاختبار.
إمكانية الوصول طيف وليست خانة اختيار
إمكانية الوصول ليست مشروعًا لمرة واحدة له خط نهاية. إنها ممارسة مستمرة. المواقع تتغير، ويُضاف محتوى جديد، وقد تظهر حواجز جديدة مع كل تحديث.
الهدف ليس الكمال. الهدف هو التحسين المستمر والاهتمام الحقيقي بالأشخاص الذين يستخدمون ما تبنيه. ابدأ بالتغييرات الأكثر تأثيرًا — تباين الألوان، النص البديل، التنقل بلوحة المفاتيح، تسميات النماذج — وابنِ من هناك.
كل حاجز تزيله هو باب تفتحه لشخص ما.
قائمة فحص سريعة
- جميع الصور لها نص
altذو معنى (أوalt=""إذا كانت زخرفية) - تباين الألوان يفي بمعيار WCAG AA (4.5:1 للنص، 3:1 للنص الكبير)
- جميع حقول النماذج لها تسميات مرئية
- الموقع قابل للتنقل بالكامل بلوحة المفاتيح
- العناوين تتبع تسلسلًا هرميًا منطقيًا
- مؤشرات التركيز مرئية
- لغة الصفحة محددة (سمة
langعلى<html>) - لا تُنقل أي معلومات بالألوان وحدها
- الفيديوهات تحتوي على ترجمات نصية
- الرسوم المتحركة تحترم
prefers-reduced-motion