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