frontend-accessibility
إنشاء واجهات React متوافقة مع معايير WCAG
Também disponível em: EIS-ITS
إنشاء واجهات ويب متاحة يضمن أن يستطيع الجميع استخدام تطبيقاتك، بما في ذلك المستخدمون ذوو الإعاقات. تفرض هذه المهارة معايير WCAG وسمات ARIA المناسبة والتنقل بلوحة المفاتيح والتوافق مع قارئات الشاشة في مكونات React الخاصة بك.
Baixar o ZIP da skill
Upload no Claude
Vá em Configurações → Capacidades → Skills → Upload skill
Ative e comece a usar
Testar
A utilizar "frontend-accessibility". إنشاء مكون زر متاح
Resultado esperado:
- عنصر زر دلالي مع سمة type المناسبة
- مؤشر تركيز مرئي بنسبة تباين 3:1
- اسم متاح عبر محتوى النص أو aria-label
- تفعيل بلوحة المفاتيح مع مفتاحي Enter وSpace
- الحالة المعطاة يتم التواصل بها بشكل صحيح مع التقنية المساعدة
A utilizar "frontend-accessibility". جعل هذا النموذج متاحًا بلوحة المفاتيح
Resultado esperado:
- التسميات المرتبطة مع المدخلات عبر htmlFor وid
- ترتيب التركيز يتبع التخطيط البصري
- رسائل الخطأ المرتبطة عبر aria-describedby
- قيم Tab index مدارة بشكل مناسب
- الحقول المطلوبة يتم الإعلان عنها عبر aria-required
Auditoria de Segurança
SeguroThis skill contains only documentation and guidance instructions for implementing accessibility features. The static analyzer flagged 20 benign text patterns (URLs, hashes, documentation paths, license names) as security issues. All findings are false positives. No executable code, network operations, or file modifications exist.
Fatores de risco
🌐 Acesso à rede (1)
📁 Acesso ao sistema de arquivos (4)
⚙️ Comandos externos (2)
Pontuação de qualidade
O Que Você Pode Construir
إنشاء مكونات React متاحة
إنشاء أزرار ونماذج وعناصر تفاعلية تعمل مع قارئات الشاشة والتنقل بلوحة المفاتيح
الحفاظ على معايير الوصول
ضمان استيفاء جميع مكونات واجهة المستخدم لإرشادات WCAG مع سمات ARIA المناسبة ونسب التباين
الامتثال للوائح الوصول
الوفاء بمتطلبات ADA والقسم 508 وWCAG لتجنب المشكلات القانونية وخدمة جميع المستخدمين
Tente Estes Prompts
اجعل نموذج الاتصال هذا متاحًا بالكامل مع التسميات المناسبة وسمات ARIA والتنقل بلوحة المفاتيح
أضف سمات ARIA المناسبة وإدارة التركيز وضوابط لوحة المفاتيح لمكون المودال هذا
حدث ألوان هذا المكون لتلبية متطلبات نسب تباين WCAG 2.1 AA (الحد الأدنى 4.5:1)
إنشاء قائمة تنقل متاحة مع معالم ARIA المناسبة والتنقل بلوحة المفاتيح ودعم قارئات الشاشة
Melhores Práticas
- تضمين دائمًا تسميات مناسبة لمدخلات النماذج باستخدام سمتَي htmlFor وid
- اختبار المكونات بالتنقل بلوحة المفاتيح فقط قبل الشحن
- استخدام عناصر HTML الدلالية (nav, main, button) بدلاً من divs مع ARIA
Evitar
- لا تستخدم divs مع معالجات onClick بدلاً من عناصر الزر المناسبة
- تجنب المؤشرات القائمة على اللون فقط بدون نص أو بدائل أيقونات
- لا تقم أبدًا بإزالة مخططات التركيز بدون توفير مؤشرات تركيز مخصصة