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

W3C 推荐标准

关于本文件的更多信息
此版本:
https://www.w3.org/TR/2023/REC-wai-aria-1.2-20230606/
最新发布版本:
https://www.w3.org/TR/wai-aria-1.2/
最新编辑草案:
https://w3c.github.io/aria/
历史:
https://www.w3.org/standards/history/wai-aria-1.2
提交历史
实现报告:
https://w3c.github.io/test-results/core-aam-1.2/
上一版本推荐:
https://www.w3.org/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拉取请求新建问题开放问题
勘误:
存在勘误

另见 翻译版本


摘要

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

本文档是 WAI-ARIA 概述中描述的 WAI-ARIA 套件的一部分。

本文档的状态

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

WAI-ARIA 1.2 是W3C推荐标准。咨询委员会(AC)以及W3C主管已认可本规范成为W3C推荐标准。有关实现经验的详细信息,请参阅WAI-ARIA 1.2 实现报告。附录中提供了WAI-ARIA 1.2 的变更历史

本文档由无障碍富互联网应用工作组作为推荐标准发布,遵循推荐标准流程

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

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

本文档由一个遵循W3C专利政策的团体制作。 W3C维护一个与该团体可交付成果相关的任何专利披露的公开列表;该页面还包括披露专利的说明。任何实际知晓某项专利包含必要权利要求的个人,必须根据W3C专利政策第6节披露该信息。

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

献辞

此版本的ARIA规范献给Carolyn MacLeod的记忆,她的贡献贯穿于本文档中。她以平静与睿智丰富了我们的工作,她的不幸离世将长期被我们的社区怀念。

1. 简介

本节是非规范性的。

本规范的目标包括:

WAI-ARIA是一项技术规范,提供了一个框架以改进网页内容和应用程序的可访问性及互操作性。本文档主要面向开发自定义小部件和其他网页应用组件的开发人员。请参阅WAI-ARIA概述,以获取为其他受众(如WAI-ARIA编写实践[WAI-ARIA-PRACTICES-1.2])提供的相关文档链接,这些文档介绍了WAI-ARIA旨在解决的可访问性问题、基本概念以及技术方法。

本文档目前处理了角色的两个方面:用户界面功能和结构关系。有关更多信息和使用案例,请参阅WAI-ARIA编写实践[WAI-ARIA-PRACTICES-1.2],以了解角色在使交互内容可访问方面的应用。

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

支持本标准的架构设计为可扩展,以便可以通过扩展基本角色来创建自定义角色。这允许用户代理至少支持基本角色,而支持自定义角色的用户代理可以提供增强的访问。注意,这些内容中的大部分可以在[XMLSCHEMA11-2]中正式化。然而,能够定义角色之间的相似性,例如基本概念和更具描述性的定义,将不会在XSD中可用。

WAI-ARIA 1.2是WAI-ARIA 1.2套件的成员,定义了如何将WAI-ARIA及其他网页内容语言的语义暴露给无障碍API

1.1 富互联网应用可访问性

网络可访问性领域定义了如何使残障人士能够使用网页内容。具有某些类型残障的用户会使用 辅助技术 (AT) 来与内容互动。辅助技术可以将内容的呈现转换为更适合用户的格式,并允许用户以不同方式进行交互。例如,用户可能需要或选择通过箭头键来操作滑块部件,而不是使用鼠标拖放。为了有效实现这一点,软件需要理解内容的 语义。语义是意义的学科;在此情况下用于为用户界面和内容元素分配人类可理解的角色、状态和属性。例如,如果一个段落在语义上被识别为段落,辅助技术就可以将其作为一个独立的单元进行交互,准确了解该段落的边界。可调范围滑块或可折叠列表(也称为树形 部件 )是更复杂的示例,其中部件的各个部分需要被正确标识语义,以便辅助技术支持有效交互。

新技术常常忽视可访问性所需的语义,而新的创作实践常常误用这些技术原本意图表达的语义。 元素 在语言中具有一种定义的含义,却被赋予不同的含义以供用户理解。

例如,Web 应用开发者即使在 HTML 中并没有语义化的 tree 元素,也会使用 CSS 和 JavaScript 创建可折叠的树形部件。对于非残障用户来说,它看起来并像一个可折叠树形部件并具有相应行为,但由于缺乏适当的语义,辅助技术可能无法识别该部件的角色,从而导致残障人士无法 感知操作 该部件。同样,Web 应用开发者在 SVG 中使用 JavaScript 创建交互式按钮部件,尽管 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 可访问平台的可访问性 API 中常见的信息(角色、状态、选择、事件 通知、关系 信息和描述)。DOM,通常是HTML,在典型的模型–视图–控制器关系中充当数据模型和视图,而 JavaScript 作为控制器通过修改样式和内容来操纵显示的数据。用户代理将相关信息传递给操作系统的可访问性 API,任何辅助技术(如屏幕阅读器)都可以使用该 API。

具有可访问性 API 的契约模型

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

更多信息请参见 WAI-ARIA Authoring Practices ,了解在使交互式内容可访问方面使用角色的方法。

替代输入设备的用户需要 键盘可访问 的内容。当新的语义与在 WAI-ARIA Authoring Practices 中建议的键盘交互方式相结合时,将允许替代输入解决方案通过替代输入方案来实现命令和控制。

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 标记来改进暴露给可访问性 API 的内容外,用户代理的行为与其原生行为一致。辅助技术会像对非网页内容相同信息那样,对可访问性 API 中的附加信息做出响应。然而,对非辅助技术的用户代理而言,只需提供适当的 API 更新,无需额外动作。

本规范既不要求也不禁止用户代理基于 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 支持。当作者通过样式和脚本创建尚未被页面语言直接支持的新对象类型时,WAI-ARIA 可向辅助技术澄清语义,因为新对象类型的发明速度通常快于它们被标准化支持的速度。

当宿主语言已为该类型对象提供语义元素时,不应通过样式和脚本创建对象。虽然 WAI-ARIA 可改善这些对象的可访问性,但最佳做法是让用户代理原生处理该对象。例如,在 HTML 中使用 h1 元素优于在 div 元素上使用 heading 角色。

预计随着时间推移,宿主语言将演进,以提供当前只能通过 WAI-ARIA 声明的对象的语义。这是自然且可取的,因为 WAI-ARIA 的目标之一就是促进更具语义性和可访问性的标记的出现。当某项功能的原生语义可用时,作者应使用原生功能并停止对此功能使用 WAI-ARIA。尽管遗留内容可能继续使用 WAI-ARIA,但用户代理仍需支持 WAI-ARIA

尽管 WAI-ARIA 的某些特性可能随时间失去重要性,但 WAI-ARIA 为网页添加语义的普遍需求预计将长期存在。宿主语言可能不会实现 WAI-ARIA 提供的所有语义,并且不同宿主语言可能实现不同子集的特性。新对象类型不断被开发,而 WAI-ARIA 的一个目标就是提供一种使此类对象可访问的方法,因为网页创作实践的进展往往快于宿主语言标准的更新。通过这种方式,WAI-ARIA 与宿主语言共同演进,但步伐不同。

某些宿主语言旨在为用户界面之外的功能创建语义。例如,SVG 表示图形对象生成背后的语义,而非这些对象可能表示的用户界面组件的语义。某些宿主语言可能在设计上不提供与 WAI-ARIA 特性映射的原生语义。在此情况下,可长期采用 WAI-ARIA 来为用户界面组件添加语义信息。

1.5 编写实践

1.5.1 编写工具

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

HTMLSVG 中,tabindex 是浏览器支持键盘 焦点导航 的一种重要方式;编写和调试工具可能检查 tabindex 值是否正确设置。例如,错误情况可能包括:同一棵树中多个 treeitem 的 tabindex 值大于或等于 0、没有在任何 treeitem 上设置 tabindex,或当 role="tree" 的元素具有 tabindex 值大于或等于 0 时,未定义 aria-activedescendant

1.5.2 测试实践和工具

交互式内容的可访问性不能仅通过静态检查确认。交互式内容的开发者应测试对 部件 和应用程序的设备无关访问,并应在用户交互过程中验证对所有内容及其变化的可访问性 API 访问。

1.6 辅助技术

对可访问性语义的编程访问对于辅助技术至关重要。大多数辅助技术通过公认的可访问性 API 与用户代理(如其他应用)进行交互。用户界面中可感知的对象作为可访问对象暴露给辅助技术,这些对象由可访问性 API 接口定义。为了正确实现,角色、状态、属性以及上下文信息等可访问性信息需要通过可访问性 API 准确传达给辅助技术。当状态发生更改时,用户代理会向可访问性 API 提供相应的事件通知。在许多宿主语言(如 HTML)中,上下文信息可以从 DOM 本身的树状层级中获取。

虽然一些辅助技术与这些可访问性 API 进行交互,其他辅助技术可能直接从 DOM 访问内容。这些技术可以重新组织、简化、样式化或重新排版内容,以帮助不同用户群体。常见的适配场景包括老年人、认知障碍者或在不利环境中使用辅助工具的人员。例如,区域性导航地标的可用性可能允许移动设备仅根据内容的语义一次显示部分内容,从而减少用户一次需要处理的信息量。在其他情况下,可能将自定义用户界面控件替换为更易通过键盘或触摸屏设备导航的控件。

2. 重要术语

本节为非规范性内容。

虽然部分术语在文中已有原位定义,但以下定义将在整个文档中通用。

可访问性 API

操作系统和其他平台提供一组接口,将有关对象事件的信息公开给辅助技术。辅助技术使用这些接口获取信息并与这些 部件交互。可访问性 APIs的示例包括 Microsoft Active Accessibility [MSAA]、 Microsoft User Interface Automation [UI-AUTOMATION]、 MSAA UIA Express [UIA-EXPRESS]、 Mac OS X Accessibility Protocol [AXAPI]、 Linux/Unix Accessibility Toolkit [ATK] 和 Assistive Technology Service Provider Interface [AT-SPI] 以及 IAccessible2 [IAccessible2]。

可访问性子树

可访问性树中某个 可访问对象及其在该树中的 后代。不包括在该树中仅通过非父子关系关联的对象。例如,除非这些对象也是子孙,否则通过 aria-flowto链接的对象不 会包含在内。

可访问性树

表示用户界面(UI)结构的 可访问对象的树。可访问性树中的每个节点都代表 通过可访问性 API公开的界面元素,例如按钮、 复选框或容器。

可访问描述

可访问描述为接口元素提供了补充信息,以完善该元素的 可访问名称。该描述可能是可见的,也可能不可见。

可访问名称

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

以“确定”按钮为例,“确定”文本就是其可访问名称。当按钮获得焦点时,辅助技术可能会将平台 的角色描述与可访问名称连接起来。例如,屏幕阅读器可能会朗读“push-button 确定”或“确定按钮”。连接顺序和角色描述(例如“button”、“push-button”、“clickable button”)取决于平台 可访问性API辅助技术的规范。

可访问对象

平台可访问性树中的一个 节点。可访问对象向辅助技术公开各种 状态属性事件以供辅助技术使用。在标记语言(如 HTMLSVG)及 WAI-ARIA语境中,标记 元素及其 属性都作为可访问对象表示。

激活行为

当用户通过输入设备触发的 事件使元素履行其定义角色时所采取的操作。该角色可由宿主语言、作者定义的变量或两者共同定义。角色可以是通用动作,也可以是元素特有的。例如,HTMLSVG<a>元素的激活行为是令用户代理遍历href属性指定的链接,并可选择指定在当前窗口、命名窗口或新窗口中打开;具有type="submit"属性值的<input>元素的激活行为是将表单元素的值通过作者定义的IRI和HTTP方法发送出去。

辅助技术

硬件和/或软件,必须满足以下条件:

  • 依赖用户代理提供的服务来检索和呈现网页内容;
  • 通过使用API与用户代理或网页内容本身交互;
  • 提供超出用户代理本身功能的服务,以帮助残障人士与网页内容进行交互。

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

本文件中重要的辅助技术示例包括:

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

在本规范中,属性的含义同标记语言中的定义。属性是添加到 元素上的结构化特征, 用于提供有关该元素表示的 状态属性的信息。

具有相似特征的一组实例 对象

弃用

已被更新构造或变化情形所取代,可能在未来版本的 WAI-ARIA规范中移除的 角色状态属性。鼓励 用户代理为兼容性继续支持已标记为弃用的项。更多信息请参见符合性部分的 弃用要求

桌面焦点事件

通过可访问性 API从/向宿主操作系统传递的事件,通知输入焦点发生更改。

DOMString
带有16位无符号整数序列,通常解读为 UTF-16 码元,对应 JavaScript 原生 String 类型。
元素

在本规范中,元素的含义同标记语言中的定义。元素是标记语言中的结构化元素,包含对象的数据描述。

事件

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

Expose

根据可访问性 API Core Accessibility API Mappings中定义的映射,将内容转换为平台特定的可访问性接口。

图形文档

包含带有可导航部分的图形表现的文档。图表、地图、图示、蓝图和仪表盘是图形文档的示例。图形文档由符号、图像、文本和图形原语(如圆、点、线、路径、矩形等)的任意组合构成。

Hidden

表示该元素对任何用户都不可见、不可感知或不可交互。如果该元素或其任一祖先元素未被呈现或被显式隐藏,则视为 Hidden。

Informative

提供信息用途的内容,不作为符合性要求。符合性内容称为 Normative

Keyboard Accessible

可通过键盘或模拟键盘输入的 辅助技术访问。本文件中的引用对应于 WCAG 2.1 指南 2.1:使所有功能可通过键盘操作 [WCAG21]。

Landmark

页面上的一种区域类型,用户可能希望快速访问。此类区域的内容与页面其他区域不同,且与特定用户目的(如导航、搜索、浏览主要内容等)相关。

Live Region

网页上可被感知的区域,通常会因外部事件而更新,此时用户焦点可能在其他地方。这些区域并不总是因用户交互而更新。示例包括聊天记录、股票行情或定期更新的体育得分区。由于这些异步区域可能在用户关注之外更新,辅助技术(如屏幕阅读器)往往无法检测或处理它们。WAI-ARIA 提供一组属性来标识并处理这些实时区域:aria-livearia-relevantaria-atomicaria-busy

主内容元素

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

托管状态

可访问性 API状态由用户代理控制,例如焦点和选择。这些状态与通常由作者控制的“非托管状态”相对。但是,作者仍可覆盖某些托管状态,如 aria-posinsetaria-setsize。许多托管状态在CSS中有对应的伪类(如 :focus)和伪元素(如 ::selection),由用户代理更新。

Nemeth Braille

用于编码数学和科学符号的 Nemeth 盲文编码。详情见 Nemeth Braille on Wikipedia

节点

DOM 树或 可访问性树中的基本 对象类型。DOM 节点进一步分为 元素文本节点等类型。可访问性树的节点即 可访问对象

Normative

符合性所必需。与之相对的是被标识为 信息性或“非规范性”的内容。

对象

在用户界面上下文中,指感知体验中的一项,由一个或多个 元素在标记语言中表示,并由 用户代理呈现。

在编程上下文中,对象是一个或多个 及接口的实例化,定义相似对象的通用特征。可访问性 API 中的对象可能代表一个或多个 DOM 对象。可访问性 API具有与 DOM 接口不同的定义接口。

本体

描述的特性及其相互关系。

Operable

可由用户以其可控方式使用。本文件的引用对应于 WCAG 2.1 原则 2:内容必须可操作 [WCAG21]。见 Keyboard Accessible

所有元素

“所有元素”是指该元素的任何 DOM 子孙,通过 aria-owns指定为子级的任何元素,或该子级的任何 DOM 子孙。

拥有元素

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

Perceivable

以用户可感知的方式呈现。本文件的引用对应于 WCAG 2.1 原则 1:内容必须可感知 [WCAG21]。

属性

