全局属性与无障碍

全局属性可以出现在大多数 HTML 元素上，但“能写”不代表“应该写”。id 用于文档内身份，class 用于分组和样式，hidden 表示当前不参与呈现，lang 表示语言，title 提供补充信息。辅助技术得到的是这些属性与元素语义共同构成的结果。

<p id="summary" class="lead" lang="zh-CN">本节摘要。</p>
<button aria-describedby="summary">开始实验</button>

aria-* 用于补充原生语义缺少的信息，例如描述关系或状态；它不能把错误的元素自动变成正确控件。优先选择原生 button、label、nav 等，再在确有需要时添加 ARIA。重复定义或写错状态可能让辅助技术得到比没有 ARIA 更混乱的结果。

可见、可聚焦和可读不是一回事

hidden 通常把内容从当前呈现和可访问树中移除；CSS 的 visibility、display、透明度和 aria-hidden 各自影响不同。不要只根据截图判断元素是否仍可被键盘或屏幕阅读器访问。一个视觉隐藏的元素如果仍可聚焦，可能造成不可见焦点陷阱。

实验与练习

为按钮添加描述关系，再分别使用 hidden、display: none、透明度和 aria-hidden，用键盘和可访问性面板记录它们的差异。练习要求解释：哪些状态是视觉变化，哪些状态会改变可访问树，哪些会保留焦点或事件风险。

常见错误

• 用 title 替代可见标签或表单 label。
• 给原生按钮增加错误的 role，造成重复或冲突语义。
• 把 aria-hidden="true" 放在仍包含可聚焦子元素的容器上。
• 只用颜色表达错误、成功或必填状态。

继续阅读

最后一篇处理 HTML 源码中的字符实体、编码和字面文本：字符实体与编码。

练习

1. 用最小输入复现“全局属性与无障碍”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案