验证HTML是否满足WCAG可感知性要求，需核查三个硬指标：所有<img>是否有非空且描述性alt属性；所有音视频是否提供字幕或文字稿链接；所有颜色传达的信息是否同时有文本或图标冗余。
如何验证HTML是否满足WCAG可感知性（Perceivable）要求
直接看三个硬指标：所有 <img> 是否有非空、描述性 alt；所有音频/视频是否提供字幕或文字稿链接；所有颜色传达的信息是否同时有文本或图标冗余。别信“这个图只是装饰”——如果它出现在文档流程中（比如错误状态图标），就必须有 alt="" 或明确语义。常见错误是给图表写 alt="chart"，这等于没写；正确做法是 alt="折线图显示2024年Q1-Q3用户留存率从62%升至78%"。
键盘导航失效时该查哪几处HTML结构
Tab键卡住、跳过按钮、焦点不可见，90%问题出在三类HTML上：
-
div或span冒充交互元素（如用<div onclick="submit()">提交</div>）——必须换成<button type="button">或加tabindex="0"和role="button" - 动态插入的 DOM（如模态框）未设置
aria-hidden="true"隐藏背景内容，导致焦点仍在不可见区域循环 -
display: none或visibility: hidden用于隐藏但未同步更新aria-hidden，屏幕阅读器仍会读取
检查时打开浏览器开发者工具，按 Tab 键，观察 :focus-visible 样式是否触发，再用 axe DevTools 扫描 keyboard 类别错误。
ARIA属性滥用的典型表现和替代方案
ARIA不是补丁，而是最后手段。以下写法基本等于放弃语义化：
立即学习“前端免费学习笔记（深入）”；
-
<div role="heading" aria-level="1">标题</div>→ 直接用<h1> -
<span role="link" tabindex="0">跳转</span>→ 改为<a href="#">，哪怕 href 是#也比伪造强 - 给
<input type="text">加aria-label而不配<label for="xxx">→ label 元素天然绑定焦点和读屏，aria-label仅在无法加 label 时兜底
记住：原生 HTML 元素自带语义、键盘行为、焦点管理；ARIA 只负责“告诉辅助技术这是什么”，不负责“让它能用”。
对比度不足时CSS和HTML协同修复的关键点
WCAG 要求普通文本对比度 ≥ 4.5:1，大文本 ≥ 3:1。单靠设计师调色板不够，要落地到代码：
- 避免用
color: #ccc这类灰度值直接写死——它在深色背景上必然失败；改用 CSS 自定义属性 +@media (prefers-color-scheme: dark)切换 - 禁用
font-size: smaller或em单位做小字号，尤其在表单提示文字中；优先用rem并确保根字体 ≥ 16px - 图片上的文字叠加（如 banner 图标说明）必须用
background-color垫底，不能只靠透明度；可用filter: drop-shadow()强化边缘但别替代对比度
真正容易被忽略的是：对比度检测工具（如 axe）只测静态快照，不测用户缩放后、系统高对比模式开启后、或深色主题切换时的表现——这些必须手动验证。
