无障碍富互联网应用 (WAI-ARIA) 1.2

W3C 推荐标准

关于此文档的更多细节
此版本
https://w3org.cn/TR/2023/REC-wai-aria-1.2-20230606/
最新发布版本
https://w3org.cn/TR/wai-aria-1.2/
最新编辑草案
https://w3c.github.io/aria/
历史
https://w3org.cn/standards/history/wai-aria-1.2
提交历史
实现报告
https://w3c.github.io/test-results/core-aam-1.2/
上一版推荐标准
https://w3org.cn/TR/wai-aria-1.1/
编辑
Joanmarie Diggs (Igalia, S.L.)
James Nurthen (Adobe)
Michael Cooper (W3C)
Carolyn MacLeod (IBM)
前任编辑
Shane McCarron (Spec-Ops) (编辑至 2018 年)
Richard Schwerdtfeger (Knowbility) (编辑至 2017 年 10 月)
James Craig (Apple Inc.) (编辑至 2016 年 5 月)
反馈
GitHub w3c/aria (合并请求, 新建议题, 开放议题)
勘误表
存在勘误表.

另见 译本


摘要

Web 内容的无障碍性需要关于小部件、结构和行为的语义信息,以便辅助技术能够向残障人士传达适当的信息。本规范提供了一套角色、状态和属性的本体,用于定义无障碍用户界面元素,并可用于提高 Web 内容和应用程序的无障碍性及互操作性。这些语义旨在允许作者在文档级标记中适当地向辅助技术传达用户界面行为和结构信息。此版本添加了自 WAI-ARIA 1.1 [wai-aria-1.1] 以来新增的功能,以改善与辅助技术的互操作性,从而为 [HTML] 和 [SVG2] 形成更一致的无障碍模型。本规范是对 [HTML] 和 [SVG2] 的补充。

本文档是 WAI-ARIA 系列的一部分,该系列在 WAI-ARIA 概览中有所描述。

本文档状态

本节描述本文档在发布时的状态。当前的 W3C 出版物列表以及本技术报告的最新修订版可在 https://w3org.cn/TR/ 的 W3C 技术报告索引 中找到。

WAI-ARIA 1.2 是 W3C 推荐标准。咨询委员会 (AC) 和 W3C 主管已批准该规范成为 W3C 推荐标准。有关实施经验的详情,请参阅 WAI-ARIA 1.2 实施报告。附录中提供了 WAI-ARIA 1.2 的修订历史

本文档由 无障碍富互联网应用工作组发布,作为使用 推荐标准轨道的推荐标准。

W3C 建议广泛部署本规范作为 Web 标准。

W3C 推荐标准是一项在经过广泛共识建立后,由 W3C 及其成员认可的规范,并且工作组成员已承诺对其实现提供免版税许可

本文档由在一个受 W3C 专利政策约束的小组下运作的组织制作。W3C 维护了一份与该小组可交付成果相关的专利披露公开列表;该页面还包括专利披露的说明。任何实际知悉某项专利并认为其包含必要权利要求 (Essential Claim) 的个人,必须根据 W3C 专利政策第 6 节披露相关信息。

本文档受 2021 年 11 月 2 日的 W3C 流程文档管辖。

献词

本版 ARIA 规范谨献给 Carolyn MacLeod 的纪念,她的贡献贯穿于本文档始终。她以平和与睿智赋予我们的工作光彩,她的英年早逝将被我们的社区长期怀念。

1. 简介

本节是非规范性的。

本规范的目标包括

WAI-ARIA 是一项技术规范,旨在提供一个框架来提高 Web 内容和应用程序的无障碍性及互操作性。本文档主要供创建自定义小部件和其他 Web 应用程序组件的开发人员参考。请查看 WAI-ARIA 概览以获取针对其他受众的相关文档链接,例如 WAI-ARIA 创作实践 [WAI-ARIA-PRACTICES-1.2],该文档介绍了开发人员将面临的 WAI-ARIA 旨在解决的无障碍问题、基本概念以及 WAI-ARIA 的技术方法。

本文档目前处理 角色的两个方面:用户界面功能和结构性 关系。有关更多信息和用例,请参阅 WAI-ARIA 创作实践 [WAI-ARIA-PRACTICES-1.2] 以了解如何使用角色来提高交互式内容的无障碍性。

本规范定义的内容角色旨在支持平台 无障碍 API 所使用的角色。在动态 Web 内容的元素上声明这些角色,旨在支持 Web 内容与利用 无障碍 API 的辅助技术之间的互操作性。

支持该标准的模式被设计为可扩展的,以便可以通过扩展基础角色来创建自定义角色。这允许 用户代理至少支持基础角色,而支持自定义角色的用户代理则可以提供增强的访问能力。请注意,其中大部分内容可以在 [XMLSCHEMA11-2] 中形式化。然而,定义角色之间相似性的能力(例如 baseConcepts 和更具描述性的定义)在 XSD 中是不可用的。

WAI-ARIA 1.2 是 WAI-ARIA 1.2 套件的一员,该套件定义了如何将 WAI-ARIA 和其他 Web 内容语言的语义暴露给 无障碍 API

1.1 富互联网应用无障碍性

Web 无障碍领域定义了如何使残障人士能够使用 Web 内容。某些类型残障的人士使用 辅助技术 (AT) 与内容交互。辅助技术可以将内容表现形式转换为更适合用户的格式,并允许用户以不同方式进行交互。例如,用户可能需要或选择通过箭头键与滑块小部件交互,而不是用鼠标拖放。为了有效地完成这一点,软件需要理解内容的 语义。语义是意义的科学;在此,用于分配适用于用户界面和内容元素的作用、状态和属性,正如人类所理解的那样。例如,如果一个段落被语义化标识,辅助技术可以将该段落作为一个独立于其余内容的单元进行交互,从而获知该段落的确切边界。可调节范围滑块或可折叠列表(又称树状 小部件)是更复杂的例子,其中小部件的各个部分具有需要为辅助技术正确标识的语义,以支持有效的交互。

新技术往往忽视无障碍所需的语义,而新的创作实践往往误用这些技术的预期语义。在语言中具有一种定义含义的 元素,往往被赋予了用户理解之外的其他含义。

例如,Web 应用程序开发人员使用 CSS 和 JavaScript 在 HTML 中创建可折叠的树状小部件,尽管 HTML 中没有语义化的 tree 元素。对于无残障用户,它可能看起来并表现得像一个可折叠的树状小部件,但如果没有适当的语义,辅助技术可能无法识别其角色,导致残障人士可能无法 感知操作 该树状小部件。同样,Web 应用程序开发人员使用 JavaScript 在 SVG 中创建交互式按钮小部件,尽管 SVG 中没有语义化的 button 元素。对于无残障用户,它可能看起来并表现得像一个按钮小部件,但如果没有适当的语义,残障人士可能无法 感知操作 该按钮小部件,因为辅助技术可能无法识别其角色。

整合 WAI-ARIA 是作者为自定义小部件提供适当语义的一种方式,从而使这些小部件能够被辅助技术访问、使用并与之互操作。本规范通过提供与内容附加的 本体 对应的 角色,标识了通常被无障碍产品识别的小部件和结构类型。这使得具有给定角色的元素能够被理解为特定的小部件或结构类型,而无论从实现宿主语言继承的任何语义如何。角色是平台 无障碍 API 的共同属性,辅助技术利用该属性为用户提供有效的呈现和交互。

角色模型包括交互 小部件 和标识文档结构的元素。角色模型描述了继承关系,并详细说明了每个角色支持的 属性。关于角色到无障碍 API 的映射信息由 核心无障碍 API 映射 [CORE-AAM-1.2] 提供。

角色是元素类型,不会随时间和用户行为而改变。角色信息通过与用户代理的交互被辅助技术使用,以提供对指定元素类型的常规处理。

状态和属性用于声明对交互产生影响并描述交互的元素重要属性。它们使 用户代理 和操作系统能够正确处理元素,即使属性通过客户端脚本动态更改。例如,替代输入和输出技术(如屏幕阅读器和语音听写软件)需要能够识别并有效地操作及向用户传达各种交互状态(如禁用、选中)。

虽然辅助技术可以直接通过 文档对象模型 [DOM] 访问这些属性,但首选机制是让用户代理将状态和属性映射到操作系统的无障碍 API。详细信息请参阅 核心无障碍 API 映射 [CORE-AAM-1.2] 和 无障碍名称与描述计算 [ACCNAME-1.2]。

图 1.0 展示了用户代理(如浏览器)、无障碍 API 和辅助技术之间的关系。它描述了用户代理提供给辅助技术的“契约”,其中包括许多无障碍平台 GUI 中常见的无障碍信息(角色、状态、选择、事件通知、关系信息和描述)。DOM(通常为 HTML)在典型的模型-视图-控制器关系中充当数据模型和视图,而 JavaScript 则通过操纵显示数据的样式和内容充当控制器。用户代理将相关信息传达给操作系统的无障碍 API,该 API 可被任何辅助技术(如屏幕阅读器)使用。

The contract model with accessibility APIs

图 1:带有可访问性 API 的契约模型

有关更多信息,请参阅 WAI-ARIA 创作实践 以了解如何使用角色来提高交互式内容的无障碍性。

替代输入设备的用户需要 键盘可访问的 内容。当新语义与 WAI-ARIA 创作实践 中提供的推荐键盘交互结合使用时,将允许替代输入解决方案通过替代输入方案促进命令与控制。

WAI-ARIA 通过其角色模型和 XHTML 角色地标引入了导航 地标,这可以通过提供改进的键盘导航来帮助有灵活性和视力障碍的人士。WAI-ARIA 也可用于辅助有认知学习障碍的人士。额外的语义允许作者根据需要重组和替换替代内容。

辅助技术需要通过获取和设置 小部件 状态和属性的当前值来支持替代输入。辅助技术还需要确定选择了哪些 对象,并管理允许选择多个项目的小部件,如列表框和网格。

基于语音的命令与控制系统可以受益于 WAI-ARIA 语义(如 role 属性)来辅助向用户传达音频信息。例如,当遇到一个角色为 menu 且带有角色为 menuitem 的子元素的元素时,且每个子元素包含代表不同口味的文本内容,语音系统可能会对用户说:“请在三个选项中选择一个:巧克力味、草莓味或香草味。”

WAI-ARIA 旨在作为原生语言语义的补充,而非替代。当宿主语言提供的功能提供了与 WAI-ARIA 功能等效的无障碍性时,请使用宿主语言功能。只有在宿主语言缺乏所需的 角色状态属性 指示符的情况下,才应使用 WAI-ARIA。使用尽可能类似于 WAI-ARIA 功能的宿主语言功能,然后通过添加 WAI-ARIA 来细化其含义。例如,多选网格可以实现为表格,然后使用 WAI-ARIA 澄清它是一个交互式网格,而不仅仅是静态数据表。这为不支持 WAI-ARIA 的用户代理提供了尽可能好的后备方案,并保留了宿主语言语义的完整性。

1.2 目标受众

本规范定义了 WAI-ARIA 的基本模型,包括角色、状态、属性和值。它影响以下几类受众:

每项一致性要求都指明了其适用的受众。

虽然本规范适用于上述受众,但它并非专门针对上述任何受众,也不旨在成为任何受众的唯一信息来源。以下文档提供了重要的支持信息:

1.3 用户代理支持

WAI-ARIA 在两个方面依赖于用户代理对其功能的支持:

除了使用 WAI-ARIA 标记来改善暴露给无障碍 APIs 的内容外,用户代理的行为表现与原生一致。辅助技术对无障碍 API 中的额外信息做出反应的方式,与它们在非 Web 内容上处理相同信息的方式相同。然而,非辅助技术类的用户代理无需做任何额外工作,只需向无障碍 API 提供适当的更新即可。

WAI-ARIA 规范既不要求也不禁止用户代理基于 WAI-ARIA 标记来增强原生呈现和交互行为。主流用户代理可能会暴露 WAI-ARIA 导航地标(例如,作为对话框或通过键盘命令),意在为所有用户提供导航便利。鼓励用户代理最大化其对用户的效用,包括无障碍用户。

WAI-ARIA 旨在提供缺失的语义,以便将作者的意图传达给辅助技术。通常,使用 WAI-ARIA 的作者会提供适当的呈现和交互功能。随着时间的推移,宿主语言可能会添加 WAI-ARIA 等效功能,例如由用户代理实现为标准无障碍用户界面控件的新表单控件。这允许作者使用这些原生控件,而不是自定义的 WAI-ARIA 用户界面组件。在这种情况下,用户代理将支持原生宿主语言功能。建议实现 WAI-ARIA 的宿主语言开发人员在不与隐含宿主语言语义发生严重冲突的情况下,继续支持 WAI-ARIA 语义,因为如果宿主语言功能不足以满足作者的需求,WAI-ARIA 语义能更清晰地反映作者的意图。

1.4 WAI-ARIA 与宿主语言的共同演进

WAI-ARIA 旨在增强像 [HTML] 和 [SVG2] 这样支持语言的语义,或者在其他未明确包含 ARIA 支持的基于标记的语言中作为无障碍增强技术使用。当作者通过样式和脚本创建尚不支持的新类型对象时,它会向辅助技术澄清其语义,因为新类型对象的发明速度快于 Web 语言中标准支持出现的频率。

当宿主语言为该类对象提供语义元素时,使用样式和脚本创建对象是不合适的。虽然 WAI-ARIA 可以改善这些对象的无障碍性,但最好的方式是让用户代理原生处理该对象。例如,在 HTML 中使用 h1 元素要比在 div 元素上使用 heading 角色更好。

预计随着时间的推移,宿主语言将演进以提供目前只能用 WAI-ARIA 声明的对象的语义。这是自然且值得追求的,因为 WAI-ARIA 的目标之一是刺激更多语义化和可访问标记的出现。当给定特性的原生语义可用时,作者适当地使用原生特性并停止为该特性使用 WAI-ARIA 是恰当的。然而,遗留内容可能会继续使用 WAI-ARIA,因此用户代理支持 WAI-ARIA 的需求依然存在。

虽然 WAI-ARIA 的特定特性可能随着时间的推移失去重要性,但 WAI-ARIA 为网页添加语义的通用可能性预计将是一个持久的需求。宿主语言可能不会实现 WAI-ARIA 提供的所有语义,并且不同的宿主语言可能会实现不同特性的子集。新类型的对象在不断开发中,WAI-ARIA 的目标之一是提供一种使这些对象可访问的方法,因为 Web 创作实践的进展往往快于宿主语言标准。以这种方式,WAI-ARIA 和宿主语言共同演进,但速率不同。

有些宿主语言存在的目的是为非用户界面功能创建语义。例如,SVG 表达的是图形对象生产背后的语义,而不是这些对象可能代表的用户界面组件。宿主语言可能从设计上就不提供映射到 WAI-ARIA 功能的原生语义。在这些情况下,WAI-ARIA 可以作为一种长期方案被采用,以向用户界面组件添加语义信息。

1.5 创作实践

1.5.1 创作工具

WAI-ARIA 角色状态属性 定义中的许多要求可以在开发过程中自动检查,类似于用于验证代码的其他质量控制流程。为了辅助创建自定义小部件的作者,创作工具可以将小部件的角色、状态和属性与 WAI-ARIA 中支持的以及相关联和交叉引用的角色、状态和属性进行比较。创作工具可以通知作者小部件设计模式中的错误,也可以提示开发人员提供仅凭上下文无法确定的信息。例如,脚本库可以确定树视图中树项的标签,但需要提示作者为整个树添加标签。为了帮助作者可视化逻辑无障碍结构,创作环境可以根据 WAI-ARIA 标记提供 Web 资源的大纲视图。

HTMLSVG 中,tabindex 是浏览器支持键盘 焦点导航 以实现 WAI-ARIA 的重要方式;创作和调试工具可以检查以确保 tabindex 值设置正确。例如,错误情况可能包括:树中的多个树项具有大于或等于 0 的 tabindex 值;任何树项上未设置 tabindex;或者当具有 role tree 的元素具有大于或等于 0 的 tabindex 值时未定义 aria-activedescendant

1.5.2 测试实践与工具

交互式内容的无障碍性不能仅靠静态检查确认。交互式内容的开发人员应测试对 小部件 和应用程序的独立于设备访问,并应验证在用户交互期间对所有内容和更改的无障碍 API 访问。

1.6 辅助技术

对无障碍语义的程序化访问对辅助技术至关重要。大多数辅助技术像其他应用程序一样,通过公认的无障碍 API 与用户代理进行交互。用户界面中的可感知对象作为无障碍对象暴露给辅助技术,由无障碍 API 接口定义。为了正确完成此操作,无障碍信息(角色、状态、属性以及上下文信息)需要通过无障碍 API 准确地传达给辅助技术。当状态发生变化时,用户代理会向无障碍 API 提供适当的事件通知。在许多宿主语言(如 HTML)中,上下文信息可以直接从 DOM 本身确定,因为它提供了上下文树层次结构。

虽然一些辅助技术与这些无障碍 APIs 交互,但其他辅助技术可能直接从 DOM 访问内容。这些技术可以重组、简化、样式化或重新排布内容,以帮助不同需求的用户群。这些适应类型的常见用例可能是老年人口、认知障碍人士或处于干扰其工具使用环境中的人士。例如,区域导航地标的可用性可能允许移动设备适应方案,仅根据其语义在任何时间显示部分内容。这可以减少用户在任何特定时间需要处理的信息量。在其他情况下,用更容易通过键盘或触摸屏设备导航的方式替换自定义用户界面控件可能是合适的。

2. 重要术语

本节是非规范性的。

虽然有些术语是在文中定义的,但在本文档中统一使用以下定义。

可访问性 API

操作系统和其他平台提供了一组接口,将有关 对象事件 的信息暴露给 辅助技术。辅助技术使用这些接口获取有关这些 小部件 的信息并与之交互。无障碍 APIs 的示例包括 Microsoft Active Accessibility [MSAA]、Microsoft User Interface Automation [UI-AUTOMATION]、带有 UIA ExpressMSAA [UIA-EXPRESS]、Mac OS X 无障碍协议 [AXAPI]、Linux/Unix 无障碍工具包 [ATK] 和 辅助技术服务提供商接口 [AT-SPI],以及 IAccessible2 [IAccessible2]。

无障碍子树

无障碍树中的 无障碍对象 及其在该树中的后代。它不包括在该树中除父子关系以外具有其他关系的对象。例如,它不包括通过 aria-flowto 链接的对象,除非这些对象同时也是 无障碍树中的后代。

无障碍树

表示用户界面 (UI) 结构的 无障碍对象 树。无障碍树中的每个节点都代表通过 无障碍 API 暴露的 UI 中的一个元素;例如,按钮、复选框或容器。

可访问描述

无障碍描述提供了与界面元素相关的、补充 无障碍名称 的附加信息。无障碍描述可能在视觉上可见,也可能不可见。

可访问名称 (Accessible Name)

无障碍名称是用户界面元素的名称。每个平台 无障碍 API 都提供无障碍名称属性。无障碍名称的值可以从用户界面元素的可见属性(如按钮上的可见文本)或不可见属性(如描述图标的文本替代)派生。请参阅相关的 无障碍描述

无障碍名称属性的一个简单用法可以由“确定”按钮来说明。文本“确定”即是无障碍名称。当按钮获得焦点时,辅助技术可能会将平台的角色描述与无障碍名称连接起来。例如,屏幕阅读器可能会说“按钮 确定”或“确定 按钮”。连接顺序和角色描述的具体内容(例如“按钮”、“按压按钮”、“可点击按钮”)由平台 无障碍 API辅助技术 决定。

可访问对象

平台 无障碍 API 无障碍树 中的一个 节点。无障碍对象为 辅助技术 使用暴露了各种 状态属性事件。在标记语言(如 HTMLSVG)的上下文中,特别是在 WAI-ARIA 中,标记 元素 及其 属性 被表示为无障碍对象。

激活行为

当一个由用户通过输入设备发起的 事件 导致元素履行定义的角色时所采取的动作。该角色可以由宿主语言为该元素定义,或者由作者定义的变量定义,或者两者兼有。任何给定元素的角色可以是通用动作,也可以是该元素独有的。例如,HTMLSVG <a> 元素的激活行为应导致用户代理遍历 href 属性中指定的链接,并进一步包含指定遍历的浏览上下文(如当前窗口或选项卡、命名窗口或新窗口)的可选参数;具有 type 属性值 submitHTML <input> 元素的激活行为应通过作者定义的 HTTP 方法向作者定义的 IRI 发送表单元素的值。

辅助技术

指以下硬件和/或软件:

  • 依赖于 用户代理 提供的服务来检索和呈现 Web 内容
  • 通过使用 APIs 与用户代理或 Web 内容本身工作;以及
  • 提供超越用户代理所提供的服务,以促进残障人士与 Web 内容交互的服务。

此定义可能与其他文档中使用的定义有所不同。

在本文件背景下,重要的辅助技术例子包括:

  • 屏幕放大镜,用于放大并改善呈现的文本和图像的可视可读性;
  • 屏幕阅读器,最常用于通过合成语音或可刷新的盲文显示器传达信息;
  • 文本转语音软件,用于将文本转换为合成语音;
  • 语音识别软件,用于允许语音控制和听写;
  • 替代输入技术(包括头指针、屏幕键盘、单开关和吹吸设备),用于模拟键盘;
  • 替代定点设备,用于模拟鼠标指向和点击。
属性

在本规范中,attribute(属性)的使用方式与在标记语言中相同。属性是添加到 元素 的结构特性,旨在提供有关元素所代表的 对象状态属性 信息。

一组共享相似特征的实例 对象

已弃用

已弃用的 角色状态属性 是指已被更新的结构或变更的环境所取代,且可能在未来版本的 WAI-ARIA 规范中被移除的项。用户代理 被鼓励为了向后兼容而继续支持被标识为已弃用的项。有关更多信息,请参阅一致性部分的 已弃用的要求

桌面焦点事件

来自/向宿主操作系统通过可访问性 API 的事件,用于通知输入焦点变更。

DOMString
16 位无符号整数序列,通常被解释为 UTF-16 代码单元。这对应于 JavaScript 基本 String 类型。
元素

在本规范中,element(元素)的使用方式与在标记语言中相同。元素是标记语言中包含 对象 数据配置文件的结构单元。

Event

用于将 对象 的离散 状态 变化传达给计算系统中的其他对象的程序化消息。用户对 Web 页面的输入通常通过抽象事件进行中介,这些事件描述交互并可以提供文档对象状态更改的通知。在某些编程语言中,事件通常被称为通知。

暴露 (Expose)

映射到 核心无障碍 API 映射 中定义的特定平台 无障碍 APIs

图形文档

包含具有用户可导航部分的图形表示的文档。图表、地图、图示、蓝图和仪表板是图形文档的例子。图形文档由符号、图像、文本和图形基元(如圆形、点、线、路径、矩形等形状)的任意组合构成。

隐藏 (Hidden)

指示 元素任何 用户不可见、不可 感知 或不可交互。如果元素或其任何祖先元素未被渲染或被显式隐藏,则该元素被视为 隐藏

信息性

提供仅供信息参考且非一致性必需的内容。一致性必需的内容被称为 规范性

键盘可访问 (Keyboard Accessible)

使用键盘或模仿键盘输入的 辅助技术(例如吹吸式管)对用户是可访问的。本文档中的引用与 WCAG 2.1 指南 2.1:使所有功能都可以通过键盘使用 [WCAG21] 相关。

地标 (Landmark)

页面上用户可能希望快速访问的区域类型。此类区域中的内容不同于页面上的其他区域,并且与特定的用户目的相关,例如导航、搜索、阅读主要内容等。

动态区域 (Live Region)

实时区域是 Web 页面中可感知的区域,它们通常由于外部事件而更新,此时用户焦点可能位于其他地方。这些区域并不总是由于用户交互而更新。实时区域的示例包括聊天记录、股票行情或定期更新以反映游戏统计信息的体育比分部分。由于这些异步区域预计在用户焦点区域之外进行更新,像屏幕阅读器这样的辅助技术要么不了解它们的存在,要么无法为用户处理它们。WAI-ARIA 提供了一组属性,允许作者标识这些实时区域并对其进行处理:aria-live、aria-relevant、aria-atomic 和 aria-busy。

主要内容元素

实现宿主语言的主要内容元素,例如 HTML 中的 body 元素。

托管状态 (Managed State)

由用户代理控制的 无障碍 API 状态,例如焦点和选择。这些与通常由作者控制的“非托管状态”形成对比。尽管如此,作者可以覆盖某些托管状态,例如 aria-posinset 和 aria-setsize。许多托管状态具有相应的 CSS 伪类(如 :focus)和伪元素(如 ::selection),这些状态也由用户代理更新。

Nemeth 盲文

Nemeth 盲文数学代码是一种用于编码数学和科学符号的盲文代码。参见 维基百科上的 Nemeth 盲文

Node

DOM 树或 无障碍树 中的基本 对象 类型。DOM 节点被进一步指定为 元素文本节点 等类型。无障碍树 的节点是 无障碍对象

规范性

一致性必需。相比之下,被标识为 提示性 或“非规范性”的内容不是一致性所必需的。

Object

在用户界面的上下文中,感知用户体验中的一个项目,在标记语言中由一个或多个 元素 表示,并由 用户代理 渲染。在编程的上下文中,定义相似对象一般特征的一个或多个 和接口的实例化。无障碍 API 中的一个对象可以代表一个或多个 DOM 对象。无障碍 APIs 具有不同于 DOM 接口的定义接口。

本体论 (Ontology)

关于 的特征及其如何相互关联的描述。

可操作 (Operable)

用户能够以可控方式使用的。本文档中的引用与 WCAG 2.1 原则 2:内容必须是可操作的 [WCAG21] 相关。请参阅 键盘可访问的

所属元素(Owned Element)

“从属元素”是 元素 的任何 DOM 后代、任何通过 aria-owns 指定为子级的元素,或者是从属子级的任何 DOM 后代。

拥有元素

“拥有元素”是 元素 的任何 DOM 祖先,或任何具有引用该元素 ID 的 aria-owns 属性的元素。

可感知 (Perceivable)

可以以用户感知的方式呈现给用户。本文档中的引用与 WCAG 2.1 原则 1:内容必须是可感知的 [WCAG21] 相关。

属性

对给定 对象 的本质至关重要的,或代表与对象关联的数据值的 属性。属性的更改可能会显著影响对象的意义或呈现。某些属性(例如 aria-multiline)比 状态 更改的可能性更小,但请注意,更改频率的差异不是规则。一些属性,如 aria-activedescendantaria-valuenowaria-valuetext 预计会经常更改。请参阅 状态与属性的澄清

关系 (Relationship)

两个不同事物之间的联系。关系可以是多种类型,以指示哪个 对象 标注了另一个、控制了另一个等。

角色

类型的主要指标。这种 语义 关联允许工具以符合用户对该类型其他对象期望的方式来呈现该对象并支持与之交互。

WAI-ARIA 节点

包含非元数据内容的主要元素。在许多语言中,这是文档元素,但在 HTML 中,它是 <body>

语义 (Semantics)

人类所理解的某物的含义,以计算机可以处理 对象(例如 元素属性)表示并以各种人类能够达成互认的方式可靠地表示该对象的方式定义。

状态(State)

状态是一种动态 属性,表达 对象 可能随用户操作或自动处理而改变的特征。状态不影响对象的本质,而是代表与对象关联的数据或用户交互可能性。请参阅 状态与属性的澄清

子文档

<frame><iframe> 或类似机制创建的任何文档。子文档可以包含文档、应用程序或任何从小部件(如从另一台服务器拉取的日历)。在 无障碍树 中,这种情况有两个 无障碍对象——一个代表父文档中的 <frame>/<iframe> 元素,它作为代表所产生文档内容的单个 无障碍对象 子级的父级。

目标元素

WAI-ARIA 关系中指定的元素。例如,在 <div aria-controls=”elem1”> 中,“elem1” 是目标元素的 ID。

分类法(Taxonomy)

关于各种 的特征如何相互关联的分层定义,其中类继承层次结构中超类的属性。分类法可以构成 本体 形式定义的一部分。

文本节点

DOM 节点 类型,代表 属性元素 的文本内容。文本节点没有子节点。

工具提示属性

任何会导致用户代理生成工具提示的宿主语言属性,例如在桌面用户代理中响应鼠标悬停时。

可理解的(Understandable)

可以以用户能够构建适当含义的方式呈现给用户。本文档中的引用与 WCAG 2.1 原则 3:信息和用户界面的操作必须是可理解的 [WCAG21] 相关。

Unicode 盲文图案

在 Unicode 中,盲文由一个称为“盲文图案”(Braille Patterns, U+2800..U+28FF) 的块表示。该块包含 8 点盲文单元的所有 256 种可能图案;这包括由 U+2800..U+283F 表示的完整 6 点单元范围。在所有盲文系统中,盲文图案点-0 (U+2800) 用于表示空格或无内容;它也被称为空白盲文图案。请参阅维基百科上的 盲文图案

用户代理

任何检索、渲染并促进最终用户与 Web 内容交互的软件。此定义可能与其他文档中使用的定义有所不同。

有效 IDREF

对同一文档中具有匹配 ID 的目标元素的引用

组件 (Widget)

用户可以与之交互的离散用户界面 对象。小部件范围从具有一个值或操作的简单对象(如复选框和菜单项),到包含许多托管子对象的复杂对象(如树和网格)。

3. 一致性

Accessible Rich Internet Applications 的主要内容是 规范性 的,并定义影响一致性声明的要求。介绍性材料、附录、标记为“非规范性”的部分及其小节、图表、示例和注释是 提示性(非规范性)的。非规范性材料提供建议信息以帮助解释准则,但不创建影响一致性声明的要求。

规范性章节提供了用户代理必须遵循的要求,以便实现符合本规范。本文档中的关键字 必须 (MUST)不得 (MUST NOT)必需 (REQUIRED)应 (SHALL)不应 (SHALL NOT)应当 (SHOULD)推荐 (RECOMMENDED)可以 (MAY)可选 (OPTIONAL) 将按照 RFC 中用于指示要求级别的关键字 [RFC2119] 中的描述进行解释。RFC-2119 关键字采用大写格式,并包含在带有 class="rfc2119" 的元素中。当上述关键字被使用但不采用此格式时,它们不传达 RFC 2119 意义上的正式信息,仅是说明性的,即提示性的。在本规范中,此类用法会尽可能避免。

规范性章节提供了作者、用户代理和辅助技术 必须 遵循的要求,以便实现符合本规范。

非规范性(提示性)章节提供了有助于理解本规范的信息。此类章节可能包含推荐做法的示例,但为了符合本规范,并不要求遵循此类建议。

3.1 不干扰宿主语言

用户代理WAI-ARIA 的处理 不得 干扰宿主语言内置功能的正常操作。

如果 CSS 选择器包含 WAI-ARIA 属性(例如 input[aria-invalid="true"]),用户代理 必须 在任何时候当属性在 DOM 中被添加/更改/移除时,更新任何匹配(或不再匹配)该选择器的元素的视觉显示。用户代理 可以 改变宿主语言功能到 无障碍 API 的映射,但用户代理 不得 为了将 WAI-ARIA 标记重映射为宿主语言功能而改变 DOM

3.2 DOM 中的所有 WAI-ARIA

实现了一个不符合 W3C DOM 规范的文档对象模型的符合要求的 用户代理 必须 将 role 的内容属性及其 WAI-ARIA 角色值,以及 WAI-ARIA 状态与属性 包含在 DOM 中,正如作者所指定的那样,即使处理过程可能会影响元素如何暴露给无障碍 APIs。这样做确保了每个角色属性和所有 WAI-ARIA 状态和属性(包括其值)都以未修改的形式存在于文档中,以便其他工具(如辅助技术)可以访问它们。符合要求的 W3C DOM 符合此标准。

3.3 与 Web 应用通信的辅助技术通知

辅助技术(如语音识别系统和面向行动障碍用户的替代输入设备)需要以独立于设备的方式控制 Web 应用程序的能力。WAI-ARIA 状态属性 反映了富互联网应用组件的当前状态。辅助技术能够将必要的变化通知 Web 应用程序的能力至关重要,因为它允许这些替代输入解决方案控制应用程序,而不依赖于用户无法有效直接控制的标准输入设备。

