قائمة إتاحة الوصول للمواقع تضمن أن ذوي الإعاقة يستطيعون استخدام موقعك: كل وظيفة تعمل بلوحة المفاتيح، التركيز ظاهر دائما، النص بتباين كاف، الصور بنص بديل مفيد، النماذج بعناوين وأخطاء واضحة، العناوين منظمة، الحركة قابلة للتقليل، والموقع يعمل مع قارئات الشاشة. والمستوى AA في WCAG 2.2 هو المعيار المعتاد.
إتاحة الوصول جزء من تعريفي لكلمة “انتهى” في أي مشروع، مع السرعة والأمان. وهذا الدليل يدعم دليل هيكل صفحة الهبوط، لأن الصفحة غير المتاحة تحول أقل للجميع.
ما معنى إتاحة الوصول للمواقع؟
تعني أن الأشخاص ذوي الإعاقات البصرية أو السمعية أو الحركية أو الإدراكية يستطيعون إدراك الموقع وفهمه والتنقل فيه والتفاعل معه، بما في ذلك عبر التقنيات المساعدة مثل قارئات الشاشة والمكبرات والتحكم الصوتي والتنقل بلوحة المفاتيح فقط. وينظم WCAG ذلك في أربعة مبادئ: قابل للإدراك، قابل للتشغيل، مفهوم، ومتين.
لماذا تهم الأعمال
- عدد أكبر من الناس يستطيع استخدام موقعك والشراء منه.
- كثير من إصلاحات الإتاحة (عناوين واضحة، تباين، هيكل) تحسن التحويل وSEO أيضا.
- المتطلبات القانونية تتزايد، فقانون الإتاحة الأوروبي يغطي التجارة الإلكترونية منذ 28 يونيو 2025، ولمناطق أخرى قواعدها الخاصة.
1. الوصول بلوحة المفاتيح
- كل رابط وزر وقائمة وحقل ونافذة يمكن الوصول إليه بزر Tab.
- ترتيب تنقل منطقي يتبع الترتيب المرئي.
- لا مصائد للوحة المفاتيح، والنوافذ تغلق بزر Escape وتعيد التركيز.
- رابط “تخطي إلى المحتوى” كأول عنصر قابل للتركيز.
- العناصر المخصصة (منزلقات، تبويبات، أكورديون) تعمل بالمفاتيح كما هو متوقع.
2. التركيز الظاهر
- مؤشر التركيز ظاهر بوضوح على كل العناصر التفاعلية.
- التركيز غير مخفي خلف الهيدر الثابت أو إشعار الكوكيز (معيار في WCAG 2.2: Focus Not Obscured).
إزالة الإطار عند النقر بالماوس مع إبقائه لمستخدمي لوحة المفاتيح:
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none; }
a:focus-visible,
button:focus-visible {
outline: 3px solid var(--focus, #0ea5a4);
outline-offset: 3px;
}
هكذا يبقى الموقع أنيقا لمستخدمي الماوس دون كسر التنقل بلوحة المفاتيح.
3. الألوان والتباين
- تباين النص العادي 4.5:1 على الأقل، والنص الكبير 3:1 على الأقل.
- عناصر الواجهة والرسومات المهمة 3:1 على الأقل مقابل الألوان المجاورة.
- لا تنقل المعلومة باللون وحده (الأخطاء تحتاج نصا، والروابط داخل النص تحتاج خطا سفليا أو إشارة أخرى).
- فحص الوضعين الفاتح والداكن إن وجدا.
4. الصور والوسائط
- الصور المعلوماتية لها نص بديل يصف الغرض منها.
- الصور الزخرفية لها نص بديل فارغ (
alt=""). - النص البديل للشعار هو اسم الشركة.
- تجنب صور النصوص، وإن استخدمت فالنص يوضع في alt.
- الفيديوهات بترجمة نصية، والصوتيات بنص مكتوب.
- لا وسائط تعمل تلقائيا بالصوت.
5. الهيكل والدلالة
h1واحد لكل صفحة وتسلسل عناوين منطقي.- المعالم:
headerوnavوmainوfooter. - القوائم مكتوبة كقوائم، والجداول كجداول بعناوين.
- سمة
langعلىhtmlوعلى الفقرات بلغة أخرى، وdir="rtl"للعربية. - روابط بنص وصفي لا “اضغط هنا”.
- الأزرار عناصر
buttonوالروابط عناصرa.
6. النماذج
- كل حقل له عنوان ظاهر مرتبط به.
- الحقول الإلزامية موضحة بالنص لا باللون أو النجمة فقط.
- الأخطاء موضحة نصا بجوار الحقل وتعلن لقارئات الشاشة.
- تحديد غرض الحقول بـ
autocompleteعند الإمكان. - لا ألغاز ذهنية مطلوبة لتسجيل الدخول أو الإرسال (WCAG 2.2: Accessible Authentication)، أو توفير بديل.
راجع أفضل ممارسات نماذج التواصل.
7. حجم الهدف واللمس
- العناصر التفاعلية 24 في 24 بكسل CSS على الأقل أو بمسافة كافية (WCAG 2.2 Target Size Minimum, AA).
- تفاعلات السحب لها بديل بنقرة واحدة (WCAG 2.2: Dragging Movements).
بتفصيل أكبر في قائمة التصميم للموبايل أولا.
8. الحركة والتوقيت
- احترم تفضيل تقليل الحركة:
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
- السلايدر قابل للإيقاف، ولا شيء يومض أكثر من ثلاث مرات في الثانية.
- المهلات الزمنية قابلة للتمديد أو غير مستخدمة.
- تأثيرات التمرير لا تخفي المحتوى عمن يعطل الحركة.
9. التكبير وإعادة التدفق
- الصفحة قابلة للاستخدام عند تكبير 200% وعرض 320 بكسل CSS دون تمرير في اتجاهين.
- تكبير المستخدم غير معطل في وسم viewport.
- زيادة تباعد النص لا تسبب تداخل المحتوى.
10. المحتوى الديناميكي
- النوافذ تستخدم الأدوار الصحيحة وتدير التركيز.
- رسائل الحالة (أضيف للسلة، أرسل النموذج) تعلن عبر live regions.
- القوائم تعرض حالة
aria-expanded.
طريقة الاختبار
- فحص آلي: WAVE أو axe DevTools أو Lighthouse على القوالب الأساسية، وأصلح كل الأخطاء الواضحة.
- جولة بلوحة المفاتيح: ابعد الماوس وأكمل المهام الأساسية.
- جولة بقارئ الشاشة: VoiceOver على macOS وiOS، وNVDA على ويندوز، وTalkBack على أندرويد. تنقل بالعناوين والمعالم واملأ نموذجا.
- التكبير وإعادة التدفق: تكبير 200% ونافذة ضيقة.
- مستخدمون حقيقيون: إن أمكن، اختبر مع أشخاص يستخدمون التقنيات المساعدة يوميا.
الأدوات الآلية تكتشف جزءا فقط من المشكلات، والاختبار اليدوي يجد الباقي.
عن أدوات overlay
إضافات overlay تضيف شريط أدوات لكنها لا تصلح غياب العناوين أو مصائد لوحة المفاتيح أو ضعف الهيكل في الكود الأساسي، وينتقدها كثير من المستخدمين ذوي الإعاقة والخبراء. أصلح المصدر بدلا منها.
أخطاء شائعة
- إزالة إطار التركيز بالكامل.
- أزرار بأيقونات فقط دون أسماء مفهومة لقارئات الشاشة.
- استخدام النص المؤقت placeholder بدلا من العنوان.
- نص رمادي منخفض التباين بحجة “الأناقة”.
- حركات لا يمكن إيقافها.
إذا أردت مراجعة إتاحة الوصول لموقعك مع إصلاحات مرتبة حسب الأولوية، تواصل معي. وتتكامل جيدا مع مراجعة SEO التقنية.
الأسئلة الشائعة
ما هو WCAG 2.2؟
إرشادات إتاحة محتوى الويب 2.2 توصية من W3C نشرت في أكتوبر 2023، تبني على WCAG 2.1 وتضيف معايير مثل عدم حجب التركيز والحد الأدنى لحجم الهدف والمصادقة الميسرة.
هل إتاحة الوصول للمواقع متطلب قانوني؟
يعتمد ذلك على مكان عملك ومن تخدم. فمثلا ينطبق قانون الإتاحة الأوروبي على كثير من المنتجات والخدمات الاستهلاكية ومنها التجارة الإلكترونية بدءا من 28 يونيو 2025. راجع القواعد التي تنطبق على نشاطك.
هل تجعل إضافات overlay موقعي متوافقا؟
أدوات overlay لا تصلح مشكلات الكود الأساسية مثل غياب العناوين أو مصائد لوحة المفاتيح، وينصح كثير من خبراء الإتاحة بعدم الاعتماد عليها. أصلح الموقع نفسه.
ما أفضل أداة مجانية لفحص إتاحة الوصول؟
أدوات مثل WAVE وaxe DevTools وفحص الإتاحة في Lighthouse واسعة الاستخدام. استخدمها مع فحص يدوي بلوحة المفاتيح وقارئ الشاشة لأن الأدوات الآلية تفوتها مشكلات كثيرة.
