界面已本地化;技能介绍与说明文档按所选语言由 AI 自动翻译,代码、命令、路径和专业术语保留原文,以原作者文档为准。
探索技能
开发与工程 · SKILL.md

accessibility-testing

accessibility-testing

【开发与工程】Plan accessibility testing — WCAG 2.1 criteria, screen reader testing, keyboard navigation, color contrast, and assistive technology coverage. TRIGGER when: user says /accessibility-testing, needs to test for accessibility, or asks about WCAG compliance testing.

独立 GitHub 快照 · 自动分类 · 以原作者文档为准

技能说明

GitHub

name: accessibility-testing description: > Plan accessibility testing — WCAG 2.1 criteria, screen reader testing, keyboard navigation, color contrast, and assistive technology coverage. TRIGGER when: user says /accessibility-testing, needs to test for accessibility, or asks about WCAG compliance testing. argument-hint: "[application or page to test]" user-invocable: true

Accessibility Testing Plan

Process

Step 1: Define WCAG Compliance Target

LevelCriteriaTypical Requirement
ABasic accessibilityMinimum legal compliance
AAStandard accessibilityMost common requirement
AAAEnhanced accessibilityBest practice, not usually required

Step 2: Automated Testing

ToolWhat It Catches
axe / LighthouseColor contrast, missing alt text, ARIA issues
WAVEStructural issues, reading order
Pa11yCI/CD integration, regression checking

Step 3: Manual Testing

TestMethodWCAG Criteria
Keyboard navigationTab through all interactive elements2.1.1
Focus visibilityVerify focus indicators visible2.4.7
Screen readerTest with NVDA/JAWS/VoiceOver1.3.1, 4.1.2
Color contrast4.5:1 for text, 3:1 for large text1.4.3
ZoomContent usable at 200% zoom1.4.4
MotionAnimations respect prefers-reduced-motion2.3.3
Form labelsAll inputs have associated labels1.3.1
Error identificationErrors are clearly described3.3.1

Step 4: Assistive Technology Matrix

ATOSBrowserPriority
VoiceOvermacOSSafariHigh
NVDAWindowsChrome/FirefoxHigh
JAWSWindowsChromeMedium
TalkBackAndroidChromeMedium

Step 5: Report Findings

IssueWCAGSeverityElementRecommendation
[issue][criteria]H/M/L[selector][fix]

Output Format

## Accessibility Report: [Application]
### Compliance Target: WCAG [level]
### Automated: [X issues found]
### Manual: [Findings by category]
### AT Testing: [Screen reader results]
### Recommendations: [Prioritized fixes]

Quality Checklist

  • Both automated and manual testing performed
  • Screen reader testing with at least 2 AT combinations
  • Keyboard navigation fully tested
  • Color contrast verified
  • Findings mapped to WCAG criteria

Edge Cases

  • For SPAs, test dynamic content and route changes with screen readers
  • For data visualizations, ensure alternative text descriptions
  • For video content, verify captions and audio descriptions
我的收藏