必须将a11y规则嵌入CI/CD流程作为硬性校验点，如axe-core配置landmark-unique、region规则，htmlhint在pre-commit阶段阻断缺失alt、跳级标题、重复id等错误，VS Code实时标红提示，确保“错在哪一行、谁来修、不修就不能合”。

可访问性规范在团队协作中不能靠“提醒”或“自觉”落地，必须变成构建流程里的硬性校验点——否则每次 Code Review 都会重复争论 alt 是否该写、main 是否唯一、nav 里能不能塞表单。

怎么让 a11y 规则进 CI 而不是只贴在 Wiki 上

工具链不介入，规范就只是建议。关键不是“有没有”，而是“错在哪一行、谁来修、不修就不能合”。

• axe-core 必须集成到 CI 流程，配置 landmark-unique（检查 main/nav 唯一性）、region（检查语义区域是否缺失标题）等核心规则
• htmlhint 在本地 pre-commit 阶段运行，强制 attr-req-alt、headings（禁止跳级）、id-unique，错误直接阻断提交
• VS Code 安装 HTMLHint 插件并启用 editor.formatOnSave，保存即标红，新人第一天就能看到 <img alt="团队协作中的HTML可访问性规范制定" > 缺 alt 的实时提示

哪些 a11y 错误最容易被忽略但影响最大

不是所有报错都显眼，有些问题在视觉上完全正常，却让屏幕阅读器彻底失效。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

• main 被 display: none 或 aria-hidden="true" 包裹 —— 辅助技术直接跳过整个主内容区
• nav 里混了 form 或 button（如搜索框），但没加 role="search" 或正确关联 aria-labelledby
• section 没配 h2–h6 标题 —— 屏幕阅读器无法将其识别为独立语义区域，RSS 抓取也丢内容
• button 用 div onclick 替代，且未设 tabindex="0" 和键盘事件（Enter/Space）—— 键盘用户根本无法触发

Code Review 时必须盯死的三项 a11y 硬指标

不查具体实现细节，只验三个不可妥协的结构事实。每一条都能在 DevTools 的 Accessibility 面板里 5 秒内验证。

立即学习“前端免费学习笔记（深入）”；

• h1 全局是否仅出现一次？多个 h1 会让屏幕阅读器误判页面层级
• main 是否存在且唯一？缺失或嵌套在 section/header 内属于结构性错误
• 所有 img 是否有非空 alt？装饰图必须是 alt=""，而非省略或填占位符如 "image"

真正难的不是写对一个 nav，而是确保它在 20 个组件、7 个微前端子应用、3 套 CMS 模板里始终承载相同语义——这只能靠工具卡口 + PR 强制检查，而不是靠某个人记得住所有边界条件。