مدقق مجاني لإمكانية الوصول

ما الذي تفحصه هذه الأداة

• البدائل النصية

  الصور وأزرار الصور وغيرها من المحتوى غير النصي الذي لا يملك بديلًا نصيًا يستطيع قارئ الشاشة قراءته.

• تسميات النماذج

  حقول الإدخال ومربعات الاختيار والقوائم المنسدلة التي لا تملك تسمية قابلة للوصول، فلا تستطيع التقنيات المساعدة توضيح الغرض منها.

• تباين الألوان

  نص لونه قريب جدًا من خلفيته بحيث لا يحقق نسب التباين في WCAG AA.

• أسماء الروابط والأزرار

  روابط وأزرار بلا اسم مقروء — غالبًا أزرار تحتوي على أيقونة فقط.

• ARIA

  أدوار وسمات ARIA غير صالحة، أو غير مسموح بها على ذلك العنصر، أو ينقصها أجزاء مطلوبة.

• بنية الصفحة

  لغة الصفحة، وعنوان الصفحة، والمعالم (landmarks)، وغيرها من القواعد الهيكلية من WCAG وأفضل ممارسات axe-core.

• أين تجد كل مشكلة

  لكل قاعدة فاشلة (حتى 25)، عدد العناصر التي تخفق فيها، وما يصل إلى خمسة أمثلة مع محدِّد CSS وHTML الخاصين بها، وما الخطأ فيها، ورابط إلى توثيق القاعدة.

• تحتاج إلى مراجعة يدوية

  القواعد التي لم يستطع axe-core الحسم فيها تلقائيًا — مثل التباين فوق صورة خلفية — مُدرجة على حدة لتتحقق منها بعينك. كما تُدرج القواعد الناجحة أيضًا.

كيف يعمل الفحص

ما لا تفحصه هذه الأداة

• كل ما تتطلبه WCAG

  لا يكتشف الاختبار الآلي إلا جزءًا من مشكلات إمكانية الوصول. وكثير من معايير النجاح يحتاج إلى حكم شخص.

• الاستخدام بلوحة المفاتيح وقارئ الشاشة

  لا يتنقل عبر الصفحة بمفتاح Tab ولا يستمع إلى قارئ شاشة، لذا لا يُختبر ترتيب التركيز ولا الإعلانات الصوتية.

• هل للنص معنى واضح

  يستطيع أن يعرف أن نص alt موجود، لا أنه يصف الصورة جيدًا، ولا أن التعليمات والتسميات واضحة.

• حالات الصفحة الأخرى

  لا تُختبر إلا الصفحة كما تُعرض أول مرة — لا القوائم المفتوحة، ولا مربعات الحوار، ولا رسائل الخطأ، ولا الصفحات خلف تسجيل الدخول.

مشكلات شائعة نكتشفها

• نص منخفض التباين

  نص رمادي فاتح، ونص على أزرار ملونة، ونص توضيحي (placeholder) مستخدم بدلًا من التسمية.

• صور بلا نص alt

  الشعارات وصور المنتجات والصور المستخدمة كروابط.

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

  مربعات البحث ونماذج الاشتراك في النشرات البريدية التي تعتمد على النص التوضيحي فقط.

• أزرار وروابط بأيقونات فقط

  أيقونات القائمة والإغلاق والشبكات الاجتماعية وسلة التسوق بلا نص لقارئات الشاشة.

• غياب لغة الصفحة

  لا توجد سمة lang على عنصر html، فقد تستخدم قارئات الشاشة نطقًا خاطئًا.

• استخدام ARIA بشكل خاطئ

  أدوار على عناصر غير مناسبة، أو إشارات إلى معرّفات (IDs) غير موجودة.

كيفية إصلاحها

1. 1

   اجعل النص أغمق أو الخلفية أفتح

   استهدف نسبة تباين لا تقل عن 4.5:1 للنص العادي و3:1 للنص الكبير. تعرض أداة فحص التباين في أدوات المطوّر بمتصفحك هذه النسبة.

2. 2

   أضف نص alt يوضح الغرض من الصورة

   صِف ما يهم في السياق — «نزّل قائمة الأسعار» لرابط أيقونة، لا «أيقونة». واستخدم alt="" للصور الزخرفية البحتة.

3. 3

   أعطِ كل حقل تسمية ظاهرة

   استخدم عنصر label مرتبطًا بحقل الإدخال. إذا كان التصميم لا يسمح بإظهارها فعلًا، فاستخدم aria-label — لكن التسميات الظاهرة تساعد الجميع.

4. 4

   سمِّ أزرار الأيقونات

   أضف نصًا مخفيًا بصريًا أو aria-label، مثل aria-label="Open menu".

5. 5

   فضّل HTML الأصلي على ARIA

   عنصر button أو رابط حقيقي قابل للوصول افتراضيًا. لا تضف ARIA إلا عندما لا يوجد عنصر أصلي يؤدي المهمة.

6. 6

   اختبر يدويًا أيضًا

   جرّب استخدام الصفحة بلوحة المفاتيح فقط، ومع قارئ شاشة مثل NVDA أو VoiceOver، لاكتشاف ما لا تستطيع القواعد الآلية اكتشافه.