对给定对象的本质至关重要或表示与该对象相关的数据值的 属性。属性的更改可能显著影响对象的含义或呈现。某些属性(例如 aria-multiline)不太可能更改,而状态更频繁变化;但这并非绝对规则。少数属性(如 aria-activedescendantaria-valuenowaria-valuetext)预计会频繁更改。见 状态与属性的区别说明

Relationship

两个不同事物之间的连接。关系类型多样,用以指示哪个 对象标注或控制另一个对象,等等。

Role

类型的主要标识。该语义关联使得工具能够以与用户对同类对象期望一致的方式呈现和支持交互。

WAI-ARIA 节点

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

Semantics

人类理解的意义,以便计算机可以处理对象的表示,例如 元素属性,并以各种人类能够达成共识的方式可靠地表示该对象。

State

表示对象可能因用户操作或自动化过程而发生变化的动态 属性。状态不会影响对象的本质,而是表示与对象或用户交互可能性相关的数据信息。见 状态与属性的区别说明

子文档

通过<frame><iframe>或类似机制创建的任何文档。子文档可包含文档、应用或其他服务器拉取的部件(如日历)。在 可访问性树中,此情景下有两个 可访问对象——一个代表父文档中的 <frame>/<iframe>元素,另一个作为其子级代表生成的文档内容。

目标元素

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

分类法

按层级定义类之间继承关系的结构。分类法可构成本体的一部分。

文本节点

表示节点文本内容的 DOM类型。文本节点没有子节点。

提示属性

任何会导致用户代理在桌面环境下响应鼠标悬停而生成工具提示的宿主语言属性。

Understandable

以用户能够构建合适含义的方式呈现。本文件的引用对应于 WCAG 2.1 原则 3:信息及用户界面操作必须可理解 [WCAG21]。

Unicode Braille Patterns

在 Unicode 中,盲文表示于 Braille Patterns 块(U+2800..U+28FF)。该块包含 8 点盲文单元的所有 256 种可能模式,其中 U+2800..U+283F 表示 6 点单元范围。所有盲文系统中,U+2800 用于表示空格或无内容,也称为空白盲文模式。见 Braille Patterns on Wikipedia

用户代理

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

有效 IDREF

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

部件

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

3. 符合性

可访问富互联网应用的主要内容是规范性,并定义影响符合性声明的要求。引言材料、附录、标记为“非规范性(non-normative)”的章节及其子章节、图表、示例和注释都是信息性(非规范性)。信息性内容提供辅助说明,帮助解读指南,但不会产生影响符合性声明的要求。

规范性章节提供了用户代理必须遵循的要求,以便其实现符合本规范。文中关键字MUSTMUST NOTREQUIREDSHALLSHALL NOTSHOULDRECOMMENDEDMAYOPTIONAL应按RFC 2119 — 指示要求级别的关键字中所述来解释。RFC 2119 关键字以大写形式出现,并包含在class="rfc2119"的元素中。当这些关键字不符合该格式时,表示仅作说明性用途,不具备 RFC 2119 的正式含义。本规范尽量避免此类非正式用法。

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

非规范性(信息性)章节提供理解本规范所需的有用信息。此类章节可包含推荐实践的示例,但不要求必须遵循这些示例才能符合本规范。

3.1 不得干扰宿主语言

WAI-ARIA 处理由用户代理执行时,MUST NOT干扰宿主语言内置功能的正常操作。

如果一个CSS选择器包含了WAI-ARIA属性(例如input[aria-invalid="true"]),用户代理MUST在属性在DOM中添加、更改或移除时,更新该选择器所匹配(或不再匹配)元素的视觉显示。用户代理MAY更改宿主语言功能到可访问性API的映射方式,但MUST NOT修改DOM以将 WAI-ARIA 标记重新映射为宿主语言功能。

3.2 所有 WAI-ARIA 均须在 DOM 中

如果一个符合规范的用户代理所实现的文档对象模型不符合 W3C DOM 规范,则该用户代理MUSTDOM中包含 role 属性及其WAI-ARIA role 值的 content 属性,以及WAI-ARIA状态和属性,并保持作者指定的未修改形式。这样可确保每个 role 属性和所有 WAI-ARIA 状态与属性(包括其值)均以未修改的形式存在于文档中,使其他工具(如辅助技术)能够访问它们。符合 W3C DOM 规范的实现已满足此条件。

3.3 辅助技术通知传达给 Web 应用程序

辅助技术(例如语音识别系统和供行动不便用户使用的替代输入设备)需要能够以设备无关的方式控制 Web 应用程序。WAI-ARIA状态属性反映了富互联网应用组件的当前状态。辅助技术能够向 Web 应用程序发出必要的更改通知,这一点至关重要,因为它允许这些替代输入解决方案在不依赖用户无法直接有效控制的标准输入设备的情况下,仍然能够控制应用程序。

用户代理MUST提供一种方法,当系统可访问性API中的状态或属性发生更改时,将此更改通知 Web 应用程序。同样,当接收到来自用户代理或辅助技术的更改请求通知时,Web 应用程序作者SHOULD相应地更新应用程序。

注:

许多状态和属性可以通过调用现有的可访问性 API 并响应默认操作事件,由辅助技术直接更改。例如,可以通过触发默认操作来更改tabpaneltabaria-selected状态。

3.4 符合性检查器

任何验证文档符合性或有效性的应用或脚本SHOULD测试本规范中所有规范性作者要求。如果测试某项要求,符合性检查器MUST在作者“MUST”要求未满足时发出错误,在作者“SHOULD”要求未满足时发出警告。

3.5 已弃用的要求

随着技术发展,有时会出现比以前定义的功能更能满足用例的新方法。但由于旧功能已有实现,若将其从符合性模型中移除,会导致先前符合规范的内容变为不符合。此时,旧功能会被标记为“已弃用”。这表示该功能在符合性模型中仍被允许且用户代理应继续支持,但建议作者不要在新内容中使用。若在规范的未来版本中该功能不再被广泛使用,则可以移除该功能,用户代理也无需再支持它。

4. 使用 WAI-ARIA

辅助技术无法确定文档部分背后的语义,或用户无法以可用的方式有效导航到文档的所有部分时,复杂的 Web 应用就会变得不可访问(参见 WAI-ARIA Authoring Practices)。WAI-ARIA将语义分为角色(定义用户界面元素的类型)和角色所支持的状态属性

作者需要在元素的生命周期内,将文档中的元素关联到相应的WAI-ARIA角色及其状态和属性(aria-* 属性),除非这些元素已经拥有适当的隐式 WAI-ARIA 语义来描述状态和属性。在这种情况下,等效的宿主语言状态和属性优先,以避免冲突;而 role 属性则优先于宿主语言元素的隐式角色。

4.1 WAI-ARIA 角色

使用role 属性,可以在元素上设置WAI-ARIA role,其用法类似于Role Attribute [ROLE-ATTRIBUTE] 中定义的 role 属性。

<li role="menuitem">打开文件…</li>

模型中每个角色的定义包括以下信息:

附加角色信息可让辅助技术了解如何处理每个元素。当 WAI-ARIA 角色覆盖宿主语言语义时,DOM 不会更改,仅在可访问性树中体现。

用户代理MUST使用 role 属性值序列中第一个与任何非抽象WAI-ARIA角色名称匹配的标记。正确识别适用角色的步骤:

  1. 使用宿主语言规则检测元素的 role 属性并获取其属性值字符串;
  2. 按空白字符将该字符串拆分为一系列子串;
  3. 将子串与所有非抽象WAI-ARIA角色名称进行比较,比较时遵循宿主语言的大小写规则;
  4. 按文本顺序选择第一个匹配的子串作为角色。

4.2 WAI-ARIA 状态与属性

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

例如,一个列表项(html:li)被用作可勾选菜单项,JavaScript 事件捕获鼠标和键盘操作以切换 aria-checked 的值。通过设置角色,可让用户代理识别该简单部件的行为。随用户操作变化的属性(如 aria-checked)在“状态与属性”部分中定义。

<li role="menuitemcheckbox" aria-checked="true">按最后修改时间排序</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 切换勾选标记的视觉呈现,作者也可通过额外的标记和脚本来管理表示菜单项是否被选中的图像。

<li role="menuitemcheckbox" aria-checked="true">
  <img src="checked.gif" role="presentation" alt="">
  <!-- 注意:需要额外脚本来切换图像源 -->
  按最后修改时间排序
</li>

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

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

WAI-ARIA 包含若干“管理容器”部件(也称为“复合”部件)。当合适时,容器需跟踪最后一个处于活动状态的后代(默认通常是容器中的第一个项)。至关重要的是,当焦点离开容器再重新聚焦时,容器应保持一致且可用的策略。通常建议在容器重新获得焦点时,将活动后代置为上次焦点离开时的同一元素。例外情况包括容器内内容已改变,或用户期望在菜单栏等部件中每次重新获得焦点时返回到第一项。例如,如果在用户使用 Tab 键退出树组时,第二项是活动后代,那么当树组再次获得焦点时,仍应以第二项作为活动后代。用户也可通过点击容器内后代之一来激活容器。当容器或其活动后代获得焦点后,用户可按箭头键等附加键在容器内导航。任何对主导航键(通常为 TAB)的额外按下都会将焦点移出容器,进入下一个部件。

在富互联网应用中,可用的键盘导航不同于静态文档中链接和表单控件等交互元素的 Tab 顺序范式。在富互联网应用中,用户通过 Tab 访问复杂部件(如菜单或电子表格),并使用箭头键在部件内导航。WAI-ARIA 对键盘导航的增强使得此类可访问性成为可能。在 WAI-ARIA 中,任何元素都可以通过键盘获得焦点。除了宿主语言机制(如 tabindex),aria-activedescendant 也提供了一种键盘操作机制。其他大多数 WAI-ARIA 部件开发都依赖键盘导航正常运行。

实现 aria-activedescendant 时,用户代理应将DOM焦点保持在容器元素或控制容器的输入元素上。但用户代理会向辅助技术发送桌面焦点事件和状态,仿佛aria-activedescendant所指元素已获得焦点。用户代理无需验证活动后代是否为容器元素的后代。用户代理应确保键盘事件在具有 DOM 焦点的元素上处理,且指向活动后代的键盘事件会冒泡到具有焦点的 DOM 元素进行处理。

4.3.1 作者须知

如果作者移除了当前获得焦点的元素,作者SHOULD将焦点移动到逻辑上合适的元素。同样,除非用户执行了滚动操作,作者SHOULD避免将有焦点的元素滚出视口。

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

作者MUST管理以下容器角色的焦点:

支持 WAI-ARIA 的用户代理会扩展宿主语言机制(如 tabindexfocusblur),使其可应用于所有元素。在宿主语言支持的情况下,作者MAY通过设置 tabindex="0" 将任何元素(如 divspanimg)加入默认 Tab 顺序。此外,任何具有负整数 tabindex 的元素可通过脚本或鼠标点击获取焦点,但不在默认 Tab 顺序中。此功能同时受[HTML]和[SVG2]支持。

作者MAY使用 aria-activedescendant 来告知辅助技术哪一个后代元素在用户界面中被视为具有键盘焦点(当部件角色支持 aria-activedescendant 时)。这通常是实现部件(如 listbox)键盘导航的更便捷方式——部件在页面 Tab 序列中只占一站,其他键(通常为箭头键)用于在部件内聚焦元素。

通常,作者会使用宿主语言语义将部件置于 Tab 序列(例如在 HTML 中设置 tabindex="0"),并使用 aria-activedescendant 指向当前活动后代的 ID。样式当前活动后代以显示键盘焦点是作者的责任;用户代理不会为此使用 :focus 选择器,因为实际焦点仍在容器上。

有关焦点管理的更多信息,请参见 开发键盘界面 一节的 WAI-ARIA Authoring Practices

4.3.2 用户代理须知

用户代理MUST为实现 aria-activedescendant 执行以下操作:

  1. 实现宿主语言的键盘导航方法,使支持 aria-activedescendant 的部件可包含在 Tab 顺序中;
  2. 对于公开 桌面焦点 或与 DOM 焦点分开的 辅助功能 API 焦点,当任何元素具有 DOM 焦点并且还具有指向有效 ID 引用aria-activedescendant 时,不要在辅助功能 API 中公开该元素的聚焦状态。
  3. 当具有 DOM 焦点的元素的 aria-activedescendant 属性更改时,移除之前焦点对象的焦点状态,并对新aria-activedescendant所引用的元素触发可访问性 API 的桌面焦点事件;若 aria-activedescendant 被清除或不指向当前文档中的元素,则对发生更改的对象触发焦点事件;
  4. 对任何具有 ID 属性且可被带有 aria-activedescendant 属性且具有 DOM 焦点的元素引用的元素,应用以下可访问性 API 状态。有两种方式可被 aria-activedescendant 引用:一种是被引用元素为拥有元素(owned)属性的子孙;另一种是被引用元素为受具有 role 为 comboboxtextboxsearchbox 并带有 aria-activedescendant 属性的元素所控制的子孙:
    1. 如果该元素具有非空角色,则该元素必须可聚焦;无需检查未设置角色的原生元素,其原生语义决定其可聚焦状态;
    2. 当该元素为aria-activedescendant 属性的目标且该属性所在元素具有 DOM 焦点时,该元素必须处于聚焦状态。

当辅助技术通过平台可访问性 API 请求更改焦点时,用户代理MUST执行:

  1. 从先前聚焦对象移除平台焦点状态;
  2. 设置 DOM 焦点:
    1. 如果目标元素可接受 DOM 焦点,则用户代理MUST将 DOM 焦点设为该元素;
    2. 否则,如果目标元素有 ID 且该 ID 被一个可聚焦元素的 aria-activedescendant 属性引用,则用户代理MUST将 DOM 焦点设为带有 aria-activedescendant 属性的元素。
      注:

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

      注:

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

    3. 否则,用户代理MAY尝试将 DOM 焦点设置到子元素自身。
  3. 如果当前元素有 ID 且被带有 aria-activedescendant 属性且具有 DOM 焦点的容器元素拥有,或被受带有 aria-activedescendant 属性的容器元素控制且具有 DOM 焦点,则用户代理MUST设置可访问性 API 的焦点状态,并对由 aria-activedescendant 标识的元素触发可访问性 API 的焦点事件

5. 角色模型

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

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

为了在文档对象模型(DOM)中反映内容,用户代理SHOULD将 role 属性映射到所实现可访问性API 的相应值,并在 role 属性更改时SHOULD更新该映射。

5.1 概念之间的关系

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

5.1.1 超类角色

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

5.1.2 子类角色

提供一个信息性列表,列出以该角色为超类的角色。旨在便于阅读规范,但不添加新信息。

提供信息性的数据,描述其他规范中相似或相关的概念。相关概念不一定完全相同,也不会相互继承属性,因此当一个概念的定义更改时,其相关概念的属性、行为和定义不受影响。

例如,进度条(progressbar)类似于状态指示器。因此,progressbar 部件具有包括status在内的“相关概念”。但如果 status 的定义被修改,progressbar 的定义不会改变。

5.1.4 基准概念

提供信息性的数据,描述被视为该角色原型的对象。基准概念类似于类型,但不继承限制和属性。基准概念用于替代外部概念的继承,几乎与角色定义一致。

例如,本文件中定义的checkbox与[cite]HTML规范中定义的<input[type="checkbox"]>在功能和预期行为上相似。因此,checkboxbaseConcept是 HTML 规范中的 checkbox。但如果原 HTML 规范的 baseConcept 定义被修改,本文件中的checkbox定义不会受到影响,因为并不存在实际的类型继承。

5.2 角色的特性

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

角色定义了以下特性:

5.2.1 抽象角色

取值
Boolean

抽象角色是构建所有其他 WAI-ARIA 角色的基础。内容作者MUST NOT使用抽象角色,因为它们不会在API绑定中实现。用户代理MUST NOT将抽象角色映射到可访问性 API 的标准角色机制。提供抽象角色旨在:

  1. 组织角色模型,并为角色在已知概念上下文中提供含义;
  2. 简化包含必要功能的新角色的添加。

5.2.2 必需状态和属性