用户代理 必须 提供一种方法,在系统无障碍 API 中的状态或属性发生变化时通知 Web 应用程序。同样,当收到来自用户代理或辅助技术的更改请求通知时,Web 应用程序作者 应当 相应地更新 Web 应用程序。

许多状态和属性可以通过辅助技术通过现有无障碍 APIs 响应默认操作事件而更改。例如,可以通过触发元素上的默认操作来更改 tabpaneltabaria-selected 状态。

3.4 一致性检查器

任何验证文档一致性或有效性的应用程序或脚本 应当 包含对本规范中所有 规范性 作者要求的测试。如果对给定的要求进行测试,一致性检查器 必须 在作者未满足“必须”要求时发出错误,并在作者未满足“应当”要求时发出警告。

3.5 已弃用的要求

随着技术的发展,有时会出现比之前定义的特性工作效果更好的满足用例的新方法。但由于旧特性的现有实现,如果不使以前符合规范的内容变为不符合,就无法从一致性模型中移除该特性。在这种情况下,旧特性被标记为“已弃用”。这表明该特性在一致性模型中是允许的,并预期由用户代理支持,但建议作者不要在新的内容中使用它。在规范的未来版本中,如果该特性不再被广泛使用,它可能会被移除,并不再预期由用户代理支持。

4. 使用 WAI-ARIA

辅助技术 无法确定文档部分背后的 语义,或者用户无法以可用方式有效地导航到其所有部分时,复杂的 Web 应用程序就会变得无法访问(请参阅 WAI-ARIA 创作实践)。WAI-ARIA 将语义分为 角色(定义用户界面元素的类型)以及角色支持的 状态属性

作者需要在文档生命周期中将文档中的 元素 关联到 WAI-ARIA 角色以及适当的状态和属性(aria-* 属性),除非元素已经具备适当的 隐含 WAI-ARIA 语义 用于状态和属性。在这些实例中,等效的宿主语言状态和属性优先,以避免冲突,而 role 属性将优先于宿主语言元素的隐含角色。

4.1 WAI-ARIA 角色

WAI-ARIA 角色 使用 role 属性元素 上进行设置,类似于 角色属性 [ROLE-ATTRIBUTE] 中定义的 role 属性。

<li role="menuitem">Open file…</li>

模型中每个角色的定义提供了以下信息

附加角色为 辅助技术 提供了关于如何处理每个元素的信息。当 WAI-ARIA 角色覆盖宿主语言语义时,DOM 中不会发生更改,仅在 无障碍树 中发生更改。

用户代理 必须 使用 role 属性 值序列中与任何非抽象 WAI-ARIA 角色 名称匹配的第一个令牌。以下步骤将正确标识适用的 WAI-ARIA 角色

  1. 使用宿主语言的规则检测元素是否具有 role 属性,并识别其属性值字符串。
  2. 通过空白字符分隔,将该属性的属性值字符串分解为一系列无空白的子字符串。
  3. 将这些子字符串与所有非抽象 WAI-ARIA 角色的名称进行比较。比较的大小写敏感性继承自宿主语言的大小写敏感性。
  4. 使用文本顺序中与非抽象 WAI-ARIA 角色名称匹配的第一个此类子字符串。

4.2 WAI-ARIA 状态与属性

WAI-ARIA 提供了一系列辅助功能状态属性,用于支持各种操作系统平台上的平台辅助功能 API辅助技术可以通过公开的用户代理 DOM 或通过映射到平台辅助功能 API 来访问此信息。当与角色结合使用时,用户代理可以向辅助技术提供用户界面信息,以便随时传达给用户。状态或属性的变化将导致向辅助技术发送通知,从而提醒用户发生了变化。

在下面的示例中,使用了一个列表项 (html:li) 来创建一个可勾选的菜单项,JavaScript 事件将捕获鼠标和键盘事件以切换 aria-checked 的值。角色用于使此简单小部件的行为被用户代理识别。随用户操作而变化的属性(例如 aria-checked)在状态和属性一节中定义。

<li role="menuitemcheckbox" aria-checked="true">Sort by Last Modified</li>

一些称为托管状态的辅助功能状态由用户代理控制。托管状态的示例包括键盘焦点和选择。托管状态通常具有相应的 CSS 伪类(例如 :focus::selection)来定义样式更改。相比之下,本规范中的状态通常由作者控制,称为非托管状态。一些状态由用户代理托管,例如 aria-posinsetaria-setsize,但如果 DOM 不完整并会导致用户代理计算错误,作者可以覆盖它们。用户代理将托管状态和非托管状态都映射到平台辅助功能 API

大多数现代用户代理支持 CSS 属性选择器 ([CSS3-SELECTORS]),并允许作者根据 WAI-ARIA 属性信息创建 UI 更改,从而减少实现等效功能所需的脚本数量。在下面的示例中,使用 CSS 选择器根据 aria-checked 属性的值来确定文本是否加粗以及是否显示复选标记图像。

[aria-checked="true"] { font-weight: bold; }
[aria-checked="true"]::before { background-image: url(checked.gif); }

如果不使用 CSS 来切换复选标记的视觉表示,作者可以包含额外的标记和脚本来管理一个图像,该图像表示 menuitemcheckbox 是否被选中。

<li role="menuitemcheckbox" aria-checked="true">
  <img src="checked.gif" role="presentation" alt="">
  <!-- note: additional scripts required to toggle image source -->
  Sort by Last Modified
</li>

4.3 管理焦点与支持键盘导航

在使用标准的 HTML 交互元素和简单的 WAI-ARIA 小部件时,应用程序开发人员可以操作 Tab 键顺序或将键盘快捷键与文档中的元素关联。

WAI-ARIA 包含许多“管理容器”小部件,也称为“复合”小部件。在适当的情况下,容器负责跟踪最近处于活动状态的后代(默认通常是容器中的第一项)。当焦点离开容器并稍后重新聚焦时,容器维持一种可用且一致的策略至关重要。虽然可能存在例外,但建议当重新聚焦先前已聚焦的容器时,活动后代应与容器上次聚焦时的活动后代相同。例外情况包括容器小部件的内容已更改的情况,以及像菜单栏这样用户希望在焦点离开菜单栏时始终返回到第一项的小部件。例如,如果用户离开树组时树组的第二项是活动后代,那么当树组再次获得焦点时,树组的第二项仍然是活动后代。用户也可以通过单击容器内的后代之一来激活容器。当容器或其活动后代获得焦点时,用户可以通过按其他键(例如箭头键)来浏览容器,以更改当前活动的后代。任何对主导航键(通常是 TAB 键)的额外按下都将移出容器到下一个小部件。

富互联网应用程序中可用的键盘导航与静态文档中链接和表单控件等交互元素之间的 Tab 切换范例不同。在富互联网应用程序中,用户使用 Tab 键切换到非常复杂的小部件(例如菜单或电子表格),并使用箭头键在小部件内导航。 WAI-ARIA 引入的键盘导航更改使这种增强的辅助功能成为可能。在 WAI-ARIA 中,任何元素都可以具有键盘焦点。除了 tabindex 等宿主语言机制外,aria-activedescendant 还提供了另一种键盘操作机制。WAI-ARIA 小部件开发的其余大部分方面都取决于键盘导航功能是否正常运行。

在实现下述 aria-activedescendant 时,用户代理将 DOM 焦点保持在容器元素或控制容器元素的输入元素上。然而,用户代理向辅助技术传达桌面焦点事件和状态,就像 aria-activedescendant 引用的元素拥有焦点一样。用户代理不需要验证活动后代是否为容器元素的后代。用户代理有责任确保在具有 DOM 焦点的元素处处理键盘事件。任何指向活动后代的键盘事件都会冒泡到具有焦点的 DOM 元素进行处理。

4.3.1 作者须知

如果作者删除了具有焦点的元素,作者 应该 将焦点移动到逻辑元素。同样,除非用户执行了滚动操作,否则作者 应该 不要将具有焦点的元素滚动出屏幕。

作者 应该 确保所有交互式元素都是可聚焦的,并且复合小部件的所有部分要么是可聚焦的,要么具有实现其功能的文档化替代方法。

作者 必须 管理以下容器角色的焦点

支持 WAI-ARIA 的用户代理扩展了 tabindexfocusblur 等宿主语言机制的用法,允许它们用于所有元素。在宿主语言支持的情况下,作者 可以 通过设置 tabindex="0" 将任何元素(如 divspanimg)添加到默认 Tab 顺序中。此外,任何 tabindex 等于负整数的项目都可以通过脚本或鼠标点击聚焦,但不是默认 Tab 顺序的一部分。这在 [HTML] 和 [SVG2] 中都得到支持。

作者 可以 使用 aria-activedescendant 来通知辅助技术,如果小部件元素的角色支持 aria-activedescendant,则 widget 元素的哪个后代在用户界面中被视为具有键盘焦点。这通常是在小部件(例如 listbox)中提供键盘导航的一种更方便的方法,其中小部件在页面 Tab 序列中仅占据一个停靠点,而其他键(通常是箭头键)用于聚焦小部件内的元素。

通常,作者将使用宿主语言语义将小部件放入 Tab 序列中(例如 HTML 中的 tabindex="0"),并使用 aria-activedescendant 指向当前活动后代的 ID。作者而非用户代理,负责设置当前活动后代的样式以显示其具有键盘焦点。作者不能使用 :focus 来设置当前活动后代的样式,因为实际焦点在容器上。

有关管理焦点的更多信息,可以在 WAI-ARIA 创作实践开发键盘接口 一节中找到。

4.3.2 用户代理须知

用户代理 必须 执行以下操作以实现 aria-activedescendant

  1. 实现用于键盘导航的宿主语言方法,以便支持 aria-activedescendant 的小部件可以包含在 Tab 顺序中。
  2. 对于将桌面焦点辅助功能 API 焦点与 DOM 焦点分开公开的平台,当任何元素具有 DOM 焦点并且同时具有指向有效 ID 引用aria-activedescendant 时,不要在辅助功能 API 中公开该元素的焦点状态。
  3. 当当前具有 DOM 焦点的元素上的 aria-activedescendant 属性发生变化时,从先前聚焦的对象中移除焦点状态,并在 aria-activedescendant 引用的新元素上触发辅助功能 API 桌面焦点事件。如果 aria-activedescendant 被清除或未指向当前文档中的元素,则为属性发生变化的对象触发桌面焦点事件。
  4. 将以下辅助功能 API 状态应用于任何具有 ID 属性的元素,该元素可以被既具有 aria-activedescendant 属性又具有 DOM 焦点的元素引用。元素被 aria-activedescendant 引用的方式有两种。一种方式是当它被具有 aria-activedescendant 的元素拥有时;另一种方式是当它被一个元素拥有时,该元素受到具有 comboboxtextboxsearchbox 角色且带有 aria-activedescendant 属性的元素的控制。
    1. 可聚焦,如果该元素还具有 WAI-ARIA 角色。该元素需要是可聚焦的,因为它可能被 aria-activedescendant 属性引用。没有 角色 属性的原生元素不需要被检查;它们的原生语义决定了其可聚焦状态。
    2. 已聚焦,每当该元素是 aria-activedescendant 属性的目标,并且具有 aria-activedescendant 属性的元素具有 DOM 焦点时。

当辅助技术使用其平台的辅助功能 API 请求更改焦点时,用户代理 必须 执行以下操作

  1. 从先前聚焦的对象中移除平台的焦点状态。
  2. 设置 DOM 焦点
    1. 如果该元素可以获得 DOM 焦点,用户代理 必须DOM 焦点设置给它。
    2. 否则,如果当前元素具有一个 ID 并且该 ID 被一个可聚焦元素的 aria-activedescendant 属性引用,则用户代理 必须DOM 焦点设置给具有 aria-activedescendant 属性的元素。

      当具有 ID 的元素被一个具有 aria-activedescendant 属性的容器元素拥有时,或者被一个受具有 aria-activedescendant 属性的元素控制的容器元素拥有时(例如,参见 combobox),该元素可以被引用。否则,aria-activedescendant 属性引用表示作者错误。

      无法将 DOM 焦点设置到容器元素表示作者错误。

    3. 否则,用户代理 可以 尝试将 DOM 焦点设置给子元素本身。
  3. 如果当前元素具有一个 ID,并且被一个既具有 aria-activedescendant 属性又具有 DOM 焦点的容器元素拥有,或者被一个受既具有 aria-activedescendant 属性又具有 DOM 焦点的元素控制的容器元素拥有,则用户代理 必须 设置辅助功能 API 焦点状态,并在由 aria-activedescendant 的值标识的元素上触发辅助功能 API 焦点事件

5. 角色模型

本节定义了 WAI-ARIA 角色,并描述了它们的特性和属性。

角色、它们的特性、它们支持的状态和属性,以及它们在标记中如何使用的规范,应视为规范性的。

为了在 DOM 中反映内容,用户代理 应该 将角色属性映射到已实现的辅助功能 API 中的适当值,并且当角色属性更改时,用户代理 应该 更新映射。

5.1 概念之间的关系

角色模型使用以下关系将 WAI-ARIA 角色相互关联,并与来自其他规范(如 HTML)的概念相关联。

5.1.1 超类角色

当前子类化角色在角色模型中扩展的角色。这种扩展导致超类角色的所有属性和约束传播到子类角色。除了众所周知的稳定规范外,继承可能仅限于本规范内定义的项目,以便外部项目不能被更改并影响继承的

5.1.2 子类角色

此角色作为超类的角色的信息性列表。提供此列表是为了方便阅读规范,但未增加任何新信息。

关于来自其他规范的相似或相关想法的信息性数据。相关的概念不一定相同。相关概念不会相互继承属性。因此,如果一个概念的定义发生变化,其相关概念的属性、行为和定义不会受到影响。

例如,进度条就像一个状态指示器。因此,progressbar 小部件有一个相关概念,其中包括 status。然而,如果 status 的定义被修改,progressbar 的定义不会受到影响。

5.1.4 基础概念

关于被视为角色原型的对象的信息性数据。基本概念类似于类型,但不继承限制和属性。基本概念旨在作为外部概念继承的替代方案。基本概念类似于相关概念,只是基本概念几乎等同于角色定义。

例如,本文档中定义的 checkbox 具有与 [HTML] 中定义的 <input[type="checkbox"]> 类似的功能和预期行为。因此,checkbox 将 [HTML] checkbox 作为 baseConcept。然而,如果原始的 [HTML] checkbox baseConcept 定义被修改,本文档中 checkbox 的定义将不会受到影响,因为不存在各自类型的实际继承。

5.2 角色的特征

角色由其特性定义和描述。特性定义了角色的结构功能,例如角色是什么、其背后的概念以及角色可以或必须包含哪些实例。对于小部件,这还包括如何根据映射到 HTML 表单来与用户代理交互。角色支持的 WAI-ARIA 状态和属性也会被指示。

角色定义了以下特性。

5.2.1 抽象角色

布尔值

抽象角色是构建所有其他 WAI-ARIA 角色的基础。内容作者 不得 使用抽象角色,因为它们未在 API 绑定中实现。用户代理 不得 将抽象角色映射到辅助功能 API 的标准角色机制。提供抽象角色是为了帮助实现以下目的

  1. 组织角色模型,并为已知概念背景下的角色提供含义。
  2. 精简包含必要功能的角色的添加过程。

5.2.2 必需的状态与属性

角色和子类角色专门需要的状态属性。内容作者 必须 为所需的状态和属性提供非空 。内容作者 不得 对所需的状态和属性使用 undefined 值,除非 undefined 是该状态或属性明确支持的值。

当一个对象从多个祖先继承,并且一个祖先指示该属性被支持而另一个祖先指示该属性是必需的时,该属性在继承对象中是必需的。

具有适当 隐式 WAI-ARIA 语义 的宿主语言属性满足此要求。

5.2.3 支持的状态与属性

角色和子角色专门适用的状态属性。内容作者 可以 为支持的状态和属性提供 ,但在默认值足以满足需要的情况下无需这样做。用户代理 必须 将角色支持的所有状态和属性映射到辅助功能 API。如果状态或属性未定义且该角色具有默认值,用户代理 应该 公开默认值。

具有适当 隐式 WAI-ARIA 语义 的宿主语言属性满足此要求。

5.2.4 继承的状态与属性

角色从超类角色继承的属性的信息性列表。状态属性是从角色模型中的超类角色继承的,而不是从 DOM 树中的祖先元素继承的。这些属性未在角色上明确定义,因为属性的继承是自动的。提供此信息是为了方便阅读规范。支持的状态和属性集结合继承的状态和属性形成了角色支持的全部状态和属性集。

5.2.5 禁止的状态与属性

角色上禁止使用的状态和属性列表。作者 不得 指定禁止的状态或属性。

具有适当 隐式 WAI-ARIA 语义 的宿主语言属性也将禁止本节中的状态或属性。

5.2.6 必需的从属元素

任何将被具有此角色的元素拥有元素。例如,具有 list 角色的元素将至少拥有一个具有 listitem 角色的元素。

当多个角色被指定为角色的“必需拥有元素”时,预计至少会出现一个必需拥有元素的实例。本规范要求每个列出的拥有角色都出现一个实例。例如,menu 至少应该有一个 menuitemmenuitemcheckboxmenuitemradio 的实例。menu 角色不需要每个角色的一个实例。

有时可能会缺少必需的拥有元素,例如在编辑或加载数据集时。当小部件由于脚本执行或加载而缺少必需拥有元素时,作者 必须 将一个包含元素标记为 aria-busy 等于 true。例如,在页面完全初始化完成之前,作者可以将文档元素标记为忙碌。

具有“必需拥有元素”的角色并不暗示反向关系。虽然如果没有给定角色的元素作为后代存在,角色的处理可能不完整,但此列表中的角色元素并不总是必须在给定角色的元素内找到。有关给定角色元素将被包含的上下文要求,请参阅 必需上下文角色

具有“必需拥有元素”的子类角色的元素不满足此要求。例如,listbox 角色需要拥有使用 optiongroup 角色的元素。虽然 group 角色是 row 的超类,但添加一个角色为 row拥有元素将无法满足 listbox 拥有 optiongroup 的要求。

具有适当 隐式 WAI-ARIA 语义 的宿主语言属性满足此要求。

5.2.7 必需的上下文角色

必需上下文角色定义了允许此角色使用的拥有容器。如果角色具有必需上下文,作者 必须 确保具有该角色的元素被包含在具有必需上下文角色的元素内(或由其拥有)。例如,具有 listitem 角色的元素仅在被包含在具有 list 角色的元素内(或由其拥有)时才有意义。

具有“必需上下文角色”的角色并不暗示反向关系。虽然具有给定角色的元素需要出现在所列角色的元素内才有意义,但所列角色的元素并不总是需要给定角色的后代元素才有意义。有关需要存在给定后代才能正确处理的要求,请参阅 必需拥有元素

具有适当 隐式 WAI-ARIA 语义 的宿主语言属性满足此要求。

5.2.8 无障碍名称计算

以下值之一
  1. author(作者):名称来自作者在显式标记功能(例如 aria-label 属性、aria-labelledby 属性)或宿主语言标记机制(例如 HTML 中的 alttitle 属性)中提供的值,其中 HTML title 属性在指定文本替代方案时具有最低优先级。
  2. contents(内容):名称来自元素节点的文本值。虽然在某些角色中这可能被允许作为“作者”的补充,但这仅在未提供更高优先级的“作者”功能时才在内容中使用。优先级由可访问名称和描述计算算法 [ACCNAME-1.2] 定义。
  3. prohibited(禁止):元素不支持来自作者的名称。作者 不得 使用 aria-labelaria-labelledby 属性来命名该元素。
5.2.8.1 名称计算

名称计算在可访问名称和描述规范中定义。

5.2.8.2 描述计算

描述计算在可访问名称和描述规范中定义。

5.2.8.3 无障碍名称与描述计算

可访问名称和描述计算在可访问名称和描述规范中定义。

5.2.8.4 支持从作者获取名称的角色
5.2.8.5 支持从内容获取名称的角色
5.2.8.6 无法命名的角色(禁止命名)

5.2.9 演示性子元素

布尔值 (true | false)

DOM 后代是表现性的。用户代理 不应该 通过平台辅助功能 API 公开此元素的后代。如果用户代理不隐藏后代节点,某些信息可能会被读取两次。

5.2.10 角色的隐含值

许多状态和属性都有默认值。有时,在给定角色上使用时的默认值应与通常的默认值不同。要求状态或属性具有非标准默认值的角色会在“角色的隐式值”中指出这一点。这以“状态或属性名称 的默认值为 新默认值”的形式表示。如果作者未提供显式值,定义此项的角色将具有该状态或属性的新默认值。

5.3 角色分类

为了支持当前用户场景,本规范对定义用户界面小部件(滑块、树控件等)的角色和定义页面结构(部分、导航等)的角色进行了分类。请注意,一些辅助技术为标记为 applicationdocument 角色的区域提供了特殊的交互模式。

关于角色之间关系的视觉描述可在 ARIA 1.2 类图中找到。

角色分类如下

  1. 抽象角色
  2. 小部件角色
  3. 文档结构角色
  4. 地标角色
  5. 活动区域角色
  6. 窗口角色

5.3.1 抽象角色

以下角色用于支持 WAI-ARIA 角色模型,以定义通用角色概念。

抽象角色用于本体。作者 不得 在内容中使用抽象角色。

5.3.2 小部件角色

以下角色作为独立用户界面小部件或作为大型复合小部件的一部分运行。

以下角色作为复合用户界面小部件运行。这些角色通常作为管理其他包含小部件的容器。

5.3.3 文档结构角色

以下角色描述了组织页面中内容的结构。文档结构通常不是交互式的。

5.3.4 地标角色

以下角色是作为导航地标的页面区域。所有这些角色都继承自 landmark 基本类型,并且都从 [ROLE-ATTRIBUTE] 导入(角色属性)。此处包含这些角色是为了使它们明确成为 WAI-ARIA 角色模型的一部分。

5.3.5 实时区域角色

以下角色实时区域,可以通过实时区域属性进行修改。

5.3.6 窗口角色

以下角色充当浏览器或应用程序内的窗口。

5.4 角色定义

以下是供作者使用的 WAI-ARIA 角色的字母顺序列表。

抽象角色用于本体。作者 不得 在内容中使用抽象角色。

alert
一种带有重要且通常具有时间敏感性的信息的实时区域类型。请参阅相关 alertdialogstatus
alertdialog
一种包含警告消息的对话框类型,其中初始焦点转到对话框内的元素。请参阅相关 alertdialog
application
一个包含一个或多个需要用户输入(例如键盘或手势事件)的可聚焦元素的structure,这些输入不遵循 widget 角色支持的标准交互模式。
article
页面的一部分,由形成文档、页面或站点独立部分的组合构成。
banner
一个包含大部分面向站点的内容,而不是特定页面内容的landmark
blockquote
引用自其他来源的内容部分。
button
一种允许在单击或按下时触发用户操作的输入。请参阅相关 link
标题 (caption)
命名并可能描述 figuretablegridtreegrid 的可见内容。
cell
表格容器中的单元格。请参阅相关 gridcell
复选框
具有三种可能的可勾选输入:truefalsemixed
code
内容表示计算机代码片段的部分。
columnheader
包含列标题信息的单元格。
combobox
一种控制另一个元素(例如 listboxgrid)的input,它可以动态弹出以帮助用户设置 input 的值。
command
一种执行操作但不接收输入数据的小部件形式。
complementary
一种在 DOM 层次结构中处于相似级别、旨在与主要内容互补的landmark,但在与主要内容分离时仍然有意义。
composite
一个可能包含可导航后代或拥有子项的小部件
contentinfo
一个包含有关父文档信息的landmark
definition
术语或概念的定义。请参阅相关 term
deletion
删除包含标记为已删除的内容或建议删除的内容。请参阅相关 insertion
dialog
对话框是 Web 应用程序主窗口的后代窗口。对于 HTML 页面,主应用程序窗口是整个 Web 文档,即 body 元素。
directory
[ARIA 1.2 中已弃用] 对组成员的引用列表,例如静态目录。
document (文档)
一个包含辅助技术用户可能希望在阅读模式下浏览的内容的元素
emphasis
一个或多个强调字符。请参阅相关 strong
feed
一个可滚动的 articles list,其中滚动可能会导致 articles 被添加到列表的两端或从两端移除。
figure
一个可感知的section内容,通常包含图形文档、图像、代码片段或示例文本。figure 的部分 可以 由用户导航。
form
一个包含项目和对象集合的landmark区域,它们整体结合起来创建一个表单。请参阅相关 search
generic
一个无名的容器元素,其本身没有语义含义。
grid
一个复合widget,包含一个或多个具有一个或多个单元格的行集合,其中网格中的部分或所有单元格可以通过使用二维导航方法(例如方向箭头键)来聚焦。
gridcell
一个 gridtreegrid 中的cell
一组不打算被辅助技术包含在页面摘要或目录中的用户界面对象
heading
页面部分的标题。
img
一个元素集合的容器,它们构成一个图像。
input (输入)
一种允许用户输入的通用类型小部件
insertion
插入包含标记为已添加的内容或建议添加的内容。请参阅相关 deletion
landmark
一个可感知的section内容,其内容与特定的、作者指定的目的相关,并且足够重要,用户很可能希望能够轻松导航到该部分,并将其列在页面摘要中。此类页面摘要可以由用户代理或辅助技术动态生成。
链接
一个对内部或外部资源的交互式引用,激活时会导致用户代理导航到该资源。请参阅相关 button
list
一个包含 listitem 元素的section。请参阅相关 listbox
listbox
一个允许用户从选项列表中选择一个或多个项目的小部件。请参阅相关 comboboxlist
listitem
列表或目录中的单个项目。
log
一种以有意义的顺序添加新信息且旧信息可能会消失的实时区域类型。请参阅相关 marquee
main
一个包含文档主要内容的landmark
marquee
一种非必要信息频繁变化的实时区域类型。请参阅相关 log
math
表示数学表达式的内容。
meter
一个表示已知范围内标量测量或分数值的元素。请参阅相关 progressbar
menu
一种向用户提供选择列表的小部件类型。
menubar
一种通常保持可见且通常水平呈现的 menu 表示形式。
menuitem
menumenubar 包含的一组选择中的选项。
menuitemcheckbox
一个具有可勾选状态的 menuitem,其可能的值为 truefalsemixed
menuitemradio
在具有相同角色的一组元素中,一个可勾选的 menuitem,一次只能勾选其中一个。
navigation
一个包含用于导航文档或相关文档的导航元素(通常是链接)集合的landmark
none(无)
一个其隐含的原生角色语义将不会映射到辅助功能 API元素。请参阅同义词 presentation
note
内容是对资源主要内容的补充或附属的部分。
option
listbox 中的可选项目。
段落
一段内容。
presentation
一个其隐含的原生角色语义将不会映射到辅助功能 API元素。请参阅同义词 none
progressbar
一个显示耗时任务进度状态的元素
radio
一组具有相同角色元素中的一个可勾选输入,其中一次只能勾选一个。
radiogroup
一组 radio 按钮。
值域 (range)
表示一系列值的元素。
region
一个包含与特定、作者指定的目的相关且足够重要,以至于用户很可能希望能够轻松导航到该部分并将其列在页面摘要中的内容的landmark区域。此类页面摘要可以由用户代理或辅助技术动态生成。
roletype
所有其他角色都继承自的基本角色
row
表格容器中的行。
rowgroup
表格容器中包含一个或多个行元素的结构。
rowheader
一个包含行标题信息的单元格。
scrollbar
一种控制视图区域内内容滚动的图形对象,无论内容是否已完全显示在视图区域内。
search
一个包含项目和对象集合的landmark区域,它们整体结合起来创建一个搜索设施。请参阅相关 formsearchbox
searchbox
一种用于指定搜索条件的文本框类型。请参阅相关 textboxsearch
section
文档或应用程序中的一个可渲染结构包含单元。
sectionhead
一种标注或总结其相关部分主题的结构。
select
一种表单小部件,允许用户从一组选项中进行选择。
separator
一种分隔并区分内容部分或菜单项组的分隔符。
slider
一种用户从给定范围内选择值的输入。
spinbutton
一种range形式,要求用户从离散选项中进行选择。
status
一种实时区域类型,其内容是对用户具有参考价值的信息,但重要性不足以证明使用 alert,通常但不一定呈现为状态栏。
strong
重要、严肃或紧急的内容。请参阅相关 emphasis
structure
一个文档结构元素
subscript
一个或多个下标字符。请参阅相关 superscript
superscript
一个或多个上标字符。请参阅相关 superscript
switch
一种表示开/关值的复选框类型,与选中/未选中值相对。请参阅相关 checkbox
tab
提供用于选择要呈现给用户的选项卡内容机制的分组标签。
table
一个包含排列成行和列的数据的section。请参阅相关 grid
tablist
一个 tab 元素列表,它们是对 tabpanel 元素的引用。
tabpanel
一个与 tab 关联的资源容器,其中每个 tab 都包含在 tablist 中。
term
一个带有相应定义的词或短语。请参阅相关 definition
textbox
一种允许自由文本作为其值的输入类型。
时间
表示特定时间点的元素。
timer
一种包含数字计数器的活动区域类型,该计数器指示从起始点经过的时间量,或距离结束点剩余的时间。
toolbar
以紧凑视觉形式表示的常用功能按钮或控件集合。
tooltip
显示元素描述的上下文弹出窗口。
tree
一个允许用户从分层组织的集合中选择一个或多个项目的widget
treegrid
一个行可以像 tree 一样展开和折叠的 grid
treeitem
tree 的选项项目。这是树中的一个元素,如果它包含树项元素的子级组,则可以展开或折叠。
widget
图形用户界面 (GUI) 的交互式组件。
窗口 (window)
浏览器或应用程序窗口。

alert 角色

一种带有重要且通常具有时间敏感性的信息的实时区域类型。请参阅相关 alertdialogstatus

警报用于传达对用户可能立即重要的消息。如果是音频警告,警报为听障用户提供了辅助替代方案。alert 角色应用于包含警告消息的元素。警报是 status 角色的专门形式,它作为原子实时区域进行处理。

警报是断言性实时区域,这意味着它们会导致辅助技术用户立即收到通知。如果操作系统允许,当创建 WAI-ARIA 警报时,用户代理 应该 通过辅助功能 API 触发系统警报事件

作者和用户代理都不需要设置或管理对警报的焦点以便对其进行处理。由于警报不需要接收焦点,作者 应该 不要要求用户关闭警报。如果作者希望焦点在传达消息时移动到该消息,作者 应该 使用 alertdialog 而不是 alert

具有 alert 角色的元素具有隐含的 aria-liveassertive,以及隐含的 aria-atomictrue

特征
特征
超类角色 section
子类角色
继承的状态和属性
名称来源 author
角色的隐式值 aria-live 的默认值为 assertivearia-atomic 的默认值为 true

alertdialog 角色

一种包含警告消息的对话框类型,其中初始焦点转到对话框内的元素。请参阅相关 alertdialog

警报对话框用于传达消息以提醒用户。alertdialog 角色位于同时包含警告消息和对话框其余部分的节点上。内容作者 应该 通过确保在显示 alertdialog 时键盘和鼠标交互仅在对话框内操作,来使警报对话框成为模态的。请参阅 aria-modal

alert 不同,alertdialog 可以接收用户的响应。例如,确认用户理解了生成的警报。当显示警报对话框时,作者 应该 将焦点设置到警报对话框内的活动元素,例如表单控件或确认按钮。如果预期的辅助功能 API 指定了系统警报,当创建警报时,用户代理 应该 通过辅助功能 API 触发系统警报事件

作者 应该alertdialog 上使用 aria-describedby 来引用对话框中的警告消息元素。如果他们不这样做,辅助技术可以求助于其内部恢复机制来确定警告消息的内容。

特征
特征
超类角色
继承的状态和属性
名称来源 author
需要可访问名称 True

application 角色

