يقوم مفتش سهولة الوصول بإجراء فحوصات آلية متوافقة مع معايير WCAG 2.1 المستوى AA على أي صفحة ويب وينتج تقريرًا مصنفًا بمشكلات سهولة الوصول والمقروئية. اكتشف نسب تباين الألوان غير الكافية، والنصوص البديلة المفقودة للصور، واستخدامات أدوار وخصائص ARIA غير الصحيحة، وتسميات النماذج المفقودة، ومشاكل التنقل بلوحة المفاتيح، ومناطق العلامات البارزة (landmarks) المفقودة — مع تمييز فوري بنقرة واحدة للعنصر المتعلق بكل مشكلة مكتشفة.
إتاحة الويب للأشخاص ذوي الهمم ليست اختيارية — بل هي متطلب قانوني في العديد من التشريعات وضرورة حتمية لـ 15% من سكان العالم. ومع ذلك، تظل مشكلات سهولة الوصول غير مرئية أثناء التطوير والاختبار المعتاد. قد يبدو الزر سليمًا ولكنه لا يُقرأ إطلاقًا لقارئات الشاشة (screen readers) لأنه عبارة عن عُنصر div مصمم بدون تحديد لسمة role الصحيحة. قد يكون النص مقروءًا لك ولكنه يفشل في تلبية متطلبات التباين للمستخدمين ضعاف البصر. يُبرز مفتش سهولة الوصول هذه المشكلات الخفية تلقائيًا. يفحص العشرات من معايير WCAG 2.1 المستوى AA بما في ذلك نسب تباين الألوان (حد أدنى 4.5:1 للنص العادي، و 3:1 للنص الكبير)، والنصوص البديلة المفقودة على الصور، والتسميات الغائبة عن إدخالات النماذج (inputs)، وأدوار (roles) وخصائص ARIA غير السليمة، ومناطق الـ landmarks المفقودة (nav, main, footer)، ومؤشرات تركيز لوحة المفاتيح. يشتمل كل إشعار على العنصر المتأثر، ومعيار WCAG المحدد الذي تم انتهاكه، وتوصية لكيفية إصلاحه. انقر فوق أي مشكلة لتسليط الضوء على العنصر في الصفحة.
يُجري فحوصات آلية لمعايير النجاح WCAG 2.1 Level AA التي تتضمن فئات الإدراك، وقابلية التشغيل، والفهم، والمتانة (Robusness). يعرض كل فحص المعيار الخاص (مثل: 1.4.3 للتباين، و 1.1.1 للمحتوى غير النصي) وحالة الاجتياز أو الفشل.
يحسب نسبة التباين بين النص وألوان الخلفية لكل عنصر نصي على الصفحة. يميز العناصر التي تقل عن 4.5:1 للنص العادي أو 3:1 للنص الكبير (18px فما فوق أو 14px فما فوق وعريض). يعرض النسبة الفعلية والحد الأدنى المطلوب.
يمسح كل عنصر img و svg وأي عنصر يحمل دور (role) كصورة. يميز خصائص البدل المفقودة، والنص البديل الفارغ في الصور غير التزيينية، والنصوص البديلة العامة المبتذلة (مثل "image"، و "photo"). يقترح ما إذا كانت كل صورة تحتاج لنص وصفي، أو نص فارغ (للتزيين)، أو role="presentation".
يتحقق من سوء استخدام دور ARIA (وضع الدور على عناصر غير مناسبة)، والخصائص الإلزامية المفقودة (مثل aria-label بأزرار الأيقونات)، ومعرفات (IDs) مكررة مرجعية لـ aria-labelledby، والمناطق الدلالية المفقودة (مثل main أو nav). يوصي ببدائل HTML دلالية محكمة.
يضمن أن كل خانة إدخال (نص، بريد، كلمة مرور، اختيار، وتحديد) تمتلك تسمية (label) مرتبطة به — سواء بملصق مقترن بـ for/id، أو استخدام aria-label، أو aria-labelledby. الإدخالات غير المسماة لا تنطق وتعطل استخدام برامج قراءة الشاشة.
تُصنف المشكلات على أنها أخطاء (يجب إصلاحها — تشكل عوائق للوصول)، وتحذيرات (ينبغي إصلاحها — عوائق محتملة)، ومُجتازة (تم التأكد من إمكانية الوصول لها). يُعرض عدد الأخطاء بوضوح بارز. انقر على أي مشكلة لتمييز العنصر المتأثر في الصفحة.
قبل نشر صفحة أو ميزة جديدة، قم بتفقد أداة مفتش متطلبات سهولة الوصول لتشخيص المشكلات باكرًا. مشاكل كالنصوص البديلة وغياب عنونة الحقول وكسر حدود التباين سهل إصلاحها بمرحلة التطوير، ومكلفة حال العثور عليها بالبث الحي.
يتطلب الكثير من التشريعات التزاماً صريحاً بمبادئ WCAG 2.1 Level AA (كقانون ADA بالولايات المتحدة، و EAA بالاتحاد الأوروبي). شغل هذا المُفتش بالصفحات العامة لتُدرك فجوات الامتثال وتتفادى المساءلة القانونية.
أدرج فحوصات سهولة الوصول والانتفاع كجزء أصيل من دورتك مع QA. بعد رصد الجودة البصرية والتصحيح للوظائف، راجع المفتش لتتأكد بأن التعديلات الطارئة لم تضف ويلات لا حصر لها للمقروئية.
افحص الموقع المطور خلال المداولات الدورية لترصد أخطاء فاقعة بحق المُعاقين أو ضعاف البصر. فالتمييز اللوني وتسليط الضبابية حول بعض التصرفات البرمجية تعين زملاءك على إدراك الصياغة المُثلى وأهمية استيرادها.
تحرى الصفحات المكتظة بالنماذج والتطبيقات والمكونات المجلوبة، والمُطعمّة بعناصر من الزوار. من الراجح حقن مثل تلك الـ Widgets لأخطاء فادحة (فقد للنصوص البديلة، تباين سيئ) ورغم مصدرها الدخيل إلا أنك المُلام وصاحب التبعة كمالك للواجهة.
افتح اللوحة العائمة لـ DevSuite Pro وانقر فوق رمز Accessibility Inspector. تقوم الأداة بمسح بنية الصفحة DOM للكشف عن مشكلات سهولة الوصول والاستخدام.
يظهر تقرير مصنف للأخطاء (بالأحمر)، والتحذيرات (بالأصفر)، والمُجتازة (بالأخضر). يسرد كل قسم المشكلات بعناصرها المتأثرة والمراجع والإرشادات الخاصة بمعايير WCAG المعنية.
انقر على أي مشكلة لتمييز العنصر المتأثر على الصفحة بحد ملون وتمرير الصفحة تلقائيًا إليه. العلاقة بين التقرير وعنصر DOM تتحقق بصرياً بصورة فورية.
يتضمن كل تصنيف وتنبيه توصية محددة: "أضف نص بديل يصف محتوى الصورة"، "قم بزيادة تباين لون الخط للحد الأدنى 4.5:1"، "أضف عنصر label بصيغة for='email'".
قم بإجراء التغييرات في التعليمات البرمجية، وقم بتحديث الصفحة، وأعد الفحص مرة أخرى لترى نقص عدد الأخطاء عند إصلاحها حتى تصل لهدف صفر أخطاء.
قم بتثبيت DevSuite Pro مجانًا وافتح أكثر من 39 أداة للمطورين لمتصفحك.
