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