一个包含一个或多个需要用户输入(例如键盘或手势事件)的可聚焦元素的structure,这些输入不遵循 widget 角色支持的标准交互模式。

一些用户代理辅助技术具有浏览模式,其中标准输入事件(例如向上和向下箭头键事件)被拦截并用于控制阅读光标。此浏览模式行为阻止没有 widget 角色的元素接收和使用此类键盘和手势事件来提供交互功能。

当需要创建一个具有任何 WAI-ARIA widget 角色不支持的交互模型的元素时,作者 可以 给该元素赋予 application 角色。并且,当用户导航到具有 application 角色的元素时,拦截标准输入事件的辅助技术 应该 切换到一种将大多数或所有标准输入事件传递给 Web 应用程序的模式。

例如,演示幻灯片编辑器使用箭头键更改幻灯片上文本框和图像元素的位置。没有任何对应于此类交互模型的 WAI-ARIA widget 角色,因此作者可以给幻灯片容器赋予 application 角色、"Slide Editor" 的 aria-roledescription,并使用 aria-describedby 提供说明。

因为只有 application 元素中包含的可聚焦元素对某些辅助技术的用户可见,所以作者 必须 使用以下技术之一来确保应用程序内的所有非装饰性静态文本或图像内容都是可访问的

  1. 使用 aria-labelledbyaria-describedby 将内容与可聚焦元素关联。
  2. 将内容放置在具有 documentarticle 角色的可聚焦元素中。
  3. 按照 管理焦点 中的描述管理拥有元素的焦点,更新 aria-activedescendant 的值以引用包含聚焦内容的元素
特征
特征
超类角色 structure
支持的状态和属性
继承的状态和属性
名称来源 author
需要可访问名称 True

article 角色

页面的一部分,由形成文档、页面或站点独立部分的组合构成。

文章不是导航地标,但可以嵌套以形成讨论,其中辅助技术可以关注文章嵌套以协助用户跟随讨论。文章可以是论坛帖子、杂志或报纸文章、网络日志条目、用户提交的评论或任何其他独立的内容项。它之所以是独立的,是因为它的内容可以单独存在,例如在联合发布中。然而,该元素仍然与其祖先相关联;例如,适用于父正文元素的联系信息也涵盖了文章本身。嵌套文章时,子文章代表与父文章内容相关的内容。例如,在接受用户提交评论的网站上的网络日志条目可以将评论表示为嵌套在网络日志条目文章内的文章。与文章关联的作者、标题、日期或其他信息不适用于嵌套文章。

当用户导航到分配了 article 角色的元素时,通常拦截标准键盘事件的辅助技术 应该 切换到文档浏览模式,而不是将键盘事件传递给 Web 应用程序。辅助技术 可以 提供一项功能,允许用户导航任何嵌套的 article 元素的层次结构。

article 处于 feed 的上下文中时,作者 可以aria-posinsetaria-setsize 指定值。

特征
特征
超类角色 document (文档)
相关概念
支持的状态和属性
继承的状态和属性
名称来源 author

blockquote 角色

引用自其他来源的内容部分。

特征
特征
超类角色 section
相关概念
继承的状态和属性
名称来源 author

button 角色

一种允许在单击或按下时触发用户操作的输入。请参阅相关 link

按钮主要用于离散操作。按钮外观的标准化增强了用户对作为按钮的小部件的识别,并允许在工具栏中实现更紧凑的显示。

按钮支持可选的属性 aria-pressed。具有非空 aria-pressed 属性的按钮是切换按钮。当 aria-pressedtrue 时,按钮处于“按下”状态;当 aria-pressedfalse 时,它未被按下。如果属性不存在,则该按钮为简单的命令按钮。

特征
特征
超类角色 command
基础概念 <button> in [HTML]
相关概念
支持的状态和属性
继承的状态和属性
名称来源
  • 内容
  • author
需要可访问名称 True
子元素为表现层 True

caption 角色

命名并可能描述 figuretablegridtreegrid 的可见内容。

使用 caption 时,作者 应该 确保

作者 应当 在父级 figuretablegridtreegrid 上设置 aria-labelledby 以引用带有 caption 角色的元素。然而,如果 caption 包含的内容既作为其父级的名称又作为描述,作者 可以 改为设置 aria-labelledby 来引用 caption 中包含简明名称的元素,并设置 aria-describedby 来引用 caption 中包含描述性内容的元素。

<div role="table" aria-labelledby="name" aria-describedby="desc">
   <div role="caption">
     <div id="name">Contest Entrants</div>
     <div id="desc">
       This table shows the total number of entrants (500) the
       contest accepted over the past four weeks.
     </div>
   </div>
   <!-- ... -->
特征
特征
超类角色 section
相关概念
必需的上下文角色
继承的状态和属性
禁止的状态和属性
名称来源 prohibited

cell 角色

表格容器中的单元格。请参阅相关 gridcell

作者 必须 确保带有 角色 cell 的 元素 被包含在带有 row 角色 的元素内或由其拥有。

特征
特征
超类角色 section
子类角色
基础概念 [HTML] 中的 <td>
必需的上下文角色 row
支持的状态和属性
继承的状态和属性
名称来源
  • 内容
  • author

checkbox 角色

具有三种可能的可勾选输入:truefalsemixed

checkboxaria-checked 属性 指示输入是选中状态(true)、未选中状态(false),还是表示一组具有混合选中和未选中值的 元素mixed)。许多复选框不使用 mixed 值,因此实际上是布尔型复选框。

特征
特征
超类角色 input (输入)
子类角色
相关概念
必需的状态和属性
支持的状态和属性
继承的状态和属性
名称来源
  • 内容
  • author
需要可访问名称 True
子元素为表现层 True

code 角色

内容表示计算机代码片段的部分。

code 角色的主要目的是通知辅助技术该内容为计算机代码,因此可能需要特殊的呈现,特别是在合成语音方面。更具体地说,屏幕阅读器和其他提供文本转语音呈现内容的工具 应当 优先使用完全标点详细程度,以确保常见符号(如“-”)被读出。

特征
特征
超类角色 section
相关概念
继承的状态和属性
禁止的状态和属性
名称来源 prohibited

columnheader 角色

包含列标题信息的单元格。

columnheader 可用作表格或网格中的列标题。它也可以用于饼图中,以显示数据中类似的 关系

columnheader 在其与相应列中的所有单元格之间建立了关系。它是具有列范围的 HTML th 元素 的结构等价物。

作者 必须 确保带有 columnheader 角色元素 被包含在带有 row 角色的元素内,或由其 拥有

在 columnheader 上应用 aria-selected 状态 不得 导致用户代理自动将 aria-selected 状态传播到相应列中的所有单元格。作者 可以 根据具体应用程序选择以这种方式传播选择状态。

虽然 columnheader 角色可同时用于交互式网格和非交互式表格,但 aria-readonlyaria-required 的使用仅适用于交互式元素。因此,作者 不应当 在从属于 tablecolumnheader 中使用 aria-requiredaria-readonly,且除非 columnheader 从属于 grid,否则用户代理 不应当辅助技术 公开任一属性。

由于单元格按行组织,因此没有单一的列容器元素。列是其各自 row 容器中处于特定位置的一组 gridcell 元素。

: aria-disabled 的使用

虽然 aria-disabled 目前在 columnheader 上受支持,但工作组计划在未来版本中禁止其用于具有 columnheader 角色的元素,除非该元素处于 gridtreegrid 的上下文中。

特征
特征
超类角色
基础概念 [HTML] 中的 <th[scope="col"]>
必需的上下文角色 row
支持的状态和属性 aria-sort
继承的状态和属性
名称来源
  • 内容
  • author
需要可访问名称 True

combobox 角色

一种控制另一个元素(例如 listboxgrid)的input,它可以动态弹出以帮助用户设置 input 的值。

编辑注: ARIA 1.2 中 combobox 角色的重大变更

由于先前模式的实现存在问题,ARIA 1.2 中对 combobox 的指南发生了重大变化。建议用户代理、辅助技术和一致性检查器的作者及开发人员仔细阅读本节以了解变更内容。这些变更的解释可在 ARIA 存储库 wiki 中找到。

combobox 在功能上将命名输入字段与通过辅助弹出元素进行值选择的功能相结合。combobox 输入 可以 是支持编辑和键入的单行文本字段,也可以是仅显示 combobox 当前值的元素。如果 combobox 支持文本输入并提供如 aria-autocomplete 中所述的自动完成行为,作者 必须combobox 元素上将 aria-autocomplete 设置为与所提供行为对应的值。

通常,combobox 的初始状态是收起的。在收起状态下,仅 combobox 元素和单独的可选弹出控件 button 可见。当显示当前值的 combobox 元素及其关联的弹出元素均可见时,称 combobox 为展开的。作者 必须 在具有 combobox 角色的元素展开时将其 aria-expanded 设置为 true,收起时设置为 false

作者 必须 确保与 combobox 关联的弹出元素具有 listboxtreegriddialog 角色。作者 必须combobox 元素上设置 aria-controls,其值引用 combobox 弹出元素。

具有 combobox 角色的元素具有 listbox 的隐式 aria-haspopup 值。如果 combobox 弹出元素具有 listbox 以外的角色,作者 必须aria-haspopup 指定一个与其弹出角色相对应的值。

如果用户界面包含一个额外的图标,允许通过指针和触摸事件控制弹出框的可见性,作者 应当 确保该元素具有 button 角色,且其可聚焦但不包含在页面的 Tab 顺序中,并且它不是具有 combobox 角色的元素的后代。此外,为了具备键盘可访问性,作者 应当 提供用于在 combobox 元素和弹出框中包含的元素之间移动焦点的键盘机制。例如,一种常见的约定是 Down Arrow 将焦点从输入框移动到弹出元素中第一个可聚焦的后代。如果弹出元素支持 aria-activedescendant,则此类键盘机制可以控制 combobox 元素上 aria-activedescendant 的值,而不是移动焦点。当弹出元素的后代处于活动状态时,作者 可以combobox 上将 aria-activedescendant 设置为引用弹出框内活动元素的值,同时焦点保持在 combobox 元素上。

用户代理 必须辅助技术 公开具有 combobox 角色的元素的值。combobox 的值由以下之一表示:

  • 如果 combobox 元素是一个提供值的宿主语言元素(例如 HTML input 元素),则 combobox 的值即为该元素的值。
  • 否则,combobox 的值由其后代元素表示,并且可以使用用于根据后代内容计算 button 名称的相同方法来确定。
    <label for="tag_combo">Tag</label>
  <input type="text" id="tag_combo"
      role="combobox" aria-autocomplete="list"
      aria-haspopup="listbox" aria-expanded="true"
      aria-controls="popup_listbox" aria-activedescendant="selected_option">
<ul role="listbox" id="popup_listbox">
   <li role="option">Zebra</li>
   <li role="option" id="selected_option">Zoom</li>
</ul>
编辑注: ARIA 1.2 中 combobox 的有效性变更

请仔细审查以下内容。由于这些变更,遵循 ARIA 1.1 combobox 规范的 combobox 将不再符合 ARIA 规范。

此版本规范定义的 combobox 的结构要求与 ARIA 1.0 和 ARIA 1.1 定义的要求不同。

  • ARIA 1.0 规范要求具有 combobox 角色的输入元素必须是单行文本字段,并使用 aria-owns 而非 aria-controls 来引用弹出元素。
  • ARIA 1.1 规范未得到辅助技术的广泛支持,其要求 combobox 为一个不可聚焦的元素,且必须有两个必需的从属元素——一个可聚焦的 textbox 和一个由该 textbox 控制的弹出元素。
  • ARIA 1.2 中引入的变更提高了与辅助技术的互操作性,并使作者能够创建更接近原生 HTML select 元素的 combobox 表现。

combobox 实现的特性和行为差异很大。因此,有许多重要的创作考量。有关实现 combobox 设计模式的更多详细信息,请参阅 WAI-ARIA 创作实践

特征
特征
超类角色 input (输入)
相关概念
必需的状态和属性
支持的状态和属性
继承的状态和属性
名称来源 author
需要可访问名称 True
角色的隐式值 aria-haspopup 的默认值为 listbox

command 角色

一种执行操作但不接收输入数据的小部件形式。

command 是本体论中使用的抽象角色。作者不应在内容中使用此角色。

特征
特征
是抽象角色 True
超类角色 widget
子类角色
继承的状态和属性
名称来源 author

complementary 角色

一种在 DOM 层次结构中处于相似级别、旨在与主要内容互补的landmark,但在与主要内容分离时仍然有意义。

有各种类型的内容适合使用此 角色。例如,在门户网站的情况下,这可能包括但不限于放映时间、当前天气、相关文章或关注的股票。complementary 角色表示所包含的内容与主要内容相关。如果补充内容与主要内容完全可分离,则使用更通用的角色可能是适当的。

用户代理 应当 将带有 complementary 角色的元素视为导航 地标

特征
特征
超类角色 landmark
继承的状态和属性
名称来源 author

composite 角色

一个可能包含可导航后代或 拥有 子项的 小部件

作者 应当 确保组合小部件作为网页更大导航系统中的单个导航停靠点存在。一旦组合小部件获得焦点,作者 应当 为用户提供一个单独的导航机制,以便导航到属于该组合元素的后代或拥有子项的 元素

composite 是本体论中使用的抽象角色。作者不应在内容中使用此角色。

特征
特征
是抽象角色 True
超类角色 widget
子类角色
支持的状态和属性
继承的状态和属性
名称来源 author

contentinfo 角色

一个包含有关父文档信息的landmark

包含在页面此区域中的信息示例包括版权声明和隐私声明链接。

用户代理 应当 将带有 contentinfo 角色的元素视为导航 地标

在任何 documentapplication 中,作者 应当 标记不超过一个具有 contentinfo 角色的 元素

由于 documentapplication 元素可以在 DOM 中嵌套,假设每个元素都与不同的文档节点相关联(无论是通过 DOM 嵌套,例如 document 内的 document,还是通过使用 aria-owns 属性),它们可能有多个 contentinfo 元素作为 DOM 后代。

特征
特征
超类角色 landmark
继承的状态和属性
名称来源 author

definition 角色

术语或概念的定义。请参阅相关 term

作者 应当 通过赋予该元素 term 角色并使用 aria-labelledby 属性 引用它,或者使带有 term 角色的元素成为带有 definition 角色的元素的后代,来标识被定义的 元素

特征
特征
超类角色 section
继承的状态和属性
名称来源 author

deletion 角色

删除包含标记为已删除的内容或建议删除的内容。请参阅相关 insertion

删除通常用于标记两个内容版本之间的差异,或者在多人修订内容的情况下指定建议删除的内容。

特征
特征
超类角色 section
相关概念
继承的状态和属性
禁止的状态和属性
名称来源 prohibited

dialog 角色

对话框是 Web 应用程序主窗口的后代窗口。对于 HTML 页面,主应用程序窗口是整个 Web 文档,即 body 元素。

对话框最常用于提示用户输入或响应信息。旨在中断工作流的对话框通常是模态的。请参阅相关的 alertdialog

作者 必须 为对话框提供一个可访问名称,这可以通过 aria-labelaria-labelledby 属性来实现。

作者 应当 确保所有对话框(无论是模态还是非模态)都至少有一个可聚焦的后代元素。作者 应当 在模态对话框显示时将其中的一个元素置于焦点,并且作者 应当 管理模态对话框的焦点。

在此角色的描述中,“Web 应用程序”一词并不指代指定特定辅助技术行为的 application 角色。

特征
特征
超类角色 窗口 (window)
子类角色
继承的状态和属性
名称来源 author
需要可访问名称 True

directory 角色

[ARIA 1.2 中已弃用] 对组成员的引用列表,例如静态目录。

正如辅助功能 API 所公开的那样,directory 角色 本质上等同于 list 角色。因此,使用 directory 不会给辅助技术用户带来任何额外好处。建议作者将 directory 视为已弃用,并改为使用 list 或宿主语言的等效语义。

directory 是一个静态目录,无论是否链接。这包括用列表(包括嵌套列表)构建的目录。然而,动态目录可能使用 tree 角色。

特征
特征
超类角色 list
继承的状态和属性
名称来源 author

document 角色

一个包含辅助技术用户可能希望在阅读模式下浏览的内容的 元素

用户代理 焦点移动到被分配 document 角色的元素时,具有用于浏览静态内容的阅读模式的 辅助技术 可以 切换到该阅读模式,并拦截标准输入事件(例如向上或向下箭头键盘事件)以控制阅读光标。

因为具有阅读模式的 辅助技术 默认为除具有 widgetapplication 角色的元素以外的所有元素启用该模式,所以 document 角色对于改变辅助技术行为唯一有用的情况是当具有 document 角色的元素是 widgetapplication 的可聚焦子元素时。例如,给定一个包含一些静态富文本的 application 元素,作者可以将 document 角色应用于包含文本的元素,并给予其 tabindex0。当屏幕阅读器用户按下 Tab 键并将焦点置于 document 元素上时,用户将能够使用屏幕阅读器的阅读光标阅读文本。

特征
特征
超类角色 structure
子类角色
继承的状态和属性
名称来源 author
需要可访问名称 False (假)

emphasis 角色

一个或多个强调字符。请参阅相关 strong

emphasis 角色的目的是强调或着重突出内容。它不是为了传达不影响内容意义的印刷表现形式的变化。作者 应当 仅在其缺失会改变内容意义的情况下使用 emphasis 角色。

emphasis 角色并不用于传达重要性;为此,strong 角色更合适。

特征
特征
超类角色 section
相关概念
继承的状态和属性
禁止的状态和属性
名称来源 prohibited

feed 角色

一个可滚动的 articles list,其中滚动可能会导致 articles 被添加到列表的两端或从两端移除。

feed 使得具有文档浏览模式(如屏幕阅读器)的 辅助技术 用户能够使用浏览模式阅读光标来阅读和滚动浏览富内容流,这些内容流可能会通过用户阅读时加载更多内容而继续无限滚动。在 feed 中,辅助技术 通过移动 用户代理 焦点向 Web 应用程序提供用户阅读光标移动的信号,从而使应用程序能够在用户浏览页面时添加新内容并在视觉上定位内容。feed 还允许作者在发生添加和删除操作时通知辅助技术,以便辅助技术能够更可靠地更新其阅读视图,而不会中断阅读或降低性能。

例如,feed 可用于呈现新闻故事流,其中每篇 article 包含带有文本、链接、图像和评论的故事,以及用于分享和评论的小部件。当屏幕阅读器用户阅读和交互每篇故事,并将屏幕阅读器阅读光标从一个故事移动到另一个故事时,每个故事都会滚动进入视野,并根据需要加载新故事。

feed 是一个容器元素,其子项具有 article 角色。当从 feed 的一端或两端添加或删除 articles 时,作者 应当 在更改前在 feed 元素上将 aria-busy 设置为 true,并在更改完成后将其设置为 false。作者 应当 避免在 feed 的中间插入或删除 articles。这些要求有助于 辅助技术 优雅地响应与用户在 feed 内移动阅读光标的命令同时发生的 feed 内容变更。

作者 应当 使 feed 中的每篇 article 均可聚焦,并确保当 用户代理 焦点设置在 article 或其后代元素之一上时,应用程序将 article 滚动到视野中。例如,在 HTML 中,每篇 article 元素的 tabindex 值应为 -10

辅助技术 阅读光标从一篇 article 移动到另一篇时,辅助技术 应当 将用户代理焦点设置在包含阅读光标的 article 上。如果阅读光标停留在 article 内的可聚焦元素上,辅助技术 可以 将焦点设置在该元素上,以代替设置在包含它的 article 上。

由于使用 辅助技术 阅读光标滚动到另一篇 article 的能力取决于页面上是否存在另一篇 article,作者 应当用户代理 焦点到达已加载的 articles 集合中任一端的 article 之前,尝试加载额外的 articles。或者,作者 可以 在已加载 articles 集合的任一端或两端包含一篇 article,该 article 中包含一个元素(如 button),允许用户请求加载更多 articles

除了提供简短的标签外,作者 可以aria-describedby 应用于 feed 中的 article 元素,以建议屏幕阅读器在用户按 article 导航时在标签之后读出哪些元素。屏幕阅读器 可以 为用户提供一种快速扫描 feed 内容的方法,即在按 article 导航时读出标签和 可访问描述,使用户能够忽略作者已从描述中排除的重复性或不重要的元素(例如嵌入式交互小部件)。

作者 应当 提供用于在 feed 中的 articles 之间移动焦点的键盘命令,以便不使用提供 article 导航功能的辅助技术的用户能够使用键盘浏览 feed

如果 feed 供应中可用的文章数量是静态的,作者 可以 在该 feed 中的 article 元素上指定 aria-setsize。然而,如果总数非常大、不确定或经常变化,作者 可以aria-setsize 设置为 -1,以传达集合大小未知的信息。

有关实现 feed 设计模式的更多详细信息,请参阅 WAI-ARIA 创作实践

特征
特征
超类角色 list
必需的所属元素 article
继承的状态和属性
名称来源 author
需要可访问名称 False (假)

figure 角色

一个可感知的 section 内容,通常包含 图形文档、图像、代码片段或示例文本。figure 的部分 可以 是用户可导航的。

作者 应当 从正文中提供对 figure 的引用,但 figure 不一定要显示在与引用元素相同的位置。作者 可以 使用 aria-describedby 引用作为标题的文本。作者 可以 使用 aria-label 提供标签,或者 可以 使用 aria-labelledby 引用作为标签的文本。

辅助技术 应当 允许用户快速导航到图示。主流 用户代理 可以 允许用户快速导航到图示。

特征
特征
超类角色 section
相关概念
继承的状态和属性
名称来源 author
需要可访问名称 False (假)

form 角色

一个包含项目和对象集合的landmark区域,它们整体结合起来创建一个表单。请参阅相关 search

表单可能包含宿主语言表单控件、脚本化控件和超链接的混合。提醒作者尽可能使用原生宿主语言语义来创建表单控件。如果表单的目的是提交搜索条件,作者 应当 使用 search 角色而不是通用的 form 角色。

作者 必须 为每个具有 form 角色的元素提供一个描述表单目的的简短标签。如果存在可见标签,作者 应当 使用 aria-labelledby 引用该可见标签。作者 应当 尽可能将标签包含在标题内。标题 可以 是标准宿主语言标题元素的实例,或者是具有 heading 角色的元素的实例。

如果作者使用脚本根据用户操作提交表单,而该操作通常不会触发 onsubmit 事件(例如,用户更改表单元素值触发的表单提交),作者 应当 向用户提供该行为的提前通知。

用户代理 应当 将带有 form 角色的元素视为导航 地标

特征
特征
超类角色 landmark
基础概念 [HTML] 中的 <form>
继承的状态和属性
名称来源 author
需要可访问名称 true

generic 角色

一个本身没有语义含义的无名容器 元素

generic 角色旨在用作宿主语言(如 HTML divspan)中通用元素的隐式角色,因此主要供用户代理的实现者使用。作者 不应当 在内容中使用此角色。作者 可以 使用 presentationnone 来移除隐式辅助功能语义,或使用诸如 group 之类的语义容器角色来在命名容器中对后代进行语义分组。

与具有 presentation 角色的元素一样,具有 generic 角色的元素可以为其后代提供有限数量的可访问状态和属性,例如 aria-live 属性。然而,与具有 presentation 角色的元素不同,generic 元素会在 辅助功能 API 中公开,以便辅助技术能够收集某些属性,例如布局和边界。

特征
特征
超类角色 structure
相关概念
继承的状态和属性
禁止的状态和属性
名称来源 prohibited

grid 角色

一个复合widget,包含一个或多个具有一个或多个单元格的行集合,其中网格中的部分或所有单元格可以通过使用二维导航方法(例如方向箭头键)来聚焦。

grid 角色并不隐含特定的视觉表现,例如表格表现。它描述了 元素 之间的 关系。它既可用于分组一组复选框或导航链接等简单用途,也可用于创建全功能的电子表格应用程序等复杂用途。

grid 的单元格元素具有 gridcell 角色。作者 可以 通过使用 rowheadercolumnheader 角色 来代替 gridcell 角色,将单元格指定为行或列标题。作者 必须 确保带有 gridcellcolumnheaderrowheader 角色的元素由带有 row 角色的元素 拥有,而该行元素又由带有 rowgroupgrid 角色的元素所拥有。

为了具备 键盘可访问性,作者 应当 按照 管理焦点 中所述管理 grid 后代的焦点。当用户使用键盘导航 grid 内容时,作者 应当 按如下方式设置焦点:

  • 如果 gridcell 包含单个交互式 widget(例如 checkboxbuttonlink),且该小部件在获得焦点时不会消耗方向键按键,则作者 可以 在该单元格包含的交互式元素上设置焦点。这允许直接操作所包含的小部件。
  • 否则,作者 应当 确保获得焦点的元素是 gridcellrowheadercolumnheader 元素。

作者 应当 提供一种切换到交互或编辑模式的机制,如果该可聚焦单元格包含以下任何内容,则允许用户导航和与包含在可聚焦单元格内的内容进行交互:

  • 需要方向键操作的小部件,例如 comboboxradiogroup
  • 多个交互式元素
  • 可编辑内容

例如,如果电子表格中的单元格包含 combobox 或可编辑文本,则当该单元格获得焦点时,可以使用 Enter 键激活单元格交互或编辑模式,以便可以使用方向键来操作所包含的 comboboxtextbox。根据具体实现,再次按下 EnterTabEscape 或其他键可能会将应用程序切换回网格导航模式。

作者 可以 使用 gridcell 来显示公式的结果,该结果可由用户编辑。例如,在电子表格应用程序中,gridcell 可能会显示从公式计算出的值,直到用户激活 gridcell 进行编辑时,gridcell 中才会出现一个处于可编辑状态、包含公式的 textbox

如果 grid 元素上设置了 aria-readonly用户代理 必须 将该值传播到该 grid 拥有 的所有 gridcell 元素,并在辅助功能 API 中公开该值。作者 可以 为单个 gridcell 元素覆盖 aria-readonly 的传播值。

在提供单元格内容编辑功能的 grid 中,如果可聚焦的 gridcell 元素的内容不可编辑,作者 可以gridcell 元素上将 aria-readonly 设置为 true。然而,aria-readonly 的值(无论指定为整个 grid 还是单个单元格)仅表示单元格所包含的内容是否可编辑。它不代表导航或操作 grid 本身功能的可用性。

aria-readonly 的未指定值并不意味着 gridgridcell 包含可编辑内容。例如,如果 grid 呈现了一组不可编辑的元素(例如日期选择器中代表日期的 link 元素集合),则作者无需为 aria-readonly 指定值。

作者 可以 使用 aria-selected 属性表明可聚焦的 gridcell 可作为操作对象被选中。如果 grid 允许选中多个 gridcell,则作者 应当 在具有 grid 角色的元素上将 aria-multiselectable 设置为 true

由于 WAI-ARIA 可以增强宿主语言的元素,因此 grid 可以重用原生表格的元素和属性,例如 HTML table 元素。例如,如果作者将 grid 角色应用于 HTML table 元素,则无需将 rowgridcell 角色应用于后代的 HTML trtd 元素,因为 用户代理 会自动进行相应的转换。当作者重用原生宿主语言表格元素并需要 gridcell 元素跨越多行或多列时,作者 应当 应用相应的宿主语言属性,而不是 WAI-ARIAaria-rowspanaria-colspan 属性。

有关实现 grid 设计模式的更多详细信息,请参阅 WAI-ARIA 创作实践

特征
特征
超类角色
子类角色
基础概念 [HTML] 中的 <table>
必需的所属元素
支持的状态和属性
继承的状态和属性
名称来源 author
需要可访问名称 True

gridcell 角色

一个 gridtreegrid 中的cell

gridcell 可以是可聚焦、可编辑和可选中的。gridcell 可能具有诸如 aria-controls 之类的 关系,以解决功能关系的应用。

如果作者打算让 gridcell 具有行标题、列标题或两者兼有,且无法从 DOM 结构中确定相关标题,则作者 应当 通过在 gridcell 上应用 aria-describedby 并引用带有 rowheadercolumnheader 角色元素,明确指示哪些标题单元格与该 gridcell 相关。

treegrid 中,作者 可以 使用 aria-expanded 属性将 gridcell 定义为可展开。如果提供了 aria-expanded 属性,它仅适用于单个单元格。它不是容器 row 的代理(行也可以展开)。在 gridcell 上提供此属性的主要用例是透视表行为。

作者 必须 确保带有 gridcell 角色元素 被包含在带有 row 角色 的元素内,或由其 拥有

特征
特征
超类角色
子类角色
基础概念 [HTML] 中的 <td>
必需的上下文角色 row
支持的状态和属性
继承的状态和属性
名称来源
  • 内容
  • author

group 角色

一组用户界面 对象,其不打算被 辅助技术 包含在页面摘要或目录中。

region 形成对比,后者是将被包含在页面摘要或目录中的用户界面对象的分组。

作者 应当 使用 group小部件 中形成逻辑项目集合,例如树小部件中形成层级中兄弟集合的子项。然而,当 grouplistbox 的上下文中被使用时,作者 必须 将其子项限制为 option 元素。因此,作者和辅助技术对 group 的正确处理取决于其所提供的上下文。

作者 可以 嵌套 group 元素。如果某个部分的重要性足以保证包含在网页的目录中,作者 应当 将其指定为 region标准地标角色角色

特征
特征
超类角色 section
子类角色
相关概念
支持的状态和属性
继承的状态和属性
名称来源 author

heading 角色

页面部分的标题。

为了确保带有 heading 角色的元素被组织成逻辑大纲,作者 必须 使用 aria-level 属性来指示正确的嵌套级别。

特征
特征
超类角色 sectionhead
相关概念
必需的状态和属性 aria-level
继承的状态和属性
名称来源
  • 内容
  • author
需要可访问名称 True

img 角色

一个包含构成图像的 元素 集合的容器。

img 可以包含标题和描述性文本,以及多个图像文件,这些文件在查看时会给人一种单幅图像的印象。img 代表文档中的单个图形,无论它是否由一组绘图 对象 组成。为了使具有 img 角色 的元素变得 可感知,作者 必须 使用 aria-labelaria-labelledby 属性提供标签。

特征
特征
超类角色 section
相关概念
继承的状态和属性
名称来源 author
需要可访问名称 True
子元素为表现层 True

input 角色

一种允许用户输入的通用 小部件 类型。

特征
特征
是抽象角色 True
超类角色 widget
子类角色
支持的状态和属性 aria-disabled
继承的状态和属性
名称来源 author

insertion 角色

插入包含标记为已添加的内容或建议添加的内容。请参阅相关 deletion

插入通常用于标记两个内容版本之间的差异,或者在多人修订内容的情况下指定建议添加的内容。

特征
特征
超类角色 section
相关概念
继承的状态和属性
禁止的状态和属性
名称来源 prohibited

landmark 角色

一个可感知的section内容,其内容与特定的、作者指定的目的相关,并且足够重要,用户很可能希望能够轻松导航到该部分,并将其列在页面摘要中。此类页面摘要可以由用户代理或辅助技术动态生成。

作者通过分配属于 landmark 角色的子类的角色,并在需要时提供简短的描述性标签,来指定内容的用途。

具有属于 landmark 角色子类的角色的元素被称为地标区域或导航地标区域。辅助技术 应当 允许用户快速导航到地标区域。主流 用户代理 可以 允许用户快速导航到地标区域。

landmark 是本体论中使用的抽象角色。作者不应在内容中使用此角色。

特征
特征
是抽象角色 True
超类角色 section
子类角色
继承的状态和属性
名称来源 author
需要可访问名称 False (假)

list 角色

一个包含 listitem 元素的section。请参阅相关 listbox

列表包含 角色listitem 的子项。

特征
特征
超类角色 section
子类角色
基础概念
必需的所属元素 listitem
继承的状态和属性
名称来源 author

listbox 角色

一个允许用户从选择列表中选择一个或多个项目的 小部件。请参阅相关的 comboboxlist

列表中的项目是静态的,并且与标准的 HTML select 元素 不同,它们可以包含图像。列表框包含 角色option 的子项,或者包含 角色group 的元素,该元素进而包含 角色option 的子项。

