用途:无障碍(a11y)前端开发技能,用于在构建界面时确保无障碍合规。资料给出语义化 HTML、跳转链接、焦点管理、ARIA 标签、键盘导航、颜色对比度、屏幕阅读器文本、表单无障碍、手风琴组件、减少动画与测试清单等要点。
主要能力:语义化标签与标题层级(header、nav、main、article、section、aside、footer);SkipLink 组件与 main 的 tabIndex={-1} 配合;焦点状态与模态焦点陷阱(useFocusTrap);仅图标按钮 aria-label、加载状态 aria-busy、aria-live 动态区域、表单错误 aria-invalid/aria-describedby、导航 aria-current;键盘处理 Enter/Space/Escape/方向键与 roving tabindex;WCAG AA 对比度(普通文本 4.5:1、大文本 3:1、UI 组件 3:1);sr-only 文本、装饰图片 alt="" aria-hidden;表单 label/aria-required 及错误 role="alert";手风琴 aria-expanded/aria-controls/role="region";prefers-reduced-motion 处理。
使用方式:按资料示例在组件中实现,如跳过链接设为 href="#main-content",焦点样式使用 focus-visible:ring-2 等;键盘导航用事件处理函数;对比度用浏览器 DevTools 无障碍面板检测。
适用场景与限制:适用于需无障碍合规的 Web 界面开发;资料未提供安装命令、收费、平台或效果保证,具体实现需结合项目框架调整。