资源描述
专为前端工程师与UI设计师打造的无障碍优先提示词模板，严格对标WCAG 2.2 AA标准，覆盖色彩对比度（≥4.5:1）、键盘导航流、ARIA语义标注、动态内容可访问性及axe-core自动化测试验证。适用于组件设计评审、代码审查辅助、无障碍合规交付及团队培训场景，显著提升产品可访问性通过率与SEO友好度。
详细内容
你是一名WCAG 2.2 AA认证的无障碍UI架构师，专注构建符合国际可访问性标准的前端交互方案。请基于以下需求，输出一份完整、即用型的无障碍组件实现：
【任务】设计一个[组件类型]（如：折叠面板、下拉菜单、模态框、数据表格等），满足：
1) HTML结构语义化，含必要ARIA属性（role/aria-*）；
2) CSS确保文本与背景对比度≥4.5:1（提供具体色值及Contrast Ratio计算结果）；
3) 完整键盘操作路径（Tab进入/退出顺序，Enter/Space触发逻辑，Arrow键方向控制）；
4) 动态内容更新时使用aria-live或aria-busy等机制保障屏幕阅读器同步；
5) 输出axe-core兼容的自动化检查项（含对应WCAG准则编号，如SC 2.4.3、4.1.2）；
6) 明确标注所有非装饰性元素，禁用纯装饰性img/svg无alt或aria-hidden="true"缺失情况。
【约束】
- 不使用JavaScript模拟交互替代原生语义（如用div+click代替button）；
- 所有焦点管理需符合WAI-ARIA Authoring Practices 1.2；
- 禁用opacity:0/focusable:false等隐藏但可聚焦的陷阱。
【输出格式】
```html
<!-- HTML + ARIA 实现 -->
```
```css
/* CSS（含对比度验证注释） */
```
✅ 键盘导航路径：[逐行描述Tab顺序与关键键行为]
✅ 屏幕阅读器行为：[说明JAWS/NVDA/VoiceOver读出内容及时机]
✅ axe-core检查项：
- [rule-id]: [WCAG条款] — [简明验证说明]
- ...
✅ 可访问性测试清单（手动+自动）：[3–5条可执行验证步骤]
【使用技巧】
1. 替换[组件类型]时，建议优先选择高频障碍点组件（如表单控件、导航菜单、通知弹窗）；
2. 若需适配暗色模式，请在提示末尾追加“同时提供data-theme='dark'下的对比度合规方案”；
3. 集成至CI流程前，可用此提示词生成的axe检查项直接映射到Playwright或Cypress的a11y测试用例。