Accessibility ARIA-1
到目前为止，我们了解了如何使用合理的 DOM顺序 ，应用具有无障碍性DOM顺序可以帮助你创建符合逻辑的 focus 策略，这为丰富的 keyboard 体验打好了基础，并通过使用内置键盘交互和复杂的自定义键盘事件处理来实现，使用原生元素获得最佳键盘易用性效果，还可以为我们提供内置 语义(Semantic) ，供辅助技术呈现自定义界面，但我们还需要考虑为空间和图片加 标签(labeling) 确保使用 标题(headings) 和其他语义HTML元素，添加 页面结构(landmarks) 为辅助技术提供标记信息，最后讲解了 链接(links) 对于在复杂网站上的处理
HTML内置了所有这些功能，为我们省了很多精力，有时候并非完全不需要我们手动添加。但到目前为止，还没有标准化的下拉菜单HTML元素，还有一些隐含语义需要用户立即明白，因此今天要介绍HTML本身无法表达的语义
What is ARIA
到目前为止我们都强烈建议使用原生元素，因为他们可以自动提供聚焦、键盘支持和内置语义，但是有时候原生HTML也不足够。
网络无障碍倡议无障碍丰富互联网规范（简称 WAI-ARIA ），这份规范为解决原生HTML无法处理的无障碍问题提供了很好的参考标准。
ARIA使你能够指定元素属性，从而修改元素转换为无障碍树的方式。
如果我们创建一个普通的复选框，屏幕阅读器会读出它是复选框，告诉你它的标签，并告诉你是否已选中。
但如果因为某种原因的确需要重新实现基本复选框，会出现什么情况？
首先我们需要让它可聚焦，并像原生复选框一样处理相同的键盘互动操作，但如果尝试使用screen reader来操作，screen reader根本不会告诉我们这是一个复选框。
此时ARIA使我们能够向screen reader提供这一额外信息，可以为自定义复选框添加checkbox ARIA 和aria-checked状态，第一个复选框aria-checked状态为true，第二个复选框aria-checked状态为false。
注意：
aria-checked为true或false，如果是只添加一个属性或者是空字符串并不行， ARIA属性始终需要明确的值 。
添加role属性和aria-checked属性，使得无障碍树中的节点具有相应的角色和状态，不会改变节点的外观或行为。
对于Accessibility tree，aria的角色是使你能够修改树，我们可以把无障碍树当做从普通HTML树中生成的树，向HTML树中添加ARIA并获得不同的无障碍树。
根据我们所使用的属性和属性放置位置两者之间可能稍微不同或者完全不同。但是aria只改变了Accessibility tree，它没有更改添加到目标元素的行为，例如它不会使元素可聚焦或添加键盘事件监听器。
What can ARIA do for you
复选框的例子展示了ARIA可以修改页面元素的语义信息，我们可以通过多种方式来利用ARIA属性，以现有方式之外的方式在HTML中表达语义。
首先正如在复选框中看到的，ARIA可以 向不存在原生语义的元素添加语义 ，例如div元素，div元素明确并且没有原生语义。
ARIA还可以 在特定界限内修改现有元素语义 ，比如我可以使用按钮元素来实现开关控件，为按钮添加switch ARIA role，以便更准确地表达其语义。
注意
：
switch角色是新版ARIA 1.1 规范中的规则，ARIA会随着网络不断变化发展，以便跟上新的UI样式。
ARIA 可以 表达HTML中不存在的语义UI模式 ，这才是ARIA的特色之处。复选框实例实际上是白费力气做重复工作，创建完全无障碍自定义复选框比向原生复选框添加自定义样式所需的工作量可能更多，但在很多情况下，借助ARIA我们可以创建使用普通HTML无法创建的无障碍小部件。
如上图的文本是一个树结构小部件，可以用来浏览本课程，我们可以在无序列表的基础上添加ARIA角色tree treeitem和group并添加aria-expanded属性来表达这个小部件的语义。
aria可以
添加额外标签和说明文本
，并只提供给辅助技术API，例如有一个只有图片的按钮，它没有使用实际图片并且添加了替代文本，那么可以使用ARIA为该按钮提供无障碍标签。
ARIA还可以 表达元素之间的语义关系 ，超出了DOM父子和子女关系范畴，这个控制流程是一个更加复杂的关系示例。在这个示例中，有一个公开小组件形式的按钮，它会控制网页的特定部分是否可见。
ARIA可以
使页面的某一部分变成实时形式
，即在发生更改时立即通知辅助技术，在这个例子中是一个提醒，屏幕阅读器可能会立即朗读该提醒并打断用户正在执行的操作。
ARIA spec：
https://www.
w3.org/TR/wai-aria-1.1/
ARIA widget_roles:
https://www. w3.org/TR/wai-aria-1.1/# widget_roles
More ways to Label
ARIA的核心方面之一是角色集合，角色(Role)是一个无障碍术语表示特定UI模式的简写。
ARIA提供了各种模式术语，我们可以通过role属性将其用在任何HTML元素上。
我们在之前的示例中应用role=checkbox时，我们告诉辅助技术该元素应该遵循复选框模式，保证它将具有checked状态，可以是选中状态或未选中状态并且可以使用鼠标或者空格键切换该状态。如果我们遵守这个步骤，那么我们已经通过实现键盘行为实现了该保证部分的功能。
实际上，因为键盘交互功能很重要，一定要确保在创建自定义小部件时始终将
role属性应用在tabindex属性的同一位置
，以便键盘事件出现在正确位置，并且当页面焦点落在元素上时，系统能正确地提供该元素的角色。
ARIA规范以分类方式描述了各种可能的role属性值以及可以与这些角色一起使用的关联ARIA属性，如果要了解ARIA角色和属性是如何协同工作的以及按照浏览器和辅助技术支持的方式使用，那么 https://www. w3.org/TR/wai-aria-1.1/# roles 这份规范是最佳参考资料。
这里面有一定数量的角色术语可以使用，每个都有特定的语言含义，某些角色是 抽象角色 表示特定属性可能属于多个角色，但是不能作为角色属性的值。
ARIA规范还有关于每个角色的部分解释了角色的语义含义以及或许可以/不可以结合使用的相关属性。
角色模型包括几类角色并包含一些抽象角色，表示一组具有共同属性的角色，在这个例子中superclass是option和checkbox，单选按钮集成了这两个属性，related concept表示在语义上相关的概括性概念，单选按钮输入是相关概念，因为它是单选按钮的常见表示形式。
Name from 表示名称是否来自元素的文本内容，例如按钮元素或需要通过其他机制提供，例如原生HTML单选按钮输入，这里的选项之一contents表示元素的文本内容将作为无障碍标签，author表示作者必须明确提供名称，Accessible Name Required表示该设置通常为true但并非始终为true，Implicit value for role表示aria-checked的默认值是false，单选按钮将表示为未选中。
参考规范：
https://www. w3.org/TR/wai-aria-prac tices-1.1/
https://www. w3.org/TR/wai-aria-1.1/# radiogroup
ARIA提供了向元素添加标签和说明的多个机制，实际上 ARIA是添加无障碍帮助或者说明文本的唯一方式。
aria-label 使我们能够直接指定可以作为无障碍标签使用的字符串，可能会使用aria-label属性的一种情形是具有某种表示元素作用的可视指示信息，但是依然需要为无法查看该可视指示信息的用户澄清相关作用。
例如按钮使用了图形来表示按钮作用，这样会覆盖任何原生标签机制。再比如标签元素或者按钮具有文本内容和aria-label，只有aria-label值将被使用。
aria-labelledby 使我们能够指定元素ID，以将DOM中的其他元素指定为该元素的标签。
aria-labelledby与使用标签元素很像，不过有一些关键区别：
aria-labelledby可以用在任何元素，而标签元素仅仅是可加标签的元素，标签元素指代为其添加标签的元素。
但对于aria-labelledby来说，关系是相反的，被加标签的元素指代为其添加标签的元素，因为aria仅影响无障碍树，因此aria-labelledby无法提供像标签元素那样方便的标签点击行为。
aria-labelledby可以是一个ID引用列表，由多个元素组成标签，标签按照ID引用的列出顺序相连接。
aria-labelledby可以引用辅助技术本来无法查看的元素。aria-labelledby会覆盖元素的所有其他名称来源。
如果有某个元素同时具有aria-labelledby和aria-label，或者具有aria-labelledby和原生HTML标签， aria-labelledby标签将始终优先级更高。
ARIA使我们能够通过属性向HTML中添加更多语义，它本质上使我们能够修改无障碍树，而且还不会更改页面外观或行为，默认情况下，它不会影响样式或交互行为，唯一更改的是页面呈现给辅助技术用户的效果。
在本文中我们已经了解如何使用ARIA更改元素的角色、状态和属性，如何使用ARIA细调元素的无障碍名称，下一篇我们将深入了解ARIA的语义。