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