为了具备 键盘可访问性,作者 应当 为该 角色 的所有实例管理 option 后代的焦点,如 管理焦点 中所述。

具有 listbox 角色的元素具有 vertical 的隐式 aria-orientation 值。

特征
特征
超类角色
相关概念
必需的所属元素
支持的状态和属性
继承的状态和属性
名称来源 author
需要可访问名称 True
角色的隐式值 aria-orientation 的默认值为 vertical

listitem 角色

列表或目录中的单个项目。

作者 必须 确保 角色listitem元素 被包含在 角色list元素 内,或由其 拥有

特征
特征
超类角色 section
子类角色
基础概念 [HTML] 中的 <li>
必需的上下文角色
支持的状态和属性
继承的状态和属性
名称来源 author

log 角色

一种 实时区域,其中新信息以有意义的顺序添加,旧信息可能会消失。请参阅相关的 marquee

示例包括聊天记录、消息历史、游戏日志或错误日志。与其他实时区域相比,在此 角色 中,日志中新项目的到达与阅读顺序之间存在 关系。日志包含一个有意义的序列,新信息仅添加到日志末尾,而不是任意点。

具有 log 角色的元素具有 polite 的隐式 aria-live 值。

特征
特征
超类角色 section
继承的状态和属性
名称来源 author
角色的隐式值 aria-live 的默认值为 polite

main 角色

一个包含文档主要内容的landmark

这标记了与文档中心主题直接相关或对其进行扩展的内容。main 角色 是“跳转到主要内容”链接的一种非干扰性替代方案,其中前往主要内容的导航选项(或其他 地标)由 用户代理 通过对话框或 辅助技术 提供。

用户代理 应当 将带有 main 角色的元素视为导航地标。

在任何 documentapplication 中,作者 应当 标记不超过一个具有 main 角色的 元素

由于 documentapplication 元素可以在 DOM 中嵌套,它们可能有多个 main 元素作为 DOM 后代,假设每个元素都与不同的文档节点相关联(无论是通过 DOM 嵌套,例如 document 内的 document,还是通过使用 aria-owns 属性)。

特征
特征
超类角色 landmark
继承的状态和属性
名称来源 author

marquee 角色

一种非必要信息频繁变化的 实时区域。请参阅相关的 log

marquee 的常见用法包括股票行情和广告横幅。marqueelog 之间的主要区别在于,日志通常具有重要内容更改的有意义的顺序或序列。

具有 marquee 角色的元素具有 off 的隐式 aria-live 值。

特征
特征
超类角色 section
继承的状态和属性
名称来源 author
需要可访问名称 True

math 角色

表示数学表达式的内容。

具有 math 角色的内容旨在以可访问的格式标记,例如 MathML [MathML3],或者使用其他类型的文本表示形式(例如 TeX 或 LaTeX),这些表示形式可以通过原生浏览器实现或 polyfill 库转换为可访问的格式。

虽然使用数学表达式的图像并不理想,但存在大量使用图像来表示数学表达式的遗留内容。作者 应当 确保数学图像由描述数学表达式(如其被读出的方式)的文本进行标记。

支持 MathML 原生实现的浏览器能够提供比纯文本近似值更稳健、可访问的数学体验。一些渲染引擎与屏幕阅读器有紧密的集成,允许对公式进行空间触摸探索,并在 Nemeth 盲文 格式中输出可刷新的盲文显示。这种集成水平对于数学公式的图像是不支持的,即使作者提供了纯文本近似值。

在撰写本文时,一些主流浏览器不支持原生 MathML,必须使用 JavaScript polyfill 库进行改造。创作数学内容时,尽可能使用原生的 MathML,并进行彻底测试。如有必要,使用 polyfill 库或提供带有文本替代近似的后备图像。

带有嵌入式 TeX 注释的 MathML 示例

<!-- Note: Use a JavaScript polyfill library to ensure
     this renders in user agents that do not support MathML. -->
<!-- The math element has an implicit role="math". -->
<math xmlns="https://w3org.cn/1998/Math/MathML">
  <mrow>
    <mi>x</mi>
    <mo>=</mo>
    <mfrac>
      <mrow>
        <mo form="prefix"></mo>
        <mi>b</mi>
        <mo>±</mo>
        <msqrt>
          <msup>
            <mi>b</mi>
            <mn>2</mn>
          </msup>
          <mo></mo>
          <mn>4</mn>
          <mo>&#x2062;<!-- &InvisibleTimes; --></mo>
          <mi>a</mi>
          <mo>&#x2062;<!-- &InvisibleTimes; --></mo>
          <mi>c</mi>
        </msqrt>
      </mrow>
      <mrow>
        <mn>2</mn>
        <mo>&#x2062;<!-- &InvisibleTimes; --></mo>
        <mi>a</mi>
      </mrow>
    </mfrac>
  </mrow>
  <annotation encoding="TeX">
    x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}
  </annotation>
</math>

MathML 二次公式的纯 HTML 或 Polyfill DOM 结果

如果渲染引擎不支持 MathML 之类的原生数学格式,作者 可以 使用 JavaScript 将内容降级为浏览器可以显示的格式,例如这个使用数据 URI 和纯文本替代方案的 HTML 图像。

<img role="math" src="..." alt="x=⟮−b±√⟮b²−4ac⟯⟯÷2a">
特征
特征
超类角色 section
继承的状态和属性
名称来源 author
子元素为表现层 False (假)

meter 角色

一个表示已知范围内标量测量值或分数值的 元素。请参阅相关的 progressbar

作者 可以 设置 aria-valueminaria-valuemax 来指示 meter 的最小值和最大值。否则,它们的隐式值遵循 [HTML] 中 <input[type="range"]> 的相同规则。

  • 如果 aria-valuemin 缺失或不是一个 数字,则默认为 0(零)。
  • 如果 aria-valuemax 缺失或不是一个 数字,则默认为 100。

aria-valuenow 的值 不得 分别低于或超过 aria-valueminaria-valuemax 的计算值。

作者 不应当 使用 meter 角色来指示进度;progressbar 角色就是为了满足该需求而存在的。

目前,没有 WAI-ARIA 属性对应于 [HTML] 中 <meter> 元素支持的 lowoptimumhigh 属性。这些属性的添加将在 ARIA 1.3 版本中考虑。

特征
特征
超类角色 值域 (range)
相关概念
必需的状态和属性 aria-valuenow
继承的状态和属性
名称来源 author
需要可访问名称 True
子元素为表现层 True
角色的隐式值 aria-valuemin 的默认值为 0
aria-valuemax 的默认值为 100

none 角色

一个其隐式原生角色语义不会映射到 辅助功能 API元素。请参阅同义词 presentation

关于 ARIA 1.1 none 角色的说明。

在 ARIA 1.1 中,由于作者对“presentation”或“presentational”一词的预期含义存在困惑,工作组引入了 none 作为 presentation 角色的同义词。许多人错误地认为 role="presentation"aria-hidden="true" 同义,我们相信 role="none" 能够更明确地传达其实际含义。

note 角色

内容是对资源主要内容的补充或附属的部分。

特征
特征
超类角色 section
继承的状态和属性
名称来源 author

option 角色

listbox 中的可选项目。

作者 必须 确保 角色option元素 被包含在 listboxlistbox 内的 group 角色 的元素内,或由其 拥有。未与 listbox 关联的选项可能无法正确映射到 辅助功能 API

具有 option 角色的元素具有 false 的隐式 aria-selected 值。

特征
特征
超类角色 input (输入)
子类角色
基础概念 [HTML] 中的 <option>
相关概念
必需的上下文角色
必需的状态和属性
支持的状态和属性
继承的状态和属性
名称来源
  • 内容
  • author
需要可访问名称 True
子元素为表现层 True
角色的隐式值 aria-selected 的默认值为 false

paragraph 角色

一段内容。

特征
特征
超类角色 section
相关概念
继承的状态和属性
禁止的状态和属性
名称来源 prohibited

presentation 角色

一个其隐式原生角色语义不会映射到 辅助功能 API元素。请参阅同义词 none

关于 ARIA 1.1 none 角色的说明。

在 ARIA 1.1 中,由于作者对“presentation”或“presentational”一词的预期含义存在困惑,工作组引入了 none 作为 presentation 角色的同义词。许多人错误地认为 role="presentation"aria-hidden="true" 同义,我们相信 role="none" 能够更明确地传达其实际含义。

在实现充分支持 role="none" 之前,建议 Web 作者单独使用 presentation 角色 role="presentation",或者作为 none 角色的回退冗余使用 role="none presentation"

其预期用途是当元素用于更改页面外观,但并不具备元素类型所暗示的所有功能、交互或结构相关性时;或者用于为不支持 WAI-ARIA 的旧浏览器提供可访问的回退。

用例示例:

  • 其内容完全是展示性的元素(如间隔图像、装饰图形或清除元素);
  • 一个处于带有 img 角色 容器中的图像,且其完整文本替代方案可用,并已使用 aria-labelledby 和(如果需要)aria-describedby 进行了标记;
  • 用作 CSS 额外标记“钩子”的元素;或
  • 布局表格和/或其任何相关的行、单元格等。

对于任何具有 presentation(展示)角色且不可聚焦的元素,用户代理 不得 向辅助功能 API 暴露该元素的隐式原生语义(角色及其状态和属性)。然而,用户代理 必须 暴露那些没有显式或继承自 presentation 角色的内容及后代元素。因此,presentation 角色会导致给定的元素被视为没有角色或从辅助功能树中移除,但并不会导致该元素内包含的内容从辅助功能树中移除。

例如,根据可访问性 API,以下标记元素似乎具有相同的角色语义(无角色)和相同的内容。

<!-- 1. [role="presentation"] negates the implicit 'heading' role semantics but does not affect the contents. -->
<h1 role="presentation"> Sample Content </h1>

<!-- 2. There is no implicit role for span, so only the contents are exposed. -->
<span> Sample Content </span>

<!-- 3. Depending on styling and other factors, this role declaration is redundant in some implementations. -->
<span role="presentation"> Sample Content </span>

<!-- 4. In all cases, the element contents are exposed to accessibility APIs without any implied role semantics. -->
<!-- <> --> Sample Content <!-- </> -->

presentation 角色用于具有隐式原生语义的元素,这意味着该元素拥有默认的辅助功能 API 角色。某些元素只有在提供额外的后代元素时才是完整的。例如,在 HTML 中,table 元素(对应 table 角色)需要 tr 后代(即 row 角色),而后者又需要 thtd 子元素(即 cellcolumnheaderrowheader 角色)。同样,列表需要列表项子元素。在 WAI-ARIA 中,将补全元素语义的后代元素描述为 必需的从属元素

当一个显式或继承的 presentation 角色应用于一个具有 WAI-ARIA 隐式语义角色且该角色拥有 必需的从属元素 时,除该具有显式 presentation 角色的元素外,用户代理 必须 将继承的 presentation 角色应用于任何未定义显式角色的从属元素。此外,当显式或继承的 presentation 角色应用于宿主语言规范定义了必需子元素的宿主语言元素时,除该具有显式 presentation 角色的元素外,用户代理 必须 将继承的 presentation 角色应用于任何未定义显式角色的必需子元素。

HTML 中,无论图像文件的类型如何,<img> 元素 都被视为一个单一实体。因此,在 HTML img 上使用 role="presentation"role="none" 等同于使用 aria-hidden="true"。为了使图像内容可访问,作者可以使用 <object><iframe> 元素 嵌入对象,或者使用内联 SVG 代码,并遵循图像内容的可访问性指南。

对于任何具有显式或继承的 presentation 角色且不可聚焦的元素,用户代理 必须 忽略该元素特定于角色的 WAI-ARIA 状态和属性。例如,在 HTML 中,带有 presentation 角色的 ulol 元素,其 li 元素的隐式原生语义将被移除,因为 ulol 所对应的 list 角色具有 必需的从属元素 listitem。同样,HTML table 元素的 thead/tbody/tfoot/tr/th/td 后代的隐式原生语义也将被移除,因为 HTML 规范指出这些是 table 元素的必需结构性后代。

仅移除对应于 WAI-ARIA 必需的从属元素 的元素的隐式原生语义。所有其他内容保持不变,包括嵌套表格或列表,除非这些元素也被应用了显式的 presentation 角色。

例如,根据可访问性 API,以下标记元素似乎具有相同的角色语义(无角色)和相同的内容。

<!-- 1. [role="presentation"] negates the implicit 'list' and 'listitem' role semantics but does not affect the contents. -->
<ul role="presentation">
  <li> Sample Content </li>
  <li> More Sample Content </li>
</ul>

<!-- 2. There is no implicit role for "foo", so only the contents are exposed. -->
<foo>
  <foo> Sample Content </foo>
  <foo> More Sample Content </foo>
</foo>

还有其他具有必需子元素的 WAI-ARIA 角色也适用此情况(例如,radiogroups 和 listboxes),但表格和列表是 presentation 继承最常应用的实际案例。

对于任何具有显式或继承的 presentation 角色的元素,用户代理 必须 将继承的 presentation 角色应用于该展示型元素的所有宿主语言特定的标注元素。例如,带有 presentation 角色的 table 元素,其 caption 元素的隐式原生语义将被移除,因为标题仅仅是该展示型表格的标签。

presentation 角色应用于图像时,作者 不应 提供有意义的替代文本(例如,在 HTML 中使用 alt="")。

在以下代码示例中,包含的 img 由 caption 段落适当地标注。在此示例中,img 元素可以被标记为 presentation,因为其角色和文本替代是由包含它的元素提供的。

<div role="img" aria-labelledby="caption">
  <img src="example.png" role="presentation" alt="">
  <p id="caption">A visible text caption labeling the image.</p>
</div>

在以下代码示例中,因为锚点(HTML a 元素)充当树项,所以列表项(HTML li 元素)被分配了一个显式的 WAI-ARIA presentation 角色,以覆盖用户代理对列表项的隐式原生语义。

<ul role="tree">
  <li role="presentation">
	<a role="treeitem" aria-expanded="true">An expanded tree node</a>
  </li></ul>

展示性角色冲突解决

展示性角色冲突有多种解决方法。

用户代理 不得 在辅助功能树中暴露具有显式或继承的展示性角色的 元素,以下情况除外:

  • 如果元素是可聚焦的或以其他方式具有交互性,用户代理 必须 忽略 presentation 角色,并暴露该元素的隐式角色,以确保元素是 可操作的
  • 如果一个 必需的从属元素 具有显式的非展示性角色,用户代理 必须 忽略继承的展示性角色,并以其显式角色暴露该元素。如果暴露显式角色的操作导致辅助功能树格式错误,其预期结果未定义。
  • 如果元素具有全局 WAI-ARIA 状态或属性,用户代理 必须 忽略 presentation 角色,并以其隐式角色暴露该元素。然而,如果元素仅具有非全局、特定于角色的 WAI-ARIA 状态或属性,则 不得 暴露该元素,除非该展示性角色是继承的且应用了显式的非展示性角色。

例如,aria-describedby 是一个全局属性,将始终被应用;aria-level 不是全局属性,因此仅当元素不处于展示状态时才会被应用。

<!-- 1. [role="presentation"] is ignored due to the global aria-describedby property. -->
<h1 role="presentation" aria-describedby="comment-1"> Sample Content </h1>
<!-- 2. [role="presentation"] negates both the implicit 'heading' and the non-global aria-level. -->
<h1 role="presentation" aria-level="2"> Sample Content </h1>
特征
特征
超类角色 structure
继承的状态和属性
禁止的状态和属性
名称来源 prohibited

progressbar 角色

一种显示耗时任务进度状态的 元素

进度条指示用户的请求已被接收,并且应用程序正在朝着完成请求的操作取得进展。

作者 可以 设置 aria-valueminaria-valuemax 来指示进度指示器的最小值和最大值。否则,它们的隐式值遵循 [HTML] 中 <input[type="range"]> 的相同规则。

  • 如果 aria-valuemin 缺失或不是一个 数字,则默认为 0(零)。
  • 如果 aria-valuemax 缺失或不是一个 数字,则默认为 100。

作者 aria-valuenow 提供一个 ,除非该值是不确定的,在这种情况下作者 省略 aria-valuenow 属性。作者 在视觉进度指示器更新时更新此值。如果 progressbar 正在描述页面特定区域的加载进度,作者 使用 aria-describedby 指向状态,并在该区域完成加载前将 aria-busy 属性设置为 true。用户无法更改 progressbar 的值,因为它始终是只读的。

辅助技术通常会将 aria-valuenow 的值渲染为 aria-valueminaria-valuemax 值之间范围的百分比,除非指定了 aria-valuetext

特征
特征
超类角色
相关概念
继承的状态和属性
名称来源 author
需要可访问名称 True
子元素为表现层 True
角色的隐式值 aria-valuemin 的默认值为 0
aria-valuemax 的默认值为 100

radio 角色

一组具有相同角色元素中的一个可勾选输入,其中一次只能勾选一个。

作者 确保具有 radio 角色的 元素 被显式分组,以便指示哪些元素影响同一个值。这可以通过将单选按钮元素包含在具有 radiogroup 角色的元素中来实现。如果无法使单选按钮成为 radiogroupDOM 子元素,作者 radiogroup 元素上使用 aria-owns 属性 来指示与其子元素之间的 关系

特征
特征
超类角色
相关概念
必需的状态和属性
支持的状态和属性
继承的状态和属性
名称来源
  • 内容
  • author
需要可访问名称 True
子元素为表现层 True

radiogroup 角色

一组 radio 按钮。

radiogroup 是一种 select 列表,同一时间只能选中一个条目。作者 强制同一组中只有一个单选按钮可以同时被选中。当组中的一个项目被选中时,之前选中的项目变为未选中(其 aria-checked 属性 变为 false)。

特征
特征
超类角色 select
相关概念 list
必需的所属元素 radio
支持的状态和属性
继承的状态和属性
名称来源 author
需要可访问名称 True

range 角色

表示一系列值的元素。

range 是用于本体论的抽象角色。作者不应在内容中使用此角色。

特征
特征
是抽象角色 True
超类角色 structure
子类角色
支持的状态和属性
继承的状态和属性
名称来源 author

region 角色

一个包含与特定、作者指定的目的相关且足够重要,以至于用户很可能希望能够轻松导航到该部分并将其列在页面摘要中的内容的landmark区域。此类页面摘要可以由用户代理或辅助技术动态生成。

作者 将 region 角色的使用限制在包含的内容具有无法被其他 landmark 角色(例如 maincomplementarynavigation)准确描述的目的的部分。

作者 必须 为每个具有 region 角色的元素提供一个描述区域内容目的的简短标签。如果存在可见标签,作者 使用 aria-labelledby 引用该可见标签。作者 尽可能将标签包含在标题内。标题 可以 是标准宿主语言标题元素的实例,或者是具有 heading 角色的元素的实例。

辅助技术 使用户能够快速导航到具有 region 角色的元素。主流 用户代理 可以 使用户能够快速导航到具有 region 角色的元素。

特征
特征
超类角色 landmark
相关概念
继承的状态和属性
名称来源 author
需要可访问名称 True

roletype 角色

所有其他角色都从中继承的基础 角色

此角色的属性描述了分配有此角色的 对象 的结构和功能目的。角色是一个可以用来理解和操作实例的概念。

roletype 是用于本体论的抽象角色。作者不应在内容中使用此角色。

特征
特征
是抽象角色 True
子类角色
支持的状态和属性
名称来源
  • 不可用

row 角色

表格容器中的行。

行包含 cellgridcell 元素,因此用于组织 tablegridtreegrid

虽然 row 角色可用于 tablegridtreegrid,但 aria-expandedaria-posinsetaria-setsizearia-level 的语义仅适用于交互式树格的层级结构。因此,作者 不得aria-expandedaria-posinsetaria-setsizearia-level 应用于源自 tablegridrow,并且用户代理 不应 向辅助技术暴露这四个属性中的任何一个,除非该 row 源自 treegrid

作者 必须 确保具有 角色 row元素 被包含在具有 tablegridrowgrouptreegrid 角色的元素中或由其 拥有

: aria-disabled 的使用

虽然 aria-disabled 目前在 row 上受支持,但在未来版本中,工作组计划禁止在具有 row 角色的元素上使用它,除非该元素处于 gridtreegrid 的上下文中。

特征
特征
超类角色
基础概念 <tr> 在 [HTML] 中
必需的上下文角色
必需的所属元素
支持的状态和属性
继承的状态和属性
名称来源
  • 内容
  • author

rowgroup 角色

表格容器中包含一个或多个行元素的结构。

rowgroup 角色在 拥有row 元素之间建立了 关系。它在结构上等同于 HTML table 元素 中的 theadtfoottbody 元素。

作者 必须 确保具有 角色 rowgroup元素 被包含在具有 gridtabletreegrid 角色的元素中或由其 拥有

rowgroup 角色的存在部分是为了支持 HTML 中的角色对称性,并允许在应用了显式 presentation 角色的 HTML table 元素上进行展示继承的传播。

此角色不区分行组的类型(例如 theadtbody),但已为 WAI-ARIA 2.0 提出了一个问题。

特征
特征
超类角色 structure
基础概念 <tbody><tfoot><thead> 在 [HTML] 中
必需的上下文角色
必需的所属元素 row
继承的状态和属性
名称来源 author

rowheader 角色

一个包含行标题信息的单元格。

rowheader 角色可用于标识单元格作为 tablegridtreegrid 中行的标题。rowheader 在其自身与相应行中的所有单元格之间建立 关系。它在结构上等同于在 HTML th 元素 上设置 scope="row"

作者 必须 确保具有 角色 rowheader元素 被包含在具有 row 角色的元素中或由其 拥有

在 rowheader 上应用 aria-selected 状态 不得 导致用户代理自动将 aria-selected 状态传播到相应行中的所有单元格。根据具体应用程序,作者 可以 选择以这种方式传播选择状态。

虽然 rowheader 角色可用于交互式网格和非交互式表格,但 aria-expandedaria-readonlyaria-required 的使用仅适用于交互式元素。因此,作者 不应 在源自 tablerowheader 中使用 aria-expandedaria-readonlyaria-required,并且用户代理 不应辅助技术 暴露这些属性,除非该 rowheader 源自 gridtreegrid

: aria-disabled 的使用

虽然 aria-disabled 目前在 rowheader 上受支持,但在未来版本中,工作组计划禁止在具有 rowheader 角色的元素上使用它,除非该元素处于 gridtreegrid 的上下文中。

特征
特征
超类角色
基础概念 <th[scope="row"]> 在 [HTML] 中
必需的上下文角色 row
支持的状态和属性
继承的状态和属性
名称来源
  • 内容
  • author
需要可访问名称 True

scrollbar 角色

一种控制视图区域内内容滚动的图形对象,无论内容是否已完全显示在视图区域内。

滚动条通过滚动条的大小和滑块相对于其控制的方向(水平或垂直)可见范围的位置,来表示当前值和可能值的范围。其方向表示滚动条的方向以及对滚动条控制的查看区域的滚动效果。通常可以通过使用方向键(如箭头键)来增加或减少当前值。

作者 必须 在 scrollbar 元素上设置 aria-controls 属性,以引用其控制的可滚动区域。

作者 可以 设置 aria-valueminaria-valuemax 来指示最小和最大滑块位置。否则,它们的隐式值遵循 [HTML] 中 <input[type="range"]> 的相同规则。

  • 如果 aria-valuemin 缺失或不是一个 数字,则默认为 0(零)。
  • 如果 aria-valuemax 缺失或不是一个 数字,则默认为 100。

作者 必须 设置 aria-valuenow 属性来指示当前滑块位置。如果 aria-valuenow 缺失或具有意外值,浏览器 可以 实现 描述处理作者错误状态和属性的章节 中指定的修复技术,这些技术等同于 [HTML] 中 <input[type="range"]> 的修复技术。

具有 scrollbar 角色的元素具有 vertical 的隐式 aria-orientation 值。

辅助技术通常会将 aria-valuenow 的值渲染为 aria-valueminaria-valuemax 值之间范围的百分比,除非指定了 aria-valuetext。最好以适合此计算的方式设置 aria-valueminaria-valuemaxaria-valuenow 的值。

特征
特征
超类角色
必需的状态和属性
支持的状态和属性
继承的状态和属性
名称来源 author
需要可访问名称 False (假)
子元素为表现层 True
角色的隐式值 aria-orientation 的默认值为 vertical
aria-valuemin 的默认值为 0
aria-valuemax 的默认值为 100

section 角色

文档或应用程序中的一个可渲染结构包含单元。

section 是用于本体论的抽象角色。作者不应在内容中使用此角色。

特征
特征
是抽象角色 True
超类角色 structure
子类角色
继承的状态和属性
名称来源 不可用

sectionhead 角色

一种标注或总结其相关部分主题的结构。

sectionhead 是用于本体论的抽象角色。作者不应在内容中使用此角色。

特征
特征
是抽象角色 True
超类角色 structure
子类角色
继承的状态和属性
名称来源
  • 内容
  • author

select 角色

一种表单小部件,允许用户从一组选项中进行选择。

select 是用于本体论的抽象角色。作者不应在内容中使用此角色。

特征
特征
是抽象角色 True
超类角色
子类角色
支持的状态和属性 aria-orientation
继承的状态和属性
名称来源 author

separator 角色

一种分隔并区分内容部分或菜单项组的分隔符。

有两种类型的分隔符:仅提供可见边界的静态 structure,以及可聚焦、可交互且可移动的 widget。如果 separator 不可聚焦,它会作为静态结构元素向 辅助技术 呈现。例如,静态 separator 可用于在视觉上划分菜单中的两组菜单项,或在页面的两个部分之间提供水平线。

作者 可以 使 separator 可聚焦,以创建一个既能提供两个内容部分之间的可见边界,又能通过改变 separator 位置来改变部分相对大小的 widget。可变 separator 小部件可以在范围内连续移动,而固定 separator 小部件仅支持两个离散位置。通常,固定 separator 小部件用于在展开和折叠状态之间切换其中一个部分。

如果 separator 是可聚焦的,作者 必须aria-valuenow 的值设置为反映 separator 当前位置的 数字,并在其变化时更新该值。如果 aria-valuemin 不为 0,作者 提供其值;如果 aria-valuemax 不为 100,作者 提供其值。如果缺失或不是数字,这些属性的隐式值如下

  • aria-valuemin 的隐式值为 0
  • aria-valuemax 的隐式值为 100

在有多个可聚焦 separator 的应用程序中,作者 为每一个提供可访问名称。

具有 separator 角色的元素具有 horizontal 的隐式 aria-orientation 值。

特征
特征
超类角色
相关概念
必需的状态和属性 aria-valuenow(如果可聚焦)
支持的状态和属性
继承的状态和属性
名称来源 author
子元素为表现层 True
角色的隐式值 aria-orientation 的默认值为 horizontalaria-valuemin 的默认值为 0
aria-valuemax 的默认值为 100

slider 角色

一种用户从给定范围内选择值的输入。

滑块(slider)通过滑块的大小和滑块按钮(thumb)的位置来表示当前值和可能的取值范围。通常可以通过使用方向键(如箭头键)来增加或减少数值。

作者 可以 设置 aria-valueminaria-valuemax 属性。否则,它们的隐式值遵循 [HTML] 中 <input[type="range"]> 的相同规则。

  • 如果 aria-valuemin 缺失或不是一个 数字,则默认为 0(零)。
  • 如果 aria-valuemax 缺失或不是一个 数字,则默认为 100。

作者 必须 设置 aria-valuenow 属性。如果 aria-valuenow 缺失或具有意外值,浏览器 可以 实现 描述处理作者错误状态和属性的章节 中指定的修复技术,这些技术等同于 [HTML] 中 <input[type="range"]> 的修复技术。

具有 slider 角色的元素具有 horizontal 的隐式 aria-orientation 值。

特征
特征
超类角色
必需的状态和属性
支持的状态和属性
继承的状态和属性
名称来源 author
需要可访问名称 True
子元素为表现层 True
角色的隐式值 aria-orientation 的默认值为 horizontalaria-valuemin 的默认值为 0
aria-valuemax 的默认值为 100

spinbutton 角色

一种range形式,要求用户从离散选项中进行选择。

spinbutton 通常允许用户通过激活递增和递减按钮来更改其显示的数值,这些按钮可以在一组允许的数值中步进。一些实现将数值显示在允许编辑和输入的文本字段中,但这通常会限制输入以帮助防止无效值。

虽然 spinbutton 在外观上与许多 select 的呈现方式相似,但建议在处理已知范围(特别是大范围的情况)时使用 spinbutton,而不是使用不同的选项。例如,表示从 1 到 1,000,000 的范围的 spinbutton 将比表示相同值的 select 小部件 提供更好的性能。

作者 可以 创建带有子元素或从属元素的 spinbutton,但 必须 将这些元素限制为 textbox 和/或两个 buttons。或者,作者 可以spinbutton 角色应用于文本输入,并创建同级按钮以支持递增和递减功能。

为了实现 键盘可访问性,作者 管理焦点 中所述,管理此 角色 所有实例的后代焦点。当 spinbutton 获得焦点时,作者 确保焦点置于 textbox 元素(如果存在)上,否则置于 spinbutton 本身。作者 确保键盘上的 向上向下 箭头执行递增和递减功能,并且递增和递减 button 元素 *不* 包含在主要导航环中(例如 HTML 中的 Tab 环)。

spinbutton 有值时,作者 设置 aria-valuenow 属性。当有最小值时,作者 设置 aria-valuemin 属性;当有最大值时,作者 设置 aria-valuemax 属性。

特征
特征
超类角色
支持的状态和属性
继承的状态和属性
名称来源 author
需要可访问名称 True
角色的隐式值 aria-valuemin 的默认值是没有最小值。
aria-valuemax 的默认值是没有最大值。
aria-valuenow 的默认值为 0

status 角色

一种 实时区域,其内容是用户的建议性信息,但重要性不足以证明使用 alert,通常但不一定呈现为状态栏。

作者 确保具有 status 角色的元素不会因状态更改而获得焦点。

Status 是一种 实时区域。如果页面的其他部分控制状态中显示的内容,作者 使用 aria-controls 属性 使该 关系 明确。

辅助技术 可以 保留盲文显示器的一些单元格来渲染状态。

具有 status 角色的元素具有 polite 的隐式 aria-live 值和 true 的隐式 aria-atomic 值。

特征
特征
超类角色 section
子类角色
继承的状态和属性
名称来源 author
角色的隐式值 aria-live 的默认值为 polite
aria-atomic 的默认值为 true

strong 角色

重要、严肃或紧急的内容。请参阅相关 emphasis

strong 角色的目的是传达强烈的重要性、严肃性或紧迫性。它不是为了传达对内容含义不重要的排版呈现变化。作者 仅在缺少它会改变内容含义时才使用 strong 角色。

strong 角色无意传达压力或强调;为此,emphasis 角色更合适。

特征
特征
超类角色 section
相关概念
继承的状态和属性
禁止的状态和属性
名称来源 prohibited

structure 角色

文档结构 元素

用于文档结构的角色通过帮助 辅助技术 区分活动内容与静态文档内容,支持动态 Web 内容的可访问性。结构性角色本身并不都映射到 辅助功能 API,但可用于创建 小部件 角色或辅助面向辅助技术的内容适配。

structure 是用于本体论的抽象角色。作者不应在内容中使用此角色。

特征
特征
是抽象角色 True
超类角色 roletype
子类角色
继承的状态和属性
名称来源
  • 不可用

subscript 角色

一个或多个下标字符。请参阅相关 superscript

subscript 角色旨在仅用于标记具有特定含义的排版约定;而非为了呈现而进行排版。通常,作者 仅在缺少下标会改变内容含义时才使用此角色。

特征
特征
超类角色 section
相关概念
继承的状态和属性
禁止的状态和属性
名称来源 prohibited

superscript 角色

一个或多个上标字符。请参阅相关 superscript

superscript 角色旨在仅用于标记具有特定含义的排版约定;而非为了呈现而进行排版。通常,作者 仅在缺少上标会改变内容含义时才使用此角色。

