用语义标记创建用户界面
学习目标
完成本单元后，您将能够：
- 说明为什么为了让内容无障碍必须要语义标记。
- 定义 ARIA 中的三种属性。
简介
打造无障碍用户界面牵涉到许多因素，一般来说，界面越复杂，您需要考虑的因素越多。比如，一篇简单的博文或新闻文章需要考虑的无障碍因素要少于带留言、社交媒体功能或其他互动功能的新闻文章。复杂的网络应用程序，比如报表或 Dashboard Builder、页面布局编辑器，或是 Kanban 风格的列表视图有更高的无障碍要求。
网页或应用程序越复杂，您需要做的事情就越多，以确保它对于残疾人用户无障碍。话虽如此，要想让任何网页或应用程序无障碍，您需要从基础做起。
我们来谈一下语义标记
语义标记是一切无障碍的基础。出现在网页上的内容应该用标记来呈现，标记代表呈现的内容类型。比如，表格数据应该用基于 <table> 的标记来呈现，列表应该用基于 <ul> 的标记呈现，可视化标题应该用标题标签呈现，等等。
语义标记使内容对于机器和软件来说可读、可理解——尤其是辅助技术——这是内容无障碍所必需的。盲人用户可以使用屏幕阅读器来浏览用正确格式的 HTML <table> 元素创建的报表构建器。但是，同一个用户不能正确浏览或理解用 <div> 元素标记的同样的东西，即使它们看起来可能跟视力正常的用户是一样的。
网页和应用程序的 HTML 结构赋予辅助技术以及依赖辅助技术的用户其内容的含义。我们建议您尽可能使用语义 HTML5 元素，并且用 Nu HTML Checker 之类的检查器验证您的标记。
ARIA 入门
ARIA，Accessible Rich Internet Applications 的缩写，是 HTML 的扩展，承认网页的用途远远不止于标记或显示目的。ARIA 理解 Web 是一个构建复杂应用程序的平台，提供选项通过辅助技术将更先进的交互传递给残疾人用户。
ARIA 的工作原理是把特殊的属性赋予 HTML DOM 节点。ARIA 中有三种类型属性：角色、状态和属性。
角色
角色是赋予传统上没有任何语义含义的 HTML 元素语义含义的一种方式，比如 <div> 或 <span>。例如，您可以用 ARIA 角色来认定一套非语义元素为按钮或链接，或者甚至是更复杂的组件，比如菜单、组合框、模态或交互式网格。
角色是对用户的承诺。如果您把 ARIA 角色添加到元素中，比如把 role=“button”添加到 <div>，您在告诉这个 <div> 把自己看作是一个按钮。现在这个 <div> 作为 <button> 出现在浏览器的无障碍树中。浏览器的无障碍树是向屏幕阅读器呈现的信息的快照。这表示您还必须向这个 <div> 提供按钮本身具有的所有功能。这包括焦点状态、键盘交互、鼠标交互等等。把一个 <div> 称作按钮但是不给它按钮的功能，违背了对用户的承诺。
状态
状态是属性，向浏览器的无障碍树描述一个 ARIA 组件的状态。状态可以描述下拉菜单是否 expanded（展开）、输入类型是 disabled（禁用）还是 readonly（只读）、复选框是否 checked（打勾）、列表框中的某个项目是否 selected（选中）等等。用 ARIA 创建复杂的组件时，通过一个控件的操作准确更新其各种状态，这十分重要。这是为了兑现使用角色属性时您向用户做出的承诺。
属性
W3C 对 ARIA 属性的定义是“属性是某个对象的本质所需的，或者代表与该对象关联的某个数据值。”这些属性描述对象的本质。请思考具有 multiple 属性的 <select> 元素与没有 multiple 属性的 <select> 元素之间的区别。前者是组合框，我们可以多选，而对于后者，用户需要单击折叠状态，以打开这个框并选择一个项目。在这种情况下，multiple 是原生 <select> 元素的一个属性。
同样，ARIA 还有许多用来描述对象但是未必会定期变化以更新某个对象状态的属性。
了解关于 ARIA 属性的哪些、何时、如何可能会非常复杂。一般来说，我们强烈建议参照 Salesforce Lightning Design System (SLDS) 中的组件蓝图。SLDS 包含 900 多个 HTML 蓝图，包含关于标记、属性和键盘交互的详细无障碍指引。这些蓝图包含所有正确的 ARIA 角色、属性和状态，都在正确的地方。另外，我们的蓝图还包含无障碍信息，详细说明如何正确地关联并管理您正在构建的组件的状态和属性。
SLDS 组件蓝图中的 ARIA 经过辅助技术测试，基于 ARIA Authoring Practices Guides（ARIA 创作实践指南）。这份文档会定期更新，是目前关于 ARIA 以及许多通用设计模式的真理来源。
您未必可以在 SLDS 组件蓝图中找到您需要的每一种交互模式。如果您在我们的设计系统中看不到任何内容，请参考ARIA Authoring Practices Guide（ARIA 创作实践指南）和 ARIA 规格。不要相信互联网上的任何其他东西——有一些很多年前的过时想法、探索以及明显很差的、不好用的组件假装成现代的、无障碍的解决方案。
既然已经向您介绍了构建无障碍用户界面的基础，现在我们来研究无障碍导航。