自动化脚本只能修复规则明确、上下文无关、不影响语义的问题,如补装饰性图片的alt=""、删无效tabindex、加aria-hidden="true"、标准化role值;无法修复语义错位、上下文缺失、焦点流断裂等需人工判断的部分。

直接用自动化脚本修复HTML模板的可访问性,效果有限——它能扫出 alt 缺失、role 错用、tabindex 乱设等明确规则类问题,但修不了语义错位、上下文缺失、焦点流断裂这些依赖人工判断的部分。别指望跑一遍脚本就达标。
axe-core 能自动检测什么,不能修什么
axe-core 是目前最可靠的开源可访问性检测库,集成进构建流程后可拦截明显违规项,但它只报告、不修复。
-
aria-label缺失或为空字符串(aria-label="")会被标为严重错误,但不会帮你补内容——它不知道按钮是“提交”还是“取消” -
img标签缺alt属性会报警,但不会猜图意;alt="图片"这种无效值也会被报,但不会重写 -
button没有文字内容或aria-label会被标记,但不会自动注入描述文本 - 它能发现
role="navigation"里嵌了div而非语义导航结构,但不会把div替换成nav或加aria-labelledby
哪些修复可以安全脚本化
只有满足「规则明确 + 上下文无关 + 不影响语义」的修改,才适合交给脚本批量处理。
- 给所有
img补alt=""(仅限装饰性图片):前提是已通过 class 名或路径约定标识,比如class="deco"或src="/icons/close.svg" - 移除无效
tabindex:如tabindex="-1"写在非交互元素上(span、div),可统一删掉 - 补漏的
aria-hidden="true":对纯图标svg父容器或i标签,脚本可识别并添加 - 标准化
role值:把role="button"改成小写(部分旧模板写成Role="button"),或剔除非法值如role="clickable"
为什么不能全自动修复表单和步骤向导
表单字段的 label 关联、步骤向导的 aria-current 位置、动态加载区域的 aria-live 级别——这些都强依赖 DOM 结构意图,脚本无法推断。
立即学习“前端免费学习笔记(深入)”;
-
input旁的span是不是 label?脚本靠for属性匹配id,但若没写for,只靠视觉邻近关系,它不敢乱绑 - 步骤向导中哪个
li是当前步?脚本无法从 class 名(如active)100% 推断语义,必须人工确认是否该加aria-current="step" -
aria-live="polite"和aria-live="assertive"的选择取决于反馈性质:成功提示用 polite,错误摘要用 assertive——脚本没能力区分
真正卡住进度的,从来不是那些能被正则匹配的属性缺失,而是“这个按钮到底该叫什么”“这段文字对屏幕阅读器用户意味着什么”“焦点跳转后用户下一步该看哪”。这些必须由人来读、来判、来写——自动化只是把人从重复劳动里解放出来,不是替代人做设计决策。



