角色及其子类角色特别要求的状态属性。内容作者MUST为必需的状态和属性提供非空值;除非undefined为该状态或属性显式支持的取值,否则MUST NOT使用undefined

当一个对象同时从多个祖先继承属性,其中一个祖先表示该属性受支持而另一个表示该属性为必需时,则在继承的对象中该属性为必需。

注:

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

5.2.3 支持的状态和属性

角色及其子角色特别适用的状态属性。内容作者MAY为支持的状态和属性提供值,但当默认值足够时无需提供。用户代理MUST将角色支持的所有状态和属性映射到可访问性 API。如状态或属性未定义但角色具有默认值,用户代理SHOULD公开该默认值。

注:

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

5.2.4 继承的状态和属性

信息性地列出角色从超类角色继承的属性。继承的是角色模型中的状态和属性,而非 DOM 树中祖先元素的属性。此信息仅用于便于阅读规范。角色所支持的状态和属性,加上继承的状态和属性,共同构成该角色支持的完整状态和属性集合。

5.2.5 禁止的状态和属性

列出禁止在角色上使用的状态和属性。内容作者MUST NOT指定任何禁止的状态或属性。

注:

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

5.2.6 必需拥有的元素

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

当列出多个必需拥有的元素角色时,期望至少存在其中一种角色的一个实例。本规范要求同时拥有列表中所有角色的实例。例如,menu角色应至少拥有一个menuitemmenuitemcheckboxmenuitemradio,但并不要求同时拥有三者。

在编辑或加载数据集期间,可能出现缺少必需拥有元素的情况。当由于脚本执行或加载导致部件缺少必需拥有元素时,作者MUST将包含元素标记为 aria-busy="true"。例如,在页面初始化完成之前,作者可将文档元素标记为忙碌状态。

注:

具有“必需拥有元素”关系的角色并不意味着反向关系。虽然在处理角色时若无指定角色的后代,则处理不完整,但具有列表中角色的元素并不一定必须出现在给定角色的元素中。关于元素需要在何种上下文中包含指定角色的要求,请参见所需上下文角色

注:

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

注:

具有适当隐式 WAI-ARIA 语义的元素可满足此要求。

5.2.7 必需上下文角色

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

注:

具有“必需上下文角色”的角色并不意味着反向关系。虽然具有给定角色的元素需出现在所列角色元素内才能有意义,但所列角色的元素并不总需要包含给定角色的后代。有关给定角色需要在何种上下文中被处理,请参见必需拥有元素

注:

具有适当隐式 WAI-ARIA 语义的元素可满足此要求。

5.2.8 可访问名称计算

