您是否曾想过，屏幕阅读器等辅助技术如何知道要向用户播报什么内容？答案是，这些技术依赖于开发者使用语义 HTML 标记网页。但什么是语义？屏幕阅读器如何使用语义？
可供性和语义
在深入探讨语义之前，了解可供性很有帮助。可供性是指任何可为用户提供执行操作机会的对象。一个经典示例是茶壶：
这款茶壶无需使用说明书。相反，其物理设计会向用户传达应如何操作。它有一个把手，而且您在现实世界中见过其他带有类似把手的物体，因此可以推断出应该如何拿起并操作它。
构建图形界面时，我们会使用 CSS 为界面添加视觉可供性。例如，您可以为按钮添加阴影和边框，使其看起来像现实世界中的实际按钮。
但对于无法看到屏幕的用户，这些视觉提示无法传达给他们。因此，您需要确保界面以能够向辅助技术传达这些相同直观功能的方式构建。界面元素的这种非视觉可供性称为其语义。
编写语义 HTML
传达正确语义的最简单方法是使用语义丰富的 HTML 元素。
使用 CSS 可以设置 <div> 和 <button> 元素的样式，使其传达相同的视觉效果，但使用屏幕阅读器时，这两种体验截然不同。<div> 只是一个通用分组元素，因此屏幕阅读器只会朗读 <div> 的文本内容。<button> 会被播报为“按钮”，这会向用户发出更强烈的信号，表明这是一个可以互动的元素。
通常，解决此问题的最佳方法是完全避免使用自定义互动控件。例如，将充当按钮的 <div> 替换为实际的 <button>。
语义属性和无障碍树
一般来说，每个 HTML 元素都具有以下一些语义属性：
- 角色或类型
- 名称
- 一个值（可选）
- 状态（可选）
元素的 role 属性用于描述元素的类型，例如“button”“input”，甚至只是 div 和 span 元素之类的“group”。
元素的名称是其计算出的标签。屏幕阅读器通常会先读出元素的名称，然后再读出其角色，例如“注册，按钮”。用于确定元素名称的算法会考虑多种因素，例如元素内是否有任何文本内容、是否具有 title 或 placeholder 等属性、是否与实际的 <label> 元素相关联，以及是否具有 aria-label 和 aria-labelledby 等 ARIA 属性。
某些元素可能具有值。例如，<input type="text"> 的值可能反映用户在文本字段中输入的任何内容。
某些元素可能还具有状态，用于传达其当前状态。
例如，<select> 元素可以处于展开或收起状态，具体取决于它是打开还是关闭。
无障碍功能树
对于 DOM 中的每个节点，浏览器会确定该节点是否在语义上“有趣”，并将其添加到无障碍树中。当辅助技术（如屏幕阅读器）向用户提供替代界面时，通常会遍历此无障碍功能树。
借助 Chrome 开发者工具，您可以检查元素的语义属性，并探索其在无障碍树中的位置。
后续步骤
一旦您了解了语义及其如何帮助屏幕阅读器导航，您就会不由自主地以不同的方式看待自己构建的网页。在下一部分中，我们将退一步，考虑如何使用有效的标题和地标来传达网页的整个轮廓。