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