ما هي إمكانية الوصول (a11y)؟
أن يستطيع الجميع استخدام موقعك، بمن فيهم ذوو الإعاقة: المكفوفون (قارئات الشاشة)، ضعاف البصر، من لا يستطيع استخدام الفأرة. الوصول ليس رفاهية — بل حق وغالبًا التزام قانوني، وهو أيضًا مفيد للـ SEO.
1) نص بديل للصور alt
قارئ الشاشة يقرأ alt بدل الصورة:
<img src="cat.jpg" alt="قطة رمادية نائمة على أريكة" />
<img src="line.png" alt="" /> <!-- صورة زخرفية: alt فارغ -->
2) العناصر الدلالية = خريطة الصفحة
استخدام <header>/<nav>/<main>/<footer> يبني معالم ينتقل بينها المكفوف مباشرة (راجع درس HTML الدلالي).
3) تسميات النماذج <label>
كل حقل يجب أن يرتبط بتسمية:
<label for="email">البريد الإلكتروني</label>
<input id="email" type="email" />
4) تسلسل العناوين الصحيح
<h1> واحد، ثم تدرّج منطقي h2 ← h3 بلا قفزات — قارئ الشاشة يبني فهرسًا منها.
5) ARIA — عند الحاجة فقط
سمات aria-* تضيف معلومات وصول حين لا يكفي HTML وحده:
<button aria-label="إغلاق">✕</button>
<div role="alert">تم الحفظ بنجاح</div>
🔑 القاعدة الأولى لـ ARIA: لا تستخدم ARIA إن وُجد عنصر HTML دلالي يؤدّي الغرض.
<button>أفضل من<div role="button">.
6) الوصول بلوحة المفاتيح
يجب أن يعمل موقعك بلوحة المفاتيح وحدها (مفتاح Tab). استخدم عناصر تفاعلية حقيقية (<button>, <a>) فهي قابلة للتركيز تلقائيًا، بعكس <div> الذي يحتاج عملًا إضافيًا.
7) تباين الألوان
اجعل تباين النص مع الخلفية كافيًا (نسبة 4.5:1 على الأقل) ليقرأه ضعاف البصر. لا تعتمد على اللون وحده لنقل المعنى.
أدوات الفحص
- Lighthouse في أدوات مطوّري Chrome (قسم Accessibility).
- قارئات الشاشة: NVDA (مجاني)، VoiceOver (Mac).
الأخطاء الشائعة
- ❌ صور بلا
alt→ المكفوف لا يعرف محتواها. - ❌
<div onclick>بدل<button>→ لا يعمل بلوحة المفاتيح. - ❌ نماذج بلا
<label>. - ❌ تباين ألوان ضعيف.
خلاصة
الوصول يبدأ من HTML سليم: alt للصور، عناصر دلالية، <label> للنماذج، تسلسل عناوين صحيح، عناصر تفاعلية حقيقية، تباين كافٍ، وARIA عند الضرورة فقط. موقع يصل إليه الجميع = موقع أفضل للجميع.