特征
特征
超类角色 section
相关概念
继承的状态和属性
禁止的状态和属性
名称来源 prohibited

switch 角色

一种表示开/关值的复选框类型,与选中/未选中值相对。请参阅相关 checkbox

switcharia-checked 属性 指示输入是开启(true)还是关闭(false)。mixed 值是无效的,用户代理 必须 将此角色的 mixed 值视为等同于 false

switch 提供与 checkbox 和切换 button 大致相同的功能,但使得辅助技术能够以与其屏幕显示一致的方式呈现小部件成为可能。

特征
特征
超类角色 复选框
相关概念
必需的状态和属性
继承的状态和属性
名称来源
  • 内容
  • author
需要可访问名称 True
子元素为表现层 True

tab 角色

提供用于选择要呈现给用户的选项卡内容机制的分组标签。

如果 tabpaneltabpanel 中的项目获得焦点,则关联的 tabtablist 中当前活动的选项卡,如 管理焦点 中所定义。tablist 元素包含一组相关的 tab 元素,通常放置在系列 tabpanel 元素附近,通常位于其前面。有关实现选项卡集设计模式的详细信息,请参阅 WAI-ARIA 创作实践

作者 必须 确保具有 tab 角色元素 被包含在具有 tablist 角色的元素中或由其 拥有

作者 确保与当前活动选项卡关联的 tabpanel 对用户是 可感知的

对于单选 tablist,作者 对用户隐藏其他 tabpanel 元素,直到用户选择与该 tabpanel 关联的选项卡。对于多选 tablist,作者 确保每个可见 tabpaneltabaria-expanded 属性 设置为 true,并将与其余隐藏 tabpanel 元素关联的 tabsaria-expanded 属性设置为 false

无论哪种情况,作者 确保选定的选项卡将其 aria-selected 属性设置为 true,不活动的选项卡元素将其 aria-selected 属性设置为 false,并且当前选定的选项卡提供它是选定状态的视觉指示。如果当前选项卡上缺少 aria-selected 属性,用户代理 通过平台 辅助功能 API辅助技术 指示当前聚焦的选项卡已被选中。

特征
特征
超类角色
必需的上下文角色 tablist
支持的状态和属性
继承的状态和属性
名称来源
  • 内容
  • author
子元素为表现层 True
角色的隐式值 aria-selected 的默认值为 false

table 角色

一个包含排列成行和列的数据的section。请参阅相关 grid

table 角色旨在用于非交互式的表格容器。如果表格容器维持选择状态、提供其自身的二维导航,或允许用户重新排列或以其他方式操纵其内容或显示方式,作者 改用 gridtreegrid

作者 尽可能优先使用宿主语言的表格语义,例如 [HTML] 中的 <table> 元素。

特征
特征
超类角色 section
子类角色
基础概念 [HTML] 中的 <table>
必需的所属元素
支持的状态和属性
继承的状态和属性
名称来源 author
需要可访问名称 True

tablist 角色

tab 元素 列表,这些元素是对 tabpanel 元素的引用。

为了实现 键盘可访问性,作者 管理焦点 中所述,管理此 角色 所有实例的后代焦点。

对于单选 tablist,作者 对用户隐藏其他 tabpanel 元素,直到用户选择与该 tabpanel 关联的选项卡。对于多选 tablist,作者 确保每个可见 tabpanel 将其 aria-expanded 属性 设置为 true,并将其余隐藏的 tabpanel 元素的 aria-expanded 属性设置为 false

tablist 元素通常放置在系列 tabpanel 元素附近,通常位于其前面。有关实现选项卡集设计模式的详细信息,请参阅 WAI-ARIA 创作实践

具有 tablist 角色的元素具有 horizontal 的隐式 aria-orientation 值。

特征
特征
超类角色
必需的所属元素 tab
支持的状态和属性
继承的状态和属性
名称来源 author
角色的隐式值 aria-orientation 的默认值为 horizontal

tabpanel 角色

一个与 tab 关联的资源容器,其中每个 tab 都包含在 tablist 中。

作者 tabpanel 元素 与其 tab 关联,方法是在选项卡上使用 aria-controls 属性引用选项卡面板,或者在选项卡面板上使用 aria-labelledby 属性引用选项卡。

tablist 元素通常放置在附近,通常在系列 tabpanel 元素的前面。有关实现选项卡集设计模式的详细信息,请参阅 WAI-ARIA 创作实践

特征
特征
超类角色 section
继承的状态和属性
名称来源 author
需要可访问名称 True

term 角色

一个带有相应定义的词或短语。请参阅相关 definition

term 角色用于显式标识作者已提供 definition 或预期由用户提供的词或短语。

作者 不应 在链接等交互式元素上使用 term 角色,因为这样做可能会阻止 辅助技术 的用户与这些元素进行交互。

特征
特征
超类角色 section
相关概念
继承的状态和属性
名称来源 author

textbox 角色

一种允许自由文本作为其值的输入类型。

如果 aria-multiline 属性true,则 小部件 接受输入内的换行符,就像在 HTML textarea 中一样。否则,这是一个简单的文本框。其预期用途是针对没有文本输入 元素 的语言,或将具有不同 语义 的元素重构为文本字段的情况。

在大多数用户代理实现中,ENTERRETURN 键的默认行为在 HTML 中的单行和多行文本字段之间是不同的。当用户在单行 <input type="text"> 元素中获得焦点时,按键通常会提交表单。当用户在多行 <textarea> 元素中获得焦点时,按键会插入换行符。WAI-ARIA textbox 角色通过 aria-multiline 属性区分这些类型的框,因此建议作者在设计字段时注意这种区别。

特征
特征
超类角色 input (输入)
子类角色
相关概念
支持的状态和属性
继承的状态和属性
名称来源 author
需要可访问名称 True

time 角色

表示特定时间点的元素。

目前,没有支持 [HTML] 中 <time>datetime 属性的 WAI-ARIA 属性。ARIA 1.3 版本将考虑添加此属性。

作者 将文本内容限制为有效的日期或时间相关字符串,或将此未来的 datetime 等效属性应用于具有 time 角色的元素。

作为具有 time 角色的元素文本内容的有效日期或时间相关字符串示例

  • 有效的月份字符串:2019-11
  • 有效的日期字符串:2019-11-18
  • 有效的无年份日期字符串:11-18
  • 有效的时间字符串:09:54:39
  • 有效的浮动日期和时间字符串:2019-11-18T14:54
  • 有效的时区偏移字符串:-08:00
  • 有效的全局日期和时间字符串:2019-11-18T14:54Z
  • 有效的周字符串:2019-W47
  • 四个或更多 ASCII 数字,其中至少有一个不是 U+0030 数字零 (0):0001
  • 有效的持续时间字符串:4h 18m 3s
特征
特征
超类角色 section
相关概念
继承的状态和属性
名称来源 author

timer 角色

一种 实时区域,包含一个数值计数器,指示从起点开始的经过时间,或距离终点的时间。

timer 对象 的文本内容指示当前的时间测量值,并随该数值的变化而更新。定时器值不一定是可以被机器解析的,但作者 以固定的时间间隔更新文本内容,除非定时器暂停或到达终点。

具有 timer 角色的元素具有 off 的隐式 aria-live 值。

特征
特征
超类角色 status
继承的状态和属性
名称来源 author

toolbar 角色

以紧凑视觉形式表示的常用功能按钮或控件集合。

工具栏通常是 menubar 中找到的功能的子集,旨在减少用户使用这些功能的努力。当应用程序包含多个工具栏时,作者 必须 为每个工具栏提供标签。

作者 可以管理焦点 中所述,管理此 角色 所有实例的后代焦点。

具有 toolbar 角色的元素具有 horizontal 的隐式 aria-orientation 值。

特征
特征
超类角色
相关概念
支持的状态和属性 aria-orientation
继承的状态和属性
名称来源 author
角色的隐式值 aria-orientation 的默认值为 horizontal

tooltip 角色

显示元素描述的上下文弹出窗口。

tooltip 通常在鼠标悬停响应后,或在拥有元素获得键盘焦点后,经过短暂的延迟变得可见。WAI-ARIA 工具提示的使用是对用户代理正常工具提示行为的补充。

典型的工具提示延迟持续一到五秒。

作者 确保具有 tooltip 角色 的元素在工具提示显示之前或显示时通过使用 aria-describedby 被引用。

特征
特征
超类角色 section
继承的状态和属性
名称来源
  • 内容
  • author
需要可访问名称 True

tree 角色

一个允许用户从分层组织的集合中选择一个或多个项目的widget

为了实现 键盘可访问性,作者 管理焦点 中所述,管理此 角色 所有实例的后代焦点。

具有 tree 角色的元素具有 vertical 的隐式 aria-orientation 值。

特征
特征
超类角色 select
子类角色
必需的所属元素
支持的状态和属性
继承的状态和属性
名称来源 author
需要可访问名称 True
角色的隐式值 aria-orientation 的默认值为 vertical

treegrid 角色

一个行可以像 tree 一样展开和折叠的 grid

如果 aria-readonly 被设置在具有 角色 treegrid元素 上,用户代理 必须 将该值传播给 treegrid 拥有的所有 gridcell 元素,并在辅助功能 API 中暴露该值。作者 可以 为单个 gridcell 元素覆盖 aria-readonly 的传播值。

aria-readonly 属性应用于可聚焦的 gridcell 时,它指示 gridcell 中包含的内容是否可编辑。aria-readonly 属性不代表导航或操纵 treegrid 本身的功能的可用性。

在提供内容编辑功能的 treegrid 中,如果可聚焦的 gridcell 元素的内容不可编辑,作者 可以gridcell 元素上将 aria-readonly 设置为 true。但是,如果 treegrid 呈现了一组不支持 aria-readonly 的元素(例如一组 link 元素),则作者不需要为 aria-readonly 指定值。

为了实现 键盘可访问性,作者 管理焦点 中所述,管理此 角色 所有实例的后代焦点。

特征
特征
超类角色
必需的所属元素
继承的状态和属性
名称来源 author
需要可访问名称 True

treeitem 角色

tree 的选项项目。这是一个树中的 元素,如果它包含树项元素的子级组,则可以展开或折叠。

要展开和折叠的 treeitem 元素集合包含在具有 group 角色 的元素中。

作者 必须 确保具有 角色 treeitem元素 被包含在具有 grouptree 角色的元素中或由其 拥有

特征
特征
超类角色
必需的上下文角色
支持的状态和属性
继承的状态和属性
名称来源
  • 内容
  • author
需要可访问名称 True

widget 角色

图形用户界面 (GUI) 的交互式组件。

小部件是用户可以与之交互的离散用户界面对象。小部件 角色 映射到 辅助功能 API 中的标准功能。当用户导航到分配了任何非抽象 widget 子类角色的元素时,通常会拦截标准键盘事件的 辅助技术 切换到应用程序浏览模式,并将键盘事件传递给 Web 应用程序。其意图是提示某些 辅助技术 从常规浏览模式切换到更适合与 Web 应用程序交互的模式;一些 用户代理 具有一种浏览导航模式,其中按键(例如向上和向下箭头)用于浏览文档,这种原生行为会阻止 Web 应用程序使用这些按键。

widget 是用于本体论的抽象角色。作者不应在内容中使用此角色。

特征
特征
是抽象角色 True
超类角色 roletype
子类角色
继承的状态和属性
名称来源
  • 不可用

window 角色

浏览器或应用程序窗口。

具有此 角色元素 在图形用户界面(GUI)上下文中具有窗口状行为,无论它们是作为操作系统中的原生窗口实现,还是仅仅作为样式设置为看起来像窗口的文档部分。

在此角色的描述中,“应用程序”一词不指代 application 角色,后者指定特定的辅助技术行为。

window 是用于本体论的抽象角色。作者不应在内容中使用此角色。

特征
特征
是抽象角色 True
超类角色 roletype
子类角色
支持的状态和属性 aria-modal
继承的状态和属性
名称来源 author

6. 支持的状态与属性

6.1 状态与属性的澄清

术语“状态”和“属性”指代相似的特性。两者都提供有关 对象 的特定信息,并且两者都构成了 角色 定义的一部分。在本文档中,状态和属性都被视为以 aria 为前缀的标记 属性。然而,它们在概念上被保持为不同的,以阐明其含义中细微的差别。一个主要区别是属性(如 aria-labelledby)的 在整个应用程序生命周期中变化的概率通常比状态(如 aria-checked)的值低,因为状态的值可能因用户交互而频繁变化。请注意,变化频率的区别并不是规则;少数属性(例如 aria-valuetext)预期会频繁变化。由于状态和属性之间的区别对大多数 Web 内容作者来说意义不大,本规范尽可能将“状态”和“属性”统称为“属性”。有关更多信息,请参阅 状态属性 的定义。

6.2 状态与属性的特征

状态和属性具有以下各节中描述的特征。

关于此语言或其他语言中对应于此 状态属性 的特性的建议信息。虽然对应关系可能不完全相同,但它有助于理解该状态或属性的目的。

6.2.2 用于角色中

关于使用此 状态属性角色 的建议信息。提供此信息是为了帮助理解该状态或属性的适当用法。当在列出角色之外的角色上使用给定状态或属性时,其使用未定义。

6.2.3 继承到角色中

关于从祖先角色继承该 状态属性角色 的建议信息。

6.2.4

状态属性 的值类型。值可以是以下类型之一

true/false
表示 truefalse 的值。除非另有说明,此值类型的默认值为 false
tristate
表示 truefalsemixedundefined 值的值。除非另有说明,此值类型的默认值为 undefined
true/false/undefined
表示 truefalseundefined(不适用)的值。除非另有说明,此值类型的默认值为 undefined。例如,将 aria-expanded 设置为 false 的元素当前未展开;将 aria-expanded 设置为 undefined 的元素不可展开。
ID 引用
对同一文档中另一个 元素 ID 的引用
ID 引用列表
一个或多个 ID 引用的列表。
integer
没有小数部分的数值。
number
任何实数值。
string
无约束值类型。
token
有限允许值集合中的一个。默认值在每个属性的值表中定义,如 属性值 章节中所述。
标记列表
一个或多个标记的列表。

这些是状态和属性的通用类型,但没有定义具体的表示。有关这些值如何在宿主语言中表达和处理的详细信息,请参阅状态和属性属性处理

6.3 ARIA 属性

6.3.1 多值属性

当 ARIA 属性定义包含列出该属性允许 的表时,该属性是一个多值可空属性。表中的每个值都是该属性的一个关键字,映射到同名的状态。

6.3.2 ARIA 属性的 IDL 反射

所有 ARIA 属性在 IDL 中反映为 可空 DOMString 属性。这包括类布尔型的 true/false 类型以及所有其他 ARIA 属性。

来自 ARIA 值表的默认值 不得 作为属性的 缺失值默认无效值默认 反映到 IDL。在获取时,缺失的 ARIA 属性将返回 null。ARIA 属性在获取时不会被验证。如果 ARIA 值无效,在获取时,它将返回其设定的字面字符串值,并且不会返回无效值默认。

6.3.3 多值 ARIA 属性的操作系统无障碍 API 映射

与 IDL 反映不同,ARIA 属性的操作系统辅助功能 API 映射可以有默认值。来自 ARIA 值表的任何默认值都会按照 5.2.3 支持的状态和属性 以及 核心辅助功能 API 映射 1.1 中的描述,暴露给操作系统辅助功能 API

6.3.4 ARIA 可为空 DOMString 属性

正如 A. WAI-ARIA 值类型映射到语言 中所述,属性包含在宿主语言中,而 WAI-ARIA 类型表示的语法受宿主语言管理。

以下算法应用于 HTML 中 ARIA 可空 DOMString 属性

在获取时,如果对应的内容属性不存在,则 IDL 属性必须返回 null,否则,IDL 属性必须以透明、保留大小写的方式获取该值。在设置时,如果新值为 null,则必须移除内容属性,否则,必须以透明、保留大小写的方式将内容属性设置为指定的新值。

注意:截至 ARIA 1.2,所有通过 IDL 暴露的 ARIA 属性都被定义为可空 DOMStrings。这与所有主要渲染引擎的当前实现相匹配。此规范更改不应导致实现发生变化;它仅代表了 Web 引擎的当前现实。然而,在未来的草案中,ARIA 工作组打算将几个 ARIA 属性更改为不可空的 DOMStrings,并寻求实现。拟议的更改将使 ARIA 与 HTML枚举属性 的使用保持一致。

6.3.4.1 属性使用示例

本节是非规范性的。

6.4 可翻译的状态与属性

HTML 规范指出其他规范可以定义 可翻译属性。为了让辅助技术用户能够理解,以下 状态属性 的值是 可翻译属性,并且在页面进行本地化时应该进行翻译。

6.5 全局状态与属性

一些 状态属性 适用于所有宿主语言 元素,无论是否应用了 角色。除非另有禁止,否则所有角色和所有基础标记元素都支持以下全局状态和属性。如果某个角色禁止使用任何全局状态或属性,则这些状态或属性会在定义该角色的章节中包含的特性表中列为禁止。

6.6 WAI-ARIA 状态与属性分类法

状态和属性分类如下

  1. 小部件属性
  2. 活动区域属性
  3. 拖放属性
  4. 关系属性

6.6.1 小部件属性

本节包含特定于 GUI 系统或富互联网应用中常见的、接收用户输入并处理用户操作的用户界面 元素属性。这些属性用于支持 小部件角色

控件属性可能会由用户代理映射到平台无障碍 API 状态,以供辅助技术访问,或者也可以直接从 DOM 中访问。用户代理必须提供一种方式,以便在状态发生变化时通知辅助技术,这可以通过 DOM 属性变更事件或平台无障碍 API 事件来实现。

6.6.2 实时区域属性

本节包含富互联网应用中动态区域专用的属性。这些属性可以应用于任何元素。这些属性的目的是指出即使在元素未获得焦点的情况下内容也可能发生变化,并为辅助技术提供有关如何处理这些内容更新的信息。某些角色为该角色特定的 aria-live 属性指定了默认值。动态区域的一个例子是列出正在更新的股票行情的行情报价栏。

6.6.3 拖放属性

本节列出了指示拖放界面元素相关信息的属性,例如可拖拽元素及其放置目标。放置目标信息将由作者进行视觉呈现,并通过替代模态提供给辅助技术

6.6.4 关系属性

本节列出了指示文档结构中无法轻易确定的元素之间关系或关联的属性

6.7 状态与属性的定义(所有 aria-* 属性)

以下是供富互联网应用作者使用的 WAI-ARIA 状态属性的字母顺序列表。此简表之后是对每个 WAI-ARIA 状态和属性的详细定义。

aria-activedescendant
DOM 焦点位于 composite 控件、comboboxtextboxgroupapplication 上时,标识当前活动的元素。
aria-atomic
指示辅助技术是呈现整个变化区域,还是仅根据 aria-relevant 属性定义的变更通知呈现部分区域。
aria-autocomplete
指示输入文本是否会触发针对 comboboxsearchboxtextbox 的一个或多个预期值的预测显示,并指定在生成预测时如何呈现这些预测。
aria-busy
指示一个元素正在被修改,辅助技术可能希望等到修改完成后再将其呈现给用户。
aria-checked
指示复选框、单选按钮和其他控件的当前“选中”状态。请参阅相关的 aria-pressedaria-selected
aria-colcount
定义 tablegridtreegrid 中的总列数。请参阅相关的 aria-colindex
aria-colindex
定义元素相对于 tablegridtreegrid 中总列数的列索引或位置。请参阅相关的 aria-colcountaria-colspan
aria-colspan
定义 tablegridtreegrid 内单元格或网格单元格跨越的列数。请参阅相关的 aria-colindexaria-rowspan
aria-controls
标识其内容或存在受当前元素控制的元素(或多个元素)。请参阅相关的 aria-owns
aria-current
指示代表容器或一组相关元素中当前项的元素
aria-describedby
标识描述该对象元素(或多个元素)。请参阅相关的 aria-labelledby
aria-details
标识为该对象提供详细扩展描述的元素。请参阅相关的 aria-describedby
aria-disabled
指示该元素可感知的但被禁用,因此不可编辑或无法以其他方式操作。请参阅相关的 aria-hiddenaria-readonly
aria-dropeffect
[ARIA 1.1 中已弃用] 指示当被拖拽的对象在放置目标上释放时可以执行的功能。
aria-errormessage
标识为对象提供错误消息的元素。请参阅相关的 aria-invalidaria-describedby
aria-expanded
指示由该元素拥有或控制的分组元素是展开的还是折叠的。
aria-flowto
标识内容交替阅读顺序中的下一个元素(或多个元素),这允许辅助技术根据用户的判断覆盖按文档源顺序阅读的一般默认设置。
aria-grabbed
[ARIA 1.1 中已弃用] 指示拖放操作中元素的“被抓取”状态
aria-haspopup
指示可由元素触发的交互式弹出元素(如菜单或对话框)的可用性和类型。
aria-hidden
指示该元素是否暴露给无障碍 API。请参阅相关的 aria-disabled
aria-invalid
指示输入的数值不符合应用程序预期的格式。请参阅相关的 aria-errormessage
aria-keyshortcuts
指示作者为激活元素或使元素获得焦点而实现的键盘快捷键。
aria-label
定义标记当前元素的字符串值。请参阅相关的 aria-labelledby
aria-labelledby
标识标记当前元素的元素(或多个元素)。请参阅相关的 aria-describedby
aria-level
定义结构中元素的层级级别。
aria-live
指示元素将会更新,并描述用户代理辅助技术以及用户可以从该动态区域预期的更新类型。
aria-modal
指示元素在显示时是否为模态。
aria-multiline
指示文本框是接受多行输入还是仅接受单行输入。
aria-multiselectable
指示用户可以从当前可选择的后代中选择多个项目。
aria-orientation
指示元素的方向是水平的、垂直的还是未知的/模棱两可的。
aria-owns
标识一个元素(或多个元素),以便在 DOM 层级结构无法用于表示关系时,定义 DOM 元素之间视觉上、功能上或上下文上的父/子关系。请参阅相关的 aria-controls
aria-placeholder
定义一个简短的提示(单词或短语),旨在当控件没有值时帮助用户进行数据输入。提示可以是示例值或预期格式的简要说明。
aria-posinset
定义元素在当前列表项或树项集合中的编号或位置。如果集合中的所有元素都存在于 DOM 中,则不需要此属性。请参阅相关的 aria-setsize
aria-pressed
指示切换按钮的当前“按下”状态。请参阅相关的 aria-checkedaria-selected
aria-readonly
指示该元素不可编辑,但可以进行其他操作。请参阅相关的 aria-disabled
aria-relevant
指示当动态区域内的无障碍树被修改时,用户代理将触发哪些通知。请参阅相关的 aria-atomic
aria-required
指示在提交表单之前是否需要在元素上进行用户输入。
aria-roledescription
元素角色定义一个人类可读的、作者本地化的描述。
aria-rowcount
定义 tablegridtreegrid 中的总行数。请参阅相关的 aria-rowindex
aria-rowindex
定义元素相对于 tablegridtreegrid 中总行数的行索引或位置。请参阅相关的 aria-rowcountaria-rowspan
aria-rowspan
定义 tablegridtreegrid 内单元格或网格单元格跨越的行数。请参阅相关的 aria-rowindexaria-colspan
aria-selected
指示各种控件的当前“选中”状态。请参阅相关的 aria-checkedaria-pressed
aria-setsize
定义当前列表项或树项集合中的项数。如果集合中的所有元素都存在于 DOM 中,则不需要此属性。请参阅相关的 aria-posinset
aria-sort
指示表格或网格中的项目是否按升序或降序排序。
aria-valuemax
定义范围控件允许的最大值。
aria-valuemin
定义范围控件允许的最小值。
aria-valuenow
定义范围控件的当前值。请参阅相关的 aria-valuetext
aria-valuetext
定义范围控件aria-valuenow 的人类可读文本替代方案。

aria-activedescendant 属性

DOM 焦点位于 composite 控件、comboboxtextboxgroupapplication 上时,标识当前活动的元素。

aria-activedescendant 属性为可能包含多个可聚焦后代的交互式元素(如菜单、网格和工具栏)提供了一种替代的焦点管理方法。作者可以在支持 aria-activedescendant 的容器元素上设置 DOM 焦点,而不是在拥有的元素之间移动 DOM 焦点,然后使用 aria-activedescendant 来引用处于活动状态的元素。

当在具有 DOM 焦点的元素上设置 aria-activedescendant 值时,作者必须确保满足以下两组条件之一

  1. aria-activedescendant 的值引用的是一个拥有的元素。拥有的元素要么是具有 DOM 焦点的元素的后代,要么是由 aria-owns 属性指示的逻辑后代。
  2. 具有 DOM 焦点的元素是一个 comboboxtextboxsearchbox,其 aria-controls 引用的是一个支持 aria-activedescendant 的元素,并且 aria-activedescendant 的值引用的是受控元素的拥有元素。例如,在 combobox 中,焦点可以保留在 combobox 上,而 combobox 元素上的 aria-activedescendant 值则引用由该 combobox 控制的弹出式 listbox 的后代。

作者还应该确保当前活动的后代在聚焦时是可见的且处于视图内(或滚动至视图内)。

特征
特征
相关概念
在角色中使用
继承至角色
ID 引用

aria-atomic 属性

指示辅助技术是呈现整个变化区域,还是仅根据 aria-relevant 属性定义的变更通知呈现部分区域。

无障碍 API文档对象模型 [DOM] 都提供了事件,以允许辅助技术确定文档中已更改的区域。

动态区域的内容发生变化时,用户代理应该检查发生变化的元素并遍历其祖先节点,找到第一个设置了 aria-atomic 的元素,并对以下情况应用适当的行为。

  1. 如果没有任何祖先节点明确设置了 aria-atomic,则默认为 aria-atomicfalse,辅助技术将仅向用户呈现更改后的节点。
  2. 如果 aria-atomic 被显式设置为 false,辅助技术将停止向上搜索祖先链,并仅向用户呈现更改后的节点。
  3. 如果 aria-atomic 被显式设置为 true,辅助技术将呈现元素的全部内容,包括作者定义的动态区域标签(如果存在)。

aria-atomictrue 时,辅助技术可以选择合并多个更改并一次性呈现整个变化区域。

特征
特征
在角色中使用 基础标记的所有元素
true/false
描述
false (默认) 辅助技术将仅呈现更改的节点或节点。
true 辅助技术将完整呈现整个更改区域,包括作者定义的标签(如果存在)。

aria-autocomplete 属性

指示输入文本是否会触发针对 comboboxsearchboxtextbox 的一个或多个预期值的预测显示,并指定在生成预测时如何呈现这些预测。

aria-autocomplete 属性描述了 textboxsearchboxcombobox 在动态帮助用户完成文本输入时所采用的交互模型。它区分了两种模型:在文本输入内呈现值补全预测的内联模型 (aria-autocomplete="inline"),以及在一个弹出在文本输入旁边的独立元素中呈现可能值集合的列表模型 (aria-autocomplete="list")。输入项可以同时提供两种模型 (aria-autocomplete="both")。

aria-autocomplete 属性仅限于描述输入元素的预测行为。如果输入元素提供的一个或多个输入建议均不依赖于用户提供的特定输入,作者应该省略 aria-autocomplete 的值或将其设置为 none。例如,aria-autocompletenone 的组合框是一个搜索字段,它通过列出 5 个最近使用的搜索词来显示建议值,而不根据用户的输入对列表进行任何过滤。角色支持 aria-autocomplete 的元素的默认 aria-autocomplete 值为 none

当用户在输入框中键入内容时提供内联建议,用于补全字段值的建议文本会动态出现在输入光标之后的字段中;如果用户执行导致焦点离开字段的操作,则建议值会被接受为输入值。当元素的 aria-autocomplete 设置为 inlineboth 时,作者应该确保自动建议的部分文本呈现为选中状态。这使得辅助技术能够区分用户的输入和自动建议,并且如果建议不是所需的值,用户可以轻松删除建议或通过继续键入来替换它。

如果元素的 aria-autocomplete 设置为 listboth,作者必须确保满足以下两个条件

  1. 该元素为 aria-controls 指定了一个值,该值引用包含建议值集合的元素。
  2. 该元素为 aria-haspopup 指定的值与包含建议值集合的元素的角色相匹配。

列表模型的一些实现要求用户执行操作以选择建议,例如使用向下箭头将焦点移动到建议上或点击建议。在这些实现中,作者可以通过以下方式管理焦点:如果集合容器支持,则使用 aria-activedescendant,或者将 DOM 焦点移动到建议上。然而,列表模型的其他实现会自动高亮显示一个建议作为将在字段失去焦点时被接受的选中值(例如,当用户按下 Tab 键或点击其他字段时)。如果元素的 aria-autocomplete 设置为 listboth,并且当用户输入时自动选择了一个建议,作者必须确保满足以下所有条件

  1. 建议集合呈现在一个支持 aria-activedescendant 的元素中。
  2. 设置在输入字段上的 aria-activedescendant 的值会动态调整,以引用包含选中建议的元素,如 aria-activedescendant 的定义所述。
  3. 当显示建议时,DOM 焦点保留在文本输入框中。

aria-autocomplete 属性并非旨在指示补全建议的存在,作者不应该为了传达建议的存在而动态更改其值。当元素的 aria-autocomplete 设置为 listboth 时,作者应该使用 aria-expanded 状态来传达呈现建议集合的元素是否显示。

特征
特征
在角色中使用
继承至角色
token
描述
inline 当用户正在输入时,建议补全所提供输入的一种方式的文本可能会被动态插入到插入符号之后。
list 当用户正在输入时,可能会显示一个包含可能补全所提供输入的值集合的元素。
both 当用户正在输入时,可能会显示一个包含可能补全所提供输入的值集合的元素。如果显示,集合中的一个值会自动被选中,补全自动选中值所需的文本会出现在输入框的插入符号之后。
none (默认) 当用户提供输入时,不显示试图预测用户打算如何完成输入的自动建议。

aria-busy 状态

指示一个元素正在被修改,辅助技术可能希望等到修改完成后再将其呈现给用户。

对于所有元素,aria-busy 的默认值为 false。当元素的 aria-busytrue 时,辅助技术可以忽略该元素所拥有内容的更改,然后在 aria-busy 变为 false 时,将忙碌期间所做的所有更改作为一个单一的原子更新进行处理。

如果需要在已经部分或完全呈现的容器元素内进行多次添加、修改或删除,作者可以在第一次更改之前将容器元素的 aria-busy 设置为 true,并在最后一次更改完成时将其设置为 false。例如,如果动态区域的多次更改应作为单个语音单元朗读,作者可以在进行更改时将 aria-busy 设置为 true,并在更改完成且准备好朗读时将其设置为 false

如果角色为 feed 的元素被标记为忙碌,辅助技术可以推迟呈现 feed 内部发生的更改,但忙碌期间用户在阅读的 article 内部发生的用户主动发起的更改除外。

如果已呈现widget的更改在脚本执行期间会导致widget缺少所需的拥有元素,作者必须在更新过程中将widget上的 aria-busy 设置为 true。例如,如果已呈现的树网格需要对多个不连续的分支进行一组同时更新,那么除了用单次更新替换整个树元素外,替代方案是在修改每个分支时将树标记为忙碌。

特征
特征
在角色中使用 基础标记的所有元素
true/false
描述
false (默认): 该元素没有预期的更新。
true 该元素正在更新。

aria-checked 状态

指示复选框、单选按钮和其他控件的当前“选中”状态。请参阅相关的 aria-pressedaria-selected

aria-checked 属性指示该元素是已选中 (true)、未选中 (false),还是代表一组包含已选中和未选中混合的其他元素 (mixed)。大多数输入仅支持 truefalse 值,但 mixed 值受某些三态输入(例如 checkboxmenuitemcheckbox)支持。

mixedradiomenuitemradioswitch 或任何继承自这些角色的元素支持,用户代理必须将这些角色mixed 值视为等同于 false

使用三态输入 mixed 值的示例涵盖在 WAI-ARIA 创作实践 中。

特征
特征
在角色中使用
继承至角色
tristate
描述
false 该元素支持被选中但当前未被选中。
混合 (mixed) 指示三态复选框或菜单项复选框的混合模式值。
true 该元素已被选中。
未定义(默认) 该元素不支持被选中。