取值
以下三种值之一:
  1. author:名称来自作者在显式标记特性(如aria-labelaria-labelledby或宿主语言标注机制(例如 HTML 中的alttitle属性)中提供的值,其中 HTML title 属性优先级最低。
  2. contents:名称来自元素的文本节点值。此方式仅在未提供"author"中更高优先级特性时用于某些角色。优先级由 [ACCNAME-1.2 可访问名称与描述计算] 算法定义。
  3. prohibited:元素不支持作者命名。作者MUST NOT使用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 呈现性子代

取值

Boolean(true | false

该元素在 DOM 中的子孙节点为呈现性。用户代理 不应通过平台 可访问性 API 暴露该元素的子孙节点。如果用户代理未隐藏这些子孙节点,可能会导致某些信息被重复读取。

5.2.10 角色的隐含默认值

许多状态和属性都有默认值。有时,对于某些角色,状态或属性的默认值应与通常默认值不同。这些角色会在“角色的隐含默认值”中加以说明,格式为“状态或属性名 的默认值为 新默认值”。当作者未提供显式值时,这些角色就使用该新默认值。

5.3 角色分类

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

可在 ARIA 1.2 类图 中查看角色之间关系的可视化描述。

角色分类如下:

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

5.3.1 抽象角色

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

抽象角色用于本体定义。内容作者MUST NOT在内容中使用抽象角色。

5.3.2 部件角色

以下角色可作为独立用户界面部件或较大复合部件的一部分:

以下角色可作为复合用户界面部件,通常作为管理其他子部件的容器:

5.3.3 文档结构角色

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

5.3.4 地标角色

以下角色表示页面中的导航地标区域。所有这些角色均继承自landmark基类型,并从Role Attribute规范导入。此处列出它们以明确它们是 WAI-ARIA 角色模型的一部分。

5.3.5 实时区域角色

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

5.3.6 窗口角色

以下角色可作为浏览器或应用程序中的窗口使用:

5.4 角色定义

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

抽象角色用于本体定义。内容作者MUST NOT在内容中使用抽象角色。

alert
一种实时区域,包含重要且通常时间敏感的信息。相关内容参见alertdialogstatus
alertdialog
一种包含警报信息的对话框,初始焦点会聚焦在对话框中的一个元素上。相关内容参见alertdialog
application
一个包含一个或多个需要用户输入(如键盘或手势事件)的可聚焦元素的结构,这些元素不遵循部件角色支持的标准交互模式。
article
页面中的一个部分,由一个组成部分构成,形成文档、页面或站点的独立部分。
banner
一种地标,主要包含面向站点的内容,而非页面特定内容。
blockquote
引用自其他来源的内容部分。
button
一种输入,允许用户通过点击或按下触发动作。相关内容参见链接
caption
可见内容,用于命名或描述表格网格树网格
cell
表格容器中的单元格。相关内容参见网格单元格
checkbox
一种可选输入,具有三种truefalsemixed
code
内容表示计算机代码片段的部分。
columnheader
包含列的标题信息的单元格。
combobox
一种输入,用于控制其他元素,例如动态弹出的列表框网格,帮助用户设置输入的值。
command
一种执行动作但不接收输入数据的部件。
complementary
DOM层级中与主内容处于相同级别,旨在补充主内容的地标,即使与主内容分离仍然有意义。
composite
一种部件,可能包含可导航的后代或拥有的子代。
contentinfo
一种地标,包含有关父文档的信息。
definition
术语或概念的定义。相关内容参见术语
deletion
标记为已删除或建议删除的内容。相关内容参见插入
dialog
一种对话框,是 Web 应用程序主窗口的子窗口。对于 HTML 页面,主窗口为整个 Web 文档,即 body 元素。
directory
[已弃用于 ARIA 1.2] 一个引用组成员的列表,例如静态目录表。
document
包含内容的一个元素,辅助技术用户可能希望以阅读模式浏览该内容。
emphasis
一个或多个被强调的字符。相关内容参见重要
feed
一个可滚动的列表,其中包含文章,滚动时可能会在列表的两端添加或删除文章。
figure
一个可感知的部分,通常包含图形文档、图片、代码片段或示例文本。figure 的部分MAY可供用户导航。
form
一个地标区域,包含一组项目和对象,作为整体构成一个表单。相关内容参见搜索
generic
一个无名的容器元素,本身没有语义意义。
grid
一个复合部件,包含一个或多个行和一个或多个单元格的集合,网格中的一些或全部单元格可以通过二维导航方式(例如方向箭头键)获得焦点。
gridcell
一个单元格,位于网格树网格中。
group
一组用户界面对象,不应由辅助技术包含在页面摘要或目录中。
heading
页面部分的标题。
img
由一组元素构成的图片容器。
input
允许用户输入的一种通用类型的部件
insertion
标记为已添加或建议添加的内容。相关内容参见删除
landmark
一个可感知的部分,包含与特定、作者指定目的相关且足够重要的内容,以至于用户可能希望能够轻松导航到该部分并将其列在页面摘要中。此类页面摘要可由用户代理或辅助技术动态生成。
link
一个指向内部或外部资源的交互式引用,激活后会使用户代理导航到该资源。相关内容参见 button
list
一个包含 listitem 元素的 section。相关内容参见 listbox
listbox
一个允许用户从选项列表中选择一个或多个项目的 widget。相关内容参见 comboboxlist
listitem
列表或目录中的单个项目。
log
一种实时区域,新信息按有意义的顺序添加,旧信息可能会消失。相关内容参见 marquee
main
一个包含文档主要内容的 landmark
marquee
一种实时区域,其中非必要信息频繁更改。相关内容参见 log
math
表示数学表达式的内容。
meter
一个表示已知范围内标量测量值或分数值的 element。相关内容参见 progressbar
menu
一种向用户提供选项列表的 widget
menubar
一种通常保持可见且水平呈现的 menu
menuitem
包含在 menumenubar 中的选项集合中的一个选项。
menuitemcheckbox
一个具有可勾选状态的 menuitem,其可能的值为 truefalsemixed
menuitemradio
一组具有相同角色的元素中的一个可勾选的 menuitem,其中一次只能勾选一个。
navigation
一个包含用于导航文档或相关文档的导航元素(通常是链接)集合的 landmark
none
一个其隐式原生角色语义不会映射到可访问性API元素。同义词参见 presentation
note
其内容为资源主要内容的附带或辅助说明的部分。
option
一个在 listbox 中的可选项。
paragraph
一段内容。
presentation
一个其隐式原生角色语义不会映射到可访问性API元素。同义词参见 none
progressbar
一个显示耗时较长任务进度状态的 element
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
一种允许自由格式文本作为其值的输入类型。
time
一个表示特定时间点的元素。
timer
一种实时区域,包含一个数字计数器,指示从起点开始经过的时间或到终点剩余的时间。
toolbar
以紧凑视觉形式表示的常用功能按钮或控件的集合。
tooltip
一个显示元素描述的上下文弹出窗口。
tree
一个widget,允许用户从分层组织的集合中选择一个或多个项目。
treegrid
一个其行可以像tree一样展开和折叠的grid
treeitem
一个tree的选项项。这是一个树中的元素,如果它包含一个子级别的树项目元素组,则可以展开或折叠。
widget
图形用户界面(GUI)的交互式组件。
window
浏览器或应用程序窗口。

alert 角色

一种实时区域,包含重要且通常时间敏感的信息。相关内容参见alertdialogstatus

警报用于传达可能对用户立即重要的消息。对于音频警告,警报为听障用户提供了无障碍的替代方案。alert 角色应用于包含警报消息的元素。alertstatus角色的一种特殊形式,被处理为原子性的实时区域

警报是强提醒的实时区域,这意味着它们会立即通知辅助技术用户。如果操作系统允许,用户代理SHOULD在创建WAI-ARIA警报时通过可访问性API触发系统警报事件

作者和用户代理都无需为警报设置或管理焦点以使其被处理。由于警报不需要接收焦点,作者SHOULD NOT要求用户关闭警报。如果作者希望在传达消息时将焦点移至该消息,作者SHOULD使用alertdialog而非alert

具有alert角色的元素具有aria-live的隐式值为assertive,以及aria-atomic的隐式值为true

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

alertdialog 角色

一种包含警报消息的对话框,初始焦点会转到对话框内的一个元素。相关内容参见alertdialog

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

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

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

特性:
特性
超类角色:
继承的状态和属性:
名称来源: 作者
需要无障碍名称:

application 角色

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

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

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

例如,一个演示幻灯片编辑器使用箭头键来改变幻灯片上文本框和图片元素的位置。没有任何WAI-ARIA 部件角色与这种交互模型相对应,因此作者可以给幻灯片容器赋予application角色,并提供“幻灯片编辑器”的aria-roledescription,以及使用aria-describedby来提供说明。

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

  1. 使用aria-labelledbyaria-describedby将内容与可聚焦元素关联起来。
  2. 将内容放置在具有documentarticle角色的可聚焦元素中。
  3. 管理焦点中所述,管理所属元素的焦点,更新aria-activedescendant的值以引用包含焦点内容的元素
特性:
特性
超类角色: structure
支持的状态和属性:
继承的状态和属性:
名称来源: 作者
需要无障碍名称:

article 角色

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

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

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

articlefeed的上下文中时,作者MAYaria-posinsetaria-setsize指定值。

特性:
特性
超类角色: document
相关概念:
支持的状态和属性:
继承的状态和属性:
名称来源: 作者

blockquote 角色

从另一个来源引用的内容部分。

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

button 角色

一种输入,允许在单击或按下时触发用户操作。相关内容参见link

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

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

特性:
特性
超类角色: command
基本概念: <button> in [HTML]
相关概念:
支持的状态和属性:
继承的状态和属性:
名称来源:
  • 内容
  • 作者
需要无障碍名称:
子元素呈现性:

caption 角色

可见内容,用于命名,也可能描述figuretablegridtreegrid

使用caption时,作者SHOULD确保:

作者SHOULD在父figuretablegridtreegrid上设置aria-labelledby以引用具有caption角色的元素。但是,如果caption包含的内容既作为其父元素的名称又作为描述,作者MAY改为将aria-labelledby设置为引用caption内包含简洁名称的元素,并将aria-describedby设置为引用caption内包含描述性内容的元素。

<div role="table" aria-labelledby="name" aria-describedby="desc">
   <div role="caption">
     <div id="name">参赛者</div>
     <div id="desc">
       此表显示了比赛在过去四周内接受的参赛者总数(500人)。
     </div>
   </div>
   <!-- ... -->
特性:
特性
超类角色: section
相关概念:
必需的上下文角色:
继承的状态和属性:
禁用的状态和属性:
名称来源: 禁止

cell 角色

表格容器中的一个单元格。相关内容参见 gridcell

作者 MUST 确保具有 角色 cell 的元素被包含在或由具有角色 row 的元素拥有。

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

checkbox 角色

一种可勾选的输入,有三种可能的值:truefalsemixed

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

特性:
特性
超类角色: input
子类角色:
相关概念:
必需的状态和属性:
支持的状态和属性:
继承的状态和属性:
名称来源:
  • 内容
  • 作者
需要无障碍名称:
子元素呈现性:

code 角色

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

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

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

columnheader 角色

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

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

columnheader 在其自身与相应列中的所有单元格之间建立关系。它在结构上等同于具有列范围的HTML th 元素

作者 MUST 确保具有 角色 columnheader元素被包含在或由具有 row 角色的元素拥有

在列标题上应用 aria-selected 状态 MUST NOT 导致用户代理自动将 aria-selected 状态传播到相应列中的所有单元格。作者 MAY 根据具体应用选择以这种方式传播选择。

虽然 columnheader 角色可用于交互式网格和非交互式表格,但 aria-readonlyaria-required 的使用仅适用于交互式元素。因此,作者 SHOULD NOT 在从 table 派生的 columnheader 中使用 aria-requiredaria-readonly,并且用户代理 SHOULD NOT 将任一属性暴露给辅助技术,除非 columnheader 是从 grid 派生的。

因为单元格被组织成行,所以没有单独的容器元素用于列。列是其各自 row 容器中特定位置的 gridcell 元素集合。

:aria-disabled 的用法

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

特性:
特性
超类角色:
基本概念: <th[scope="col"]> in [HTML]
必需的上下文角色: row
支持的状态和属性: aria-sort
继承的状态和属性:
名称来源:
  • 内容
  • 作者
需要无障碍名称:

combobox 角色

一个输入,用于控制另一个元素,例如一个可以动态弹出的列表框网格,以帮助用户设置输入的值。

编者注:ARIA 1.2 中对 combobox 角色的重大更改

由于先前模式的实现问题,combobox 的指南在 ARIA 1.2 中发生了重大变化。建议用户代理、辅助技术和符合性检查器的作者和开发者仔细审查本节以了解这些变化。变化的解释可在 ARIA 存储库维基中找到。

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

通常,combobox 的初始状态是折叠的。在折叠状态下,只有 combobox 元素和一个单独的可选弹出控件 button 是可见的。当 combobox 元素显示其当前值及其关联的弹出元素都可见时,称 combobox 为展开状态。作者 MUST 在具有 combobox 角色的元素上,当其展开时设置 aria-expandedtrue,折叠时为 false

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

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

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

用户代理 MUST 将具有 combobox 角色的元素的值暴露给辅助技术combobox 的值由以下之一表示:

  • 如果 combobox 元素是提供值的主机语言元素,例如 HTML input 元素,则组合框的值是该元素的值。
  • 否则,combobox 的值由其后代元素表示,并且可以使用与从其后代内容计算 button 名称相同的方法来确定。
    <label for="tag_combo">标签</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 规范的组合框将不再符合 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 元素的组合框表示。

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

特性:
特性
超类角色: input
相关概念:
必需的状态和属性:
支持的状态和属性:
继承的状态和属性:
名称来源: 作者
需要无障碍名称:
角色的隐式值: aria-haspopup 的默认值为 listbox

command 角色

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

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

特性:
特性
是否抽象:
超类角色: widget
子类角色:
继承的状态和属性:
名称来源: 作者

complementary 角色

一个地标,设计用于补充在DOM层次结构中处于相似级别的主内容,但在与主内容分离时仍保持其意义。

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

用户代理SHOULD将具有complementary角色的元素视为导航地标

特性:
特性
超类角色: landmark
继承的状态和属性:
名称来源: 作者

composite 角色

一个部件,可能包含可导航的后代或拥有的子元素。

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

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

特性:
特性
是否抽象:
超类角色: widget
子类角色:
支持的状态和属性:
继承的状态和属性:
名称来源: 作者

contentinfo 角色

一个地标,包含有关父文档的信息。

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

用户代理SHOULD将具有contentinfo角色的元素视为导航地标

在任何documentapplication中,作者SHOULD最多只标记一个具有contentinfo角色的元素

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

特性:
特性
超类角色: landmark
继承的状态和属性:
名称来源: 作者

definition 角色

术语或概念的定义。相关内容参见 term

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

特性:
特性
超类角色: section
继承的状态和属性:
名称来源: 作者

deletion 角色

一个删除项包含被标记为已删除或建议删除的内容。相关内容参见 insertion

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

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

dialog 角色

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

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

作者 必须 为对话框提供一个无障碍名称,这可以通过 aria-labelaria-labelledby 属性来完成。

作者 确保所有对话框(模态和非模态)至少有一个可聚焦的后代元素。作者 在显示模态对话框时聚焦其中的一个元素,并且作者 管理模态对话框的焦点。

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

特性:
特性
超类角色: window
子类角色:
继承的状态和属性:
名称来源: 作者
需要无障碍名称:

directory 角色

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

通过可访问性 API 暴露时,directory 角色基本上等同于 list 角色。因此,使用 directory 不会为辅助技术用户带来任何额外的好处。建议作者将 directory 视为已弃用,并改用 list 或宿主语言的等效语义。

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

特性:
特性
超类角色: list
继承的状态和属性:
名称来源: 作者

document 角色

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

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

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

特性:
特性
超类角色: structure
子类角色:
继承的状态和属性:
名称来源: 作者
需要无障碍名称:

emphasis 角色

一个或多个强调的字符。相关内容参见 strong

emphasis 角色的目的是强调或着重内容。它不用于传达不影响内容含义的排版变化。作者 SHOULD 仅在其缺失会改变内容含义时才使用 emphasis 角色。

emphasis 角色不旨在传达重要性;为此,strong 角色更合适。

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

feed 角色

一个可滚动的文章列表,滚动时可能会在列表的两端添加或删除文章

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

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

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

作者SHOULD使feed中的每个article都可聚焦,并确保当用户代理焦点设置在article或其后代元素上时,应用程序会将该article滚动到视图中。例如,在HTML中,每个article元素都应具有-10tabindex值。

辅助技术阅读光标从一个article移动到另一个时,辅助技术SHOULD将用户代理焦点设置在包含阅读光标的article上。如果阅读光标落在article内的可聚焦元素上,辅助技术MAY将焦点设置在该元素上,而不是设置在包含它的article上。

因为使用辅助技术阅读光标滚动到另一个article的能力取决于页面中是否存在另一个article,作者SHOULD用户代理焦点到达已加载的articles集合两端的article之前尝试加载额外的articles。或者,作者MAY在已加载的articles集合的一端或两端包含一个article,其中包含一个元素,如button,让用户请求加载更多articles

除了提供简短的标签外,作者MAYfeed中的article元素上应用aria-describedby,以向屏幕阅读器建议当用户按article导航时在标签后朗读哪些元素。屏幕阅读器MAY为用户提供一种快速浏览feed内容的方法,即在按article导航时朗读标签和无障碍描述,使用户能够忽略作者已从描述中省略的重复或不太重要的元素,如嵌入式交互小部件。

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

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

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

特性:
特性
超类角色: list
必需的拥有元素: article
继承的状态和属性:
名称来源: 作者
需要无障碍名称:

figure 角色

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

作者SHOULD在主文本中提供对figure的引用,但figure不必与引用元素显示在同一位置。作者MAY使用aria-describedby引用作为标题的文本。作者MAY使用aria-label提供标签,或MAY使用aria-labelledby引用作为标签的文本。

辅助技术SHOULD使用户能够快速导航到图表。主流用户代理MAY使用户能够快速导航到图表。

特性:
特性
超类角色: section
相关概念:
继承的状态和属性:
名称来源: 作者
需要无障碍名称:

form 角色

一个地标区域,包含一组项目和对象,作为整体构成一个表单。相关内容参见 search

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

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

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

用户代理SHOULD将具有form角色的元素视为导航地标

特性:
特性
超类角色: landmark
基本概念: <form> in [HTML]
继承的状态和属性:
名称来源: 作者
需要无障碍名称:

generic 角色

一个无名的容器元素,其本身没有语义意义。

generic角色旨在用作宿主语言中通用元素(如HTML divspan)的隐式角色,因此主要供用户代理的实现者使用。作者SHOULD NOT在内容中使用此角色。作者MAY使用presentationnone来移除隐式的可访问性语义,或使用group等语义容器角色来在命名容器中对后代进行语义分组。

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

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

grid 角色

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

grid角色不意味着特定的视觉呈现,例如表格。它描述了元素之间的关系。它可以用于简单的目的,如对复选框或导航链接集合进行分组,也可以用于创建功能齐全的电子表格应用程序等复杂目的。

grid的单元格元素具有gridcell角色。作者MAY通过使用rowheadercolumnheader角色代替gridcell角色,将单元格指定为行或列标题。作者MUST确保具有gridcellcolumnheaderrowheader角色的元素由具有row角色的元素拥有,而这些元素又由具有rowgroupgrid角色的元素拥有。

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

  • 如果gridcell包含一个在获得焦点时不会消耗箭头键按下的单个交互式部件,例如checkboxbuttonlink,作者MAY将焦点设置在该单元格中包含的交互式元素上。这允许所包含的部件直接操作。
  • 否则,作者SHOULD确保接收焦点的元素是gridcellrowheadercolumnheader元素。

如果可聚焦单元格包含以下任何一项,作者SHOULD提供一种机制来更改为交互或编辑模式,允许用户导航和与可聚焦单元格内包含的内容进行交互:

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

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

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

如果在具有grid角色的元素上设置了aria-readonly用户代理MUST将该值传播到由grid拥有的所有gridcell元素,并在可访问性API中公开该值。作者MAY为单个gridcell元素覆盖aria-readonly的传播值。

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

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

作者MAY使用aria-selected属性指示可聚焦的gridcell可作为操作对象进行选择。如果grid允许多个gridcell被选中,作者SHOULD在具有grid角色的元素上将aria-multiselectable设置为true

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

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

特性:
特性
超类角色:
子类角色:
基本概念: <table> in [HTML]
必需的拥有元素:
支持的状态和属性:
继承的状态和属性:
名称来源: 作者
需要无障碍名称:

gridcell 角色

gridtreegrid 中的单元格

一个 gridcell 可以是可聚焦、可编辑和可选择的。一个 gridcell 可能具有如 aria-controls 之类的关系,以处理功能关系的应用。

如果作者希望 gridcell 具有行标题、列标题或两者,并且如果相关的标题无法从DOM结构中确定,作者 SHOULD 通过在 gridcell 上应用 aria-describedby 并引用具有 角色 rowheadercolumnheader元素来明确指出哪些标题单元格与 gridcell 相关。

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

作者 MUST 确保具有 角色 gridcell 的元素被包含在或由具有角色 row 的元素拥有

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

group 角色

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

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

作者SHOULD使用group来在小部件中形成项目的逻辑集合,例如树小部件中的子项形成层次结构中的同级集合。但是,当在listbox的上下文中使用group时,作者MUST将其子项限制为option元素。因此,作者和辅助技术对group的正确处理取决于其提供的上下文。

作者MAY嵌套group元素。如果一个部分足够重要,需要包含在网页的目录中,作者SHOULD为其分配region角色或一个标准地标角色

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

heading 角色

页面某个部分的标题。

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

特性:
特性
超类角色: sectionhead
相关概念:
必需的状态和属性: aria-level
继承的状态和属性:
名称来源:
  • 内容
  • 作者
需要无障碍名称:

img 角色

用于包含形成图像的元素集合的容器。

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

特性:
特性
超类角色: section
相关概念:
继承的状态和属性:
名称来源: 作者
需要无障碍名称:
子元素呈现性:

input 角色

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

特性:
特性
是否抽象:
超类角色: widget
子类角色:
支持的状态和属性: aria-disabled
继承的状态和属性:
名称来源: 作者

insertion 角色

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

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

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

landmark 角色

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

作者通过分配一个作为地标角色子类的角色来指定内容的目的,并在需要时提供一个简短的描述性标签。

具有地标角色子类角色的元素被称为地标区域或导航地标区域。辅助技术SHOULD使用户能够快速导航到地标区域。主流用户代理MAY使用户能够快速导航到地标区域。

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

特性:
特性
是否抽象:
超类角色: section
子类角色:
继承的状态和属性:
名称来源: 作者
需要无障碍名称:

list 角色

一个包含listitem元素的区域。相关内容参见 listbox

列表包含其角色listitem的子元素。

特性:
特性
超类角色: section
子类角色:
基本概念:
必需的拥有元素: listitem
继承的状态和属性:
名称来源: 作者

listbox 角色

一个部件,允许用户从一个选择列表中选择一个或多个项目。相关内容参见comboboxlist

列表中的项目是静态的,与标准的HTML select 元素不同,可能包含图像。列表框包含其角色option的子元素,或其角色group的元素,而后者又包含其角色option的子元素。

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

具有listbox角色的元素具有一个隐式的verticalaria-orientation值。

特性:
特性
超类角色:
相关概念:
必需的拥有元素:
支持的状态和属性:
继承的状态和属性:
名称来源: 作者
需要无障碍名称:
角色的隐式值: aria-orientation 的默认值为 vertical

listitem 角色

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

作者MUST确保其角色listitem元素包含在或由其角色list元素拥有

特性:
特性
超类角色: section
子类角色:
基本概念: <li> in [HTML]
必需的上下文角色:
支持的状态和属性:
继承的状态和属性:
名称来源: 作者

log 角色

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

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

具有log角色的元素具有一个隐式的politearia-live值。

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

main 角色

一个地标,包含文档的主要内容。

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

用户代理SHOULD将具有main角色的元素视为导航地标。

在任何documentapplication中,作者SHOULD最多只标记一个具有main角色的元素

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

特性:
特性
超类角色: landmark
继承的状态和属性:
名称来源: 作者

marquee 角色

一种实时区域,其中非必要信息频繁更改。相关内容参见log

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

具有marquee角色的元素具有一个隐式的offaria-live值。

特性:
特性
超类角色: section
继承的状态和属性:
名称来源: 作者
需要无障碍名称:

math 角色

表示数学表达式的内容。

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

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

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

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

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

<!-- 注:使用 JavaScript polyfill 库以确保
     这在不支持 MathML 的用户代理中呈现。 -->
<!-- math 元素具有隐式 role="math"。 -->
<math xmlns="http://www.w3.org/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>

HTMLMathML二次公式的Polyfill DOM结果

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

<img role="math" src="..." alt="x=⟮−b±√⟮b²−4ac⟯⟯÷2a">
特性:
特性
超类角色: section
继承的状态和属性:
名称来源: 作者
子元素呈现性:

meter 角色

表示已知范围内的标量测量值或分数值的元素。相关内容参见 progressbar

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

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

aria-valuenow的值MUST NOT分别不能低于aria-valuemin或超过aria-valuemax的计算值。

作者SHOULD NOT使用meter角色来表示进度;为此应使用progressbar角色。

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

特性:
特性
超类角色: range
相关概念:
必需的状态和属性: aria-valuenow
继承的状态和属性:
名称来源: 作者
需要无障碍名称:
子元素呈现性:
角色的隐式值: aria-valuemin 的默认值为 0
aria-valuemax 的默认值为 100

none 角色

一个元素,其隐含的原生角色语义不会映射到辅助应用程序接口中。参见同义词 presentation

注意

关于 ARIA 1.1 中 none 角色的说明

在 ARIA 1.1 中,工作组将 none 作为 presentation 角色的同义词引入,以消除作者对“presentation”或“presentational”一词含义的混淆。许多人错误地将 role="presentation" 视为 aria-hidden="true" 的同义,而我们认为 role="none" 能更明确地传达其实际含义。

note 角色

一个其内容为附加或与主要内容无关的部分。

特性:
特点
父类角色: section
继承的状态和属性:
名称来源: 作者

option 角色

这是一个在 listbox 中可选的项目。

作者必须确保具有 元素以及 角色 option 的项目被包含在,或由具有 角色 listboxgroup 的元素拥有。在未与 listbox 关联的情况下,选项可能不会被正确映射到辅助应用程序接口中。

具有 option 角色的元素隐含的 aria-selected 值为 false

特性:
特点
父类角色: input
子类角色:
基本概念: <option> in [HTML]
相关概念:
必需的上下文角色:
必需的状态和属性:
支持的状态和属性:
继承的状态和属性:
名称来源:
  • 内容
  • 作者
需要可访问名称: True
子元素呈现性: True
角色的隐含值: 对于 aria-selected 的默认值为 false.

paragraph role

一段内容。

特性:
特点
父类角色: section
相关概念:
继承的状态和属性:
禁止的状态和属性:
名称来源: 禁止使用

presentation 角色

一个元素,其隐含的原生角色语义不会映射到辅助应用程序接口中。参见同义词 none

注意

关于 ARIA 1.1 中 none 角色的说明

在 ARIA 1.1 中,工作组将 none 作为 presentation 角色的同义词引入,这是由于作者对词语“presentation”或“presentational”预期含义的混淆。许多人错误地认为 role="presentation"aria-hidden="true" 等同,而我们认为 role="none" 能更明确地传达实际含义。

在充分支持 role="none" 的实现出现之前,建议网络作者仅使用 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 角色)需要 tr 后代(row 角色),而 tr 后代又 需要 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 角色应用于 presentational 元素的所有特定于宿主语言的标签元素。例如,具有 presentation 角色的 table 元素将删除其 caption 元素的隐式原生语义,因为 caption 仅仅是 presentational 表格的标签。

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

在以下代码示例中,包含的 img 元素被 caption 段落正确地标记。在此示例中,img 元素可以标记为 presentation,因为 角色和文本替代方案由包含元素提供。

<div role="img" aria-labelledby="caption">
  <img src="example.png" role="presentation" alt="">
  <p id="caption">一个可见的文本标题,用于标记图像。</p>
</div>

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

<ul role="tree">
  <li role="presentation">
	<a role="treeitem" aria-expanded="true">一个展开的树节点</a>
  </li></ul>

Presentational 角色冲突解决

解决 presentational 角色冲突的方法有很多。

用户代理 必须不 在可访问性树中公开具有显式或继承的 presentational 角色的 元素,但以下情况除外:

  • 如果一个元素是可聚焦的,或者以其他方式是可交互的,用户代理 必须 忽略 presentation 角色,并以其隐式角色公开该元素,以确保该元素是 可操作的
  • 如果一个 必需的拥有元素 具有显式的非 presentational 角色,用户代理 必须 忽略继承的 presentational 角色,并以其显式角色公开该元素。如果公开显式角色的操作导致可访问性树格式错误,则预期结果未定义。
  • 如果一个元素具有全局的 WAI-ARIA 状态或属性,用户代理 必须 忽略 presentation 角色,并以其隐式角色公开该元素。但是,如果一个元素只有非全局的、特定于角色的 WAI-ARIA 状态或属性,则 必须不 公开该元素,除非 presentational 角色是继承的,并且应用了显式的非 presentational 角色。

例如,aria-describedby 是一个全局属性,并且将始终应用;aria-level 不是一个全局属性,因此仅在元素不是 presentational 状态时才适用。

<!-- 1. 由于全局 aria-describedby 属性,[role="presentation"] 被忽略。 -->
<h1 role="presentation" aria-describedby="comment-1"> 示例内容 </h1>
<!-- 2. [role="presentation"] 否定了隐式的 'heading' 和非全局的 aria-level。 -->
<h1 role="presentation" aria-level="2"> 示例内容 </h1>
特性:
特性
超类角色: structure
继承的状态和属性:
禁止的状态和属性:
名称来自: 禁止

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

特性:
特性
超类角色:
相关概念:
继承的状态和属性:
名称来自: 作者
需要可访问的名称:
子元素是否仅用于呈现:
角色的隐式值: aria-valuemin 的默认值为 0
aria-valuemax 的默认值为 100

radio 角色

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

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

特性:
特性
超类角色:
相关概念:
必需的状态和属性:
支持的状态和属性:
继承的状态和属性:
名称来自:
  • 内容
  • 作者
需要可访问的名称:
子元素是否仅用于呈现:

radiogroup 角色

一组 radio 按钮。

radiogroup 是一种 select 列表,在任何时候只能选中一个条目。作者 应该 强制执行一个组中只能同时选中一个单选按钮。当选中组中的一个项目时,先前选中的项目变为未选中状态(其 aria-checked 属性 变为 false)。

特性:
特性
超类角色: select
相关概念: list
必需的拥有元素: radio
支持的状态和属性:
继承的状态和属性:
名称来自: 作者
需要可访问的名称:

range 角色

表示一系列值的元素。

注意

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

特性:
特性
是否为抽象角色:
超类角色: structure
子类角色:
支持的状态和属性:
继承的状态和属性:
名称来自: 作者

region 角色

一个 landmark,包含与特定的、作者指定用途相关的内容,并且非常重要,以至于用户可能希望能够轻松地导航到该部分并在页面摘要中列出该部分。这种页面摘要可以由用户代理或辅助技术动态生成。

作者 应该 将 region 角色的使用限制为包含的内容的目的不能被其他 landmark 角色准确描述的部分,例如 maincomplementarynavigation

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

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

特性:
特性
超类角色: landmark
相关概念:
继承的状态和属性:
名称来自: 作者
需要可访问的名称:

roletype 角色

所有其他角色继承的基础 角色

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

注意

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

特性:
特性
是否为抽象角色:
子类角色:
支持的状态和属性:
名称来自:
  • 不适用

row 角色

表格容器中的一行单元格。

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

虽然 row 角色可以在 tablegridtreegrid 中使用,但 aria-expandedaria-posinsetaria-setsizearia-level 的语义仅适用于交互式树形网格的分层结构。因此,作者 必须不aria-expandedaria-posinsetaria-setsizearia-level 应用于从 tablegrid 派生的 row,并且用户代理 不应该 向辅助技术公开这四个属性,除非 rowtreegrid 派生。

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

注意: aria-disabled 的用法

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

特性:
特性
超类角色:
基本概念: <tr> 在 [HTML]
必需的上下文角色:
必需的拥有元素:
支持的状态和属性:
继承的状态和属性:
名称来自:
  • 内容
  • 作者

rowgroup 角色

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

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

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

注意

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

注意

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

特性:
特性
超类角色: structure
基本概念: <tbody><tfoot><thead> 在 [HTML] 中
必需的上下文角色:
必需的拥有元素: row
继承的状态和属性:
名称来自: 作者

rowheader 角色

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

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

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

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

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

注意: aria-disabled 的用法

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

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

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 角色的元素具有隐式的 aria-orientation 值为 vertical

注意

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

特性:
特性
超类角色:
必需的状态和属性:
支持的状态和属性:
继承的状态和属性:
名称来自: 作者
需要可访问的名称:
子元素是否仅用于呈现:
角色的隐式值: aria-orientation 的默认值为 vertical
aria-valuemin 的默认值为 0
aria-valuemax 的默认值为 100

section 角色

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

注意

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

特性:
特性
是否为抽象角色:
超类角色: structure
子类角色:
继承的状态和属性:
名称来自: 不适用

sectionhead 角色

一个结构,用于标记或总结其相关部分的主题。

注意

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

特性:
特性
是否为抽象角色:
超类角色: structure
子类角色:
继承的状态和属性:
名称来自:
  • 内容
  • 作者

select 角色

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

注意

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

特性:
特性
是否为抽象角色:
超类角色:
子类角色:
支持的状态和属性: aria-orientation
继承的状态和属性:
名称来自: 作者

separator 角色

分隔和区分内容部分或 menuitems 组的分隔符。

有两种类型的分隔符:静态 structure,仅提供可见边界;以及可聚焦的、交互式 widget,也是可移动的。如果 separator 不可聚焦,则它会作为静态结构元素显示给 辅助技术。例如,静态 separator 可用于帮助在菜单中直观地分隔两组菜单项,或在页面的两个部分之间提供水平规则。

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

如果 separator 可聚焦,作者 必须aria-valuenow 的值设置为一个 数字,该数字反映了 separator 的当前位置,并在该值更改时更新该值。作者 应该 还提供 aria-valuemin 的值(如果它不是 0)以及 aria-valuemax 的值(如果它不是 100)。如果缺少或不是数字,则这些属性的隐式值如下:

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

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

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

特性:
特性
超类角色:
相关概念:
必需的状态和属性: aria-valuenow(如果可聚焦)
支持的状态和属性:
继承的状态和属性:
名称来自: 作者
子元素是否仅用于呈现:
角色的隐式值: aria-orientation 的默认值为 horizontal
aria-valuemin 的默认值为 0
aria-valuemax 的默认值为 100

slider 角色

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

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

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

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

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

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

特性:
特性
超类角色:
必需的状态和属性:
支持的状态和属性:
继承的状态和属性:
名称来自: 作者
需要可访问的名称:
子元素是否仅用于呈现:
角色的隐式值: aria-orientation 的默认值为 horizontal
aria-valuemin 的默认值为 0
aria-valuemax 的默认值为 100

spinbutton 角色

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

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

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

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

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

spinbutton 具有值时,作者 应该 设置 aria-valuenow 属性。当存在最小值时,作者 应该 设置 aria-valuemin 属性,当存在最大值时,设置 aria-valuemax 属性。

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

status 角色

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

作者 应该 确保具有 status 角色的元素不会因状态更改而接收焦点。

状态是 实时区域 的一种形式。如果页面的另一部分控制状态中显示的内容,则作者 应该 使用 aria-controls 属性 显式地建立 关系

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

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

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

strong 角色

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

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

strong 角色不旨在传达压力或强调;为此,emphasis 角色更合适。

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

structure 角色

文档结构 元素

文档结构的 角色 通过帮助 辅助技术 确定活动内容与静态文档内容,来支持动态 Web 内容的可访问性。结构角色本身并不都映射到 可访问性 API,而是用于创建 widget 角色或辅助辅助技术的内容适应。

注意

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

特性:
特性
是否为抽象角色:
超类角色: roletype
子类角色:
继承的状态和属性:
名称来自:
  • 不适用

subscript 角色

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

subscript 角色仅用于标记具有特定含义的印刷约定;而不是为了印刷呈现而进行印刷呈现。一般来说,作者 应该 仅当缺少下标会更改内容的含义时才使用此角色。

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

superscript 角色

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

superscript 角色仅用于标记具有特定含义的印刷约定;而不是为了印刷呈现而进行印刷呈现。一般来说,作者 应该 仅当缺少上标会更改内容的含义时才使用此角色。

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

switch 角色

一种复选框,表示开/关值,而不是选中/未选中值。请参阅相关的 checkbox

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

注意

switch 提供与 checkbox 和切换 button 大致相同的功能,但使辅助技术能够以与其屏幕外观一致的方式呈现 widget。

特性:
特性
超类角色: checkbox
相关概念:
必需的状态和属性:
继承的状态和属性:
名称来自:
  • 内容
  • 作者
需要可访问的名称:
子元素是否仅用于呈现:

tab 角色

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

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

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

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

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

在任何一种情况下,作者 应该 确保选定的选项卡将其 aria-selected 属性设置为 true,非活动的选项卡元素将其 aria-selected 属性设置为 false,并且当前选定的选项卡提供视觉指示,表明它已被选中。在当前选项卡上缺少 aria-selected 属性的情况下,用户代理 应该 通过平台 可访问性 API辅助技术 指示当前聚焦的选项卡已被选中。

特性:
特性
超类角色:
必需的上下文角色: tablist
支持的状态和属性:
继承的状态和属性:
名称来自:
  • 内容
  • 作者
子元素是否仅用于呈现:
角色的隐式值: Default for aria-selected is false.

table 角色

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

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

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

特性:
特性
超类角色: section
子类角色:
基本概念: <table> 在 [HTML]
必需的拥有的元素:
支持的状态和属性:
继承的状态和属性:
名称来自: 作者
需要可访问的名称:

tablist 角色

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

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

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

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

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

特性:
特性
超类角色:
必需的拥有的元素: tab
支持的状态和属性:
继承的状态和属性:
名称来自: 作者
角色的隐式值: Default for aria-orientation is horizontal.

tabpanel 角色

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

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

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

特性:
特性
超类角色: section
继承的状态和属性:
名称来自: 作者
需要可访问的名称:

term 角色

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

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

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

特性:
Characteristic Value
超类角色: section
相关概念:
继承的状态和属性:
名称来自: 作者

textbox 角色

一种输入类型,允许使用自由格式文本作为其值。

如果 aria-multiline 属性true,则 widget 接受输入中的换行符,如 HTML textarea 中所示。否则,这是一个简单的文本框。预期用途是对于没有文本输入 元素 的语言,或者其中具有不同 语义 的元素被重新用作文本字段的情况。

注意

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

特性:
Characteristic Value
超类角色: input
子类角色:
相关概念:
支持的状态和属性:
继承的状态和属性:
名称来自: 作者
需要可访问的名称:

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
相关概念:
继承的状态和属性:
名称来自: 作者

timer 角色

一种 实时区域,包含一个数字计数器,指示从起始点经过的时间量或直到结束点剩余的时间。

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

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

特性:
Characteristic Value
超类角色: status
继承的状态和属性:
名称来自: 作者

toolbar 角色

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

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

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

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

特性:
Characteristic Value
超类角色: group
相关概念:
支持的状态和属性: aria-orientation
继承的状态和属性:
名称来自: 作者
角色的隐式值: Default for aria-orientation is horizontal.

tooltip 角色

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

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

注意

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

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

特性:
特性
超类角色: section
继承的状态和属性:
名称来自:
  • 内容
  • 作者
需要可访问的名称:

tree 角色

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

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

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

特性:
Characteristic
超类角色: select
子类角色:
必需的拥有的元素:
支持的状态和属性:
继承的状态和属性:
名称来自: 作者
需要可访问的名称:
角色的隐式值: Default for aria-orientation is vertical.

treegrid 角色

一个 grid,其行可以像 tree 一样展开和折叠。

如果 aria-readonly 设置在具有 角色 treegrid元素 上,则 用户代理 必须 将该值传播到 treegrid 拥有的所有 gridcell 元素,并在可访问性 API 中公开该值。作者 可以 覆盖单个 gridcell 元素的 aria-readonly 的传播值。

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

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

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

特性:
特性
超类角色:
必需的拥有的元素:
继承的状态和属性:
名称来自: 作者
需要可访问的名称:

treeitem 角色

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

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

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

特性:
特性
超类角色:
必需的上下文角色:
支持的状态和属性:
继承的状态和属性:
名称来自:
  • 内容
  • 作者
需要可访问的名称:

widget 角色

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

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

注意

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

特性:
特性
是否为抽象角色:
超类角色: roletype
子类角色:
继承的状态和属性:
名称来自:
  • 不适用

window 角色

浏览器或应用程序窗口。

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

注意

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

注意

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

特性:
Characteristic Value
是否为抽象角色:
超类角色: roletype
子类角色:
支持的状态和属性: aria-modal
继承的状态和属性:
名称来自: 作者

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 引用的列表。
整数
一个没有小数部分的数值。
数字
任何实数值。
字符串
无约束的值类型。
令牌
一组有限的允许值中的一个。默认值在每个属性的“值”表中定义,如属性值部分中所述。
令牌列表
一个或多个令牌的列表。

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

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 属性都定义为可空的 DOMString。这与所有主要渲染引擎的当前实现相匹配。此规范更改不应导致任何实现更改;它仅表示 Web 引擎的当前实际情况。 但是,在未来的草案中,ARIA 工作组计划将多个 ARIA 属性更改为不可为空的 DOMString,并寻求实现。拟议的更改将使 ARIA 与 HTML枚举属性的使用保持一致。

6.3.4.1 属性用法的例子

本节为非规范性内容。

6.4 可翻译的状态和属性

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

6.5 全局状态和属性

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

6.6 WAI-ARIA 状态和属性的分类

状态和属性分类如下:

  1. Widget 属性
  2. Live Region 属性
  3. 拖放属性
  4. 关系属性

6.6.1 Widget 属性

本节包含特定于常见用户界面 元素属性,这些元素位于 GUI 系统或接收用户输入和处理用户操作的富 Internet 应用程序中。这些属性用于支持 widget 角色

Widget 属性可能由 用户代理 映射到平台 可访问性 API 状态,以供 辅助技术 访问,或者它们可能直接从 DOM 访问。用户代理 必须 提供一种方法,以便在状态更改时通过 DOM 属性更改 事件 或平台可访问性 API 事件通知辅助技术。

6.6.2 Live Region 属性

本节包含特定于富 Internet 应用程序中 live region属性。这些属性可以应用于任何 元素。这些属性的目的是指示内容更改可能在元素没有焦点的情况下发生,并向 辅助技术 提供有关如何处理这些内容更新的信息。一些 角色 为特定于该角色的 aria-live 属性指定默认值。live region 的一个例子是列出更新股票报价的股票代码部分。

6.6.3 拖放属性

本节列出了 属性,这些属性指示有关拖放界面 元素 的信息,例如可拖动元素及其放置目标。放置目标信息将由作者以可视方式呈现,并通过备用方式提供给 辅助技术

6.6.4 关系属性

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

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

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

aria-activedescendant
DOM 焦点位于 composite widget、comboboxtextboxgroupapplication 上时,标识当前活动元素。
aria-atomic
指示 辅助技术 将根据 aria-relevant 属性定义的更改通知来呈现更改区域的全部还是仅部分内容。
aria-autocomplete
指示输入文本是否会触发显示 comboboxsearchboxtextbox 的用户预期值的一个或多个预测,并指定如果进行预测,将如何呈现它们。
aria-busy
指示元素正在被修改,并且辅助技术 MAY 希望等到修改完成后再将其公开给用户。
aria-checked
指示复选框、单选按钮和其他 widget 的当前 "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 中已弃用] 指示元素在拖放操作中的 “grabbed” 状态
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
指示将更新 元素,并描述 用户代理辅助技术 和用户可以从 live region 期望的更新类型。
aria-modal
指示 元素 在显示时是否为模态。
aria-multiline
指示文本框是接受多行输入还是仅接受单行输入。
aria-multiselectable
指示用户可以从当前可选择的后代中选择多个项目。
aria-orientation
指示元素的朝向是水平、垂直还是未知/不明确。
aria-owns
标识 元素(或多个元素),以便定义 DOM 元素之间视觉、功能或上下文的父/子 关系,其中 DOM 层次结构不能用于表示该关系。 参见相关的 aria-controls
aria-placeholder
定义一个简短的提示(一个词或短语),旨在帮助用户在控件没有值时进行数据输入。提示可以是示例值或预期格式的简要说明。
aria-posinset
定义 元素 在当前列表项或树项集中的编号或位置。如果集合中的所有元素都存在于 DOM 中,则不需要。参见相关的 aria-setsize
aria-pressed
指示切换按钮的当前 "pressed" 状态。参见相关的 aria-checkedaria-selected
aria-readonly
指示 元素 不可编辑,但在其他方面 可操作。参见相关的 aria-disabled
aria-relevant
指示当 live region 中的可访问性树被修改时,用户代理将触发哪些通知。参见相关的 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
指示各种 widget 的当前 "selected" 状态。参见相关的 aria-checkedaria-pressed
aria-setsize
定义当前列表项或树项集中项目的数量。如果集合中的所有元素都存在于 DOM 中,则不需要。参见相关的 aria-posinset
aria-sort
指示表或网格中的项目是否按升序或降序排序。
aria-valuemax
定义范围 widget 允许的最大值。
aria-valuemin
定义范围 widget 允许的最小值。
aria-valuenow
定义范围 widget 的当前值。参见相关的 aria-valuetext
aria-valuetext
定义范围 widgetaria-valuenow 的人类可读的文本替代方案。

aria-activedescendant property

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

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

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

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

作者 SHOULD 还确保当前活动的后代在聚焦时可见且在视图中(或滚动到视图中)。

特性:
Characteristic Value
相关概念:
角色中使用:
继承到角色中:
值: ID 引用

aria-atomic property

指示 辅助技术 将根据 aria-relevant 属性定义的更改通知来呈现更改区域的全部还是仅部分内容。

可访问性 APIDocument Object Model [DOM] 都提供事件,以允许辅助技术确定文档的更改区域。

live region 的内容更改时,用户代理 SHOULD 检查已更改的 元素 并遍历祖先以找到第一个设置了 aria-atomic 的元素,并对以下情况应用适当的行为。

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

aria-atomictrue 时,辅助技术 MAY 选择组合多个更改并立即呈现整个更改区域。

特性:
Characteristic Value
角色中使用: 基本标记的所有元素
值: true/false
值:
描述
false (默认) 辅助技术将仅呈现已更改的节点。
true 辅助技术将作为一个整体呈现整个已更改的区域,包括作者定义的标签(如果存在)。

aria-autocomplete 属性

指示输入文本是否可能触发显示 comboboxsearchboxtextbox 的用户预期值的一个或多个预测,并指定如果进行预测,将如何呈现它们。

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

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

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

如果元素将 aria-autocomplete 设置为 listboth,则作者 MUST 确保满足以下两个条件:

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

列表模型的某些实现要求用户执行操作(例如使用 向下箭头 将焦点移动到建议或单击建议)才能选择该建议。在此类实现中,作者 MAY 通过使用 aria-activedescendant(如果集合容器支持它)或通过将 DOM 焦点移动到建议来管理焦点。但是,列表模型的其他实现会自动突出显示一个建议作为选定的值,该值将在字段失去焦点时被接受,例如,当用户按下 Tab 键或单击其他字段时。如果元素将 aria-autocomplete 设置为 listboth,并且如果用户在提供输入时自动选择一个建议,则作者 MUST 确保满足以下所有条件:

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

aria-autocomplete 属性并非旨在指示完成建议的存在,并且作者 SHOULD NOT 动态更改其值以传达建议的存在。当元素将 aria-autocomplete 设置为 listboth 时,作者 SHOULD 使用 aria-expanded 状态来传达是否显示呈现建议集合的元素。

特性:
Characteristic Value
角色中使用:
继承到角色中:
值: 令牌
值:
描述
inline 当用户提供输入时,建议完成所提供输入的一种方式的文本可能会动态插入到插入符号之后。
list 当用户提供输入时,可能会显示包含可以完成所提供输入的多个值的元素。
both 当用户提供输入时,可能会显示包含可以完成所提供输入的多个值的元素。如果显示,则会自动选择集合中的一个值,并且完成自动选择的值所需的文本将显示在输入中的插入符号之后。
none (默认) 当用户提供输入时,不会显示尝试预测用户打算如何完成输入的自动建议。

aria-busy 状态

指示元素正在被修改,并且辅助技术 MAY 希望等到修改完成后再将其公开给用户。

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

如果需要在已部分或完全呈现的容器元素中进行多次添加、修改或删除,作者 MAY 在第一次更改之前将 aria-busy 设置为容器元素上的 true,然后在最后一次更改完成时将其设置为 false。例如,如果 live region 的多个更改应作为一个语音单元说出,则作者 MAY 在进行更改时将 aria-busy 设置为 true,然后在更改完成并准备好说出时将其设置为 false

如果角色为 feed 的元素被标记为忙碌,则辅助技术 MAY 延迟呈现 feed 内发生的更改,但用户在忙碌期间正在阅读的 article 内发生的用户启动的更改除外。

如果对呈现的 widget 的更改将创建一个 widget 在脚本执行期间缺少 必需的拥有的元素 的状态,则作者 MUST 在更新过程中将 widget 上的 aria-busy 设置为 true。例如,如果呈现的树网格需要同时更新多个不连续的分支,则除了用单个更新替换完整的树元素之外,另一种方法是在修改每个分支时将树标记为忙碌。

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

aria-checked 状态

指示复选框、单选按钮和其他 widget 的当前 "checked" 状态。参见相关的 aria-pressedaria-selected

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

mixedradiomenuitemradioswitch 或从这些继承的任何元素支持,并且 用户代理 MUSTmixed 值视为与这些 角色false 等效。

三态输入的 mixed 值的示例在 WAI-ARIA 创作实践 中进行了介绍。

特性:
Characteristic Value
角色中使用:
继承到角色中:
值: tristate
值:
Value 描述
false 该元素支持被选中,但当前未选中。
mixed 指示三态复选框或 menuitemcheckbox 的混合模式值。
true 该元素已选中。
undefined (默认) 该元素不支持被选中。

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>
特性:
特性
角色中使用:
继承到角色中:
值: 整数

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>
特性:
特性
角色中使用:
继承到角色中:
值: 整数

aria-colspan 属性

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

属性 适用于不包含在原生表中的单元格和网格单元格。当定义原生表中单元格或网格单元格的列跨度时,作者 SHOULD 使用宿主语言的属性,而不是 aria-colspan。如果在宿主语言提供等效属性的元素上使用 aria-colspan,则 用户代理 MUST 忽略 aria-colspan 的值,而是将宿主语言属性的值公开给 辅助技术

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

特性:
Characteristic Value
角色中使用:
继承到角色中:
值: 整数

aria-controls 属性

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

例如:

  • 目录树视图可以控制相邻文档窗格的内容。
  • 一组复选框可以控制在表或图形中实时跟踪哪些商品价格。
  • 选项卡控制其关联的选项卡面板的显示。
特性:
Characteristic Value
角色中使用: 基本标记的所有元素
值: ID 引用列表

aria-current 状态

指示表示容器或相关元素集中当前项目的 元素

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

当相关元素集中的元素在视觉上设置为指示它是该集合中的当前项目时,将使用 aria-current 属性。例如:

  • page 令牌用于指示分页链接集中的链接,其中链接在视觉上设置为表示当前显示的页面。
  • step 令牌用于指示基于步骤的过程中步骤指示器中的链接,其中链接在视觉上设置为表示当前步骤。
  • location 令牌用于指示在流程图中视觉上突出显示为当前组件的图像。
  • date 令牌用于指示日历中的当前日期。
  • time 令牌用于指示时间表中的当前时间。

作者 SHOULD 仅将元素集中的一个元素标记为具有 aria-current 的当前元素。

作者 SHOULD NOT 使用 aria-current 属性来替代 aria-selectedaria-selected 具有相同含义的 widget 中。例如,在 tablist 中,aria-selected 用于 tab 上,以指示当前显示的 tabpanel

注意

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

特性:
Characteristic Value
角色中使用: 基本标记的所有元素
值: 令牌
值:
Value 描述
page 表示页面集中的当前页面。
step 表示流程中的当前步骤。
location 表示环境或上下文中的当前位置。
date 表示日期集合中的当前日期。
time 表示时间集中的当前时间。
true 表示集合中的当前项。
false (默认) 不表示集合中的当前项。

aria-describedby 属性

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

aria-labelledby 属性类似于 aria-describedby,因为两者都引用其他元素来计算文本替代方案,但标签应该是简洁的,而描述旨在提供更详细的信息。

由 aria-describedby 引用的元素或多个元素构成完整的描述。如果需要,包括对多个元素的 ID 引用,或者使用 ID 引用的元素括起一组元素(例如段落)。

特性:
Characteristic Value
相关概念:
角色中使用: 基本标记的所有元素
值: ID 引用列表

aria-details 属性

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

aria-details 属性引用提供比 aria-describedby 通常提供的信息更详细的单个元素。它使 辅助技术 能够让用户了解扩展描述的可用性以及导航到该描述。作者 SHOULD 确保 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>
特性:
Characteristic Value
角色中使用: 基本标记的所有元素
值: ID 引用

aria-disabled 状态

指示 元素可感知的 但已禁用,因此它不可编辑或以其他方式 可操作。参见相关的 aria-hiddenaria-readonly

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

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

注意

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

注意: 在 columnheader、rowheader 和 row 上的使用

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

注意

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

特性:
Characteristic Value
角色中使用:
继承到角色中:
值: true/false
值:
Value 描述
false (默认) 该元素已启用。
true 该元素和所有可聚焦的后代均已禁用,并且其值无法由用户更改。

aria-dropeffect 属性

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

注意

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

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

给定的 元素 可能支持多个放置效果。因此,此 属性 的值是以空格分隔的令牌集,指示可能的 效果,如果不支持任何操作,则为 none。除了设置 aria-dropeffect 属性之外,作者 SHOULD 显示潜在放置目标的可视指示。

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

aria-errormessage 属性

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

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

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

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

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

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

作者 MAY 通过应用 aria-live 属性或使用 live region 角色(例如 alert)来引起对新呈现的错误消息的注意。当用户在提供无效值后向用户显示错误消息时,live region 是合适的。

典型的消息描述了错误所在并告知用户需要什么。例如,错误消息可能是 无效时间:时间必须在上午 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 中作为全局状态被弃用。在未来的版本中,它将仅允许在明确支持它的角色上使用。

特性:
Characteristic Value
角色中使用:
继承到角色中:
值: ID 引用

aria-expanded 状态

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

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

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

特性:
Characteristic Value
角色中使用:
继承到角色中:
值: true/false/undefined
值:
Value 描述
false 此元素拥有或控制的分组元素已折叠。
true 此元素拥有或控制的分组元素已展开。
undefined (默认) 该元素不拥有或控制可展开的分组元素。

aria-flowto 属性

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

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

在具有一个或多个 ID 引用的情况下,用户代理 或辅助技术 SHOULD 为用户提供导航到任何目标元素的选择。路径名称可以通过 aria-flowto 属性 的目标元素的名称来确定。可访问性 API 可以提供命名的路径 关系

特性:
Characteristic Value
角色中使用: 基本标记的所有元素
值: ID 引用列表

aria-grabbed 状态

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

注意

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

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

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

特性:
Characteristic Value
角色中使用: 基本标记的所有元素
值: true/false/undefined
值:
Value 描述
false 指示该元素支持被拖动。
true 指示该元素已被“抓取”以进行拖动。
undefined (默认) 指示该元素不支持被拖动。

aria-haspopup 属性

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

弹出元素通常显示为位于其他内容之上的内容块。作者 MUST 确保充当弹出内容容器的元素的角色为 menulistboxtreegriddialog,并且 aria-haspopup 的值与弹出容器的角色匹配。

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

aria-haspopup 属性是一种令牌类型。用户代理 MUSTaria-haspopup 的任何不包含在允许值列表中的值(包括空字符串)视为已提供 false 值。为了提供与 ARIA 1.0 内容的向后兼容性,用户代理 MUSTaria-haspopup 值为 true 视为等效于 menu 值。

辅助技术 SHOULD NOTaria-haspopup 值为 false 时公开该属性。

注意

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

注意

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

注意

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

特性:
Characteristic Value
相关概念:
角色中使用:
继承到角色中:
值: 令牌
值:
Value 描述
false (默认) 指示该元素没有弹出窗口。
true 指示弹出窗口是 menu
menu 指示弹出窗口是 menu
listbox 指示弹出窗口是 listbox
tree 指示弹出窗口是 tree
grid 指示弹出窗口是 grid
dialog 指示弹出窗口是 dialog

aria-label 属性

定义一个字符串值,用于标记当前元素。参见相关的 aria-labelledby

aria-label 的目的与 aria-labelledby 的目的相同。它为用户提供了对象的可识别名称。标签最常见的 可访问性 API 映射是 可访问名称 属性。

如果标签文本在 DOM 中可用(即通常是可见的文本内容),则作者 SHOULD 使用 aria-labelledby 并且 SHOULD NOT 使用 aria-label。在某些情况下,元素的名称无法以编程方式从 DOM 确定,并且在某些情况下,引用 DOM 内容不是期望的用户体验。大多数宿主语言都提供可用于命名元素的属性(例如,[HTML] 中的 title 属性),但这可能会呈现浏览器工具提示。在不希望使用 DOM 内容或工具提示的情况下,作者 MAY 使用 aria-label 设置元素的可访问名称。根据 可访问名称和描述计算 的要求,用户代理在计算可访问名称属性时,优先于 aria-labelaria-labelledby

特性:
Characteristic Value
相关概念:
角色中使用: 基本标记的所有元素,以下角色除外:caption, code, deletion, emphasis, generic, insertion, paragraph, presentation, strong, subscript, superscript
值: 字符串

aria-labelledby 属性

标识标记当前元素的 元素(或多个元素)。参见相关的 aria-describedby

aria-labelledby 的目的与 aria-label 的目的相同。它为用户提供了对象的可识别名称。标签最常见的 可访问性 API 映射是 可访问名称 属性。

如果界面无法在屏幕上显示可见标签,则作者 SHOULD 使用 aria-label 并且 SHOULD NOT 使用 aria-labelledby。根据 可访问名称和描述计算 的要求,用户代理在计算可访问名称属性时,优先于 aria-labelaria-labelledby

aria-labelledby 属性类似于 aria-describedby,因为两者都引用其他元素来计算文本替代方案,但标签应该是简洁的,而描述旨在提供更详细的信息。

注意

此属性在美国英语中的预期拼写为“labeledby”。但是,此属性映射到的 可访问性 API 功能已建立“labelledby”拼写。拼写此属性的方式是为了匹配约定并最大限度地减少开发人员的难度。

特性:
Characteristic Value
相关概念:
角色中使用: 基本标记的所有元素,以下角色除外:caption, code, deletion, emphasis, generic, insertion, paragraph, presentation, strong, subscript, superscript
值: ID 引用列表

aria-level 属性

定义结构中 元素 的层次结构级别。

这可以应用于树中的树项、文档中的标题、嵌套网格、嵌套选项卡列表以及可能出现在容器内或参与所有权层次结构中的其他结构项。 aria-level 的值是大于或等于 1 的整数。

级别随深度增加。如果 DOM 祖先关系不能准确表示级别,则作者 SHOULD 显式定义 aria-level 属性

此属性应用于充当集合方向中叶节点的元素,例如,角色为 treeitem 的元素,而不是角色为 group 的元素。这意味着集合中的多个元素可以具有此属性的相同值。虽然在容器上提供单个值会减少重复,但将此属性限制为叶节点可确保 辅助技术 仅有一种使用该属性的方式。

如果 DOM 祖先关系准确地表示了级别,则 用户代理 可以从文档结构计算项目的级别。当无法从文档结构或 aria-owns 属性计算级别时,可以使用此属性来提供级别的显式指示。用户代理对自动计算级别的支持可能会有所不同;作者 SHOULD 使用 用户代理 和辅助技术进行测试,以确定是否需要此属性。如果作者打算让用户代理计算级别,则作者 SHOULD 省略此属性。

注意

对于 treegrid,在具有角色 row 的元素上支持 aria-level,而不是在具有角色 gridcell 的元素上。乍一看,这似乎与在 treeitem 元素上应用 aria-level 不一致,但它是一致的,因为 row 充当 grid 垂直方向上的叶节点,而 gridcell 是每个 row 水平方向上的叶节点。行中单元格集不支持级别,因此 aria-level 属性应用于具有角色 row 的元素。

特性:
Characteristic Value
角色中使用:
继承到角色中:
值: 整数

aria-live 属性

指示将更新 元素,并描述 用户代理辅助技术 和用户可以从 live region 期望的更新类型。

属性 以重要性程度表示。当区域指定为 polite 时,辅助技术将通知用户更新,但通常不会中断当前任务,并且更新的优先级较低。当区域指定为 assertive 时,辅助技术将立即通知用户,并且可能会清除先前更新的语音队列。

礼貌级别本质上是更新的排序机制,并且是对用户代理或辅助技术的有力建议。该值可能会被用户代理、辅助技术或用户覆盖。例如,如果辅助技术可以确定更改是响应于按键或鼠标单击而发生的,则即使 aria-live 属性的值另有说明,辅助技术也可以立即呈现该更改。

由于不同的用户有不同的需求,因此用户可以调整其辅助技术对具有特定礼貌级别的 live region 的响应,使其与通常定义的基线不同。辅助技术可以选择实现增加和减少的粒度级别,以便用户可以控制队列和中断。

当需要发送更新的 对象 上未设置 属性 时,礼貌级别是设置 aria-live 属性的最近祖先的值。

aria-live 属性是确定 live region 更改的呈现顺序的主要因素。当未在祖先链中设置 aria-live 属性时,实现还将考虑 角色 中的默认礼貌级别(例如,默认情况下 log 更改是 polite)。assertive 的项目将立即呈现,然后是 polite 项目。用户代理或辅助技术 MAY 选择在发生强制性更改时清除排队的更改。(例如,强制性区域中的更改可能会删除所有当前排队的更改)

当 live region 被标记为 polite 时,辅助技术 SHOULD 在下一个合适的时机宣布更新,例如在说完当前句子之后或用户暂停键入时。当 live region 被标记为 assertive 时,辅助技术 SHOULD 立即通知用户。由于中断可能会使用户迷失方向或导致他们无法完成当前任务,因此作者 SHOULD NOT 使用强制性值,除非中断是必要的。

特性:
Characteristic Value
角色中使用: 基本标记的所有元素
值: 令牌
值:
Value 描述
assertive 指示对区域的更新具有最高优先级,应立即呈现给用户。
off (默认) 指示除非用户当前专注于该区域,否则不应向用户呈现对该区域的更新。
polite 指示应在下一个合适的时机呈现对该区域的更新,例如在说完当前句子之后或用户暂停键入时。

aria-modal 属性

指示 元素 在显示时是否为模态。

aria-modal 属性 用于指示“模态”元素的存在会阻止使用页面上的其他内容。例如,当显示模态对话框时,预计用户的交互仅限于对话框的内容,直到模态对话框失去焦点或不再显示。

当显示模态元素时,辅助技术 SHOULD 导航到该元素,除非焦点已显式设置在其他位置。辅助技术 MAY 将导航限制为模态元素的内容。如果焦点移动到模态元素之外的元素,则辅助技术 SHOULD NOT 将导航限制为模态元素。

当显示模态元素时,作者 MUST 确保可以使用仅模态元素的后代来控制界面。换句话说,如果模态对话框有一个关闭按钮,则该按钮应该是对话框的后代。当显示模态元素时,如果宿主语言中存在这样做的能力,作者 SHOULD 将所有其他内容标记为惰性(例如 HTML 中的“惰性子树”)。

特性:
Characteristic Value
角色中使用:
继承到角色中:
值: true/false
值:
Value 描述
false (默认) 元素不是模态的。
true 元素是模态的。

aria-multiline 属性

指示文本框是接受多行输入还是仅接受单行输入。

注意

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

特性:
Characteristic Value
角色中使用:
继承到角色中:
值: true/false
值:
Value 描述
false (默认) 这是一个单行文本框。
true 这是一个多行文本框。

aria-multiselectable 属性

指示用户可以从当前可选择的后代中选择多个项目。

作者 SHOULD 确保选定的后代将 aria-selected 属性 设置为 true,并且可选择的后代将 aria-selected 属性设置为 false。作者 SHOULD NOT 在不可选择的后代上使用 aria-selected 属性。

注意

列表和树是可能允许用户一次选择多个项目的角色的示例。

特性:
Characteristic Value
角色中使用:
继承到角色中:
值: true/false
值:
Value 描述
false (默认) 只能选择一个项目。
true 一次可以选择 widget 中的多个项目。

aria-orientation 属性

指示元素的朝向是水平、垂直还是未知/不明确。

注意

在 ARIA 1.1 中,aria-orientation 的默认值从 horizontal 更改为 undefined。隐式默认值在某些角色上定义(例如,slider 默认为水平;scrollbar 默认为垂直),但在预期默认方向不明确的角色上仍然未定义(例如,radiogroup)。

特性:
Characteristic Value
角色中使用:
继承到角色中:
值: 令牌
值:
Value 描述
horizontal 元素是水平方向的。
undefined (默认) 元素的朝向是未知/不明确的。
vertical 元素是垂直方向的。

aria-owns 属性

标识 元素(或多个元素),以便定义 DOM 元素之间视觉、功能或上下文的父/子 关系,其中 DOM 层次结构不能用于表示该关系。 参见相关的 aria-controls

aria-owns 属性 的值是以空格分隔的 ID 引用列表,该列表通过 ID 引用文档中的一个或多个元素。添加 aria-owns 的原因是向 辅助技术 公开父/子上下文关系,否则无法从 DOM 推断该关系。

如果一个元素同时具有 aria-ownsDOM 子元素,则子元素相对于父/子关系的顺序首先是 DOM 子元素,然后是 aria-owns 中引用的元素。如果作者希望 DOM 子元素不是第一个,则在 aria-owns 中按所需顺序列出 DOM 子元素。作者 SHOULD NOT 使用 aria-owns 来代替 DOM 层次结构。如果关系在 DOM 中表示,请不要使用 aria-owns。作者 MUST 确保元素的 ID 在任何时候都不会在多个其他元素的 aria-owns 属性中指定。换句话说,一个元素只能有一个显式所有者。

特性:
Characteristic Value
角色中使用: 基本标记的所有元素
值: ID 引用列表

aria-placeholder 属性

定义一个简短的提示(一个单词或短语),旨在帮助用户在控件没有值时进行数据输入。提示可以是示例值或预期格式的简要描述。

作者 SHOULD NOT 使用 aria-placeholder 代替标签,因为它们的用途不同:标签指示期望的信息类型。占位符文本是关于预期值的提示。参见相关的 aria-labelledbyaria-label

作者 SHOULD 通过在控件的 为空字符串的任何时候显示提示文本来向用户呈现此提示。这包括控件首次接收焦点以及用户删除先前输入的值的情况。

注意

与 [HTML] 中的相关 placeholder 属性一样,使用占位符文本代替显示的标签可能会降低一系列用户的可访问性和可用性,包括老年用户和患有认知、行动、精细运动技能或视力障碍的用户。虽然控件标签给出的提示始终显示,但占位符属性中给出的简短提示仅在用户输入值之前显示。此外,占位符文本可能会被误认为是预填充的值,并且通常实现的占位符文本的默认颜色提供的对比度不足,并且缺少单独的可见标签会减少可用于设置控件焦点的点击区域的大小。

注意

以下示例不使用 HTML label 元素,因为它不能用于标记具有 contenteditableHTML 元素。

以下示例显示了一个 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>
特性:
Characteristic Value
相关概念:
角色中使用:
继承到角色中:
值: 字符串

aria-posinset 属性

定义 元素 在当前 listitem 或 treeitem 集中的编号或位置。如果集合中的所有元素都存在于 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>

作者 MUSTaria-posinset 的值设置为大于或等于 1 的整数,并且小于或等于集合的大小(如果已知该大小)。作者 SHOULD 使用 aria-setsize

当在 menuitemmenuitemcheckboxmenuitemradio 上公开 aria-posinset 时,作者 SHOULD 根据 menu 中的项目总数(不包括任何分隔符)设置 aria-posinset 的值。

特性:
Characteristic Value
角色中使用:
继承到角色中:
值: 整数

aria-pressed 状态

指示切换按钮的当前“按下” 状态。参见相关的 aria-checkedaria-selected

切换按钮需要完整的按下和释放周期才能更改其值。激活一次将值更改为 true,再次激活会将值改回 false。值为 mixed 表示由按钮控制的多个项目的值并非都共享相同的值。如果 属性 不存在,则该按钮不是切换按钮。

aria-pressed 属性与 aria-checked 属性相似但不相同。操作系统支持按钮上的 pressed 和复选框上的 checked

特性:
Characteristic Value
角色中使用:
值: tristate
值:
Value Description
false 该元素支持被按下但当前未按下。
mixed 指示三态切换按钮的混合模式值。
true 该元素已按下。
undefined (默认) 该元素不支持被按下。

aria-readonly 属性

指示 元素 不可编辑,但在其他方面 可操作。参见相关的 aria-disabled

这意味着用户可以读取但不能设置 widget 的值。只读元素与用户相关,并且应用程序作者 SHOULD NOT 限制对该元素或其可聚焦后代的导航。还支持其他操作,例如复制元素的值。这与禁用元素形成对比,应用程序��能不允许用户导航到禁用元素的后代。

示例包括:

  • 表示常量的表单元素。
  • 电子表格网格中的行或列标题。
  • 计算的结果,例如购物车总额。
特性:
Characteristic Value
相关概念:
角色中使用:
继承到角色中:
值: true/false
值:
Value 描述
false (默认) 用户可以设置元素的值。
true 用户无法更改元素的值。

aria-relevant 属性

指示当 live region 中的可访问性树被修改时,用户代理将触发哪些通知。参见相关的 aria-atomic

属性 表示为以下 的空格分隔列表:additions, removals, text; 或单个捕获所有值 all

这用于描述 语义 上有意义的更改,而不是仅仅是呈现上的更改。例如,从日志顶部删除的节点仅仅是为了为其他条目创建空间而删除,并且删除它们没有意义。但是,在好友列表的情况下,删除好友姓名表示他们不再在线,这是一个有意义的 事件。在这种情况下,aria-relevant 将设置为 all。当未提供 aria-relevant 属性时,默认值 additions text 指示文本修改和节点添加是相关的,但节点删除是不相关的。

注意

应谨慎使用 aria-relevant 值为 removals 或 all。只有当内容删除表示重要更改时,才需要通知辅助技术内容删除,例如好友离开聊天室。

注意

只有当指定值之一为“removals”或“all”时,才应认为文本删除是相关的。例如,对于具有默认 aria-relevant 值的 live region 中从“foo”到“bar”的文本更改,将说出文本添加(“bar”),但不会说出文本删除(“foo”)。

aria-relevant 是 live region 的可选属性。这是对 辅助技术 的建议,但辅助技术不需要呈现所有相关类型的更改。

当未定义 aria-relevant 时,元素的值将从具有已定义值的最近祖先继承。虽然该值是 令牌列表,但继承的值不是累加的;后代元素上提供的值完全覆盖从祖先元素继承的任何值。

当文本更改被表示为相关时,用户代理 MUST 监视影响 live region 的 可访问名称和描述计算 的任何后代节点更改,就像可访问名称是从内容确定的一样(nameFrom: contents)。例如,如果包含图像的 HTML alt 属性发生更改,则会触发文本更改。但是,如果对 live region 之外的节点进行文本更改,则不会触发任何更改,即使该节点被 live region 中包含的元素引用(通过 aria-labelledby)。

特性:
Characteristic Value
角色中使用: 基本标记的所有元素
值: 令牌列表
值:
Value 描述
additions 元素节点已添加到 live region 内的可访问性树中。
additions text (默认) 等效于值“additions text”的组合。
all 等效于所有值的组合“additions removals text”。
removals 文本内容、文本替代方案或 live region 中的元素节点已从可访问性树中移除。
text 文本内容或文本替代方案已添加到 live region 的可访问性树中任何后代。

aria-required 属性

指示在提交表单之前,需要在 元素 上进行用户输入。

例如,如果用户需要填写地址字段,作者将需要将该字段的 aria-required 属性设置为 true

注意

元素是必需的事实通常以可视方式呈现(例如,在 widget 之后使用符号)。使用 aria-required 属性 允许作者明确地向 辅助技术 传达元素是必需的。

除非存在完全等效的本机属性,否则宿主语言 SHOULD 允许作者在宿主语言表单元素上使用 aria-required 属性,这些元素需要用户输入或选择。

特性:
Characteristic Value
相关概念:
角色中使用:
继承到角色中:
值: true/false
值:
Value 描述
false (默认) 用户输入不是提交表单所必需的。
true 用户需要在提交表单之前在元素上提供输入。

aria-roledescription 属性

定义 元素角色 的人类可读的、作者本地化的描述。

一些 辅助技术(例如屏幕阅读器)将元素的角色作为用户体验的一部分呈现。此类辅助技术通常会本地化角色的名称,并且它们也可以自定义它。这些辅助技术的用户依赖于角色名称的呈现(例如“区域”、“按钮”或“滑块”)来理解元素的目的,如果是 widget,则依赖于如何与其交互。

aria-roledescription 属性使作者能够覆盖辅助技术如何本地化和表达角色的名称。因此,不适当地使用 aria-roledescription 可能会抑制用户理解或与元素交互的能力。作者 SHOULDaria-roledescription 的使用限制为澄清非交互式容器角色(如 groupregion)的目的,或提供 widget更具体的描述。

当使用 aria-roledescription 时,作者 SHOULD 还要确保:

  1. 应用了 aria-roledescription 的元素具有有效的 WAI-ARIA 角色,或者具有隐式 WAI-ARIA 角色语义。
  2. aria-roledescription 的值不为空,也不仅包含空格字符。

如果存在以下任何条件,用户代理 MUST NOT 公开 aria-roledescription 属性:

  1. 应用了 aria-roledescription 的元素不具有有效的 WAI-ARIA 角色,或者不具有隐式 WAI-ARIA 角色语义。
  2. 应用了 aria-roledescription 的元素具有显式或隐式 WAI-ARIA 角色,其中 aria-roledescription禁止的
  3. aria-roledescription 的值为空或仅包含空格字符。

辅助技术 SHOULD 在呈现元素角色时使用 aria-roledescription 的值,但 SHOULD NOT 根据具有 aria-roledescription 值的元素角色更改其他功能。例如,提供导航到下一个 regionbutton 的辅助技术 SHOULD 允许这些功能导航到具有 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>

在前面的示例中,屏幕阅读器用户可能会听到“季度报告,幻灯片”,而不是更模糊的“季度报告,区域”或“季度报告,组”。

特性:
Characteristic Value
角色中使用: 基本标记的所有元素
值: 字符串

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>
特征:
特征
用于角色:
继承到角色:
值: 整数

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>
特征:
特征
用于角色:
继承到角色:
值: 整数

aria-rowspan 属性

定义单元格或网格单元格在 tablegridtreegrid 中跨越的行数。参见相关的 aria-rowindexaria-colspan

属性 适用于不包含在原生表格中的单元格和网格单元格。当定义原生表格中单元格或网格单元格的行跨度时,作者应该使用宿主语言的属性,而不是 aria-rowspan。如果在宿主语言提供等效属性的元素上使用 aria-rowspan,则 用户代理 必须忽略 aria-rowspan 的值,而是将宿主语言属性的值暴露给 辅助技术

作者必须aria-rowspan 设置为大于或等于 0 且小于导致单元格或网格单元格与同一列中的下一个单元格或网格单元格重叠的值的整数。将值设置为 0 表示单元格或网格单元格将跨越行组中所有剩余的行。

特征:
特征
用于角色:
继承到角色:
值: 整数

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 个”来引导用户,辅助技术 将使用 X 等于 aria-posinset 属性,Y 等于 aria-setsize 属性。

如果集合中的所有项目都存在于文档结构中,则无需设置此属性,因为 用户代理 可以自动计算每个项目的集合大小和位置。但是,如果只有一部分集合存在于给定时刻的文档结构中(为了减少文档大小),则需要此属性来提供集合大小的显式指示。

作者必须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>
特征:
特征
用于角色:
继承到角色:
值: 整数

aria-sort 属性

指示表格或网格中的项目是否按升序或降序排序。

作者应该仅将此 属性 应用于表格标题或网格标题。如果未提供该属性,则没有定义的排序顺序。对于每个表格或网格,作者应该一次只将 aria-sort 应用于一个标题。

特征:
特征
用于角色:
值: token
值:
描述
ascending 项目按此列升序排序。
descending 项目按此列降序排序。
none (默认) 没有应用于该列的已定义的排序。
other 已应用了升序或降序以外的排序算法。

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,则辅助技术应该将该值呈现给用户,计算为从 aria-valueminaria-valuemax 的范围上的位置的百分比,否则为带有百分比指示器的实际值。对于角色为 sliderspinbutton 的元素,辅助技术应该将实际值呈现给用户。

当呈现的值无法准确地表示为数字时,作者应该aria-valuetext 属性与 aria-valuenow 结合使用,以提供范围当前值的用户友好表示形式。例如,滑块可能具有 smallmediumlarge 的呈现值。在这种情况下,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 元素 提供可访问对象

8. 在宿主语言中实现

本规范中定义的 角色状态属性 并不构成完整的 Web 语言或格式。它们旨在在宿主语言的上下文中使用。本节讨论宿主语言如何实现 WAI-ARIA,以确保此处指定的标记能够顺利有效地与宿主语言标记集成。

尽管标记语言表面上看起来相似,但它们不共享语言定义基础结构。为了适应语言构建方法的差异,这些要求既通用又特定于模块化。在允许规范编写方式存在差异的同时,目的是保持 WAI-ARIA 信息对作者的呈现方式以及脚本在 DOM 中操作方式的一致性。

WAI-ARIA 角色、状态和属性作为 元素属性 实现。通过将角色名称放置在宿主语言提供的 role 属性的值中出现的标记中来应用角色。状态和属性各自获得自己的属性,其值如本规范中为每个特定状态或属性定义的那样。属性的名称是状态或属性的带有 aria 前缀的名称。

8.1 角色属性

实现宿主语言将提供具有以下特征的 属性

8.2 状态和属性属性

实现宿主语言必须允许具有以下特征的 属性

支持 XML 命名空间 [XML-NAMES] 的宿主语言可以要求 WAI-ARIA 属性与命名空间一起使用。在这种情况下,WAI-ARIA 状态和属性属性的命名空间必须http://www.w3.org/ns/wai-aria/。要在未明确描述对其支持的宿主语言中使用 WAI-ARIA,如果宿主语言支持命名空间并且期望用户代理能够识别 WAI-ARIA 命名空间,则作者应该也使用此命名空间。命名空间前缀未由此规范定义,但通常预计为 "aria"。

注意

The WAI-ARIA 状态和属性 属性具有一种命名约定,即它们都以字符串 "aria-" 开头。 这不是命名空间前缀,它是状态或属性名称的一部分。因此,当将 WAI-ARIA 状态和属性与 命名空间前缀一起使用时,完整的属性名称将类似于 "aria:aria-foo"。

某些宿主语言不将命名空间与 WAI-ARIA 状态和属性属性一起使用,原因可能是宿主语言不支持命名空间,或者因为设计者希望将 WAI-ARIA 合并到核心功能集中。在这些 宿主语言中,这些属性的命名空间名称没有值。这些属性的名称没有被冒号偏移的前缀;就命名空间而言,它们是无前缀的属性名称。例如,DOM 接口的 ECMAScript 绑定 getAttributeNS 将空字符串 ("") 视为表示此条件,因此 getAttribute("aria-busy")getAttributeNS("", "aria-busy") 都可以访问 DOM 中的同一 aria-busy 属性。

注意

根据本节的要求,某些用户代理识别带有命名空间的 WAI-ARIA 状态和属性,某些用户代理识别不带有命名空间的 WAI-ARIA 状态和属性,并且某些用户代理可能同时识别这两种。建议作者了解他们使用的宿主语言支持哪种形式。除非宿主语言和支持用户代理明确指示需要命名空间,否则建议作者使用没有命名空间的属性。即使是支持命名空间的用户代理通常也不会将带命名空间的 WAI-ARIA 状态和属性发布到辅助功能 API。特别是,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 语义会影响下一节“与宿主语言语义的冲突”中的冲突解决过程。因此,需要在规范性规范(例如宿主语言规范或 核心辅助功能 API 映射)中定义隐式 WAI-ARIA 语义。

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 时,除非本机宿主语言语义永久存在。

宿主语言为本机特性的 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 角色定义。当将角色属性添加到元素时,元素的 语义 和行为(包括对 WAI-ARIA 状态和属性的支持)会因角色行为而增强或覆盖。用户代理必须忽略 在没有支持状态或属性的角色的元素上使用的非全局状态和属性;定义为显式 WAI-ARIA 角色,或由宿主语言 WAI-ARIA 语义匹配适当的 WAI-ARIA 角色定义。例如,aria-valuetext 属性可用于 progressbar

WAI-ARIA 角色具有关联的状态和属性,这些状态和属性被限定为“受支持”或“必需”。combobox 角色支持的属性示例是 aria-autocomplete。在这种情况下,该属性被指定为“受支持”,因为给定的 combobox 可能会或可能不会实现自动完成。相反,combobox 角色需要 aria-expanded 状态,以指示它是可展开的。Comboboxes 具有受控的弹出元素(例如 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 引用。

Web 作者有责任确保 ID 的唯一性。如果多个元素具有相同的 ID,则用户代理应该使用找到的具有给定 ID 的第一个元素。该行为将与 getElementById 相同。

如果在单个 WAI-ARIA 关系中多次指定了相同的元素,则用户代理应该返回指向同一 元素 的多个指针。

aria-activedescendant 定义为仅引用单个 ID 引用。任何与现有 ID 引用不完全匹配的 aria-activedescendant 值都是作者错误,并且不会匹配 DOM 中的任何元素。

8.7 CSS 选择器

注意

本节可能会在未来的版本中删除。

属性 选择器的支持必须包括 WAI-ARIA 属性。例如, .fooMenuItem[aria-haspopup="true"] 将选择所有具有 fooMenuItem 类的 元素,以及具有值为 trueWAI-ARIA 属性 aria-haspopup。演示必须针对 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 角色 必需属性 后备值
checkbox 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 接口 Mixin 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 getter 步骤 的结果,给定此、idlAttributecontentAttribute

类似地,在设置时,它必须执行以下步骤:

  1. contentAttribute 为通过在 ARIA 属性对应表中查找 idlAttribute 确定的 ARIA 内容属性。

  2. 运行 ARIAMixin setter 步骤,给定 此、idlAttributecontentAttribute 和给定值。

注意

这种非常通用的框架的动机是希望不同的宿主接口(例如 ElementElementInternals)为这些 IDL 属性提供不同的行为。另一种方法是要求每个宿主接口独立复制 IDL 属性,以便它们可以指定独立的行为,但这会带来很高的不同步风险。

10.2 ARIA 属性对应关系

下表提供了 IDL 属性名称和内容属性名称之间的对应关系,供 ARIAMixin 使用。

IDL 属性 反射的 ARIA 内容属性
role role
ariaAtomic aria-atomic
ariaAutoComplete aria-autocomplete
ariaBusy aria-busy
ariaChecked aria-checked
ariaColCount aria-colcount
ariaColIndex aria-colindex
ariaColSpan aria-colspan
ariaCurrent aria-current
ariaDisabled aria-disabled
ariaExpanded aria-expanded
ariaHasPopup aria-haspopup
ariaHidden aria-hidden
ariaInvalid aria-invalid
ariaKeyShortcuts aria-keyshortcuts
ariaLabel aria-label
ariaLevel aria-level
ariaLive aria-live
ariaModal aria-modal
ariaMultiLine aria-multiline
ariaMultiSelectable aria-multiselectable
ariaOrientation aria-orientation
ariaPlaceholder aria-placeholder
ariaPosInSet aria-posinset
ariaPressed aria-pressed
ariaReadOnly aria-readonly
ariaRequired aria-required
ariaRoleDescription aria-roledescription
ariaRowCount aria-rowcount
ariaRowIndex aria-rowindex
ariaRowSpan aria-rowspan
ariaSelected aria-selected
ariaSetSize aria-setsize
ariaSort aria-sort
ariaValueMax aria-valuemax
ariaValueMin aria-valuemin
ariaValueNow aria-valuenow
ariaValueText aria-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 属性名称注释或例外情况

本节为非规范性内容。

特定属性名称的任何注释或例外情况将在此处列出。

  • ariaPosInSetaria-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 架构数据类型 [XMLSCHEMA11-2] 的属性类型之间的建议映射, [SVG2] 和 SGML。

下面未列出的语言可能在该语言中定义了适当的值类型。如果它们没有,我们建议将 XML 架构数据类型用于通用 XML 语言。使用 DTD 而不是架构的文档将无法自动验证,并且需要在 WAI-ARIA 属性上进行额外的处理。

WAI-ARIA 类型 HTML XML 架构
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,具有允许状态或属性定义中列出的值的 枚举约束
token list 空格分隔的标记 NMTOKENS,具有允许状态或属性定义中列出的值的 枚举约束
ID reference 另一个元素上定义的 id 属性 的值 IDREF
ID reference list 其他元素上一个或多个定义的 id 属性 的值,表示为 空格分隔的标记 IDREFS
string 无值约束 string

B. WAI-ARIA 1.1 建议以来的实质性更改

C. 致谢

本节为非规范性内容。

以下人员为本文档的开发做出了贡献。

C.1 发布时在 ARIA WG 中活跃的参与者

C.2 其他 ARIA 贡献者、评论者和以前活跃的参与者

C.3 启用资助者

本出版物的部分资金来自美国教育部、国家残疾人、独立生活和康复研究所 (NIDILRR) 的美国联邦资金,最初根据合同号 ED-OSE-10-C-0067,然后根据合同号 HHSP23301500054C,现在根据 HHS75P00120P00168。本出版物的内容不一定反映美国教育部的观点或政策,提及商品名称、商业产品或组织也不意味着美国政府的认可。

D. 参考

D.1 规范性参考

[ACCNAME-1.2]
可访问名称和描述计算 1.2. Bryan Garaventa; Joanmarie Diggs; Michael Cooper. W3C. 2019 年 7 月 11 日. W3C 工作草案。URL: https://www.w3.org/TR/accname-1.2/
[CORE-AAM]
核心辅助功能 API 映射 1.1. Joanmarie Diggs; Joseph Scheuhammer; Richard Schwerdtfeger; Michael Cooper; Andi Snow-Weaver; Aaron Leventhal. W3C. 2017 年 12 月 14 日. W3C 推荐。URL: https://www.w3.org/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://www.w3.org/TR/core-aam-1.2/
[CSS3-SELECTORS]
选择器级别 3. Tantek Çelik; Elika Etemad; Daniel Glazman; Ian Hickson; Peter Linss; John Williams. W3C. 2018 年 11 月 6 日. W3C 推荐。URL: https://www.w3.org/TR/selectors-3/
[DOM]
DOM 标准. Anne van Kesteren. WHATWG. Living Standard. URL: https://dom.spec.whatwg.org/
[HTML]
HTML 标准. Anne van Kesteren; Domenic Denicola; Ian Hickson; Philip Jägenstedt; Simon Pieters. WHATWG. Living Standard. URL: https://html.spec.whatwg.org/multipage/
[MathML3]
数学标记语言 (MathML) 版本 3.0 第 2 版. David Carlisle; Patrick D F Ion; Robert R Miner. W3C. 2014 年 4 月 10 日. W3C 推荐。URL: https://www.w3.org/TR/MathML3/
[RFC2119]
在 RFC 中用于指示 需求级别的关键字. S. Bradner. IETF. 1997 年 3 月. 最佳当前实践。URL: https://www.rfc-editor.org/rfc/rfc2119
[ROLE-ATTRIBUTE]
角色属性 1.0. Shane McCarron 等人。W3C。2013 年 3 月 28 日. W3C 推荐。URL: https://www.w3.org/TR/role-attribute/
[SVG2]
可缩放矢量图形 (SVG) 2. Amelia Bellamy-Royds; Bogdan Brinza; Chris Lilley; Dirk Schulze; David Storey; Eric Willigers. W3C. 2018 年 10 月 4 日. W3C 候选推荐。URL: https://www.w3.org/TR/SVG2/
[uievents-key]
UI 事件 KeyboardEvent 键值. Travis Leithead; Gary Kacmarcik. W3C. 2023 年 5 月 30 日. W3C 候选推荐。URL: https://www.w3.org/TR/uievents-key/
[webidl]
Web IDL 标准. Edgar Chen; Timothy Gu. WHATWG. Living Standard. URL: https://webidl.spec.whatwg.org/
[XML-NAMES]
XML 1.0 中的命名空间(第三版). Tim Bray; Dave Hollander; Andrew Layman; Richard Tobin; Henry Thompson 等人。W3C。2009 年 12 月 8 日. W3C 推荐。URL: https://www.w3.org/TR/xml-names/

D.2 参考性参考

[AT-SPI]
辅助技术服务 提供程序接口. GNOME 项目。URL: https://developer-old.gnome.org/libatspi/stable/
[ATK]
ATK - 辅助功能工具包. 这 GNOME 项目。URL: https://developer.gnome.org/atk/stable/
[AXAPI]
macOS 的 NSAccessibility 协议. 苹果公司。URL: https://developer.apple.com/documentation/appkit/nsaccessibility
[HTML-ARIA]
HTML 中的 ARIA. Steve Faulkner; Scott O'Hara; Patrick Lauke. W3C. 2023 年 5 月 31 日. W3C 推荐。URL: https://www.w3.org/TR/html-aria/
[IAccessible2]
IAccessible2. Linux 基金会。URL: https://wiki.linuxfoundation.org/accessibility/iaccessible2/
[MSAA]
微软 Active Accessibility (MSAA). 微软公司。URL: https://docs.microsoft.com/en-us/windows/win32/winauto/microsoft-active-accessibility
[UI-AUTOMATION]
UI 自动化. 微软公司。URL: https://docs.microsoft.com/en-us/windows/win32/winauto/ui-automation-specification
[UIA-EXPRESS]
IAccessibleEx 接口. 微软公司。URL: https://docs.microsoft.com/en-us/windows/win32/winauto/iaccessibleex
[wai-aria-1.1]
可访问的富 Internet 应用程序 (WAI-ARIA) 1.1. Joanmarie Diggs; Shane McCarron; Michael Cooper; Richard Schwerdtfeger; James Craig. W3C. 2017 年 12 月 14 日. W3C 推荐。URL: https://www.w3.org/TR/wai-aria-1.1/
[WAI-ARIA-PRACTICES-1.2]
WAI-ARIA 创作实践 1.2. Matthew King; JaEun Jemma Ku; James Nurthen; Zoë Bijl; Michael Cooper. W3C. 2022 年 5 月 19 日. W3C 工作组说明。URL: https://www.w3.org/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://www.w3.org/TR/WCAG21/
[XMLSCHEMA11-2]
W3C XML 架构定义语言 (XSD) 1.1 第 2 部分:数据类型. David Peterson; Sandy Gao; Ashok Malhotra; Michael Sperberg-McQueen; Henry Thompson; Paul V. Biron 等人。W3C。2012 年 4 月 5 日. W3C 推荐。URL: https://www.w3.org/TR/xmlschema11-2/