可访问性组件不能靠事后检查补救，因其本质是设计→结构→交互全链路的契约共识；figma需固化语义命名、auto layout约束与颜色对比度校验，html封装须在生命周期中注入a11y逻辑，ci需断言契约而非仅扫描。
为什么“可访问性组件”不能靠事后检查补救
团队里常把可访问性（a11y）当成上线前的 checklist——比如补 aria-label、加 tabindex、跑 axe 扫描。但真正在 Figma 交付稿里没定义焦点顺序、没标注状态反馈、没约束语义层级时，前端写出来的 customElements.define() 组件，哪怕逻辑再健壮，也注定要返工。可访问性不是样式层补丁，是设计→结构→交互全链路的契约共识。
Figma 层必须固化三项可解析 a11y 约束
设计师和前端共用同一份 Figma 文件时，以下三处必须提前约定并校验，否则生成的 HTML 结构天然不可访问：
- 所有交互控件（按钮、开关、输入框）图层名必须含语义后缀，例如
button-primary-submit、toggle-theme，禁止使用group-7-copy-2类命名 - 所有需要键盘导航的区域（如菜单、轮播、表单组）必须用 Auto Layout 包裹，并设置
Constraints → Horizontal: Left/Right, Vertical: Top/Bottom，禁用STRETCH——否则生成的 DOM 缺失明确的 tab 顺序锚点 - 颜色对比度检测必须启用 Figma 的内置 a11y 插件（如 Stark），且导出前强制通过 WCAG AA 级；HEX 值不允许直接写死，需映射到设计系统中已定义的
--text-primary、--bg-surface等 CSS 变量名
HTML 组件封装时强制注入 a11y 基线逻辑
在 customElements.define() 的类定义中，不能只处理渲染，必须把可访问性作为生命周期的一部分写进代码：
-
constructor()中立即调用this.setAttribute('role', 'button')或this.setAttribute('aria-expanded', 'false')，而非等connectedCallback再补 -
connectedCallback()里必须绑定键盘事件：至少支持Enter和Space触发点击，对下拉类组件还需监听ArrowDown/ArrowUp - 所有动态状态变更（如加载中、禁用、选中）必须同步更新
aria-属性，例如this.setAttribute('aria-busy', 'true')，不能仅靠 CSS class 切换 - 若组件含
<slot></slot>，需在slotchange事件中重新校验子内容的可访问性，例如检查插槽内是否含无文本的<img>并自动补alt
CI 流程里加入 a11y 静态断言而非仅扫描报告
把 axe-core 或 pa11y 接入 CI 是基础，但真正卡住问题的是让机器能判断“契约是否被破坏”：
- 在构建脚本中运行
npx axe --disable=all --enable=region,heading-order,landmark-no-duplicate,aria-allowed-attr，只启用与组件契约强相关的规则 - 对每个自定义标签（如
<my-button></my-button>）编写最小可访问性快照测试：用 Puppeteer 渲染后断言其 DOM 必须含role、tabindex、aria-属性，且值符合预设 - 禁止将扫描报告生成为 HTML 页面再人工看——改为输出 JSON，提取
incomplete和violations数量，任一非零即exit 1
最易被忽略的点：Figma 图层命名和组件类名之间没有自动映射机制，button-primary-submit 不会自动变成 MyButtonPrimarySubmit。这个 gap 必须由人来确认，不能交给工具幻想“一键对齐”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