aria-colcount 属性

定义 tablegridtreegrid 中的总列数。请参阅相关的 aria-colindex

如果所有列都存在于 DOM 中,则无需设置此属性,因为用户代理可以自动计算总列数。然而,如果某一时刻只有部分列存在于 DOM 中,则需要此属性来明确指示完整表格中的列数。

作者必须aria-colcount 的值设置为等于完整表格中列数的整数。如果总列数未知,作者必须aria-colcount 的值设置为 -1,以指示该值不应由用户代理计算。

以下示例显示了一个具有 16 列的网格,其中第 2、3、4 和 9 列显示给用户。

<div role="grid" aria-colcount="16">
  <div role="rowgroup">
    <div role="row">
      <span role="columnheader" aria-colindex="2">First Name</span>
      <span role="columnheader" aria-colindex="3">Last Name</span>
      <span role="columnheader" aria-colindex="4">Company</span>
      <span role="columnheader" aria-colindex="9">Phone</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <span role="gridcell" aria-colindex="2">Fred</span>
      <span role="gridcell" aria-colindex="3">Jackson</span>
      <span role="gridcell" aria-colindex="4">Acme, Inc.</span>
      <span role="gridcell" aria-colindex="9">555-1234</span>
    </div>
    <div role="row">
      <span role="gridcell" aria-colindex="2">Sara</span>
      <span role="gridcell" aria-colindex="3">James</span>
      <span role="gridcell" aria-colindex="4">Acme, Inc.</span>
      <span role="gridcell" aria-colindex="9">555-1235</span>
    </div></div>
</div>
特征
特征
在角色中使用
继承至角色
integer

aria-colindex 属性

定义元素相对于 tablegridtreegrid 中总列数的列索引或位置。请参阅相关的 aria-colcountaria-colspan

如果所有列都存在于 DOM 中,则无需设置此属性,因为用户代理可以自动计算每个单元格或 gridcell 的列索引。然而,如果某一时刻只有部分列存在于 DOM 中,则需要此属性来明确指示相对于完整表格的每个单元格或网格单元格所在的列。

作者必须aria-colindex设置为大于或等于 1 的整数,且必须大于同一行中任何先前元素的 aria-colindex 值,并且必须小于或等于完整表格中的列数。对于跨越多列的单元格或网格单元格,作者必须aria-colindex 的值设置为跨度的起始点。

如果存在于 DOM 中的列集合是连续的,并且在该集合中没有任何单元格跨越超过一行或一列,则作者可以在每一行上放置 aria-colindex,并将值设置为该集合第一列的索引。否则,作者应该aria-colindex 放置在每一行的所有子元素或拥有的元素上。

以下示例展示了一个包含 16 列的网格,其中向用户显示了第 2 到第 5 列。由于列集合是连续的,因此可以在每一行上放置 aria-colindex

<div role="grid" aria-colcount="16">
  <div role="rowgroup">
    <div role="row" aria-colindex="2">
      <span role="columnheader">First Name</span>
      <span role="columnheader">Last Name</span>
      <span role="columnheader">Company</span>
      <span role="columnheader">Address</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row" aria-colindex="2">
      <span role="gridcell">Fred</span>
      <span role="gridcell">Jackson</span>
      <span role="gridcell">Acme, Inc.</span>
      <span role="gridcell">123 Broad St.</span>
    </div>
    <div role="row" aria-colindex="2">
      <span role="gridcell">Sara</span>
      <span role="gridcell">James</span>
      <span role="gridcell">Acme, Inc.</span>
      <span role="gridcell">123 Broad St.</span>
    </div></div>
</div>

以下示例展示了一个包含 16 列的网格,其中向用户显示了第 2 到第 5 列。虽然列集合是连续的,但某些单元格跨越了多行。因此,需要将 aria-colindex 放置在每一行的所有拥有元素上。

<div role="grid" aria-colcount="16">
  <div role="rowgroup">
    <div role="row">
      <span role="columnheader" aria-colindex="2">First Name</span>
      <span role="columnheader" aria-colindex="3">Last Name</span>
      <span role="columnheader" aria-colindex="4">Company</span>
      <span role="columnheader" aria-colindex="5">Address</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <span role="gridcell" aria-colindex="2">Fred</span>
      <span role="gridcell" aria-colindex="3">Jackson</span>
      <span role="gridcell" aria-colindex="4" aria-rowspan="2">Acme, Inc.</span>
      <span role="gridcell" aria-colindex="5" aria-rowspan="2">123 Broad St.</span>
    </div>
    <div role="row">
      <span role="gridcell" aria-colindex="2">Sara</span>
      <span role="gridcell" aria-colindex="3">James</span>
    </div></div>
</div>

以下示例展示了一个包含 16 列的网格,其中向用户显示了第 2、3、4 和 9 列。由于列集合是不连续的,因此需要将 aria-colindex 放置在每一行的所有拥有元素上。

<div role="grid" aria-colcount="16">
  <div role="rowgroup">
    <div role="row">
      <span role="columnheader" aria-colindex="2">First Name</span>
      <span role="columnheader" aria-colindex="3">Last Name</span>
      <span role="columnheader" aria-colindex="4">Company</span>
      <span role="columnheader" aria-colindex="9">Phone</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <span role="gridcell" aria-colindex="2">Fred</span>
      <span role="gridcell" aria-colindex="3">Jackson</span>
      <span role="gridcell" aria-colindex="4">Acme, Inc.</span>
      <span role="gridcell" aria-colindex="9">555-1234</span>
    </div>
    <div role="row">
      <span role="gridcell" aria-colindex="2">Sara</span>
      <span role="gridcell" aria-colindex="3">James</span>
      <span role="gridcell" aria-colindex="4">Acme, Inc.</span>
      <span role="gridcell" aria-colindex="9">555-1235</span>
    </div></div>
</div>
特征
特征
在角色中使用
继承至角色
integer

aria-colspan 属性

定义 tablegridtreegrid 内单元格或网格单元格跨越的列数。请参阅相关的 aria-colindexaria-rowspan

属性旨在用于不包含在原生表格中的单元格和网格单元格。在原生表格中定义单元格或网格单元格的跨列数时,作者应该使用宿主语言的属性而不是 aria-colspan。如果在一个宿主语言提供了等效属性的元素上使用了 aria-colspan用户代理必须忽略 aria-colspan 的值,并向辅助技术公开宿主语言属性的值。

作者必须aria-colspan设置为大于或等于 1 的整数,且小于会导致该单元格或网格单元格与同一行中下一个单元格或网格单元格重叠的值。

特征
特征
在角色中使用
继承至角色
integer

aria-controls 属性

标识其内容或存在受当前元素控制的元素(或多个元素)。请参阅相关的 aria-owns

例如:

  • 目录树视图可能会控制相邻文档窗格的内容。
  • 一组复选框可以控制在表格或图表中实时跟踪哪些商品价格。
  • 标签页控制其关联标签页板的显示。
特征
特征
在角色中使用 基础标记的所有元素
ID 引用列表

aria-current 状态

指示代表容器或一组相关元素中当前项的元素

aria-current 属性是一种标记类型。任何未包含在允许值列表中的值都应该辅助技术视为提供了 true 值。如果该属性不存在,或者其值为空字符串或 undefined,则适用默认值 false,并且用户代理或辅助技术不得公开 aria-current 状态

aria-current 属性用于当一组相关元素中的某个元素在视觉上被设定样式以指示它是该组中的当前项时。例如:

  • 用于分页链接组中某个链接的 page 标记,其中该链接在视觉上被设定样式以表示当前显示的页面。
  • 用于基于步骤的流程的步骤指示器中某个链接的 step 标记,其中该链接在视觉上被设定样式以表示当前步骤。
  • 用于指示流程图中视觉上突出显示为当前组件的图像的 location 标记。
  • 用于指示日历中当前日期的 date 标记。
  • 用于指示时间表中当前时间的 time 标记。

作者应该只将一组元素中的一个元素标记为 aria-current

作者不应该aria-selected 具有相同含义的控件中将 aria-current 属性用作 aria-selected 的替代品。例如,在 tablist 中,aria-selected 用于 tab 上以指示当前显示的 tabpanel

在某些支持 aria-selected 的控件用例中,当前和选中可能具有不同的含义,并且可以在同一组元素中同时使用。例如,aria-current="page" 可用于导航 tree 中以指示当前显示的页面,而 aria-selected="true" 则指示如果用户激活该 treeitem 将显示哪个页面。此外,同一树可能支持通过包含“删除”和“移动”等选项的上下文菜单来操作一个或多个选定的页面(树项)。

特征
特征
在角色中使用 基础标记的所有元素
token
描述
page 代表页面集合中的当前页面。
step 代表过程中的当前步骤。
location (位置) 代表环境或上下文中的当前位置。
日期 代表日期集合中的当前日期。
时间 代表时间集合中的当前时间。
true 代表集合中的当前项目。
false (默认) 不代表集合中的当前项目。

aria-describedby 属性

标识描述该对象元素(或多个元素)。请参阅相关的 aria-labelledby

aria-labelledby 属性与 aria-describedby 类似,因为它们都引用其他元素来计算文本替代,但标签应该是简洁的,而描述旨在提供更冗长的信息。

aria-describedby 引用的元素或多个元素组成了整个描述。如果有必要,包含指向多个元素的 ID 引用,或者用 ID 引用的元素封装一组元素(例如段落)。

特征
特征
相关概念
在角色中使用 基础标记的所有元素
ID 引用列表

aria-details 属性

标识为该对象提供详细扩展描述的元素。请参阅相关的 aria-describedby

aria-details 属性引用单个元素,该元素提供比 aria-describedby 通常提供的更详细的信息。它使辅助技术能够使用户意识到扩展描述的可用性,并导航至该描述。作者应该确保 aria-details 引用的元素对所有用户可见。

aria-describedby 引用的元素不同,aria-details 引用的元素不会用于“可访问名称与描述”规范中定义的“可访问名称计算”或“可访问描述计算”。因此,当呈现给辅助技术用户时,aria-details 引用元素的内容不会被扁平化为字符串。这使得 aria-details 在将信息转换为字符串会导致信息丢失或使扩展描述更难理解时特别有用。

在某些用户代理中,无障碍 API 不支持描述性信息的多个引用关系。在这种情况下,如果在一个元素上同时提供了 aria-describedbyaria-details,则 aria-details 具有优先权。

aria-details 的一个常见用途是在数字出版中,当书中需要传达扩展描述,且该描述需要结构化标记或嵌入其他技术以提供说明性内容时。以下示例展示了此场景。

<!-- Provision of an extended description -->
<img src="pythagorean.jpg" alt="Pythagorean Theorem" aria-details="det">
<details id="det">
  <summary>Example</summary>
  <p>
    The Pythagorean Theorem is a relationship in Euclidean Geometry between the three sides of
    a right triangle, where the square of the hypotenuse is the sum of the squares of the two
    opposing sides.
  </p>
  <p>
    The following drawing illustrates an application of the Pythagorean Theorem when used to
    construct a skateboard ramp.
  </p>
  <object data="skatebd-ramp.svg"  type="image/svg+xml"></object>
  <p>
    In this example you will notice a skateboard with a base and vertical board whose width
    is the width of the ramp. To compute how long the ramp must be, simply calculate the
    base length, square it, sum it with the square of the height of the ramp, and take the
    square root of the sum.
  </p>
</details>

或者,aria-details 可以引用包含扩展描述的网页链接,如下例所示。

<!-- Provision of an extended description -->
<img src="pythagorean.jpg" alt="Pythagorean Theorem" aria-details="det">
<p>
  See an <a href="http://foo.com/pt.html" id="det">Application of the Pythagorean Theorem</a>.
</p>
特征
特征
在角色中使用 基础标记的所有元素
ID 引用

aria-disabled 状态

指示该元素可感知的但被禁用,因此不可编辑或无法以其他方式操作。请参阅相关的 aria-hiddenaria-readonly

例如,单选组中不相关的选项可以被禁用。被禁用的元素可能无法从 Tab 键顺序中获得焦点。对于某些被禁用的元素,应用程序可能会选择不支持导航到后代。除了设置 aria-disabled 属性外,作者应该更改外观(灰显等)以指示该项已被禁用。

被禁用状态适用于当前元素以及应用了 aria-disabled 属性的元素的所有可聚焦后代元素。

虽然 aria-disabled 和适当的脚本编写可以成功禁用角色为 link 的元素,但完全禁用宿主语言等效项可能会出现问题。建议作者不要在仅通过宿主语言的功能无法禁用的元素上使用 aria-disabled

:在 columnheader、rowheader 和 row 上的用法

虽然 aria-disabled 目前在 columnheaderrowheaderrow 上受支持,但在未来版本中,工作组计划禁止将其用于任何这三个角色的元素,除非它们处于 gridtreegrid 的上下文中。

此状态在 ARIA 1.2 中作为全局状态被弃用。在未来版本中,它将仅被允许用于明确支持它的角色上。

特征
特征
在角色中使用
继承至角色
true/false
描述
false (默认) 该元素已启用。
true 该元素及其所有可获得焦点的后代均被禁用,且其值无法由用户更改。

aria-dropeffect 属性

[ARIA 1.1 中已弃用] 指示当被拖拽的对象在放置目标上释放时可以执行的功能。

aria-dropeffect 属性预计将在 WAI-ARIA 的未来版本中被新功能取代。因此,建议作者将 aria-dropeffect 视为已弃用

属性允许辅助技术向用户传达可用的拖放选项,包括应用程序是否提供了选择的弹出菜单。通常,拖放效果功能只有在对象被抓取进行拖动操作后才能提供,因为可用的拖放效果功能取决于被拖动的对象。

给定的元素可能支持不止一种拖放效果。因此,此属性的值是一个以空格分隔的标记集合,用于指示可能的各种效果;如果没有支持的操作,则为 none。除了设置 aria-dropeffect 属性外,作者应该显示潜在放置目标的视觉指示。

特征
特征
在角色中使用 基础标记的所有元素
标记列表
描述
copy 源对象的副本将被放置在目标中。
execute 执行放置目标支持的功能,并以拖拽源作为输入。
链接 将在目标对象中创建指向被拖拽对象的引用或快捷方式。
move 源对象将从其当前位置移除并放置在目标中。
none (默认) 无法执行任何操作;如果尝试放置在此对象上,则实际上会取消拖拽操作。如果与其他任何标记值结合使用,则会被忽略。例如,'none copy' 等同于 'copy' 值。
popup 存在一个弹出菜单或对话框,允许用户选择其中一种拖拽操作(复制、移动、链接、执行)以及任何其他拖拽功能,例如取消。

aria-errormessage 属性

标识为对象提供错误消息的元素。请参阅相关的 aria-invalidaria-describedby

aria-errormessage 属性引用另一个包含错误消息文本的元素。作者必须结合使用 aria-invalidaria-errormessage

当对象的值无效时,aria-invalid 被设置为 true,这表示由 aria-errormessage 引用的元素所包含的消息是相关的。

当对象处于有效状态时,其 aria-invalid 设置为 false,或者它没有 aria-invalid 属性。作者可以在当前有效的对象上使用 aria-errormessage,但前提是 aria-errormessage 引用的元素是隐藏的,因为其包含的消息并不相关。

aria-errormessage 相关时,作者必须确保内容未隐藏,以便用户可以导航到该错误消息并进行查看。同样,当 aria-errormessage 不相关时,作者必须确保内容是隐藏的,或者删除 aria-errormessage 属性或其值。

用户代理不得aria-invalid 值为 false 的对象公开 aria-errormessage

作者可以通过应用 aria-live 属性或使用动态区域角色之一(例如 alert),利用动态区域来引起对新呈现错误消息的关注。当错误消息在用户输入无效值后显示给用户时,动态区域是合适的。

典型的信息描述了出了什么问题,并通知用户需要什么。例如,错误消息可能是:无效的时间:时间必须在上午 9:00 到下午 5:00 之间。 以下示例代码显示了初始有效状态和后续无效状态的标记。请注意文本输入对象aria-invalid 的变化,以及包含错误消息文本的元素aria-live 的变化。

<!-- Initial valid state -->
<label for="startTime"> Please enter a start time for the meeting: </label>
<input id="startTime" type="text" aria-errormessage="msgID" value="" aria-invalid="false">
<span id="msgID" aria-live="assertive"><span style="visibility:hidden">Invalid time: the time must be between 9:00 AM and 5:00 PM</span></span>

<!-- User has input an invalid value -->
<label for="startTime"> Please enter a start time for the meeting: </label>
<input id="startTime" type="text" aria-errormessage="msgID" aria-invalid="true" value="11:30 PM" >
<span id="msgID" aria-live="assertive"><span style="visibility:visible">Invalid time: the time must be between 9:00 AM and 5:00 PM</span></span>

此示例使用 aria-live="assertive" 来指示辅助技术应立即宣布错误消息,而不是先完成其他排队的公告。这增加了用户在将焦点移出输入框之前意识到错误消息的可能性。

此状态在 ARIA 1.2 中作为全局状态被弃用。在未来版本中,它将仅被允许用于明确支持它的角色上。

特征
特征
在角色中使用
继承至角色
ID 引用

aria-expanded 状态

指示由该元素拥有或控制的分组元素是展开的还是折叠的。

aria-expanded 属性应用于切换另一个元素中内容可见性的可聚焦、交互式元素。例如,它应用于父 treeitem 以指示其树的分支是否显示。同样,它可以应用于控制页面内容部分可见性的 button

如果可以展开或折叠的分组容器不由具有 aria-expanded 属性的元素拥有,作者应该通过使用 aria-controls 属性从具有 aria-expanded 的元素引用容器,来标识控制关系。

特征
特征
在角色中使用
继承至角色
true/false/undefined
描述
false 该元素拥有或控制的分组元素处于折叠状态。
true 该元素拥有或控制的分组元素处于展开状态。
undefined (默认值) 该元素不拥有或控制可展开的分组元素。

aria-flowto 属性

标识内容交替阅读顺序中的下一个元素(或多个元素),这允许辅助技术根据用户的判断覆盖按文档源顺序阅读的一般默认设置。

aria-flowto 具有单个 ID 引用时,它允许辅助技术在用户请求时放弃正常的文档阅读顺序并跳转到目标对象。然而,当 aria-flowto 提供多个 ID 引用时,辅助技术应该将引用的元素呈现为路径选择。

对于一个或多个 ID 引用,用户代理或辅助技术应该给用户提供导航到任何目标元素的选项。路径的名称可以由 aria-flowto 属性的目标元素名称确定。无障碍 API 可以提供命名路径关系

特征
特征
在角色中使用 基础标记的所有元素
ID 引用列表

aria-grabbed 状态

[ARIA 1.1 中弃用] 指示元素在拖放操作中的“被抓取”状态

aria-grabbed 状态预计将在 WAI-ARIA 的未来版本中被新功能取代。因此,建议作者将 aria-grabbed 视为已弃用

aria-grabbed 设置为 true 指示该元素已被选中以进行拖动。将 aria-grabbed 设置为 false 指示该元素可以被抓取进行拖放操作,但目前未被抓取。如果未指定 aria-grabbed 或将其设置为 undefined(默认值),则该元素无法被抓取。

aria-grabbed 设置为 true 时,作者应该更新所有潜在放置目标的 aria-dropeffect 属性。当元素未被抓取(值设置为 falseundefined,或者该属性被删除)时,作者应该将相关放置目标的 aria-dropeffect 属性还原为 none

特征
特征
在角色中使用 基础标记的所有元素
true/false/undefined
描述
false 表明该元素支持被拖拽。
true 表明该元素已被“抓取”以进行拖拽。
undefined (默认值) 表明该元素不支持被拖拽。

aria-haspopup 属性

指示可由元素触发的交互式弹出元素(如菜单或对话框)的可用性和类型。

弹出元素通常表现为叠加在其他内容之上的内容块。作者必须确保作为弹出内容容器的元素的角色是 menulistboxtreegriddialog,并且 aria-haspopup 的值与弹出容器的角色相匹配。

为了使弹出元素具备键盘可访问性,作者应该确保触发弹出的元素是可聚焦的,存在用于打开弹出的键盘机制,并且弹出元素管理其所有后代的焦点,如管理焦点中所述。

aria-haspopup 属性是一种标记类型。用户代理必须将任何未包含在允许值列表中的 aria-haspopup 值(包括空字符串)视为已提供了 false 值。为了与 ARIA 1.0 内容提供向后兼容性,用户代理必须aria-haspopuptrue 值视为等同于 menu 值。

辅助技术不应该公开值为 falsearia-haspopup 属性。

在本上下文中,tooltip 不被视为弹出窗口。

当触发弹出的元素中有视觉指示器时,aria-haspopup 最为适用。例如,许多带有向下箭头、人字形或省略号(三个连续的点)样式的控件已成为当激活控件时将显示弹出窗口的标准视觉指示器。如果某种功能差异通过不同的视觉样式对视力正常的用户来说是相关的,那么这种功能差异通常对于传达给辅助技术用户来说也是相关的。如果没有视觉指示表明元素将触发弹出窗口,建议作者考虑使用 aria-haspopup 是否必要,并避免在不需要时使用它。

此属性在 ARIA 1.2 中作为全局属性被弃用。在未来版本中,它将仅被允许用于明确支持它的角色上。

特征
特征
相关概念
在角色中使用
继承至角色
token
描述
false (默认) 表明该元素没有弹出窗口。
true 指示弹出窗口是 menu
menu 指示弹出窗口是 menu
listbox 指示弹出窗口是 listbox
tree 指示弹出窗口是 tree
grid 指示弹出窗口是 grid
dialog 指示弹出窗口是 dialog

aria-hidden 状态

指示该元素是否暴露给无障碍 API。请参阅相关的 aria-disabled

用户代理根据元素是否被渲染来确定元素的隐藏状态,而渲染通常由 CSS 控制。例如,display 属性设置为 none 的元素不会被渲染。如果一个元素或其任何祖先节点未被渲染,或者它们的 aria-hidden 属性值设置为 true,则该元素被视为隐藏的

作者可以谨慎使用 aria-hidden 从辅助技术中隐藏可见的渲染内容,前提是隐藏此内容的目的是通过删除冗余或无关内容来改善辅助技术用户的体验。作者使用 aria-hidden 向屏幕阅读器隐藏可见内容时,必须确保辅助技术能够获取相同或等效的含义和功能。

建议作者在从辅助技术中隐藏可见渲染内容时要格外小心,并考虑广泛的残障群体。例如,视力正常但行动不便的个人可能会使用语音控制的辅助技术来访问视觉界面。如果作者隐藏了可见的链接文本“去结账”,并向无障碍 API 公开了相似但并不相同的链接文本“现在结账”,用户可能无法使用语音控制访问他们感知的界面。对于屏幕阅读器用户,类似的问题也可能出现。例如,视力正常的电话支持技术人员可能会尝试让盲人屏幕阅读器用户点击“去结账”链接,而用户可能无法使用类型预测搜索(“去……”)找到它。

在撰写本文时,已知 aria-hidden="false" 在浏览器中的工作效果不一致。随着未来实现的改进,请务必小心并进行彻底测试,然后再依赖此方法。

特征
特征
在角色中使用 基础标记的所有元素
true/false/undefined
描述
false 该元素暴露给无障碍 API,就像它被渲染了一样。
true 该元素从无障碍 API 中隐藏。
undefined (默认值) 该元素的隐藏状态由用户代理根据它是否被渲染来确定。

aria-invalid 状态

指示输入的数值不符合应用程序预期的格式。请参阅相关的 aria-errormessage

如果计算出的值无效或超出范围,应用程序作者应该将此属性设置为 true用户代理应该通知用户该错误。应用程序作者应该在已知的情况下提供纠正建议。

当用户尝试提交涉及 aria-requiredtrue 的字段的数据时,作者可以使用 aria-invalid 属性来发出错误的信号。然而,如果用户尚未尝试提交表单,作者不应该仅仅因为用户尚未输入数据,就在必需的控件上设置 aria-invalid 属性。

为了便于将来扩展,aria-invalid 属性是一种标记类型(token type)。对于任何在允许的列表中未被识别的值,用户代理 必须将其处理为如同提供了 true 值一样。如果该属性不存在,或者其值为 false,或者其值为空字符串,则应用默认值 false

此状态在 ARIA 1.2 中作为全局状态被弃用。在未来版本中,它将仅被允许用于明确支持它的角色上。

特征
特征
在角色中使用
继承至角色
token
描述
grammar 检测到语法错误。
false (默认) 值中未检测到错误。
spelling 检测到拼写错误。
true 用户输入的值未通过验证。

aria-keyshortcuts 属性

指示作者为激活元素或使元素获得焦点而实现的键盘快捷键。

aria-keyshortcuts 属性的值是以空格分隔的键盘快捷键列表,按下这些快捷键可以激活命令或文本框小部件。快捷键中定义的键表示物理按下的按键,而不是产生的实际字符。每个键盘快捷键由一个或多个以加号 ("+") 分隔的标记组成,代表零个或多个修饰键,以及恰好一个必须同时按下才能激活给定快捷键的非修饰键。

作者 必须完全按照 UI 事件 KeyboardEvent 键值规范 [uievents-key] 来指定修饰键——例如,“Alt”、“Control”、“Shift”、“Meta”或“AltGraph”。注意,在苹果电脑上,Meta 对应 Command 键,Alt 对应 Option 键。

非修饰键的有效名称可以是任何可打印字符,例如“A”、“B”、“1”、“2”、“$”,加号用“Plus”表示,空格键用“Space”表示,或者 UI 事件 KeyboardEvent 键值规范 [uievents-key] 中指定的任何其他非修饰键名称——例如,“Enter”、“Tab”、“ArrowRight”、“PageDown”、“Escape”或“F1”。使用“Space”表示空格键是 UI 事件 KeyboardEvent 键值规范 [uievents-key] 的一个例外,因为空格或空格键被编码为 ' ',会被视为一个空白字符。

当修饰键是键盘快捷键的一部分时,作者 必须确保它们位于最前面。作者 必须确保当非修饰键是快捷键的一部分时,它们位于最后。修饰键的顺序无关紧要,因此“Alt+Shift+T”和“Shift+Alt+T”是等效的,但“T+Shift+Alt”是无效的,因为所有修饰键没有放在最前面;“Alt”也是无效的,因为它不包含至少一个非修饰键。

指定字母键时,大写和小写变体被视为等效:“a”和“A”是相同的。

在实现键盘快捷键时,作者应考虑他们打算支持的键盘,以避免出现意外结果。键盘设计因所使用的设备和支持的语言而异。例如,许多修饰键与其它键结合使用以创建常见的标点符号、数字字符、在双语键盘上切换键盘侧面以切换语言以及执行许多其它功能。

对于许多受支持的键盘,作者可以通过避免使用 ASCII 字母以外的键来防止冲突,因为数字字符和常见标点符号通常需要修饰键。这里,输入的键盘快捷键不等于生成的键。例如,在法语键盘布局中,除非按下 Control 键,否则无法使用数字字符,因此定义为 "Control+2" 的键盘快捷键将是模糊的,因为这就是在法语键盘上输入 "2" 字符的方式。

如果所使用的字符是由修饰键决定的,作者 必须指定产生该字符的实际按键,即由按键生成的代码,而不是最终产生的字符。这种约定使辅助技术能够准确传达需要使用哪些按键来生成快捷键。例如,在大多数美式英语键盘上,百分号 "%" 可以通过按下 Shift+5 来输入。指定此快捷键的正确方式是“Shift+5”。指定为“%”或“Shift+%”是不正确的。但是请注意,在某些国际键盘上,百分号可能是一个无需修饰的键,在这种情况下,“%”和“Shift+%”在这些键盘上可能是正确的。

如果需要指定的键在宿主语言中是非法的,或者会导致字符串终止,作者 必须使用宿主语言的字符串转义序列来指定它。例如,双引号字符可以在 HTML 中编码为 "Shift+&#39;"。

有效键盘快捷键的示例包括

  • "A"
  • "Shift+Space"
  • "Control+Alt+."
  • "Control+Shift+&#39;"
  • "Alt+Shift+P Control+F"
  • "Meta+C Meta+Shift+C"

用户代理 不得响应 aria-keyshortcuts 属性而改变键盘行为。作者 必须处理脚本化的键盘事件来处理 aria-keyshortcutsaria-keyshortcuts 属性暴露了这些快捷键的存在,以便辅助技术能够将此信息传达给用户。

作者 应该提供一种暴露键盘快捷键的方法,以便所有用户都能发现它们,例如通过使用工具提示(tooltip)。作者 必须确保应用于禁用元素的 aria-keyshortcuts 不可用。

作者 应该避免实现会抑制操作系统、用户代理或辅助技术功能的快捷键。这要求作者仔细考虑分配哪些键,以及这些键在什么环境下和条件下可供用户使用。有关指导,请参阅 WAI-ARIA 创作实践 中的键盘快捷键部分。

特征
特征
相关概念
在角色中使用 基础标记的所有元素
string

aria-label 属性

定义标记当前元素的字符串值。请参阅相关的 aria-labelledby

aria-label 的用途与 aria-labelledby 相同。它为用户提供了一个可识别的对象名称。标签最常见的可访问性 API 映射是可访问名称属性。

如果标签文本在 DOM 中可用(即通常可见的文本内容),作者 应该使用 aria-labelledby不应该使用 aria-label。有些情况下,元素的名称无法通过 DOM 以编程方式确定,也有一些情况是引用 DOM 内容并非理想的用户体验。大多数宿主语言提供了一个可用于命名元素的属性(例如 [HTML] 中的 title 属性),但这可能会显示浏览器工具提示。在不希望使用 DOM 内容或工具提示的情况下,作者 可以使用 aria-label 设置元素的可访问名称。根据可访问名称与描述计算的要求,用户代理在计算可访问名称属性时,优先考虑 aria-labelledby 而非 aria-label

特征
特征
相关概念
在角色中使用 除了以下角色外的所有基础标记元素:caption, code, deletion, emphasis, generic, insertion, paragraph, presentation, strong, subscript, superscript
string

aria-labelledby 属性

标识标记当前元素的元素(或多个元素)。参见相关属性 aria-describedby

aria-labelledby 的用途与 aria-label 相同。它为用户提供了一个可识别的对象名称。标签最常见的可访问性 API 映射是可访问名称属性。

如果界面无法在屏幕上显示可见标签,作者 应该使用 aria-label不应该使用 aria-labelledby。根据可访问名称与描述计算的要求,用户代理在计算可访问名称属性时,优先考虑 aria-labelledby 而非 aria-label

aria-labelledby 属性类似于 aria-describedby,因为两者都引用其他元素来计算文本替代,但标签应该是简洁的,而描述旨在提供更冗长的信息。

此属性在美式英语中的预期拼写是“labeledby”。但是,该属性所映射的可访问性 API 特性已经确立了“labelledby”的拼写。使用该拼写是为了符合惯例并尽量减少开发人员的困扰。

特征
特征
相关概念
在角色中使用 除了以下角色外的所有基础标记元素:caption, code, deletion, emphasis, generic, insertion, paragraph, presentation, strong, subscript, superscript
ID 引用列表

aria-level 属性

定义结构中元素的层次级别。

这可以应用于树形结构中的树项、文档内的标题、嵌套网格、嵌套标签列表以及出现在容器内或参与所有权层次结构的其他结构项。 aria-level 的值是一个大于或等于 1 的整数。

级别随深度增加。如果 DOM 祖先关系不能准确代表级别,作者 应该显式定义 aria-level 属性

此属性应用于在集合方向内充当叶节点的元素,例如,在具有 treeitem 角色的元素上,而不是在具有 group 角色的元素上。这意味着集合中的多个元素可以具有相同的属性值。虽然在容器上提供单个值会减少重复,但将其限制为叶节点可确保辅助技术有一种统一的方式来使用该属性。

