HTML怎么做无障碍访问_html无障碍accessibility开发做法【建议收藏】

HTML怎么做无障碍访问_html无障碍accessibility开发做法【建议收藏】需要先看清适用场景和关键步骤，避免只记结论却忽略实际限制。

HTML无障碍核心是语义正确、交互可感知、操作可控制；须用对原生标签、确保键盘导航、合理使用ARIA、严格测试。

HTML 做无障碍访问不是加几个属性就完事，核心是让语义正确、交互可感知、操作可控制——不满足这三点，aria-label 加得再多也白搭。

用对语义化标签比瞎加 ARIA 更重要

浏览器和读屏软件（如 NVDA、VoiceOver）优先信任原生 HTML 标签的语义。比如 <button> 自带可聚焦、空格/回车触发、角色 button；而用 <div onclick="..."> 模拟按钮，就必须手动补 role="button"、tabindex="0"、onkeydown 监听回车/空格——漏一个，键盘用户就卡住。

1. 导航用 <nav>，不是 <div class="nav">
2. 标题必须用 <h1>–<h6>，且保持层级逻辑（不要跳级）
3. 表单控件必须有 <label for="xxx"> 或包裹式 <label><input>xxx</label>，否则读屏无法播报说明
4. 避免把 <div> 当 <table> 用：无语义表格结构会让读屏按行列“念”，但内容错位

alt 属性不是可选填项，而是图像信息的替代出口

alt 不是 SEO 关键词堆砌地，也不是“图片”“示意图”这种废话。它的作用是在图像不可见时（加载失败、禁用图片、读屏模式），提供等价的信息。

1. 装饰图：alt=""（空字符串，明确告知读屏跳过）
2. 功能图（如搜索图标按钮）：alt="搜索"，而非 alt="放大镜图标"
3. 信息图（含文字/数据）：需在 alt 中简述关键结论，或用 <figure><figcaption> 补充，复杂图表另配长描述链接
4. 绝对不要留 alt 属性不写值（alt）或写成 alt="image"——读屏会念出 “image”，毫无意义

键盘焦点顺序和可见性经常被 CSS 搞崩

很多页面鼠标能点，键盘 Tab 却跳不过去、或焦点框被 outline: none 彻底抹掉——这对低视力或运动障碍用户等于关闭入口。

1. 确保所有交互元素（按钮、链接、输入框、自定义控件）都能被 Tab 访问到：检查是否误设 tabindex="-1" 或 disabled 状态未同步
2. 禁用默认焦点框前，必须提供同等清晰的视觉焦点样式，例如：

   button:focus { outline: 2px solid #007aff; outline-offset: 2px; }

3. 模态框（Modal）打开后，焦点必须锁定在内部，且关闭后应返回触发点；用 inert 属性或手动管理 tabindex 是常见方案
4. 隐藏内容别只靠 visibility: hidden 或 opacity: 0：它们仍可聚焦、仍被读屏读出；该用 display: none 或 aria-hidden="true"（配合合理条件）

ARIA 不是万能胶，乱用反而破坏无障碍

role 和 aria-* 属性只应在原生语义无法满足时兜底。强行覆盖原生行为（比如给 <button> 加 role="link"），会让读屏报出矛盾信息。

1. 优先用原生标签：能用 <input type="checkbox"> 就别用 <div role="checkbox">
2. aria-live 用于动态更新区域（如搜索建议、错误提示），但要慎选 polite/assertive，避免打断用户当前操作
3. aria-expanded 必须与实际展开状态同步更新（JS 控制），否则读屏会说“已展开”，实际却是收起的
4. 不要给非交互元素加 tabindex="0"：比如给 <p> 加了，它就能被 Tab 到，但没任何操作意义，纯属干扰

最常被忽略的其实是「测试环节」：不亲自关掉显示器用 VoiceOver 过一遍，不拿键盘从头到尾 Tab 一次，不尝试用开关控制（Switch Control）操作——写的代码再“合规”，也可能在真实使用中失效。