MUI Accessibility (a11y)
该技能面向使用 MUI 组件库的开发者，提供无障碍实现模式、ARIA 属性用法与 WCAG 合规实践。它强调：MUI 自带多项无障碍能力，但仍有大量细节需要开发者手动补充。
用途
用于在基于 MUI 的 React 界面中避免常见无障碍违规，让交互元素可被键盘与屏幕阅读器正确操作与朗读，并满足 WCAG AA 相关要求。
内置的无障碍能力
- 交互元素（Button、Checkbox、Slider 等）自动带有 role 与 aria-* 属性
- 菜单、选择器、对话框、日期选择器与标签页支持键盘导航
- Dialog 与 Drawer 通过 FocusTrap 自动锁定焦点
- 默认主题调色板在颜色对比度上满足 WCAG AA
- 提供 aria-expanded、aria-selected、aria-checked 等状态属性
- Snackbar 使用 aria-live 区域进行播报
需手动补充的要点
图标按钮需要 aria-label
纯图标按钮没有可见文本，必须添加 aria-label；动态场景可用模板字符串生成标签。示例中同时说明 Tooltip 的文本不能替代按钮的 aria-label，两者需同时提供。
TextField 的可访问名称
带 label 的 TextField 完全可访问；无 label 时需通过 aria-label 或 aria-labelledby 关联外部标签。还给出隐藏标签（搜索框）与外部标签关联的写法。
Dialog 的焦点与标签
Dialog 会自动锁定焦点。应始终提供 aria-labelledby 与 aria-describedby，指向 DialogTitle 与描述内容的 id；破坏性操作按钮可使用 autoFocus 让键盘用户直接落在该按钮上。
Menu 的键盘导航
Menu 自动处理键盘操作，需为触发按钮提供可访问名称与 aria-controls、aria-haspopup、aria-expanded。自动键盘行为包括：上下方向键切换条目、Enter/Space 选择、Escape 关闭并返回焦点、Home/End 跳转首尾。
Tabs 的键盘导航
标签页与面板需通过匹配的 id、aria-controls、aria-labelledby 建立关联，面板使用 role="tabpanel"。自动键盘行为包括：左右方向键切换、Home/End 跳转首尾、Enter/Space 激活当前焦点标签。
Alert 的角色选择
role="alert" 用于错误与警告，会立即打断屏幕阅读器；role="status"（aria-live="polite"）用于成功与提示信息，在用户空闲时播报。Snackbar 会通过 aria-live 区域自动播报。
表单模式
使用 FormControl + FormLabel 链，复选框组以 fieldset 语义分组并配 legend；单选组通过 aria-labelledby 关联标签。示例包含通知偏好与订阅方案选择器。
图标语义
装饰性图标（旁边已有可见文本）应设 aria-hidden；无相邻文本、承载独特信息的图标应提供 aria-label；状态指示可使用视觉隐藏文本。
颜色对比（WCAG AA）
要求：普通文本 4.5:1，大文本（18pt 以上或 14pt 加粗）3:1，UI 组件（边框、图标）3:1。建议使用主题调色板 token 以保证对比度，自定义颜色需用对比度检查工具验证；禁用状态对比度较低属于 WCAG 对禁用元素的例外。
焦点管理
单页应用路由切换后可将焦点移至标题（tabIndex=-1 使其可编程聚焦但不进入 Tab 顺序）；表单提交失败时可将焦点移至第一个错误字段。
跳转导航链接
在页面最顶部、应用外壳之前放置 Skip to main content 链接，平时移出视口，聚焦时显示，帮助键盘用户绕过重复导航。
视觉隐藏文本
提供 srOnly 样式工具，用于向屏幕阅读器补充上下文但不做视觉展示，例如在"删除"按钮中附加项目名称。
加载状态
独立加载指示器应带 aria-label；也可用 aria-live="polite" 与 aria-busy 包裹区域，在加载状态变化时播报。MUI Lab 的 LoadingButton 可配合 loading 与 loadingIndicator 使用。
常见违规与修复
资料给出对照表，包括：图标按钮缺少标签、输入缺少标签、Dialog 缺少 aria-labelledby、仅用颜色作为唯一指示、标签面板未与标签关联、自定义颜色对比度不足、缺少焦点轮廓、加载指示器无播报、用 Tooltip 替代 aria-label、表单组缺少 legend。每项均给出对应修复方式。其中特别指出：不要在没有 :focus-visible 替代方案的情况下设置 outline: 0。
测试方式
自动化：通过 npm 安装 jest-axe 与 @types/jest-axe，在测试中使用 axe 与 toHaveNoViolations 断言组件无违规。
手动测试清单：用 Tab 遍历所有交互元素并确认焦点顺序合理；用 Enter/Space 激活按钮与链接；用 Escape 关闭对话框、菜单与选择器；使用屏幕阅读器测试（Windows 上 NVDA+Firefox，macOS/iOS 上 VoiceOver+Safari）；缩放至 200% 检查布局可用性；仅用键盘（拔掉鼠标）完成操作。
适用场景与限制
适用于使用 React 与 MUI 构建、需要无障碍与 WCAG 合规的界面开发场景。资料未提供该技能的安装命令、收费方式、支持平台范围或版本兼容细节，这些信息暂未提供。