用途:为 Eleventy 编写的网站页面及共享 UI 组件的改动,提供聚焦且可重复的无障碍检查流程,方向对齐 WCAG 2.1 AA。
主要能力与硬性要求:对每处改动的页面或组件确认语义结构与合理的标题层级;确保交互元素可通过键盘到达且有可见焦点;确保传达含义的图片/图标有合适的 alt 文本,装饰性图片不应给屏幕阅读器带来噪音;链接文本需具描述性,避免“点击这里”;表单/输入需有标签或等效的可访问名称;运行 scripts/website-verify.sh --all 并在声明完成前修复失败项。当共享源发生变化(_includes、_data、样式、site-assets 或示例)时,需在渲染产物 website/dist/ 中至少验证一个具有代表性的消费页面。
禁止事项:在基本键盘导航已损坏时不得声称“已完成”;引入新 UI 模式时不得忽略无障碍影响。
快速清单(按改动页面):结构上保持一个清晰的 h1,尽量避免标题层级跳跃;在合适位置使用语义元素 header、nav、main、footer 等地标;键盘 Tab 顺序合理、焦点可见、无焦点陷阱;有意义的图片有 alt,装饰性图片不干扰屏幕阅读器;链接文本具描述性且在上下文中足够唯一;避免低对比度文本和仅靠颜色传达含义。
建议工作流(VS Code):通过 VS Code 预览服务器打开改动页面(http://127.0.0.1:3000/website/dist/),再使用 browser/* 工具或 website-devtools 技能检查 DOM、焦点顺序与控制台状态;仅用键盘(Tab/Shift+Tab/Enter/Space)走查关键流程;在 DOM 中抽查标题与地标结构;若共享组件或布局有改动,在多个使用它的页面上重复检查;如可用,用 website-devtools 技能验证焦点状态、响应式行为与控制台错误。
限制:资料未提供该技能的具体安装方式、依赖版本、支持的浏览器范围及除上述清单外的自动化规则,这些内容暂未提供。