ARIA 和非原生 HTML 语义简介
到目前为止,我们一直建议您使用原生 HTML 元素,因为它们可以帮助您集中注意力、 键盘支持和内置语义,但有时简单的 布局和原生 HTML 就无法发挥作用。例如,目前 基于弹出式菜单这一常见界面结构的标准化 HTML 元素。诺 是否存在可提供“ 用户需要尽快了解此问题”。
然后,在本课程中,我们将探索如何表达 HTML 无法表达的语义 来表达自身的情绪。
网络无障碍倡议组织的无障碍丰富互联网应用 规范(WAI-ARIA,或仅仅 ARIA)适用于连接存在无法管理的无障碍功能问题的领域 。它的工作原理是允许您指定 属性来修改 元素转换为无障碍树的方式。我们来看一个 示例。
在以下代码段中,我们将列表项用作一种自定义复选框。通过 CSS“复选框”类为元素提供了所需的视觉特征。
<li tabindex="0" class="checkbox" checked>
Receive promotional offers
</li>
虽然这对视力正常的用户很有效,但屏幕阅读器不会给出任何指示 该元素本应是一个复选框,因此低视力用户可能会错过 所有元素
使用 ARIA 属性,我们可以为元素提供缺少的信息
以便屏幕阅读器正确解读它。在这里,我们添加了 role
和
aria-checked
属性,用于将元素明确标识为复选框,以及
以指定默认情况下选中该复选框现在,列表项将添加到
无障碍功能树和屏幕阅读器会正确地将其报告为一个复选框。
<li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">
Receive promotional offers
</li>
ARIA 通过更改和扩充标准 DOM 无障碍树来发挥作用。
![标准 DOM 无障碍树。](https://web.dev/static/articles/semantics-aria/image/the-standard-dom-accessib-f1377436c8cbd.jpg?authuser=0000&hl=zh-cn)
![ARIA 经过扩展的无障碍树。](https://web.dev/static/articles/semantics-aria/image/the-aria-augmented-access-a0705fd66fc51.jpg?authuser=0000&hl=zh-cn)
尽管 ARIA 允许我们细微(甚至彻底)修改可访问性 树状结构中,这是它唯一更改的内容。ARIA 不增强元素的任何固有行为;这不会导致 元素可聚焦,或为其提供键盘事件监听器。这仍然是 开发任务。
请务必注意,您无需重新定义
语义信息。无论使用何种方法,标准 HTML <input type="checkbox">
无需额外添加 role="checkbox"
ARIA 属性
正确。
另外值得注意的是,某些 HTML 元素对
角色和属性。例如,不得对标准 <input
type="text">
元素应用任何其他角色/属性。
请参阅 HTML 中的 ARIA 规范 。
让我们看看 ARIA 还能提供哪些其他功能。
ARIA 可以做什么?
正如您在复选框示例中所看到的,ARIA 可以修改现有元素语义 或者为没有原生语义的元素添加语义。它还可以 表达 HTML 中根本不存在的语义模式,如菜单或标签页 面板。通常,ARIA 允许我们创建不可能 替换成纯文本。
- 例如,ARIA 可以添加
会公开给辅助技术 API。
<button aria-label="screen reader only label"></button>
- ARIA 可以表达元素之间的语义关系, 标准父/子连接,例如控制 特定区域
<div role="scrollbar" aria-controls="main"></div>
<div id="main">
. . .
</div>
- 而 ARIA 可将网页的某些部分设为“实时”状态以便立即 提供辅助技术
<div aria-live="polite">
<span>GOOG: $400</span>
</div>
ARIA 系统的核心部分之一就是其角色的集合。角色
相当于特定界面的简略指示器
模式。我们可以通过 role
使用 ARIA 提供的模式词汇表,
属性。
在上一个示例中应用 role="checkbox"
时,我们告诉
一种辅助技术,要求元素在“复选框”之后模式。这样
就是,我们要保证其状态
并且可以使用鼠标或空格键切换状态
就像标准的 HTML 复选框元素一样
事实上,由于键盘交互功能在屏幕阅读器中非常醒目
因此在创建自定义 widget 时,务必要确保
role
属性始终与 tabindex
在同一位置应用
属性;这样可确保键盘事件转到正确的位置,
焦点位于元素上,其角色会准确传达。
ARIA 规范描述了
role
属性和相关 ARIA 的可能值分类
可与这些角色结合使用的属性。这是最好的
有关 ARIA 角色和属性工作方式的权威信息来源
以及如何以受浏览器和
辅助技术
![所有可用 ARIA 角色的列表。](https://web.dev/static/articles/semantics-aria/image/a-list-all-available-ar-64bce9c9d6.jpg?authuser=0000&hl=zh-cn)
不过,该规范非常密集。比较容易理解的入手点是 ARIA 创作做法文档 ,其中探讨了使用可用 ARIA 角色和 属性。
ARIA 还提供了地标角色,扩展了 HTML5 中的可用选项。请参阅 地标角色设计 模式 。