تخطّي إلى المحتوى الرئيسي
دليل توعوي — الإعاقة البصرية والويب

كيف يستخدم الكفيف الإنترنت؟

تجربة مغايرة تمامًا لما تتخيّله. لا فأرة، لا ألوان، لا تخطيط بصري — بل صوت يقرأ الصفحة، ولوحة مفاتيح تتنقّل بين عناصرها. إليك كيف تحدث الرحلة فعليًا، ولماذا تفشل أغلب المواقع في إيصال محتواها.

2.2 مليار

شخص حول العالم يعاني من ضعف بصري أو فقدان كامل للبصر (منظمة الصحة العالمية).

98%

من المواقع تحتوي على فشل واحد على الأقل في معايير WCAG (WebAIM 2024).

60%

من الأخطاء الشائعة هي صور بلا نص بديل وحقول نماذج بلا تسميات.

الأدوات المساعدة

بماذا يتصفّحون الويب؟

بدلًا من الشاشة والفأرة، يعتمد المستخدم الكفيف على مجموعة من التقنيات المساعدة.

قارئات الشاشة (Screen Readers)

برامج تقرأ محتوى الشاشة بصوت مسموع: NVDA و JAWS على ويندوز، VoiceOver على ماك/iOS، TalkBack على أندرويد.

لوحة المفاتيح بدلًا من الفأرة

التنقّل يتم عبر Tab و Shift+Tab و Enter والأسهم. الفأرة غير مجدية لأن المستخدم لا يرى مؤشرها.

شاشات برايل الإلكترونية

أجهزة تحوّل النص الرقمي إلى نقاط برايل قابلة للّمس بشكل لحظي.

أدوات التكبير والتباين العالي

ضعاف البصر يستخدمون مكبّرات الشاشة (ZoomText) أو أوضاع التباين العالي وتكبير الخطوط في المتصفح.

رحلة الاستخدام

كيف يقرأ قارئ الشاشة الصفحة؟

01

فتح الصفحة

يبدأ قارئ الشاشة بقراءة عنوان الصفحة، ثم اللغة، ثم العناصر بالترتيب.

02

استكشاف البنية

يضغط المستخدم H للتنقّل بين العناوين، أو R للمناطق (header, nav, main)، أو K للروابط.

03

قراءة المحتوى

يقرأ القارئ الفقرات، ويصف الصور عبر النص البديل (alt)، ويعلن عن الأزرار والروابط ووظائفها.

04

التفاعل مع النماذج

عند الوصول لحقل إدخال يُنطق اسمه ونوعه ومتطلباته، ويعلن عن الأخطاء فور حدوثها.

نقاط الألم الشائعة

أين تفشل المواقع؟

أبرز العوائق التي تواجه المستخدم الكفيف يوميًا — وكيفية تجنّبها.

صور بدون نص بديل

المشكلة: يسمع المستخدم: «صورة» أو اسم الملف فقط — بلا أي معنى.

الحل: أضف alt وصفيًا مختصرًا لكل صورة معلوماتية، و alt فارغ للصور الزخرفية.

أزرار صامتة

المشكلة: زر يحتوي على أيقونة فقط (✕، 🔍) يُنطق كـ «زر» بلا توضيح لوظيفته.

الحل: استخدم aria-label وصفي أو نصًا مخفيًا بصريًا (sr-only).

غياب العناوين الهيكلية

المشكلة: صفحة بلا H1/H2 تجبر المستخدم على قراءة كل شيء بالتسلسل دون قدرة على التنقّل السريع.

الحل: نظّم المحتوى بترتيب منطقي للعناوين (H1 واحد، ثم H2 للأقسام).

عدم دعم لوحة المفاتيح

المشكلة: عناصر تفاعلية تعمل فقط بالفأرة — يستحيل الوصول إليها بدون رؤية.

الحل: اضمن أن كل عنصر تفاعلي يصل إليه Tab ويُفعّل بـ Enter/Space.

محتوى ديناميكي صامت

المشكلة: ظهور رسالة نجاح أو خطأ بصريًا دون إعلان — المستخدم لا يدري ما حدث.

الحل: استخدم aria-live للتحديثات و role=alert للأخطاء الحرجة.

كابتشا بصرية فقط

المشكلة: اختبار «أنا لست روبوت» يعتمد على رؤية صور — يحجب الكفيف عن إكمال التسجيل أو الدفع.

الحل: وفّر بديلًا صوتيًا أو reCAPTCHA v3 الذي لا يتطلب تفاعلًا بصريًا.

حقول نماذج بلا تسميات

المشكلة: حقل إدخال يُنطق كـ «تحرير نص» بلا توضيح ما المطلوب إدخاله.

الحل: اربط كل input بـ label صريح، ولا تعتمد على placeholder وحده.

ملفات PDF غير مهيكلة

المشكلة: أكثر من 80% من ملفات PDF المهمة غير قابلة للقراءة بقارئ الشاشة.

الحل: أضف tags وعناوين هيكلية، أو حوّلها إلى HTML متاح.

جرّب الأدوات بنفسك

اكتشف كيف تبدو صفحتك من منظور قارئ الشاشة، أو افحص امتثال محتواك لمعايير WCAG.