如果 DOM 祖先准确代表了级别,用户代理可以从文档结构中计算出项目的级别。当无法从文档结构或 aria-owns 属性计算出级别时,该属性可用于提供显式的级别指示。用户代理对自动级别计算的支持可能有所不同;作者 应该通过 用户代理和辅助技术进行测试,以确定是否需要此属性。如果作者希望由用户代理计算级别,作者 应该省略此属性。

对于 treegridaria-level 在具有 row 角色的元素上受支持,而不是在具有 gridcell 角色的元素上。乍一看,这似乎与在 treeitem 元素上应用 aria-level 不一致,但它是一致的,因为 rowgrid 的垂直方向内充当叶节点,而 gridcell 是每一行水平方向内的叶节点。级别在行内的单元格集合上不受支持,因此 aria-level 属性应用于具有 row 角色的元素。

特征
特征
在角色中使用
继承至角色
integer

aria-live 属性

表示元素将会被更新,并描述了用户代理辅助技术和用户可以从活动区域中预期的更新类型。

属性以重要程度表示。当区域被指定为 polite(礼貌)时,辅助技术将通知用户更新,但通常不会中断当前任务,并且更新优先级较低。当区域被指定为 assertive(断言)时,辅助技术将立即通知用户,并可能清除之前的更新语音队列。

礼貌级别本质上是一种更新排序机制,是对用户代理或辅助技术的强烈建议。该值可能被用户代理、辅助技术或用户覆盖。例如,如果辅助技术能够确定变化是响应按键或鼠标点击而发生的,那么即使 aria-live 属性的值另有说明,辅助技术也可能立即呈现该变化。

由于不同用户有不同的需求,用户可以根据通用的基准,调整其辅助技术对具有特定礼貌级别的动态区域的响应。辅助技术可以选择实现增加和减少粒度级别,以便用户能够控制队列和中断。

当一个需要发送更新的对象上没有设置该属性时,礼貌级别为设置了 aria-live 属性的最近祖先的值。

aria-live 属性是决定活动区域变更呈现顺序的主要依据。当祖先链中未设置 aria-live 属性时,实现还会考虑角色中的默认礼貌级别(例如,log 的变化默认为 polite)。被标记为 assertive 的项目将立即呈现,随后是 polite 项目。用户代理或辅助技术可以选择在发生 assertive 变更时清除排队的变更。(例如,assertive 区域中的变更可能会删除当前所有排队的变更)

当活动区域被标记为 polite 时,辅助技术应该在下一个合适的时机宣布更新,例如在说完当前句子结束时或当用户暂停打字时。当活动区域被标记为 assertive 时,辅助技术应该立即通知用户。由于中断可能会使用户迷失方向或导致他们无法完成当前任务,作者不应该使用 assertive 值,除非中断是必要的。

特征
特征
在角色中使用 基础标记的所有元素
token
描述
assertive 表明该区域的更新具有最高优先级,应立即呈现给用户。
off (默认值) 表示除非用户当前聚焦于该区域,否则不应向用户呈现对该区域的更新。
polite 表明应在下一个合适的时机呈现对该区域的更新,例如在读完当前句子或用户暂停输入时。

aria-modal 属性

指示元素在显示时是否为模态。

aria-modal 属性用于指示“模态”元素的存在排除了对页面上其他内容的使用。例如,当显示一个模态对话框时,预期用户的交互仅限于对话框的内容,直到模态对话框失去焦点或不再显示。

当显示模态元素时,除非焦点已明确设置到其他地方,否则辅助技术应该导航到该元素。辅助技术可以将导航限制在模态元素的内容中。如果焦点移动到模态元素之外,辅助技术不应该限制导航到模态元素。

当显示模态元素时,作者必须确保界面只能通过模态元素的后代进行控制。换句话说,如果模态对话框有一个关闭按钮,该按钮应该是对话框的后代。当显示模态元素时,如果宿主语言存在这种能力,作者应该将所有其他内容标记为惰性(例如 HTML 中的“惰性子树”)。

特征
特征
在角色中使用
继承至角色
true/false
描述
false (默认) 元素不是模态的。
true 元素是模态的。

aria-multiline 属性

指示文本框是接受多行输入还是仅接受单行输入。

在大多数用户代理实现中,ENTERRETURN 键的默认行为在 HTML 中的单行和多行文本字段之间是不同的。当用户在单行 <input type="text"> 元素中获得焦点时,按键通常会提交表单。当用户在多行 <textarea> 元素中获得焦点时,按键会插入换行符。WAI-ARIA textbox 角色通过 aria-multiline 属性区分这些类型的框,因此建议作者在设计字段时注意这种区别。

特征
特征
在角色中使用
继承至角色
true/false
描述
false (默认) 这是一个单行文本框。
true 这是一个多行文本框。

aria-multiselectable 属性

指示用户可以从当前可选择的后代中选择多个项目。

作者应该确保选定的后代将 aria-selected 属性设置为 true,且可选择的后代将 aria-selected 属性设置为 false。作者不应该在不可选择的后代上使用 aria-selected 属性。

列表和树是允许用户一次选择多个项的角色示例。

特征
特征
在角色中使用
继承至角色
true/false
描述
false (默认) 一次只能选择一个项。
true 小部件中可能同时选中多于一项的内容。

aria-orientation 属性

指示元素的方向是水平的、垂直的还是未知的/模棱两可的。

在 ARIA 1.1 中,aria-orientation 的默认值从 horizontal(水平)更改为 undefined(未定义)。一些角色上定义了隐含的默认值(例如,slider 默认为水平;scrollbar 默认为垂直),但在预期默认方向不明确的角色上仍然未定义(例如,radiogroup)。

特征
特征
在角色中使用
继承至角色
token
描述
水平 该元素是水平定向的。
undefined (默认值) 该元素的方位未知/模糊。
vertical 该元素是垂直定向的。

aria-owns 属性

标识元素(或多个元素),以便在无法使用 DOM 层级结构来表示关系的情况下,定义 DOM 元素之间的视觉、功能或上下文的父/子关系。参见相关属性 aria-controls

aria-owns 属性的值是一个以空格分隔的 ID 引用列表,通过 ID 引用文档中的一个或多个元素。添加 aria-owns 的原因是向辅助技术暴露一种无法从 DOM 推断出的父/子上下文关系。

如果一个元素同时拥有 aria-ownsDOM 子元素,那么父/子关系中子元素的顺序首先是 DOM 子元素,然后是 aria-owns 中引用的元素。如果作者意图使 DOM 子元素不排在第一位,则请在 aria-owns 中以所需的顺序列出 DOM 子元素。作者不应该使用 aria-owns 作为 DOM 层级结构的替代方案。如果关系已经在 DOM 中体现,请勿使用 aria-owns。作者必须确保在任何时候元素的 ID 不会在超过一个其他元素的 aria-owns 属性中指定。换句话说,一个元素只能有一个显式的所有者。

特征
特征
在角色中使用 基础标记的所有元素
ID 引用列表

aria-placeholder 属性

定义一个简短的提示(单词或短语),旨在当控件没有值时帮助用户进行数据输入。提示可以是示例值或预期格式的简要说明。

作者不应该使用 aria-placeholder 来代替标签,因为它们的用途不同:标签指明了预期的信息类型,而占位符文本是关于预期值的提示。参见相关属性 aria-labelledbyaria-label

作者应该在控件的为空字符串时的任何时候,通过显示提示文本向用户提供此提示。这包括控件首次获得焦点以及用户删除之前输入的值的情况。

与 [HTML] 中相关的 placeholder 属性一样,将占位符文本用作显示标签的替代方案可能会降低该控件对包括老年人以及患有认知、行动、精细运动技能或视力障碍的用户在内的一系列用户的可访问性和可用性。虽然控件标签提供的提示始终可见,但占位符属性提供的短提示仅在用户输入值之前显示。此外,占位符文本可能会被误认为是预填值,且通常实现的占位符文本默认颜色对比度不足,并且缺乏单独的可见标签会减小用于设置控件焦点的点击区域大小。

以下示例不使用 HTML label 元素,因为它不能用于标记具有 contenteditable 属性的 HTML 元素。

以下示例显示了一个用户已输入值的 searchbox

<span id="label">Birthday:</span>
<div contenteditable role="searchbox" aria-labelledby="label" aria-placeholder="MM-DD-YYYY">03-14-1879</div>

以下示例显示了同一个 searchbox,用户尚未输入值或已删除了之前输入的值

<span id="label">Birthday:</span>
<div contenteditable role="searchbox" aria-labelledby="label" aria-placeholder="MM-DD-YYYY">MM-DD-YYYY</div>
特征
特征
相关概念
在角色中使用
继承至角色
string

aria-posinset 属性

定义元素在当前列表项(listitems)或树项(treeitems)集合中的编号或位置。如果集合中的所有元素都存在于 DOM 中,则不是必需的。参见相关属性 aria-setsize

如果集合中的所有项目都存在于文档结构中,则无需设置此属性,因为用户代理可以自动计算每个项目的集合大小和位置。但是,如果某一时刻文档结构中仅存在该集合的一部分,则需要此属性来提供元素位置的明确指示。

以下示例显示了 16 个项集合中的第 5 到第 8 项。

<h2 id="label_fruit"> Available Fruit </h2>
<ul role="listbox" aria-labelledby="label_fruit">
  <li role="option" aria-setsize="16" aria-posinset="5"> apples </li>
  <li role="option" aria-setsize="16" aria-posinset="6"> bananas </li>
  <li role="option" aria-setsize="16" aria-posinset="7"> cantaloupes </li>
  <li role="option" aria-setsize="16" aria-posinset="8"> dates </li>
</ul>

作者必须aria-posinset 的值设置为大于或等于 1 的整数,且在已知集合大小时小于或等于集合的大小。作者应该使用 aria-setsize

当在 menuitemmenuitemcheckboxmenuitemradio 上暴露 aria-posinset 时,作者应该根据 menu 中的项目总数(不包括任何分隔符)来设置 aria-posinset 的值。

特征
特征
在角色中使用
继承至角色
integer

aria-pressed 状态

指示切换按钮当前的“按下”状态。参见相关状态 aria-checkedaria-selected

切换按钮需要一个完整的按下并释放周期来改变其值。激活它一次会将值更改为 true,再次激活它会将值更改回 false。值 mixed 表示由按钮控制的一个以上的项目的值并非全部相同。如果该属性不存在,则该按钮不是切换按钮。

aria-pressed 属性与 aria-checked 属性相似但不完全相同。操作系统支持按钮上的 pressed 和复选框上的 checked

特征
特征
在角色中使用
tristate
描述
false 该元素支持被按下,但当前未被按下。
混合 (mixed) 表明三态切换按钮的混合模式值。
true 该元素处于按下状态。
undefined (默认值) 该元素不支持被按下。

aria-readonly 属性

指示元素不可编辑,但仍可操作。参见相关状态 aria-disabled

这意味着用户可以读取但不能设置该小部件的值。只读元素与用户相关,应用程序作者不应该限制导航到该元素或其可聚焦后代。其他操作,例如复制该元素的值,也受支持。这与禁用元素形成对比,应用程序可能不允许用户导航到禁用元素的后代。

示例包括

  • 表示常量的表单元素。
  • 电子表格网格中的行或列标题。
  • 购物篮总计等计算结果。
特征
特征
相关概念
在角色中使用
继承至角色
true/false
描述
false (默认) 用户可以设置该元素的值。
true 用户无法更改该元素的值。

aria-relevant 属性

指示当动态区域内的无障碍树被修改时,用户代理将触发哪些通知。请参阅相关的 aria-atomic

属性表示为以下的空格分隔列表:additions(添加)、removals(移除)、text(文本);或者是一个单一的涵盖所有值 all(所有)。

这用于描述具有语义意义的变化,而不是仅仅是呈现上的变化。例如,从日志顶部移除的节点仅仅是为了腾出空间供其他条目使用,它们的移除没有意义。但是,在好友列表的情况下,移除好友姓名表示他们不再在线,这是一个有意义的事件。在这种情况下,aria-relevant 将被设置为 all。当未提供 aria-relevant 属性时,默认值 additions text 表示文本修改和节点添加是相关的,但节点移除是不相关的。

aria-relevant 的 removals 或 all 值应谨慎使用。仅当内容移除代表重要变化(如好友离开聊天室)时,才需要通知辅助技术。

只有在指定值之一为 'removals' 或 'all' 时,才应认为文本移除是相关的。例如,对于在一个默认 aria-relevant 值的活动区域中,文本从 'foo' 变为 'bar' 的变化,文本添加 ('bar') 将会被读出,但文本移除 ('foo') 不会被读出。

aria-relevant 是活动区域的可选属性。这是给辅助技术的一个建议,但辅助技术不一定需要呈现所有相关类型的变化。

当未定义 aria-relevant 时,元素的值将从具有已定义值的最近祖先继承。虽然值是一个标记列表,但继承的值不是累加的;后代元素上提供的值将完全覆盖从祖先元素继承的任何值。

当文本变化被标记为相关时,用户代理必须监控任何影响活动区域可访问名称和描述计算的后代节点变化,如同可访问名称是从内容确定一样(nameFrom: contents)。例如,如果包含的图像的 HTML alt 属性发生变化,将会触发文本变化。但是,如果活动区域之外的节点发生文本变化,即使该节点被活动区域中包含的元素引用(通过 aria-labelledby),也不会触发任何变化。

特征
特征
在角色中使用 基础标记的所有元素
标记列表
描述
additions 元素节点被添加到活动区域内的可访问性树中。
additions text (默认值) 等同于值组合 "additions text"。
all 等同于所有值的组合 "additions removals text"。
removals 活动区域内的文本内容、文本替代或元素节点从可访问性树中移除。
text 文本内容或文本替代被添加到活动区域可访问性树中的任何后代。

aria-required 属性

指示在提交表单之前,元素上需要用户输入。

例如,如果用户需要填写地址字段,作者需要将该字段的 aria-required 属性设置为 true

元素是必填项这一事实通常以视觉方式呈现(例如在小部件后面加一个符号或标记)。使用 aria-required 属性允许作者明确向辅助技术传达元素是必需的。

除非有完全等效的原生属性可用,否则宿主语言应该允许作者在需要用户输入或选择的宿主语言表单元素上使用 aria-required 属性。

特征
特征
相关概念
在角色中使用
继承至角色
true/false
描述
false (默认) 提交表单不需要用户输入。
true 用户需要在表单提交前提供元素上的输入。

aria-roledescription 属性

定义元素角色的人类可读、作者本地化的描述。

一些辅助技术(如屏幕阅读器)会将元素角色作为用户体验的一部分呈现出来。此类辅助技术通常会本地化角色名称,也可能会对其进行自定义。这些辅助技术的用户依赖角色名称的呈现(如“区域”、“按钮”或“滑块”)来理解元素的目的,如果是小部件,还要理解如何与之交互。

aria-roledescription 属性赋予作者覆盖辅助技术如何本地化和表达角色名称的能力。因此,不恰当地使用 aria-roledescription 可能会抑制用户理解或与元素交互的能力。作者应该限制 aria-roledescription 的使用,仅用于澄清非交互式容器角色(如 groupregion)的目的,或为widget 提供更具体的描述。

在使用 aria-roledescription 时,作者应该同时确保:

  1. 应用了 aria-roledescription 的元素具有有效的 WAI-ARIA 角色或具有隐含的 WAI-ARIA 角色语义。
  2. aria-roledescription 的值不为空,且不只包含空白字符。

如果存在以下任何条件,用户代理不得暴露 aria-roledescription 属性:

  1. 应用了 aria-roledescription 的元素没有有效的 WAI-ARIA 角色或没有隐含的 WAI-ARIA 角色语义。
  2. 应用了 aria-roledescription 的元素具有显式或隐含的 WAI-ARIA 角色,且其中 aria-roledescription禁止
  3. aria-roledescription 的值为空或仅包含空白字符。

辅助技术应该在呈现元素角色时使用 aria-roledescription 的值,但不应该基于具有 aria-roledescription 值的元素的角色而更改其他功能。例如,提供用于导航到下一个 regionbutton 功能的辅助技术应该允许这些功能导航到具有 aria-roledescription 的区域和按钮。

以下两个示例展示了使用 aria-roledescription 来表明非交互式容器是基于 Web 的演示应用程序中的“幻灯片”。

<div role="region" aria-roledescription="slide" id="slide42" aria-labelledby="slide42heading">
<h1 id="slide42heading">Quarterly Report</h1>
<!-- remaining slide contents -->
</div>
<section aria-roledescription="slide" id="slide42" aria-labelledby="slide42heading">
<h1 id="slide42heading">Quarterly Report</h1>
<!-- remaining slide contents -->
</section>

在前面的示例中,屏幕阅读器用户可能会听到“季度报告,幻灯片”,而不是更模糊的“季度报告,区域”或“季度报告,组”。

特征
特征
在角色中使用 基础标记的所有元素
string

aria-rowcount 属性

定义 tablegridtreegrid 中的总行数。请参阅相关的 aria-rowindex

如果所有行都存在于 DOM 中,则无需设置此属性,因为用户代理可以自动计算总行数。但是,如果某一时刻 DOM 中仅存在部分行,则需要此属性来提供完整表中行数的明确指示。

作者必须aria-rowcount 的值设置为等于完整表中的行数的整数。如果总行数未知,作者必须aria-rowcount 的值设置为 -1,以指示用户代理不应尝试计算该值。

以下示例展示了一个包含 2000 行的网格,其中第一行以及第 100 到 102 行对用户可见。

<div role="grid" aria-rowcount="2000">
  <div role="rowgroup">
    <div role="row" aria-rowindex="1">
      <span role="columnheader">First Name</span>
      <span role="columnheader">Last Name</span>
      <span role="columnheader">Company</span>
      <span role="columnheader">Phone</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row" aria-rowindex="100">
      <span role="gridcell">Fred</span>
      <span role="gridcell">Jackson</span>
      <span role="gridcell">Acme, Inc.</span>
      <span role="gridcell">555-1234</span>
    </div>
    <div role="row" aria-rowindex="101">
      <span role="gridcell">Sara</span>
      <span role="gridcell">James</span>
      <span role="gridcell">Acme, Inc.</span>
      <span role="gridcell">555-1235</span>
    </div>
    <div role="row" aria-rowindex="102">
      <span role="gridcell">Taylor</span>
      <span role="gridcell">Johnson</span>
      <span role="gridcell">Acme, Inc.</span>
      <span role="gridcell">555-1236</span>
    </div>
  </div>
</div>
特征
特征
在角色中使用
继承至角色
integer

aria-rowindex 属性

定义元素相对于 tablegridtreegrid 中总行数的行索引或位置。参见相关属性 aria-rowcountaria-rowspan

如果所有行都存在于 DOM 中,则无需设置此属性,因为用户代理可以自动计算每一行的索引。但是,如果某一时刻 DOM 中仅存在部分行,则需要此属性来提供每一行相对于完整表的位置的明确指示。

作者必须aria-rowindex设置为大于或等于 1 的整数,该值大于之前任何行的 aria-rowindex 值,且小于或等于完整表中的行数。对于跨越多行的单元格或网格单元格,作者必须aria-rowindex 的值设置为跨度的起始行。

作者应该在每一行上放置 aria-rowindex。作者也可能在每一行的所有子元素或从属元素上放置 aria-rowindex

以下示例展示了一个包含 2000 行的网格,其中第一行以及第 100 到 102 行对用户可见。

<div role="grid" aria-rowcount="2000">
  <div role="rowgroup">
    <div role="row" aria-rowindex="1">
      <span role="columnheader">First Name</span>
      <span role="columnheader">Last Name</span>
      <span role="columnheader">Company</span>
      <span role="columnheader">Phone</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row" aria-rowindex="100">
      <span role="gridcell">Fred</span>
      <span role="gridcell">Jackson</span>
      <span role="gridcell">Acme, Inc.</span>
      <span role="gridcell">555-1234</span>
    </div>
    <div role="row" aria-rowindex="101">
      <span role="gridcell">Sara</span>
      <span role="gridcell">James</span>
      <span role="gridcell">Acme, Inc.</span>
      <span role="gridcell">555-1235</span>
    </div>
    <div role="row" aria-rowindex="102">
      <span role="gridcell">Taylor</span>
      <span role="gridcell">Johnson</span>
      <span role="gridcell">Acme, Inc.</span>
      <span role="gridcell">555-1236</span>
    </div>
  </div>
</div>

以下示例展示了上一示例中的网格,其中 aria-rowindex 也被放置在每一行的所有从属元素上。

<div role="grid" aria-rowcount="2000">
  <div role="rowgroup">
    <div role="row" aria-rowindex="1">
      <span role="columnheader" aria-rowindex="1">First Name</span>
      <span role="columnheader" aria-rowindex="1">Last Name</span>
      <span role="columnheader" aria-rowindex="1">Company</span>
      <span role="columnheader" aria-rowindex="1">Phone</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row" aria-rowindex="100">
      <span role="gridcell" aria-rowindex="100">Fred</span>
      <span role="gridcell" aria-rowindex="100">Jackson</span>
      <span role="gridcell" aria-rowindex="100">Acme, Inc.</span>
      <span role="gridcell" aria-rowindex="100">555-1234</span>
    </div>
    <div role="row" aria-rowindex="101">
      <span role="gridcell" aria-rowindex="101">Sara</span>
      <span role="gridcell" aria-rowindex="101">James</span>
      <span role="gridcell" aria-rowindex="101">Acme, Inc.</span>
      <span role="gridcell" aria-rowindex="101">555-1235</span>
    </div>
    <div role="row" aria-rowindex="102">
      <span role="gridcell" aria-rowindex="102">Taylor</span>
      <span role="gridcell" aria-rowindex="102">Johnson</span>
      <span role="gridcell" aria-rowindex="102">Acme, Inc.</span>
      <span role="gridcell" aria-rowindex="102">555-1236</span>
    </div>
  </div>
</div>
特征
特征
在角色中使用
继承至角色
integer

aria-rowspan 属性

定义 tablegridtreegrid 内单元格或网格单元格跨越的行数。请参阅相关的 aria-rowindexaria-colspan

属性旨在用于未包含在原生表格中的单元格和网格单元格。在定义原生表格中单元格或网格单元格的行跨度时,作者应该使用宿主语言的属性,而不是 aria-rowspan。如果在宿主语言提供了等效属性的元素上使用了 aria-rowspan用户代理必须忽略 aria-rowspan 的值,并转而向辅助技术暴露宿主语言的属性值。

作者必须aria-rowspan设置为大于或等于 0 的整数,且小于会导致单元格或网格单元格与同一列中下一个单元格或网格单元格重叠的值。将值设置为 0 表示该单元格或网格单元格将跨越行组中的所有剩余行。

特征
特征
在角色中使用
继承至角色
integer

aria-selected 状态

指示各种小部件当前的“选中”状态。参见相关状态 aria-checkedaria-pressed

属性用于单选和多选小部件。

  1. 当前焦点项未选中的单选容器。选中状态通常跟随焦点,并由用户代理管理。
  2. 多选容器。作者应该确保 aria-multiselectable 属性为 true 的容器的任何可选后代,都为 aria-selected 属性指定 truefalse 的值。

任何对 aria-selected 的显式赋值都优先于基于焦点的隐式选中。如果小部件中没有任何 DOM 元素被显式标记为选中,辅助技术可能传达跟随 已管理焦点 小部件键盘焦点的隐式选中。如果小部件中的任何 DOM 元素被显式标记为选中,用户代理不得为该小部件传达隐式选中。

特征
特征
在角色中使用
继承至角色
true/false/undefined
描述
false 该可选元素未选中。
true 该可选元素已选中。
undefined (默认值) 该元素不可选。

aria-setsize 属性

定义当前列表项或树项集合中的项数。如果集合中的所有元素都存在于 DOM 中,则不需要此属性。请参阅相关的 aria-posinset

属性标记在集合的成员上,而不是标记在收集集合成员的容器元素上。为了通过说一个元素是“第 X 项,共 Y 项”来对用户进行引导,辅助技术将使用等于 aria-posinset 属性的 X,以及等于 aria-setsize 属性的 Y。

如果集合中的所有项目都存在于文档结构中,则无需设置此属性,因为用户代理可以自动计算每个项目的集合大小和位置。但是,如果某一时刻文档结构中仅存在该集合的一部分(为了减小文档大小),则需要此属性来提供集合大小的明确指示。

作者必须aria-setsize 的值设置为等于集合中项目总数的整数。如果项目总数未知,作者应该aria-setsize 的值设置为 -1

当在 menuitemmenuitemcheckboxmenuitemradio 上暴露 aria-setsize 时,作者应该基于 menu 中的项目总数(不包括任何分隔符)来设置 aria-setsize 的值。

以下示例显示了 16 个项集合中的第 5 到第 8 项。

<h2 id="label_fruit"> Available Fruit </h2>
<ul role="listbox" aria-labelledby="label_fruit">
  <li role="option" aria-setsize="16" aria-posinset="5"> apples </li>
  <li role="option" aria-setsize="16" aria-posinset="6"> bananas </li>
  <li role="option" aria-setsize="16" aria-posinset="7"> cantaloupes </li>
  <li role="option" aria-setsize="16" aria-posinset="8"> dates </li>
</ul>

以下示例展示了一个总大小未知的集合中的第 5 到第 8 项。

<h2 id="label_fruit"> Available Fruit </h2>
<ul role="listbox" aria-labelledby="label_fruit">
  <li role="option" aria-setsize="-1" aria-posinset="5"> apples </li>
  <li role="option" aria-setsize="-1" aria-posinset="6"> bananas </li>
  <li role="option" aria-setsize="-1" aria-posinset="7"> cantaloupes </li>
  <li role="option" aria-setsize="-1" aria-posinset="8"> dates </li>
</ul>
特征
特征
在角色中使用
继承至角色
integer

aria-sort 属性

指示表格或网格中的项目是否按升序或降序排序。

作者应该仅将此属性应用于表格标题或网格标题。如果不提供该属性,则没有定义的排序顺序。对于每个表格或网格,作者应该一次仅对一个标题应用 aria-sort

特征
特征
在角色中使用
token
描述
ascending 项目按此列升序排列。
descending 项目按此列降序排列。
none (默认) 未对该列应用定义的排序。
其他 已应用除升序或降序之外的排序算法。

aria-valuemax 属性

定义范围小部件允许的最大值。

作者必须确保 aria-valuemax 的值大于或等于 aria-valuemin 的值。如果 aria-valuenow 有已知的最大值和最小值,作者应该提供 aria-valuemaxaria-valuemin 属性。

范围小部件从给定的值开始,可以增加到由该属性定义的最大值。声明最小值和最大值允许辅助技术向用户传达范围的大小。

特征
特征
相关概念
在角色中使用
继承至角色
number

aria-valuemin 属性

定义范围小部件允许的最小值。

作者必须确保 aria-valuemin 的值小于或等于 aria-valuemax 的值。如果 aria-valuenow 有已知的最大值和最小值,作者应该提供 aria-valuemaxaria-valuemin 属性。

范围小部件从给定的值开始,可以减少到由该属性定义的最小值。声明最小值和最大值允许辅助技术向用户传达范围的大小。

特征
特征
相关概念
在角色中使用
继承至角色
number

aria-valuenow 属性

定义范围小部件的当前值。参见相关属性 aria-valuetext

此属性用于例如滑块或进度条等范围小部件上。

如果当前值未知(例如,不确定的进度条),作者不应该设置 aria-valuenow 属性。如果不存在 aria-valuenow 属性,则意味着关于当前值没有暗示任何信息。如果 aria-valuenow 有已知的最大值和最小值,作者应该提供 aria-valuemaxaria-valuemin 属性。

aria-valuenow 的值是一个十进制数字。如果范围是一组数值,则 aria-valuenow 是这些值之一。例如,如果范围是 [0, 1],则有效的 aria-valuenow 是 0.5。范围外的值,例如 -2.5 或 1.1,是无效的。

对于 progressbar 元素和 scrollbar 元素,辅助技术应该将该值作为百分比呈现给用户,计算方式为 aria-valueminaria-valuemax 范围内的位置(如果两者都定义了),否则呈现带有百分比指示符的实际值。对于具有 sliderspinbutton 角色的元素,辅助技术应该将实际值呈现给用户。

当呈现的值不能准确表示为数字时,作者应该结合 aria-valuenow 使用 aria-valuetext 属性,以提供范围当前值的用户友好表示。例如,滑块可能具有呈现为 small(小)、medium(中)和 large(大)的值。在这种情况下,aria-valuetext 的值将是字符串:smallmediumlarge 之一。

如果指定了 aria-valuetext,辅助技术将渲染它,而不是 aria-valuenow 的值。

特征
特征
相关概念
在角色中使用
继承至角色
number

aria-valuetext 属性

定义范围小部件aria-valuenow 的人类可读文本替代。

此属性用于例如滑块或进度条等范围小部件上。

如果设置了 aria-valuetext 属性,作者也应该设置 aria-valuenow 属性,除非该值未知(例如,在不确定的 progressbar 上)。

作者应该仅在呈现的值不能有意义地表示为数字时才设置 aria-valuetext 属性。例如,滑块可能具有呈现为 smallmediumlarge 的值。在这种情况下,aria-valuenow 的值范围可以是 1 到 3,这表示每个值在值空间中的位置,但 aria-valuetext 将是 smallmediumlarge 字符串之一。如果不存在 aria-valuetext 属性,辅助技术将仅依赖 aria-valuenow 属性来获取当前值。

如果指定了 aria-valuetext,辅助技术应该呈现该值,而不是 aria-valuenow 的值。

特征
特征
在角色中使用
继承至角色
string

7. 无障碍树

可访问性树DOM 树是平行的结构。可访问性树包括用户代理的用户界面对象和文档的对象。可访问对象是为每一个需要向辅助技术暴露的 DOM 元素在可访问性树中创建的,原因要么是它可能触发可访问性事件,要么是它具有需要暴露的属性关系或特性。

7.1 从无障碍树中排除元素

以下元素不会通过可访问性 API 暴露,用户代理不得将它们包含在可访问性树中:

如果尚未根据上述规则排除在可访问性树之外,用户代理应该不将以下元素包含在可访问性树中:

7.2 将元素包含在无障碍树中

