Compétences accessibility-auditor

accessibility-auditor

Sûr ⚙️ Commandes externes🌐 Accès réseau

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

Également disponible depuis: davila7

غالبًا ما تستبعد تطبيقات الويب المستخدمين ذوي الإعاقة بسبب التصميم غير القابل للوصول. توفر هذه المهارة إرشادات الامتثال لمعايير WCAG 2.1 المستوى AA مع أمثلة محددة للشفرة البرمجية لخصائص ARIA والتنقل عبر لوحة المفاتيح ودعم قارئ الشاشة.

Prend en charge: Claude Codex Code(CC)
📊 70 Adéquat
1

Télécharger le ZIP du skill

2

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

3

Activez et commencez à utiliser

Tester

Utilisation de "accessibility-auditor". Review this button element for accessibility: <div onclick='submit()'>Submit</div>

Résultat attendu:

  • مشكلة: استخدام عنصر غير دلالي للإجراء (WCAG 4.1.2 Name, Role, Value)
  • الحل: استبدل <div> بعنصر <button> للحصول على دعم مدمج للوحة المفاتيح
  • السبب: يوفر <button> إدارة التركيز والإعلان الصحيح عن الدور لقارئات الشاشة
  • الشفرة: <button onclick='submit()'>Submit</button>

Utilisation de "accessibility-auditor". How do I make an image accessible?

Résultat attendu:

  • الصور المعلوماتية: أضف نص alt وصفي ينقل معنى الصورة
  • الصور الزخرفية: استخدم alt="" أو role="presentation" حتى تتخطاها قارئات الشاشة
  • الصور المعقدة: قدم وصفًا تفصيليًا في نص alt أو عبر figcaption في عنصر figure

Score de qualité

38
Architecture
100
Maintenabilité
87
Contenu
21
Communauté
100
Sécurité
91
Conformité aux spécifications

Ce que vous pouvez construire

بناء مكونات قابلة للوصول

احصل على إرشادات حول HTML الدلالي وأنماط ARIA ودعم لوحة المفاتيح أثناء برمجة مكونات واجهة المستخدم.

دعم التدقيق اليدوي

استخدم قوائم التحقق والأمثلة للتحقق يدويًا من أن صفحات الويب تلبي متطلبات WCAG 2.1 المستوى AA.

متطلبات إمكانية الوصول

فهم معايير إمكانية الوصول التي يجب أن يفي بها منتجك وكيفية التحقق من الامتثال.

Essayez ces prompts

فحص سريع
Check this HTML code for WCAG 2.1 Level AA compliance. Look for semantic structure, ARIA usage, keyboard support, and proper labels.
مراجعة المكون
Review this custom component for accessibility. Check role attributes, focus management, keyboard interaction, and screen reader announcements.
التحقق من النموذج
Audit this form for accessibility. Verify labels, error messages, required field indicators, and ARIA validation states work with screen readers.
تدقيق كامل
Perform a full WCAG 2.1 Level AA audit of this page. Check headings, landmarks, images, links, color contrast, keyboard navigation, and focus indicators.

Bonnes pratiques

  • استخدم عناصر HTML الدلالية قبل اللجوء إلى خصائص ARIA
  • اختبر التنقل عبر لوحة المفاتيح يدويًا حيث أن الأدوات الآلية تكتشف حوالي 30% فقط من المشاكل
  • تحقق من أن مخرجات قارئ الشاشة تطابق التجربة المرئية لجميع المستخدمين

Éviter

  • استخدام div أو span للأزرار أو الروابط بدلاً من العناصر الدلالية
  • الاعتماد على اللون فقط لنقل المعلومات (WCAG 1.4.1)
  • تعطيل مؤشرات التركيز أو وظيفة التكبير
  • تخطي مستويات العناوين (h1 مباشرة إلى h3)

Foire aux questions

ما مستوى WCAG الذي تدققه هذه المهارة؟
تركز المهارة على WCAG 2.1 المستوى AA، المعيار المطلوب من قبل معظم اللوائح والسياسات.
هل تستبدل هذه المهارة أدوات الاختبار الآلي؟
لا. تكتشف الأدوات الآلية حوالي 30% من المشاكل. تساعد هذه المهارة في تحديد المشاكل التي تتطلب حكمًا بشريًا.
ما الأدوات التي تتكامل معها هذه المهارة؟
تشير المهارة إلى axe-core وLighthouse وpa11y كخيارات اختبار آلي تكميلية.
هل يتم إرسال بيانات المستخدم إلى أي مكان عند استخدام هذه المهارة؟
لا. هذه مهارة قائمة على الأوامر النصية. لا تغادر أي بيانات بيئتك.
لماذا لا تزال شفرتي القابلة للوصول تفشل في عمليات التدقيق؟
تحقق من مشاكل السياق مثل ترتيب التركيز والعناصر التفاعلية المتداخلة وارتباطات التسميات المفقودة.
ما الفرق بين هذا وعمليات تدقيق إمكانية الوصول في المتصفح؟
تفحص أدوات المتصفح DOM المعروض. تراجع هذه المهارة أنماط الشفرة المصدرية وتوفر إرشادات التنفيذ.

Détails du développeur

Structure de fichiers