html技术债不会自动消失，必须在每个敏捷迭代中通过阶梯式动作逐步清理：定位靠ci流水线校验与axe扫描，守住键盘可访问、图片有alt、表单显式绑定label三条底线，分高危/中频/长周期三层渐进修复，并由产品、设计、开发、测试共同担责。
HTML 代码质量技术债在敏捷迭代中不会自动消失，也不会因“下个 Sprint 再修”而变轻——它会直接拖慢前端交付速度、放大 UI 回归风险、让新成员不敢碰老页面。必须用可落地的阶梯式动作，在每个迭代里稳住底线、逐步清淤。
HTML 技术债的典型症状与定位方式
别等线上出错才意识到 HTML 有问题。真实项目里，这些信号出现时，债已经产生利息：
-
aria-*属性写错或缺失，但无障碍测试没跑（axe扫描报aria-allowed-role或landmark-unique错误） - 表单控件没有
label或aria-labelledby，靠视觉位置“暗示”关联 - 用
div+onclick模拟按钮，却没加role="button"和tabindex="0" - 语义化标签混用：比如
<section></section>套<section></section>而非<article></article>，或用<ul></ul>布局导航但无实际列表语义 - 构建产物中存在大量内联
style或重复class，且未被 CSS-in-JS 或原子类工具统一管理
定位不靠人工翻页，推荐在 CI 流水线加两步：
- 用
html-validate配置规则集（如recommended+a11y），每次 PR 提交触发校验 - 对关键页面做 Puppeteer +
axe-core快照扫描，失败项直接阻断合并
每个 Sprint 至少守住的 HTML 质量底线
底线不是“完美”，而是“不再新增高危债”。以下三项必须在每个迭代结束前验证通过：
- 所有新增或修改的交互元素（按钮、链接、输入框）必须可通过键盘
Tab访问，且焦点状态可见（检查是否漏掉:focus-visible或覆盖了默认 outline） - 所有图片必须有
alt—— 空字符串alt=""可接受（装饰图），但禁止缺失alt属性 - 所有表单字段必须显式绑定
label（for+id）或使用嵌套方式，禁止仅靠title或视觉对齐“蒙混过关”
这三条不依赖设计稿或排期，是开发自测即可闭环的动作。若某次 Sprint 无法满足，说明该需求的 HTML 实现方案本身就有结构性风险，应拉通前端负责人一起重审 DOM 结构设计。
用“渐进式修复”替代“一次性重构”
老页面堆满 div 嵌套和内联样式？别计划“大扫除”。按影响范围和改动成本分层推进：
-
高危层（当期 Sprint 必做）：修复导致屏幕阅读器失效或键盘操作中断的问题，例如补全缺失的
role、修正错误的aria-live区域、删除无效tabindex -
中频层（每 2–3 个 Sprint 插入一项）：将一个高频复用区块（如搜索栏、分页组件）抽成语义化自定义元素（
<search-bar></search-bar>），封装slot和必要 ARIA 属性，后续页面直接替换 -
长周期层（季度级规划）：推动构建工具链升级，比如把
html-webpack-plugin替换为支持html-minifier-terser自动修复常见问题（如闭合标签缺失、属性引号标准化）的配置
注意：中频层的组件化改造必须同步产出对应 Storybook 示例和 axe 扫描报告，否则等于换汤不换药。
谁来推动？怎么分配责任？
HTML 质量债不是“前端的事”，而是整个交付链的责任切片：
- 产品：在 PRD 中明确标注“此页面需支持读屏软件基础操作”，并列为验收项之一（不是“建议”，是
must） - 设计师：提供带语义层级的 Figma 标注（例如标出主标题是
<h1></h1>还是<h2></h2>，导航区域是否需要nav） - 前端开发：在任务拆解时，把“DOM 结构校验”作为子任务，时间占比不低于总开发时长的 15%
- 测试：回归用例中必须包含键盘导航路径验证（
Tab→Shift+Tab→Enter/Space），不能只点鼠标
最容易被忽略的是：没人负责跟踪“修复后是否又被改回去”。建议在 Git 仓库根目录放一个 html-debt-log.md，每季度由 Scrum Master 更新一次已清理项和残留项——不是为了追责，而是让债始终可见、可度量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
