您有没有想过，屏幕阅读器等辅助技术如何知道要向用户读出什么内容？答案是这些技术依赖于开发者使用语义 HTML 来标记其网页。但什么是语义？屏幕阅读器如何使用语义呢？
功能可见性和语义
在深入了解语义之前，了解另一个术语：功能可见性会很有帮助。可供性 (affordance) 是指能够或为其用户提供执行某项操作的机会的任何对象。Teapot 就是一个典型的例子：
这种茶壶不需要使用说明手册，而是以实际设计向用户传达操作方法。它有一个句柄，而且由于您已经看到世界上其他具有类似句柄的对象，因此您可以推断应该如何获取并操作它。
在构建图形界面时，我们使用 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"> 的值可能反映用户在文本字段中输入的任何内容。
某些元素可能还具有状态，用于传达其当前状态。state例如，<select> 元素可以处于展开状态或收起状态，具体取决于它处于打开还是关闭状态。
无障碍功能树
对于 DOM 中的每个节点，浏览器都会确定该节点在语义上是否“有趣”，并将其添加到无障碍功能树中。当辅助技术（如屏幕阅读器）为用户提供备用界面时，通常是通过遍历此无障碍树来实现的。
您可以使用 Chrome 的开发者工具检查元素的语义属性，并探索其在无障碍功能树中的位置。
后续步骤
对语义及其如何辅助屏幕阅读器导航有一定了解后，您就会忍不住以不同的方式看待您构建的网页。在下一节中，我们将退后一步，考虑如何使用有效的标题和地标来传达页面的整个轮廓。