web-accessibility
WCAG 접근성 준수 여부를 위한 웹사이트 감사
Également disponible depuis: Joseph OBrien,supercent-io
웹 접근성 문제는 장애가 있는 사용자가 디지털 콘텐츠에 접근하는 것을 배제할 수 있습니다. 이 스킬은 포괄적인 WCAG 준수 감사, 스크린 리더 호환성 테스트, 포용적인 웹 경험을 만들기 위한 실행 가능한 개선 가이드를 제공합니다.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "web-accessibility". Audit this login form for accessibility issues
Résultat attendu:
- • Critical: Missing label for email input - add <label for='email'> or aria-label
- • Critical: Password field missing autocomplete attribute for browser autofill
- • Warning: Error messages not announced to screen readers - add aria-live region
- • Warning: Focus indicator not visible - ensure outline is not removed
- • Suggestion: Add landmark role='form' for navigation regions
Utilisation de "web-accessibility". Check color contrast on my landing page
Résultat attendu:
- • Fail: Hero text at #777777 on white background = 3.2:1 ratio (needs 4.5:1)
- • Fail: CTA button text at #999999 on blue = 2.8:1 ratio (needs 4.5:1)
- • Pass: Body text at #333333 on white = 10.2:1 ratio (meets AAA)
- • Fix: Darken hero text to #595959 for 4.5:1 contrast ratio
Audit de sécurité
SûrPure prompt-based skill containing only markdown documentation. The static analyzer flagged version numbers as 'weak cryptographic algorithms' and markdown code fences as 'shell backticks' - both are false positives. No executable code, network calls, file access, or command execution present. This skill provides AI assistants with accessibility expertise for WCAG compliance audits.
Facteurs de risque
🌐 Accès réseau (1)
Score de qualité
Ce que vous pouvez construire
접근성 있는 컴포넌트 구축
웹 컴포넌트에서 접근성 있는 HTML, ARIA 속성, 키보드 상호작용 구현 방법을 학습합니다.
접근성 감사 수행
키보드 전용 내비게이션 및 스크린 리더 검증을 포함한 체계적인 접근성 테스트를 수행합니다.
포용적인 인터페이스 설계
포용적 디자인 원칙을 적용하고 색상 대비가 WCAG 표준을 충족하도록 보장합니다.
Essayez ces prompts
Check this webpage for WCAG Level A compliance issues. Identify missing alt text, keyboard accessibility problems, and missing form labels.
Analyze the color contrast ratios on this page. Flag any text that fails WCAG AA or AAA requirements and suggest better color combinations.
Review this HTML for screen reader compatibility. Check semantic structure, ARIA labels, heading hierarchy, and landmark regions.
Perform a comprehensive WCAG 2.2 AA compliance audit. Analyze color contrast, keyboard navigation, screen reader support, form accessibility, and multimedia alternatives. Provide specific code fixes.
Bonnes pratiques
- ARIA 속성을 추가하기 전에 시맨틱 HTML부터 시작
- Tab, Enter, 화살표 키만 사용해 키보드 내비게이션을 테스트
- 모든 인터랙티브 요소에 보이는 포커스 표시가 있는지 확인
- 의미 있는 모든 이미지에 설명적인 대체 텍스트 포함
Éviter
- 전체 페이지 구조를 고려하지 않고 개별 요소만 수정
- 네이티브 HTML 요소가 제공하는 동작이 있는데도 ARIA를 과도하게 사용
- 접근성을 디자인 원칙이 아니라 최종 체크리스트 항목으로 취급
- 색상만으로 정보를 전달