如果未根据上述 排除可访问性树中的元素 中的规则从可访问性树中排除或标记为隐藏,用户代理必须为满足以下任何条件的 DOM 元素可访问性树中提供可访问对象

  • 具有显式角色或全局 WAI-ARIA 属性且未将 aria-hidden 设置为 true 的元素。(有关 aria-hidden 的更多指导,请参阅 排除可访问性树中的元素。)
  • 隐藏且具有通过 WAI-ARIA 属性被另一个元素引用的 ID 的元素。

    即使隐藏的引用对象未包含在可访问性树中,其文本替代也可能仍用于名称和描述计算

  • 8. 在宿主语言中的实现

    本规范定义的角色状态属性并不构成完整的 Web 语言或格式。它们旨在在宿主语言的上下文中使用。本节讨论宿主语言应如何实现 WAI-ARIA,以确保此处指定的标记将与宿主语言标记平滑且有效地集成。

    尽管标记语言表面上看起来相似,但它们并不共享语言定义基础设施。为了适应语言构建方法上的差异,这些要求既是通用的也是特定于模块化的。虽然允许规范编写方式的差异,但其意图是保持 WAI-ARIA 信息对作者的外观以及在 DOM 中通过脚本操作方式的一致性。

    WAI-ARIA 角色、状态和属性被实现为元素属性。角色是通过将其名称放置在宿主语言提供的 role 属性值中出现的标记中来应用的。状态和属性各自拥有自己的属性,其值按照本规范中为每个特定状态或属性定义的方式设置。属性名称是状态或属性的 aria 前缀名称。

    8.1 角色属性

    实现宿主语言将提供一个具有以下特征的属性

    8.2 状态与属性

    实现宿主语言必须允许具有以下特征的属性

    支持 XML 命名空间 [XML-NAMES] 的宿主语言可能要求 WAI-ARIA 属性与命名空间一起使用。在这种情况下,WAI-ARIA 状态和属性属性的命名空间必须https://w3org.cn/ns/wai-aria/。要在未明确描述对其支持的宿主语言中使用 WAI-ARIA,如果宿主语言支持命名空间,并且预期用户代理将识别 WAI-ARIA 命名空间,作者也应该使用此命名空间。本规范未定义命名空间前缀,但通常预期为 "aria"。

    WAI-ARIA 状态和属性属性具有一种命名约定,即它们都以字符串 "aria-" 开头。这 不是 命名空间前缀,它是状态或属性名称的一部分。因此,当将 WAI-ARIA 状态和属性与命名空间前缀一起使用时,完整的属性名称将类似于 "aria:aria-foo"。

    一些宿主语言不将命名空间与 WAI-ARIA 状态和属性属性一起使用,这可能是因为宿主语言不支持命名空间,或者是设计者希望将 WAI-ARIA 合并到核心特性集中。在这些宿主语言中,这些属性的命名空间名称没有值。这些属性的名称没有冒号偏移的前缀;在命名空间术语中,它们是未加前缀的属性名称。例如,DOM 接口 getAttributeNS 的 ECMAScript 绑定将空字符串 ("") 视为代表此条件,因此 getAttribute("aria-busy")getAttributeNS("", "aria-busy") 都在 DOM 中访问同一个 aria-busy 属性。

    根据本节的要求,一些用户代理识别 命名空间的 WAI-ARIA 状态和属性,一些 不带 命名空间,还有一些可能两者都识别。建议作者注意他们所使用的宿主语言支持哪种形式。除非宿主语言和支持用户代理明确指示需要命名空间,否则建议作者使用不带命名空间的属性。即使是支持命名空间的用户代理,通常也不会向无障碍 API 发布带命名空间的 WAI-ARIA 状态和属性。特别是,当前的 HTML 实现(包括 XHTML)不支持此命名空间。

    8.3 焦点导航

    实现宿主语言必须为作者提供支持,以使所有交互式元素(即任何可渲染或接收事件的元素)可聚焦。实现宿主语言必须提供一种设施,允许 Web 作者定义这些可聚焦的交互式元素是否出现在默认 Tab 键导航顺序中。HTML 中的 tabindex 属性是此类实现的一个示例。

    8.4 隐含的 WAI-ARIA 语义

    WAI-ARIA 旨在在宿主语言缺乏对象原生语义时提供关于对象的语义信息。然而,WAI-ARIA 也旨在为许多宿主语言提供额外的语义。此外,宿主语言随着时间的推移可以演变并提供对应于 WAI-ARIA 特性的新原生特性。因此,在许多情况下,WAI-ARIA 语义与宿主语言语义是冗余的。

    这些宿主语言特性可以被视为具有“隐含的 WAI-ARIA 语义”。用户代理对具有隐含 WAI-ARIA 语义的特性的处理类似于对 WAI-ARIA 特性的处理。由于宿主语言特性和 WAI-ARIA 特性之间的词法差异,处理过程可能不完全相同,但通常用户代理会将相同的信息暴露给可访问性 API。具有隐含 WAI-ARIA 语义的特性满足 WAI-ARIA 结构要求,例如所需的从属元素、所需的状态和属性等,并且不需要提供显式的 WAI-ARIA 语义。在具有隐含 WAI-ARIA 角色的元素上,作者也可以使用这些角色支持的 WAI-ARIA 状态和属性,而无需显式指示 WAI-ARIA 角色。

    例如,如果已经存在具有相应功能的元素(如复选框或单选按钮),请使用宿主语言的原生语义。WAI-ARIA 标记仅旨在用于增强原生语义(例如,使用 aria-required 指示元素为必填项),或将语义更改为不同于该元素标准功能的用途。

    隐含的 WAI-ARIA 语义会影响下一节“与宿主语言语义的冲突”中的冲突解决程序。因此,隐含的 WAI-ARIA 语义需要在规范性规范(如宿主语言规范或 核心无障碍 API 映射)中定义。

    8.5 与宿主语言语义的冲突

    WAI-ARIA 的角色、状态和属性旨在当不具备这些语义的原生宿主语言元素可用时添加 语义 信息,并且通常用于本身没有原生语义的元素上。它们也可以用于具有相似但非相同语义的元素上(例如,可以使用嵌套列表来表示树结构)。此方法可以作为不支持 WAI-ARIA 的旧版浏览器的回退策略的一部分,或者因为重用元素的原生呈现方式减少了所需的样式和/或脚本数量。除下述情况外,用户代理 必须始终使用 WAI-ARIA 语义来定义其如何将元素暴露给无障碍 API,而不是使用宿主语言语义。

    除了这些 WAI-ARIA 预期会覆盖原生语义的正常情况外,还有一些元素不适合用 WAI-ARIA 进行覆盖。这可能是因为存在相同的宿主语言语义,因此不需要 WAI-ARIA,或者因为 WAI-ARIA 的语义与宿主语言语义直接冲突。当宿主语言中存在具有相同角色语义和值的特性,且作者没有强有力的理由避免使用该宿主语言特性时,作者 应该使用宿主语言特性,而不是使用 WAI-ARIA 重用其他元素。

    宿主语言可能具有对应于角色的隐含 WAI-ARIA 语义。当提供了 WAI-ARIA 角色时,用户代理 必须使用 WAI-ARIA 角色的语义进行处理,而不是使用原生语义,除非该角色要求宿主语言在原生元素上明确禁止的 WAI-ARIA 状态和属性。角色的值不会像状态和属性的值那样冲突(例如,HTML 的 'checked' 属性和 'aria-checked' 属性可能具有冲突的值),并且预期作者有正当理由提供 WAI-ARIA 角色,即使是在通常不会被重用的元素上。

    WAI-ARIA 状态和属性对应于具有相同 隐含 WAI-ARIA 语义 的宿主语言特性时,使用该 WAI-ARIA 特性可能会特别成问题。如果同时提供了 WAI-ARIA 特性和宿主语言特性,但它们的值未保持同步,则用户代理和辅助技术无法知道该使用哪个值。因此,为了防止向辅助技术提供冲突的状态和属性,宿主语言 必须明确声明在每个宿主语言元素上使用 WAI-ARIA 属性与该元素的原生属性冲突的地方。当宿主语言声明某个 WAI-ARIA 属性与给定元素的原生属性存在直接语义冲突时,用户代理 必须忽略该 WAI-ARIA 属性,转而使用具有相同隐含语义的宿主语言属性。

    宿主语言 可以记录不能被 WAI-ARIA 覆盖的特性(这些称为“强原生语义”)。这些特性可以是具有隐含 WAI-ARIA 语义的特性,也可以是如果用 WAI-ARIA 更改语义会导致处理不确定的特性。一致性检查器 可以在强原生语义的元素上使用 WAI-ARIA 角色时发出错误或警告,但如上所述,用户代理 必须仍然使用 WAI-ARIA 角色的语义值将元素暴露给无障碍 API,除非原生的宿主语言语义是永久性的呈现性(presentational)。

    宿主语言为 WAI-ARIA 覆盖原生特性创建异常的机会,旨在避免潜在的作者错误或宿主语言特性本身处理带来的问题。当宿主语言和 WAI-ARIA 提供相似但不完全相同的特性时,可能会发生作者错误,此时更改其中一个而不更改另一个对无障碍 API 的影响可能不明确。内在处理是指除了简单的渲染和暴露给无障碍 API 之外,特性被处理的方式,这无法在响应 ARIA 特性时合理更改,并且如果允许使用 ARIA,将导致不可预测的结果。在这种情况下,宿主语言有充分的理由限制 WAI-ARIA 的范围。然而,这一规定并不给予宿主语言仅仅通过逐个特性地记录不得使用 WAI-ARIA 来全面禁止使用它的许可。宿主语言仅在对内容有效处理至关重要时,才应对 ARIA 的使用进行限制。

    某些 ARIA 特性对于在无障碍 API 中构建完整的模型至关重要。此类特性预期不会与原生宿主语言语义冲突(尽管它们可能对其进行补充)。因此,宿主语言 不得声明阻止使用以下 ARIA 特性的强原生语义

    8.6 状态与属性的处理

    状态和属性属性包含在宿主语言中,因此其值类型的表示语法由宿主语言管辖。对于 中定义的每种值类型,均使用宿主语言中适当的值类型。有关 WAI-ARIA 值类型与各种宿主语言值类型之间的推荐对应关系,请参见 WAI-ARIA 值类型映射到语言。这是一个非规范性的映射,旨在适应支持 WAI-ARIA 的新宿主语言。

    列表值类型——ID 引用列表和令牌列表——允许提供多于一个给定类型的值。这些值由宿主语言识别的用于列表属性的分隔字符分隔,例如空格字符、逗号等。有些语言可能要求特定的、单一的分隔符,而另一些则可能允许各种分隔符。

    宿主语言中的任何元素都支持全局状态和属性。但是,作者 必须仅在支持该状态或属性的角色上使用非全局状态和属性;要么定义为明确的 WAI-ARIA 角色,要么由匹配适当 WAI-ARIA 角色的宿主语言隐含 WAI-ARIA 语义定义。当向元素添加 role 属性时,该元素的 语义 和行为(包括对 WAI-ARIA 状态和属性的支持)会由角色行为进行增强或覆盖。用户代理 必须忽略在没有支持该状态或属性的角色(定义为明确的 WAI-ARIA 角色,或由匹配适当 WAI-ARIA 角色的宿主语言 WAI-ARIA 语义定义)的元素上使用的非全局状态和属性。例如,aria-valuetext 属性可用于 progressbar

    WAI-ARIA 角色具有关联的状态和属性,这些状态和属性被限定为“支持的”或“必需的”。combobox 角色支持的一个属性示例是 aria-autocomplete。在此情况下,该属性被指定为“支持的”,因为给定的 combobox 可能实现也可能不实现自动补全。相比之下,combobox 角色要求 aria-expanded 状态以指示它是可展开的。组合框具有受控的弹出元素(如 listbox),它要么打开要么关闭。如果 listbox 是打开的,则 combobox 处于其展开状态;否则它是折叠的。

    当使用 WAI-ARIA 角色时,DOM 中不存在的 支持 的状态和属性将根据其默认值进行处理。沿用 combobox 的示例,缺失的 aria-autocomplete 属性等同于 aria-autocomplete="none",意味着 combobox 不提供自动补全功能。

    然而,缺失的必需状态和属性是作者错误。缺失的必需状态和属性被视为存在,并具有隐含的中间值,该值不一定是其默认值。例如,aria-expanded 的默认值是 undefined,意味着既不可展开也不可折叠。但这并不适用于 combobox 的情况。在这种情况下,需要 aria-expanded 来传达 combobox 的可展开/可折叠性质。因此,combobox 角色的 aria-expanded 的隐含值是 false,意味着可展开(且当前处于折叠状态)。与每个 WAI-ARIA 角色关联的特性表中有一个“角色的隐含值”条目,该条目指定了当状态或属性缺失时,在角色上下文中使用的状态或属性值。

    具有隐含 WAI-ARIA 语义的元素支持相应角色支持的全套 WAI-ARIA 状态和属性。因此,作者 可以在设置状态和属性时省略角色。仅当需要更改元素的隐含 WAI-ARIA 角色时才需要角色。

    有时状态和属性存在于 DOM 中,但其值为零长度字符串 ("")。作者 可以为任何支持的(但不是必需的)状态或属性指定零长度字符串 ("")。用户代理 应该将值为 "" 的状态和属性属性视为与缺失属性相同。对于支持的状态和属性,这对应于默认值,但如果是必需属性,则它标志着作者错误,并将使用角色的隐含值。

    8.6.1 ID 引用错误处理

    用户代理 应该忽略与同一文档中其他 元素 的 ID 不匹配的 ID 引用。

    确保 ID 的唯一性是网页作者的责任。如果多个元素具有相同的 ID,用户代理 应该使用找到的第一个具有给定 ID 的元素。其行为将与 getElementById 相同。

    如果在单个 WAI-ARIA 关系中多次指定了同一个元素,用户代理 应该返回指向同一个 元素 的多个指针。

    aria-activedescendant 定义为仅引用单个 ID 引用。任何不完全匹配现有 ID 引用的 aria-activedescendant 值都是作者错误,并且不会匹配 DOM 中的任何元素。

    8.7 CSS 选择器

    本节可能会在未来版本中删除。

    属性 选择器的支持 必须包括 WAI-ARIA 属性。例如,.fooMenuItem[aria-haspopup="true"] 将选择所有具有 class fooMenuItemWAI-ARIA 属性 aria-haspopup 值为 true元素。对于 WAI-ARIA 属性的动态更改,其呈现方式 必须更新。这允许作者使样式与 WAI-ARIA 语义 相匹配。

    9. 处理作者错误

    9.1 角色

    用户代理预期会执行 WAI-ARIA 角色 的验证。

    正如在 角色定义 一节中所述,在内容中使用 抽象角色 被视为作者错误。用户代理 不得通过无障碍 API 的标准角色机制映射抽象角色。

    如果 role 属性包含的标记均与非抽象 WAI-ARIA 角色的名称不匹配,用户代理 必须将该元素视为未提供 角色。例如,<table role="foo"> 的暴露方式应与 <table> 相同,<input type="text" role="structure"> 的暴露方式应与 <input type="text"> 相同。

    9.2 状态与属性

    通常,用户代理 不会对 WAI-ARIA 属性 进行大量验证。用户代理 可以根据请求进行一些轻微的验证,例如确保为 WAI-ARIA 关系指定了 有效的 ID,并强制执行诸如 aria-posinset 位于 1 和 aria-setsize 之间(包含边界)之类的规则。用户代理不对逻辑验证负责,例如以下情况

    1. 由关系创建的循环引用,例如指定两个 元素 互相拥有。
    2. 关于 DOM 树结构的正确用法,例如一个 元素 被多个其他元素拥有。
    3. 具有 WAI-ARIA 角色 的元素正确实现了指定角色的行为。例如,用户代理不会验证具有 checkbox 角色的元素是否真的表现得像复选框。
    4. 不正确遵守所需的子/父角色关系,或出现在所需父级之外其他位置的元素。
    5. 确定 aria-activedescendant 是否确实指向了容器小部件的 受拥有 元素。
    6. aria-setsizearia-posinset 被指定在集合的部分元素(而非全部元素)上时,确定其隐含值。

    如果作者为十进制或整数值类型指定了非数字值,用户代理 应该执行以下操作

    如果 WAI-ARIA 属性包含未知或不允许的值,用户代理 应该按如下方式将其暴露给平台 无障碍 API

    UIA 中,用户代理可能将相应的属性设置为“不支持”。

    用户代理 不得暴露引用未解析 ID 的 WAI-ARIA 属性。例如

    用户代理 不得在以下情况暴露 aria-roledescription

    如果给定角色的必需 WAI-ARIA 属性缺失,用户代理 应该按如同提供了下表中给出的值一样处理该属性。

    缺失必需属性的回退值
    WAI-ARIA 角色 必需属性 回退值
    复选框 aria-checked false
    combobox aria-controls 无映射
    combobox aria-expanded false
    heading aria-level 2
    menuitemcheckbox aria-checked false
    menuitemradio aria-checked false
    radio aria-checked false
    scrollbar aria-controls 无映射
    scrollbar aria-valuenow 如果缺失或不是 数字,则为 (aria-valuemax - aria-valuemin) / 2。如果存在但小于 aria-valuemin,则为 aria-valuemin 的值。如果存在但大于 aria-valuemax,则为 aria-valuemax 的值。
    separator (如果可聚焦) aria-valuenow 如果缺失或不是 数字,则为 (aria-valuemax - aria-valuemin) / 2。如果存在但小于 aria-valuemin,则为 aria-valuemin 的值。如果存在但大于 aria-valuemax,则为 aria-valuemax 的值。
    slider aria-valuenow 如果缺失或不是 数字,则为 (aria-valuemax - aria-valuemin) / 2。如果存在但小于 aria-valuemin,则为 aria-valuemin 的值。如果存在但大于 aria-valuemax,则为 aria-valuemax 的值。
    switch aria-checked false
    meter aria-valuenow 与隐含或显式设置的 aria-valuemin 匹配的值。

    非必需状态和属性的隐含值出现在每个角色的特性表中。这些不被视为回退值,因此未包含在此处。

    10. IDL 接口

    符合标准的用户代理 必须实现以下 IDL 接口。

    10.1 接口混合 ARIAMixin

    WebIDLinterface mixin ARIAMixin {
    	attribute DOMString? role;
    	
    	attribute DOMString? ariaAtomic;
    	attribute DOMString? ariaAutoComplete;
    	attribute DOMString? ariaBusy;
    	attribute DOMString? ariaChecked;
    	attribute DOMString? ariaColCount;
    	attribute DOMString? ariaColIndex;
    	
    	attribute DOMString? ariaColSpan;
    	
    	attribute DOMString? ariaCurrent;
    	
    	
    	
    	attribute DOMString? ariaDisabled;
    	
    	attribute DOMString? ariaExpanded;
    	
    	attribute DOMString? ariaHasPopup;
    	attribute DOMString? ariaHidden;
    	attribute DOMString? ariaInvalid;
    	attribute DOMString? ariaKeyShortcuts;
    	attribute DOMString? ariaLabel;
    	
    	attribute DOMString? ariaLevel;
    	attribute DOMString? ariaLive;
    	attribute DOMString? ariaModal;
    	attribute DOMString? ariaMultiLine;
    	attribute DOMString? ariaMultiSelectable;
    	attribute DOMString? ariaOrientation;
    	
    	attribute DOMString? ariaPlaceholder;
    	attribute DOMString? ariaPosInSet;
    	attribute DOMString? ariaPressed;
    	attribute DOMString? ariaReadOnly;
    	
    	attribute DOMString? ariaRequired;
    	attribute DOMString? ariaRoleDescription;
    	attribute DOMString? ariaRowCount;
    	attribute DOMString? ariaRowIndex;
    	
    	attribute DOMString? ariaRowSpan;
    	attribute DOMString? ariaSelected;
    	attribute DOMString? ariaSetSize;
    	attribute DOMString? ariaSort;
    	attribute DOMString? ariaValueMax;
    	attribute DOMString? ariaValueMin;
    	attribute DOMString? ariaValueNow;
    	attribute DOMString? ariaValueText;
    };

    包含 ARIAMixin 的接口必须提供以下算法

    对于 ARIAMixin 中定义的每个 IDL 属性 idlAttribute,在获取时,必须执行以下步骤

    1. contentAttribute 为通过在 ARIA 属性对应表中查找 idlAttribute 而确定的 ARIA 内容属性。

    2. 返回运行 ARIAMixin 获取器步骤 的结果,给定 this、idlAttributecontentAttribute

    同样,在设置时,必须执行以下步骤

    1. contentAttribute 为通过在 ARIA 属性对应表中查找 idlAttribute 而确定的 ARIA 内容属性。

    2. 运行 ARIAMixin 设置器步骤,给定 this、idlAttributecontentAttribute 和给定的值。

    这种非常通用的框架的动机是希望不同的宿主接口(例如 ElementElementInternals)能为这些 IDL 属性提供不同的行为。替代方案是要求每个宿主接口独立地复制 IDL 属性,以便它们可以指定独立的行为,但这样做会带来它们不同步的高风险。

    10.2 ARIA 属性对应关系

    下表提供了 IDL 属性名称与内容属性名称之间的对应关系,供 ARIAMixin 使用。

    IDL 属性反射的 ARIA 内容属性
    rolerole
    ariaAtomicaria-atomic
    ariaAutoCompletearia-autocomplete
    ariaBusyaria-busy
    ariaCheckedaria-checked
    ariaColCountaria-colcount
    ariaColIndexaria-colindex
    ariaColSpanaria-colspan
    ariaCurrentaria-current
    ariaDisabledaria-disabled
    ariaExpandedaria-expanded
    ariaHasPopuparia-haspopup
    ariaHiddenaria-hidden
    ariaInvalidaria-invalid
    ariaKeyShortcutsaria-keyshortcuts
    ariaLabelaria-label
    ariaLevelaria-level
    ariaLivearia-live
    ariaModalaria-modal
    ariaMultiLinearia-multiline
    ariaMultiSelectablearia-multiselectable
    ariaOrientationaria-orientation
    ariaPlaceholderaria-placeholder
    ariaPosInSetaria-posinset
    ariaPressedaria-pressed
    ariaReadOnlyaria-readonly
    ariaRequiredaria-required
    ariaRoleDescriptionaria-roledescription
    ariaRowCountaria-rowcount
    ariaRowIndexaria-rowindex
    ariaRowSpanaria-rowspan
    ariaSelectedaria-selected
    ariaSetSizearia-setsize
    ariaSortaria-sort
    ariaValueMaxaria-valuemax
    ariaValueMinaria-valuemin
    ariaValueNowaria-valuenow
    ariaValueTextaria-valuetext

    注意:属性 aria-dropeffectaria-grabbed 在 ARIA 1.1 中已被弃用,并且没有对应的 IDL 属性。

    10.2.1 消歧模式

    本节是非规范性的。

    虽然规范作者可能会对这种模式做出例外,但以下规则被用于消除上述 IDL 属性名称和大小写的歧义。

    • 任何引用两个或多个单词组合的概念(例如“described by”)的属性名称都会变成驼峰命名的 IDL 属性,并将每个单词边界的首字母大写。例如,aria-describedby 变为 ariaDescribedBy,其中 D 和 B 均大写。
    • 同样,任何引用可以用连字符连接的概念(例如“multi-selectable”)的属性名称都会变成驼峰命名的 IDL 属性,并将每个连字符边界的首字母大写。例如,“multi-selectable”的唯一有效拼写是带连字符的,因此 aria-multiselectable 变为 ariaMultiSelectable,其中 M 和 S 均大写。
    • 当受信任的词典来源列出带连字符或不带连字符的拼写时(例如,“multi-line”和“multiline”都是有效的拼写),使用带连字符的版本并应用上述连字符规则。例如,aria-multiline 变为 ariaMultiLine,其中 M 和 L 均大写。
    • 如果所有受信任的词典来源都列出复合词的单一拼写且没有空格或连字符,则仅将该词的首字母大写。例如,“place-holder”和“place holder”均不被视为术语“placeholder”的有效拼写,因此 aria-placeholder 变为 ariaPlaceholder,仅 P 大写。
    • 目前没有任何基于缩写的 ARIA 属性,但如果未来的属性包含缩写用法,请尝试匹配现有的 DOM 惯例(例如 ID 变为 Id)。

    10.2.2 IDL 属性名称注释或异常

    本节是非规范性的。

    特定属性名称的任何注释或例外将列在此处。

    • ariaPosInSet: aria-posinset 属性是指项目在集合中的位置(两个词:“in set”),而不是项目从集合开始处的“插入”(inset)。因此 IDL 属性名称是 ariaPosInSet,其中 P、I 和第二个 S 大写,而不是 ariaPosInset

    10.3 ARIAMixin 混入 Element

    用户代理 必须Element 上包含 ARIAMixin

    WebIDLElement includes ARIAMixin;

    对于 Element

    实际上,这意味着,例如,Element 上的 role IDL 反射了 role 内容属性;ariaValueMin IDL 属性反射了 aria-valuemin 内容属性;等等。

    10.4 IDL 属性使用示例

    本节是非规范性的。

    ARIA IDL 属性反射的主要目的是为了简化基于 JavaScript 的值操作。以下示例展示了其用法。

    11. 隐私与安全考量

    本节是非规范性的。

    本规范未引入任何新的安全考量。

    根据 Web 平台设计原则,本规范不提供任何编程接口来确定信息是否正在被辅助技术使用。然而,本规范确实允许作者向辅助技术用户呈现与不使用辅助技术的用户可用的信息不同的信息。这可以使用 ARIA 规范的许多特性来实现,正如这可以使用 Web 技术栈的许多其他部分实现一样。这种内容差异可能被滥用来对辅助技术用户执行 主动指纹识别

    A. WAI-ARIA 值类型映射到语言

    本节是非规范性的。

    下表中的 HTML 列仅供参考。有关在 HTML 中使用 WAI-ARIA 状态和属性的指导,请参阅 允许的 ARIA 角色、状态和属性 ([HTML-ARIA]。

    HTML 中 true/false 值的建议映射使用 关键字和枚举属性,其允许值为 truefalse,而不是使用 HTML 布尔值类型。

    下表提供了 WAI-ARIA 状态和属性类型与来自 [HTML]、XML Schema 数据类型 [XMLSCHEMA11-2]、[SVG2] 和 SGML 的属性类型之间的建议映射。

    未在下面列出的语言可能在该语言中定义了适当的值类型。如果没有,我们推荐将 XML Schema 数据类型用于通用的 XML 语言。使用 DTD 而非模式的文档将无法自动验证,并且需要在 WAI-ARIA 属性上进行额外处理。

    WAI-ARIA 类型 HTML XML Schema
    true/false 关键字和枚举属性,允许值为 "true" 和 "false" boolean
    true/false/undefined 关键字和枚举属性,允许值为 truefalseundefined NMTOKEN,具有允许值为 truefalseundefined枚举约束
    tristate 关键字和枚举属性,允许值为 "true"、"false" 和 "mixed" NMTOKEN,具有允许值为 "true"、"false" 和 "mixed" 的 枚举约束
    number 浮点数 decimal
    integer 非负整数 integer
    token 关键字和枚举属性 NMTOKEN,具有允许状态或属性定义中列出的值的 枚举约束
    标记列表 空格分隔的令牌 NMTOKENS,具有允许状态或属性定义中列出的值的 枚举约束
    ID 引用 另一个元素上定义的 id 属性 的值 IDREF
    ID 引用列表 其他元素上一个或多个定义的 id 属性 的值,表示为 空格分隔的标记 IDREFS
    string 无值约束 string

    B. WAI-ARIA 1.1 建议标准 以来的实质性变更

    C. 致谢

    本节是非规范性的。

    以下人员为本文件的制定做出了贡献。

    C.1 发布时 ARIA 工作组的活跃参与者

    C.2 其他 ARIA 贡献者、评论者及曾活跃的参与者

    C.3 资助方

    本出版物部分由美国联邦资金资助,来自教育部、国家残疾、独立生活和康复研究研究所 (NIDILRR),最初合同号为 ED-OSE-10-C-0067,随后为 HHSP23301500054C,目前为 HHS75P00120P00168。本出版物的内容不一定反映美国教育部的观点或政策,提及商品名称、商业产品或组织也不意味着美国政府的认可。

    D. 参考文献

    D.1 规范性参考文献

    [ACCNAME-1.2]
    Accessible Name and Description Computation 1.2. Bryan Garaventa; Joanmarie Diggs; Michael Cooper. W3C. 2019年7月11日. W3C Working Draft. URL: https://w3org.cn/TR/accname-1.2/
    [CORE-AAM]
    Core Accessibility API Mappings 1.1. Joanmarie Diggs; Joseph Scheuhammer; Richard Schwerdtfeger; Michael Cooper; Andi Snow-Weaver; Aaron Leventhal. W3C. 2017年12月14日. W3C Recommendation. URL: https://w3org.cn/TR/core-aam-1.1/
    [CORE-AAM-1.2]
    核心无障碍 API 映射 1.2. Valerie Young; Alexander Surkov; Michael Cooper. W3C. 2023年5月18日. W3C 候选推荐标准. URL: https://w3org.cn/TR/core-aam-1.2/
    [CSS3-SELECTORS]
    Selectors Level 3. Tantek Çelik; Elika Etemad; Daniel Glazman; Ian Hickson; Peter Linss; John Williams. W3C. 2018年11月6日. W3C Recommendation. URL: https://w3org.cn/TR/selectors-3/
    [DOM]
    DOM Standard. Anne van Kesteren. WHATWG. Living Standard. URL: https://dom.spec.whatwg.org/
    [HTML]
    HTML Standard. Anne van Kesteren; Domenic Denicola; Ian Hickson; Philip Jägenstedt; Simon Pieters. WHATWG. Living Standard. URL: https://html.whatwg.cn/multipage/
    [MathML3]
    Mathematical Markup Language (MathML) Version 3.0 2nd Edition. David Carlisle; Patrick D F Ion; Robert R Miner. W3C. 2014年4月10日. W3C Recommendation. URL: https://w3org.cn/TR/MathML3/
    [RFC2119]
    Key words for use in RFCs to Indicate Requirement Levels. S. Bradner. IETF. 1997年3月. Best Current Practice. URL: https://www.rfc-editor.org/rfc/rfc2119
    [ROLE-ATTRIBUTE]
    Role Attribute 1.0. Shane McCarron et al. W3C. 2013年3月28日. W3C Recommendation. URL: https://w3org.cn/TR/role-attribute/
    [SVG2]
    Scalable Vector Graphics (SVG) 2. Amelia Bellamy-Royds; Bogdan Brinza; Chris Lilley; Dirk Schulze; David Storey; Eric Willigers. W3C. 2018年10月4日. W3C Candidate Recommendation. URL: https://w3org.cn/TR/SVG2/
    [uievents-key]
    UI 事件 KeyboardEvent key 值. Travis Leithead; Gary Kacmarcik. W3C. 2023年5月30日. W3C 候选推荐标准. URL: https://w3org.cn/TR/uievents-key/
    [webidl]
    Web IDL Standard. Edgar Chen; Timothy Gu. WHATWG. Living Standard. URL: https://webidl.spec.whatwg.org/
    [XML-NAMES]
    Namespaces in XML 1.0 (Third Edition). Tim Bray; Dave Hollander; Andrew Layman; Richard Tobin; Henry Thompson et al. W3C. 2009年12月8日. W3C Recommendation. URL: https://w3org.cn/TR/xml-names/

    D.2 资料性参考文献

    [AT-SPI]
    辅助技术服务提供商接口. The GNOME Project. URL: https://developer-old.gnome.org/libatspi/stable/
    [ATK]
    ATK - Accessibility Toolkit. The GNOME Project. URL: https://developer.gnome.org.cn/atk/stable/
    [AXAPI]
    The NSAccessibility Protocol for macOS. Apple, Inc. URL: https://developer.apple.com/documentation/appkit/nsaccessibility
    [HTML-ARIA]
    ARIA in HTML. Steve Faulkner; Scott O'Hara; Patrick Lauke. W3C. 2023年5月31日. W3C 推荐标准. URL: https://w3org.cn/TR/html-aria/
    [IAccessible2]
    IAccessible2. Linux Foundation. URL: https://wiki.linuxfoundation.org/accessibility/iaccessible2/
    [MSAA]
    Microsoft Active Accessibility (MSAA). Microsoft Corporation. URL: https://docs.microsoft.com/en-us/windows/win32/winauto/microsoft-active-accessibility
    [UI-AUTOMATION]
    UI Automation. Microsoft Corporation. URL: https://docs.microsoft.com/en-us/windows/win32/winauto/ui-automation-specification
    [UIA-EXPRESS]
    The IAccessibleEx Interface. Microsoft Corporation. URL: https://docs.microsoft.com/en-us/windows/win32/winauto/iaccessibleex
    [wai-aria-1.1]
    Accessible Rich Internet Applications (WAI-ARIA) 1.1. Joanmarie Diggs; Shane McCarron; Michael Cooper; Richard Schwerdtfeger; James Craig. W3C. 2017年12月14日. W3C Recommendation. URL: https://w3org.cn/TR/wai-aria-1.1/
    [WAI-ARIA-PRACTICES-1.2]
    WAI-ARIA Authoring Practices 1.2. Matthew King; JaEun Jemma Ku; James Nurthen; Zoë Bijl; Michael Cooper. W3C. 2022年5月19日. W3C Working Group Note. URL: https://w3org.cn/TR/wai-aria-practices-1.2/
    [WCAG21]
    Web 内容无障碍指南 (WCAG) 2.1. Andrew Kirkpatrick; Joshue O'Connor; Alastair Campbell; Michael Cooper. W3C. 2018年6月5日. W3C 推荐标准. URL: https://w3org.cn/TR/WCAG21/
    [XMLSCHEMA11-2]
    W3C XML Schema Definition Language (XSD) 1.1 Part 2: Datatypes. David Peterson; Sandy Gao; Ashok Malhotra; Michael Sperberg-McQueen; Henry Thompson; Paul V. Biron et al. W3C. 2012年4月5日. W3C Recommendation. URL: https://w3org.cn/TR/xmlschema11-2/