可访问性需嵌入编码规范、CI/CD和团队契约，仅靠人工检查不可持续；必须用HTMLHint（启用alt-require、attr-lowercase、attr-value-double-quotes等规则）、axe和W3C验证器协同保障，从编辑器提示、提交钩子到CI门禁三层卡控。
直接说结论：可访问性不是加几个 aria-label 就完事的事，它必须嵌入 HTML 编码规范、CI/CD 流程和团队协作契约中，否则上线即失效。
怎么让 alt、lang、role 这些属性不被漏写？
靠人盯人检查不可持续，必须用工具在写代码时就卡住。HTMLHint 的 alt-require、attr-lowercase、attr-value-double-quotes 规则要开，默认关掉的 id-class-ad-disabled 之类无关规则别乱启。
-
lang必须写在<html>标签上，值用zh-CN或en-US，不能只写zh—— 屏幕阅读器会 fallback 到默认语音库，发音错乱 -
alt不能为空字符串（alt=""只适用于纯装饰图），功能性图片必须描述行为或内容，比如按钮图标写alt="删除该行数据"，不是alt="垃圾桶" -
role不是万能补丁，优先用原生语义标签（<button>、<nav>、<main>），只有当 DOM 结构无法改时才加role
为什么 W3C 验证器绿了，但 axe 还报一堆“低对比度”“缺少焦点样式”？
W3C 只管语法合法，不管可访问性效果。对比度、键盘焦点、屏幕阅读器流式阅读顺序这些，全靠浏览器渲染后才能测，必须进 DevTools + axe 或 Lighthouse 才能暴露。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 对比度问题常出在 CSS 自定义颜色上，比如
color: #999在浅灰背景上——用 axe 插件点一下就能标出具体元素和当前比值 - 键盘导航失效，90% 是因为用了
<div onclick="...">却没加tabindex="0"和role="button"，更稳妥的是直接换<button> - 焦点样式被
* { outline: none }全局干掉，必须保留或重写为可见样式，比如:focus-visible { outline: 2px solid #007bff; }
如何把 WCAG 检查变成 CI 流程里的硬门槛？
别只在本地跑一遍就提交，得让 PR 提交时自动失败。HTMLHint 可以集成进 ESLint（用 eslint-plugin-html），axe-core 能跑在 Puppeteer 环境里，输出 JSON 报告给 CI 解析。
立即学习“前端免费学习笔记（深入）”；
- CI 配置里加一条：
npx axe-cli --reporter=json --output=axe-report.json ./dist/index.html，再用脚本读axe-report.json判断violations.length > 0就 exit 1 - HTMLHint 规则文件
.htmlhintrc必须纳入 Git，禁止个人覆盖；重点打开doctype-first、attr-no-duplication、head-valid - 别信“开发自测通过”，所有页面至少要过一次 axe 手动扫描——某些动态生成的弹窗、表单错误提示，静态分析根本抓不到
真正难的不是知道该写什么属性，而是让每个新成员第一天提交的代码就带 lang、带 alt、带键盘可操作性。这需要把检查逻辑压进编辑器提示、提交钩子、CI 门禁三层防线，缺一层，三个月后就会退回原形。
