用途:tiny-a11y 是一套面向无障碍(a11y)的前端编码规范,以 Agent Skill 形式提供。适用于构建 Web 组件、编写 HTML 标记、创建表单,或审查代码的无障碍性时,指导代理写出尽可能精简且可访问的代码。
核心原则:信任浏览器,原生元素自带无障碍能力;语义优先于 ARIA,用正确元素而非 role 属性;写得越少越不易出错;原生优先,先考虑 <dialog>、<details>、<button>,再考虑 JavaScript。
HTML 指南:使用原生元素(如 <button type="submit">Submit</button> 而非带 role 的 div);不为 header、nav、main、footer 等地标元素添加冗余 role;用语义元素替代 div;除 iframe 外避免 title 属性。组件模式:手风琴用原生 <details> 与 <summary>,零 JavaScript;模态框用原生 <dialog> 配合 showModal(),自动实现焦点捕获、Escape 关闭、::backdrop 及背景 inert;导航用 <nav> 加按钮与 aria-expanded,不用 role="menu";提示用单个 role="alert"。原生不足时参考 APG 的 Feed、Combobox、Switch、Tabs、Carousel 模式。
CSS 指南:颜色用 OKLCH;尺寸用 rem/em/%/vw/vh 等相对单位(边框除外);使用逻辑属性(如 margin-inline-start、inline-size);用 @layer config, resets, components, utilities 组织级联层;类前缀 c-、u-、js-;直接用 ARIA 属性作为样式钩子而非额外修饰类;用 :focus-visible 控制焦点环;用 prefers-reduced-motion 尊重动效偏好;全大写交由 CSS text-transform 处理而非写在 HTML。
JavaScript 指南:仅用原生 JavaScript,不使用 Radix、Shadcn 等组件库,也不使用 Tailwind CSS 等工具框架;不使用 role="button" 等替代原生元素;避免自定义手风琴脚本与焦点捕获库。
参考:WCAG 2.2 Understanding、WAI-ARIA 1.2、APG Gherkin、Design Tokens。限制:资料未提供安装命令、收费与平台信息,暂未提供。