FE.BASE-WEB组件包容性设计手册

时间  2019-11-08
标签 fe.base base web 组件 包容 设计 手册 栏目 HTML 繁體版
原文   原文链接

前言

包容性设计这个术语并非一个新概念。这是自2005年以来一直存在的一个短语。它被定义为“尽量多的人能够访问和使用的主流产品/服务的设计，而不须要特殊的适应或专门的设计“。css

当咱们从新思考咱们的开发方法时，咱们不只仅是访问信息的基础级别。包容性发展意味着为尽量多的人创造有价值的东西，而不只仅是能够得到的东西。它将可访问性放在首位。html

海登·皮克林（Heydon Pickering）用他的“ 包容性设计模式 ”（Inclusive Design Patterns）中的这句话总结了它：html5

经过选择咱们认为普通用户能够阅读的字体，咱们会有意识地疏远咱们的一部分用户。相反，经过选择适合那些努力阅读的人的字体，咱们得出了一个适合每一个人的选择。这是一种高效，有效的包容性设计。linux

能够简单的认为：组件包容性设计 = 可访问性第一 + 组件驱动开发android

包容性设计是一种设计过程，还有不少的设计过程，没有对错，按需选择。ios

还有，现实点。“100%可访问性”是一个没法实现的理想-你老是会遇到某种边缘状况，致使某个用户发现某些内容难以使用-但你应该尽你所能去作。若是您计划包含一个使用WebGL制做的时髦的3D饼图，您可能但愿包括一个数据表，做为数据的可访问的替表明示。或者，您可能只须要包含表并去掉3D饼图-每一个人均可以访问该表，编写代码更快，CPU密集型更少，维护也更容易。git

另外一方面，若是你正在一个展现有趣的3D艺术的画廊网站上工做，那么指望每一件艺术品都能被视障人士彻底访问是不合理的，由于它是一种彻底的视觉媒介。github

面向用户设计

越往金字塔顶端，用户的能力缺失程度越严重

( 上图为用户金字塔模型 & 包容性设计立方体模型 )web

设计过程名词解释：chrome

  • 通用/共用性设计 (universal design)
    用户金字塔模型自下而上，以关注主流健全用户为前提，力求提高设计对于特殊用户群体的适用。

  • 无障碍设计 (barrier-free design)
    用户金字塔模型自上而下，以知足极端用户（金字塔顶端）的需求为首要任务，再拓展至主流用户群体。

  • 包容性设计 (inclusive design)
    力图充分认识用户群体多样性，在设计的过程和结果中减小对用户产生无心识的排除。

WEB中的无障碍访问

6个无障碍扁平图标，包括辅助功能，轮椅上的人，手掌，耳朵，麦克风静音，眼睛

视觉无障碍设计

  • 确保文字、可交互控件和背景的对比度，知足最低标准。
  • 别只用颜色传达信息，让文字字号可调。
  • 确保界面上全部的控件均可借助辅助技术使用，如屏幕阅读器，放大镜和盲文显示器。 这就意味着必须让 accessibility APIs 能够经过程序肯定每一个控件的角色、状态、价值、标题。

听觉无障碍设计
「听觉障碍」包括：听不清/听不到到界面发出的声音。

  • 让文本内容容易被理解，适当使用「文字替代」
  • 确保界面上的全部空间，在没有声音时，仍可正常使用。

行动无障碍设计

  • 确保全部界面控件交互均可只经过键盘完成或者只使用鼠标；
  • 确保界面控件被辅助技术正确标记；这些用户可能会使用诸如语音控制软件和物理切换控制等技术，这些技术通常使用与屏幕阅读器等其余辅助技术相同的API。

认知无障碍设计
「认知障碍」意味着用户可能须要辅助技术来帮助他们阅读文本，所以文本替代方案的存在很是必要。

  • 避免重复或闪烁的显示方式，由于这可能会为认知障碍用户形成使用不便；
  • 给用户留出充足的时间操做。

WEB中的可访问性

  • 原生控件具备辅助交互，尽量美化他们而不是造轮子(新元素上添加ARIA)
  • 没有aria比错误的aria更好
    • aria role代表交互承诺，不提供键盘行为或样式
    • aria 能够隐藏装饰元素也能够加强/覆盖语义
  • 深刻了解ARIA
    • ARIA 规范介绍了 role 属性以及可与这些角色联用的关联 ARIA 属性的可接受值。
    • ARIA 制做实践文档探究了使用可用 ARIA 角色和属性的最佳作法。

可访问性反模式与误区

连续弯道的盲道

暗黑模式

滥用致使的暗黑模式（DARK PATTERN）包括:

  • 假装或插入内容的广告等模式
  • 使用误导或技巧问题诱骗用户作某事
  • 迫使用户披露我的信息（例如链接到社交网络）以执行基本任务
  • 阻止用户继续使用覆盖屏幕的东西

迷之信噪比

在网页设计中，信号是内容，噪音是内容周围的铬或额外项目。在设计时，目标是尽量提升信噪比（信号不少，噪音很小）。

过期的UX模式

UX模式过多，若不适合用户或业务，应中止使用。如下列表并不全面，但应做为指南来肯定是否应更新正在使用的模式：
轮播图；大背景图像；悬停状态以获取附加信息；无线嵌套菜单；悬停的回到顶部底部；折叠面板和标签；后退按钮；页面预加载器；社交分享和登陆；内容分页；自动播放多媒体；非用户触发操做；无线分页；缺乏导航路径；没法接受的合并功能；

可访问性的误区

1. 个人用户中只有一小部分须要无障碍访问。

然而有些例外：

  • 老年人  - 可能须要在视频或更大的字体大小上添加字幕才能阅读文本
  • 母语或母语不是英语的用户  - 可能须要更多时间阅读自动旋转幻灯片上的文本
  • 具备认知限制的用户  - 可能须要易于访问的字体或项目符号内容以帮助您集中注意力
  • 视力有限或视力不佳的用户  - 可能须要放大内容才能阅读和理解内容
  • 具备情境障碍的用户  - 可能须要更好的色彩对比度，所以屏幕上的眩光不会干扰他们阅读内容
  • 有临时残疾的用户  - 可能须要仅使用键盘访问全部内容，由于他们没法使用鼠标

2. 使咱们的网站或应用程序可访问须要花费太多时间/精力/金钱

与其等到最后测试可访问性致使重写，不如一开始就构建它

3. 可访问性是开发人员的一次性任务

可是还有不少其余人应该负责数字可访问性：客户/股东；营销/销售；WEB架构师/设计师/ UI和用户体验专家；数字策略师/编辑/内容建立者；用户；

4. 可访问的网站和应用程序简单或丑陋

有不少漂亮且易于访问的网站，包括（但不限于）：

5. 我使用了一些自动化测试工具，所以个人网站或应用程序如今是可访问的

不管您选择使用哪一种自动化工具，还有其余测试因素须要考虑。一些自动化测试相关问题包括：

  • 我测试哪些浏览器或操做系统？
  • 我应该测试哪些设备 - 台式机，平板电脑，手机？
  • 我使用的自动化工具备多可靠？
  • 若是不一样的工具给我不一样的结果怎么办？
  • 如何肯定工具报告的可访问性错误的优先级？
  • 该工具错过了什么错误？

与手动测试结合使用时，自动化测试工具最有效。手动测试可包括：

  • 查看网站或应用程序结构/体系结构（例如，查看标题顺序）
  • 键盘兼容性测试（例如逻辑读取/ Tab键顺序）
  • 媒体评论（例如视频的音频和/或文字说明）
  • 辅助技术设备测试（例如屏幕阅读器及其余）
  • 真正的用户测试！

关于我国网站信息无障碍的社会需求与现状

需求

我国残障人士数众多，分布广。根据第二次全国残疾人抽样调查结果，目前我国有各种残障人士共8296万人，占全国总人口的6.34%；

我国人口老龄化问题日趋严重，老龄人口比例日趋上升。我过已经步入老龄化社会，目前在我过60岁以上老年人口已经达到1.78亿，并且我过人口老龄化的速度还在加快比例还在进一步扩大。国务院印发的《中国老龄事业发展”十二五“规划》中指出，到2030年我过老年人口规模将会在目前的基础上翻一番。

现状

早在2014年，中国残疾人联合会、中央网信办就联合印发《关于增强网站无障碍服务能力建设的指导意见》。在此号召下，我国多个省市级政府网站前后开展了信息无障碍优化，使得面向障碍群体的信息、办事等业务真正惠民利民，落到实处。

2017年中国残疾人联合会、中国工业和信息化部共同制定下发了《关于支持视力、听力、言语残疾人信息消费的指导意见》。中国盲人协会、国家网信办等政府组织也在积极推动和从事相关公共服务的行业采起信息无障碍措施，鼓励支持相关信息无障碍产品研发、生产、推广、应用。

2019年4月19日，信息无障碍产品联盟（CAPA）2018年度会议暨轮值主席换届选举大会在北京顺利召开。百度、微软（中国）、阿里巴巴集团、中国平安、字节跳动、OPPO、滴滴出行、CSDN、信息无障碍研究会、浙江大学中国信息无障碍和技术研究院等数十家单位表明出席会议。

会议详细内容信息无障碍产品联盟2018年度会议暨轮值换届选举大会在京召开

关于可访问性组织与规范

a11TO 是一个可访问性组织

网络内容无障碍指南（WEB Content Accessibility Guidelines，WCAG） 为开发无障碍网站提供了指南。

How to Read W3C Specs 告诉咱们如何阅读w3c规范

Researching a Property in the CSS Specifications 以grid-auto-rows 为例，教你获取有关规范中详述信息所需的基本细节。

WAI-ARIA Practices 是ARIA一系列可访问组件的官方最佳实践

下面的 WCAG 检查表提供了一些概览：

WEB包容性设计要素

用户体验设计师和UX知识库草图的创始人Krisztina Szerovay绘制的草图

信息结构与内容

  • 慎用截断
    • 截断的内容一般不会写入摘要或重用
    • 截断的内容一般不包含触发词
    • 永远不要截断头条新闻
    • 始终提供长拷贝的摘要
    • 须要时提供替代副本
  • 构建内容系统
    • 内容并不老是一刀切，容许不一样大小和样式的内容属性(小，中，大图像)
    • 可读性和SEO友好的头条
    • 不要为特定上下文（如iPhone，Android，平板电脑或台式机）构建内容
  • 内容应易于导航
    • 不要没必要要地对长篇内容进行分页
    • 能够轻松导航到长篇内容中的部分
    • 始终为用户提供足够的上下文来制定本身的导航决策
      • 具备位置服务的用户可能不只仅想要基于位置的信息
      • 提供大量的触发词
  • 保持导航整洁
    • 超过5个主要导航类别难以扫描
    • 仅在绝对必要时才提供辅助导航
    • 尽可能避免超过三级导航
    • 若是导航变得混乱，请中止并返工以使架构更易于理解
    • 想想头条是否能够用做连接，或者是否应该使用替代副本
  • 内容应该可用
    • 不要限制内容，尤为是基于设备
    • 若是没法使一种格式可用，则提供其余内容格式，例如经过设备功能或业务需求
    • 不要将内容存储为HTML，而是将其做为能够多种方式呈现的原始属性。对于与长拷贝相关的表格数据和图像尤为如此
    • 以最适合手头显示的方式提供全部内容
  • 开发注意事项

使文字可读

为视频提供了字幕；Alt标签用于描述图像，或者当辅助技术忽略装饰图像时设置为空（即alt =“”）；除徽标外，文本不会放在图像中。

文本行之间的间距（称为行间距，行高或行距）至少是字体大小的1.5倍；段落之间的间距至少是字体大小的2倍；字母之间的间距（称为字母间距或跟踪）至少是字体大小的0.12倍；容许调整文本大小的功能（使用相对单位表示字体大小，例如em或rem） - 最高可达200​​％ - 使用屏幕控制或经过WEB浏览器的缩放功能；清楚地定义段落和字母间距。

选择大多数用户之前遇到的经常使用字体。若是你选择一个普通的字体系列或一个具备独特字符的系列，那么“serif vs. sans-serif”并非什么大问题。避免使用不是惟一的专业显示字体或字体系列（例如能够互相镜像的字母或数字）。

  • 您的字体的最小大小应为14px（理想状况下更多），编码时应使用相对值。
  • 注意颜色和对比度！使用工具检查文本和背景之间的比例，并警戒灰色。避免闪烁或移动文本。
  • 不要只依赖字体的外观（颜色，形状，字体变化，位置等）来传达意义（例如“点击红色按钮”）。
  • 不要让内容的总宽度超过80个英文字符（对于语标为40个英文字符）。避免在内容中建立空格的段落对齐（例如对齐）。

适当使用颜色

夜间模式

夜间模式指的是在操做系统中能够设置高对比度模式，对应浏览器@media (prefers-color-scheme: dark)下的样式会生效。

反色不是夜间模式，但大部分网站是浅色背景深色字，对应浏览器的@media (inverted-colors: inverted)。

反色可能会致使颜色意思改变（红-绿 变成 青-粉）、图片或主题色调改变（蓝变橙）（How “invert brightness” can improve accessibility and help us use our devices - Matthew Atkinson）

浏览器隐身窗口不是夜间模式，只是深色窗体。

利用css自定义属性+媒体查询配置（How to get dark mode working with CSS - Frank Lämmer）

避免负面的身体反应（癫痫发做）

网站上没有任何内容每秒闪烁超过三次

WEB语义可访问性（ARIA）

使用ARIA语义标识分区

ARIA role标识提供了一种识别网页组织和结构的强大方法。经过对页面的各部分进行分类和标记，它们使得经过布局可视地传达的结构信息可以以编程方式表示。屏幕阅读器利用标志性角色为页面的重要部分提供键盘导航。标识区域也能够用做“跳过连接”的目标，并经过浏览器扩展用于加强的键盘导航和屏幕阅读器支持。

故意用presentation角色隐藏语义

presentation的三个常见用途是：

  1. 隐藏装饰图像； 它至关于给图像空的alt文本。
  2. 在表语义不传达有意义的关系的状况下，抑制用于布局的表的表语义。
  3. 消除复合窗口小部件结构中的插入孤立元素的语义，如上面的示例中所示的选项卡列表，菜单或树。

关于子元素自动隐藏语义的角色

要求全部子元素都具备访问性的角色是：
button，checkbox，img，math，menuitemcheckbox，menuitemradio，option，progressbar，radio，scrollbar，separator，slider，switch，tab

多状态设计

The Nine States of Design - Vince Speelman 提到9种状态，他们是：

  • Nothing：初次加载，未激活
  • Loading：加载中
  • None：无数据
  • One：单条数据
  • Some：多条数据
  • Too many：大量数据
  • Incorrect：错误状态
  • Correct：正确状态
  • Done：完成状态

键盘访问

盲人敲打键盘并聆听

ARIA角色，状态和属性模拟了流行桌面GUI（包括Microsoft Windows，macOS和GNOME）的GUI组件之间共享的可访问性行为和功能。一样，ARIA设计模式借鉴了这些平台的用户指望和键盘约定，始终如一地结合了常见的约定，旨在促进WEB上键盘界面的轻松学习和高效操做。

要使网页易于访问，全部交互式元素必须可经过键盘操做。此外，ARIA设计模式中描述的通用GUI键盘接口约定的一致应用很重要，特别是对于辅助技术用户。例如，考虑操做树的屏幕阅读器用户。正如熟悉的视觉样式帮助用户发现如何使用鼠标扩展树枝同样，ARIA属性为树提供了桌面应用程序中树的声音和感受。所以，屏幕阅读器用户一般会指望按右箭头键会展开折叠节点。由于屏幕阅读器知道元素是树，因此它还可以指示新手用户如何操做它。相似地，语音识别软件能够实现用于扩展和折叠分支的命令，由于它将元素识别为树而且能够执行适当的键盘命令。

全部平台上常见的主要键盘导航约定是，tab和shift+tab键将焦点从一个UI组件移动到另外一个UI组件，而其余键（主要是箭头键）将焦点移动到包含多个可聚焦元素的组件内。tab按键时焦点所遵循的路径称为标签序列或标签环。

开发要点

  • 焦点的可见性，持久性，可预测性
  • 焦点和选中状态视觉需不一样
  • 自动获取焦点的状况
  • tab键导航顺序
  • 使用动态tabindex管理组件内的焦点
  • 使用aria-activedescendant管理组件内的焦点
  • 禁用元素的可聚焦性（listbox,menu,tabs,tree中的子项）
  • 避免与系统级功能快捷键冲突

测试驱动开发

测试

axe-chrome扩展 免费扩展，提供页面可访问性测试

AT-browser-tests -github html测试用例，包括html5可访问性和JAWS

ESLint 中的 eslint-plugin-jsx-a11y 插件为你的 JSX 中的无障碍问题提供了 AST 的语法检测反馈。

在Android和iOS上的屏幕阅读器测试摘要 - MDN

检查工具

屏幕朗读器

付费产品：JAWS (Windows) 和 Window Eyes (Windows).

免费产品： NVDA (Windows)， ChromeVox (Chrome, Windows and Mac OS X)， 和 Orca (Linux).

操做系统内置： VoiceOver (Mac OS X and iOS)， Narrator (Microsoft Windows)， ChromeVox (on Chrome OS)，和 TalkBack (Android).

火狐中的 NVDA

NonVisual Desktop Access，简称 NVDA，是一个被普遍使用的 Windows 开源屏幕朗读器。

想要了解怎么样最好的使用 NVDA，请参考下面的指南：

WebAIM —— 使用 NVD A来评估网络的可无障碍访问性
Deque —— NVDA 键盘快捷键

Safari 中的 VoiceOver

VoiceOver 是苹果设备的自带屏幕朗读器。

想要了解如何激活以及使用 VoiceOver，请参考下面的指南：

WebAIM —— 使用 VoiceOver 来评估网络的可无障碍访问性
Deque —— OS X 中的 VoiceOver 键盘快捷键
Deque —— iOS 中的 VoiceOver 快捷键

Internet Explorer 中的 JAWS

Job Access With Speech又称 JAWS，是一个经常使用的 Windows 屏幕朗读器。

想要了解如何最好的使用 VoiceOver，请参考下面的指南：

WebAIM —— 使用 JAWS 来评估网络的可无障碍访问性
Deque —— JAWS 键盘快捷键

Google Chrome 中的 ChromeVox

ChromeVox是 Chromebook 的内置屏幕朗读器，同时也是 Google Chrome 中的一个插件。

想要了解如何最好的使用 ChromeVox，请参考下面的指南：

Google Chromebook 帮助 —— 使用内置屏幕朗读器
ChromeVox 经典键盘快捷键参考

可访问性与SEO

布局

以清晰一致的方式构建导航和页面布局，并有多种查找内容的方式（例如搜索，站点地图，目录）。搜索引擎机器人就像组织良好的网站架构，这使得他们可以以更有意义的方式索引您的内容。若是您的网站难以浏览或使用，则可能会影响您的用户分析统计信息，包括 - 网站上的时间，浏览的网页和跳出率。反过来，这可能会损害您的SEO排名。至少，它会激怒你的用户。

标签

在适当的时候，使用访问HTML 5网页元素，如<article>，<section>，<header>，<footer>。这些元素对搜索引擎机器人和辅助技术设备更具描述性，而后是简单<div>或<p>元素。

标题标签应该是有序的,避免跳过标题标签。这意味着a <h1>后跟<h2>， <h2>后跟 <h2>或<h3>依此类推。最佳作法是<h1>每页只有一个。将<h1>标签视为“ 第二页标题标签 ”，将相关性信号发送给搜索引擎机器人。

确保没有断开的连接。使用内部标记类型连接，但不要过分。提供描述性连接文本。避免使用像click here和的短语read more。跳过向连接添加描述性标题属性（将鼠标悬停在连接上时显示的文本）。添加连接标题不必定是错误的，但对SEO或网站可访问性来讲可能无济于事。

图像与多媒体

在命名图像时尽量保持一致和准确。避免使用非字母字符（例如7，％，＆，$）并在单词之间使用短划线，而不是在图像名称或替代文本中使用下划线。将替代文字保留在125个字符之内。若是您须要更多字符，请使用标题文本或进一步描述页面主文本区域中的图像。编写可理解的替代文本，关键字填充对任何人都没有好处 - 使用屏幕阅读器的人会烦恼，搜索引擎机器人会惩罚你。

少便是多。尽量限制在设计中使用复杂的多媒体组件。提供访问媒体的其余方法。例如，有视频的副本和/或标题；为仅音频文件建立副本；将盲文格式的文件添加到您的媒体。有许多不一样类型的替代格式可供使用。

内容篇幅

不要使用粗体和斜体标记来突出显示单词，而是使用强烈和强调。在视觉上它们看起来彼此类似，但屏幕阅读器（在正确的模式下）将强调包围<strong>和<em>标签的单词，而它们将彻底忽略或仅略微改变<b>和<i>标签。

不要复制您的内容。搜索引擎机器人会注意到并惩罚你。您的用户会感到困惑。

项目符号和编号列表有助于为读者分解您的内容，使其更加用户友好。一些研究代表，搜索引擎机器人更喜欢使用列表和数字序号标记的内容而不是纯文本。

WAI-ARIA

概念

用户代理（例如，浏览器），可访问性API和辅助技术之间的关系

用户代理（例如，浏览器），可访问性API和辅助技术之间的关系

ACCESSIBILITY APIS

屏幕阅读器朗读某个按钮的工做流程

该图说明了在文档中呈现下一个对象所涉及的步骤

  1. 屏幕阅读器从API请求关于相对于当前对象的下一个可访问对象的信息。
  2. API（做为中介）将此请求传递给浏览器。
  3. 在某些时候，浏览器引用DOM和样式信息，并发现相关元素是一个非隐藏按钮：<button>Do a thing</ button>。
  4. 浏览器将此HTML按钮映射到API指望的格式，例如具备各类属性的可访问对象：名称：Do a thing，角色：Button。
  5. API将此信息从浏览器返回到屏幕阅读器。
  6. 而后，屏幕阅读器能够将该对象呈现给用户，或许能够说明“Button, Do a thing”。

用户经过屏幕朗读器"点击"按钮流程
该图说明了将屏幕阅读器点击路由到WEB内容所涉及的步骤

  1. 用户提供特定的屏幕阅读器命令，例如击键或手势。
  2. 屏幕阅读器调用API中的方法来调用按钮。
  3. API将此交互转发给浏览器。
  4. 浏览器如何响应传入的交互取决于上下文，但在这种状况下，浏览器能够经过WEB API将其做为“单击”事件引起。
  5. 浏览器不该指示点击来自辅助技术，由于这样作会侵犯用户的隐私权。
  6. WEB开发人员已为点击注册了一个JavaScript事件监听器;
  7. 如今执行它们的回调函数，就像用户用鼠标单击同样。

了解Accessibility API主要从Role(角色),State(状态),Properties(属性)三个方面入手。

全部aria属性和角色的继承树状图
全部aria属性和角色的继承树状图 -W3C

角色模型

角色分类以下：

  • 抽象角色 (Abstract Roles) 用于本体。做者不得在内容中使用抽象角色。
    • command 一种窗体小部件，用于执行操做但不接收输入数据。(子类角色：button,link,menuitem)
    • composite 可能包含导航元素的小部件。(子类角色：grid,select,spinbutton,tablist)(支持的状态或属性：aria-activedescendant )
    • input 容许用户输入的通用类型的小部件。(子类角色：checkbox,option,radio,slider,spinbutton,textbox)
    • landmark 可感知的section包含与特定的，做者指定的目的相关的内容，而且足够重要以致于用户可能但愿可以容易地导航到该部分而且将其列在页面的摘要中。这样的页面摘要能够由用户代理或辅助技术动态生成。(子类：全部landemark role)
    • range 表示可由用户设置的值范围的输入。(子类角色：progressbar,scrollbar,slider,spinbutton)(支持的状态或属性: aria-valuemax；aria-valuemin；aria-valuenow；aria-valuetext )
    • roletype 此分类是全部其余角色继承的基本角色。
    • section 文档或应用程序中的可渲染结构包含单元。(子类角色：alert,cell,definition,figure,group,img,landmark,list,lsititem,log,maquee,note,status,table,tabpanel,term,tooltip)(支持的状态或属性：aria-expanded)
    • sectionhead 标记或归纳其相关部分主题的结构。（子类角色：columnheader,heading,rowheader,tab)（支持的状态或属性：aria-expanded）
    • select 表单窗口小部件，容许用户从一组选项中进行选择。(子类角色：combobox,listbox,menum,radiogroup,tree)(支持的状态或属性：aria-orientation)
    • structure 文档结构元素(子类角色：application,document,presentation,rowgroup,section,sectionhead,separator)
    • widget 图形用户界面（GUI）的交互式组件。(子类角色：command,composite,gridcell,input,range,row,separator,tab)
    • window 浏览器或应用程序窗口。(子类角色：dialog)(支持的状态或属性：aria-expanded,aria-modal)
  • 小部件角色 (Widget Roles)
    如下角色充当独立用户界面窗口小部件或做为较大的复合窗口小部件的一部分
    • button 按钮 单击或按下时容许用户触发操做的输入。(子元素显性表达)(支持的状态或属性：aria-expanded aria-pressed )
    • checkbox 复选框 具备三个可能值的可检查输入：true，false或mixed。（默认aria-checked=false）(必需的状态或属性：aria-checked )(支持的状态或属性：aria-readonly )
    • gridcell 网格单元 一个grid或treegrid，内部包含一个cell(子类角色: columnheader rowheader )(必需的父元素角色：row)( 支持的状态或属性：aria-readonly;aria-required;aria-selected)
    • link 对内部或外部资源的交互式引用，在激活时，会致使用户代理导航到该资源。(支持的状态或属性： aria-expanded)
    • menuitem 菜单项 被menu或menubar包裹住的选项(必需的父元素角色：group，menu,menubar)(支持的状态或属性：aria-posinset； aria-setsize )
    • menuitemcheckbox 复选的菜单项 带有选中态的menuitem，值能够是：true，false或mixed。（子类角色：menuitemradio）（必需的父元素角色：menubar,menu）(默认 aria-checked=false)
    • menuitemradio 单选的菜单项 带有单选功能的menuitem,一次只能选中一个(必需的父元素角色：group，menu,menubar)(默认 aria-checked=false)
    • option 选项 select列表中的可选项(必需的父元素角色：listbox)(必需的状态或属性：aria-selected)(支持的状态或属性：aria-checked；aria-posinset；aria-setsize)(默认 aria-selected=false)
    • progressbar 进度条 显示须要很长时间的任务的进度状态的元素。
    • radio 单选 单选输入，一次只能选中其中一个元素。(必需的状态或属性：aria-checked)(支持的状态或属性：aria-posinset;aria-setsize)(默认 aria-checked=false)
    • scrollbar 不管内容是否在观看区域内彻底显示，控制观看区域内的内容滚动的图形对象。(必需的状态或属性：aria-controls；aria-orientation；aria-valuemax；aria-valuemin；aria-valuenow)(默认aria-orientation =vertical,aria-valuemin=0,aria-valuemax=100,aria-valuenow=aria-valuemin和aria-valuemax的中间值)
    • searchbox 一种用于指定搜索条件的文本框。
    • separator(当获取焦点时) 分隔 分隔符，用于分隔和区份内容或菜单项组的各个部分。（必需的状态或属性:aria-valuemax；aria-valuemin；aria-valuenow）(支持的状态或属性：aria-orientation，aria-valuetext)(默认aria-orientation=horizontal,aria-valuemin=0,aria-valuemax=100,aria-valuenow=50)
    • slider 滑动条 用户输入，其中用户从给定范围内选择值。（必需的状态或属性:aria-valuemax；aria-valuemin；aria-valuenow）(支持的状态或属性：aria-orientation，aria-readonly)(默认aria-orientation =horizontal,aria-valuemin=0,aria-valuemax=100,aria-valuenow=aria-valuemin和aria-valuemax的中间值)
    • spinbutton 微调 一种范围选择方式，指望用户从多点触控中进行选择。（必需的状态或属性:aria-valuemax；aria-valuemin；aria-valuenow）(支持的状态或属性：aria-requied,aria-readonly)(默认aria-now=0)
    • switch 开关 一种表示开/关值的复选框，与已选中/未选中的值相对。(必需的状态或属性：aria-checked)(默认aria-checked=false)
    • tab 标签 提供用于选择要呈现给用户的选项卡内容的机制。(支持的状态或属性：aria-posinset,aria-selected,aria-setsize)(默认 aria-selected=false)
    • tabpanel 标签面板 用于与tab关联的资源的容器，其中每一个tab都包含在tablist中。
    • textbox 一种容许自由格式文本做为其值的输入。(支持的状态或属性：aria-activedescendant；aria-autocomplete；aria-multiline；aria-placeholder；aria-readonly；aria-required)
    • treeitem 树结构选项 tree的选项。这是树中的一个元素，若是它包含一个子级别的树项元素组，则能够展开或折叠。(必需的父元素角色：group,tree)
      如下角色充当复合用户界面小部件。这些角色一般充当管理其余包含的小部件的容器。
    • combobox 下拉列表框 包含单行textbox和另外一个元素的复合，例如 listbox或者grid，能够动态弹出以帮助用户设置值textbox。
    • grid 网格 包含一个或多个行的集合的复合，其中一个或多个单元格经过使用二维导航方法（例如方向箭头键）能够对网格中的某些或全部单元格进行聚焦。(子类：treegrid)(必需的子元素：row;rowgroup->row)(支持的状态或属性：aria-level;aria-multiselectable;aria-readonly;)
    • listbox 列表框 容许用户从选项列表中选择一个或多个项目。(必需的子元素:option)(支持的状态或属性： aria-multiselectable;aria-readonly;aria-required)(默认aria-orientation=vertical)
    • menu 垂直菜单栏 一种窗口小部件，为用户提供选项列表。(子类：menubar)(必需的子元素：group->menuitemradio;menuitem;menucheckbox;menuradio)(默认 aria-orientation=vertical)
    • menubar 水平菜单栏 这种菜单一般是水平呈现(必需的子元素：group->menuitemradio;menuitem;menucheckbox;menuradio)(默认 aria-orientation=horizontal)
    • radiogroup 一组radio（必需的子元素：radio）(支持的状态或属性：aria-readonly;aria-required)
    • tablist 标签列表 选项卡元素列表，它是对tabpanel的引用。(支持的状态或属性：aria-level,aria-mutiselectable,aria-orientation)
    • tree 树形 一种列表，可能包含可折叠和展开的子级嵌套组。(子类角色：treegrid)(必需的子元素：group->treeitem;item)(支持的状态或属性：aria-multiselectable；aria-required)
    • treegrid 树形网格 一种grid，其行能够以与tree相同的方式展开和折叠。(必需的子元素：row,rowgroup->row)
  • 文档结构角色 (Document Structure Roles) 描述了组织页面内容的结构。文档结构一般不是交互式的。
    • application 应用 包含一个或多个须要用户输入的可聚焦元素的结构，例如键盘或手势事件，其不遵循由窗口小部件角色支持的标准交互模式。(支持的状态或属性：aria-activedescendant )
    • article 文章 页面的一部分，由构成文档，页面或网站的独立部分的合成组成。(支持的状态或属性：aria-posinset aria-setsize )
    • cell 单元格 表格容器中的单元格。（支持的状态或属性： aria-colindex；aria-colspan；aria-rowindex；aria-rowspan）
    • columnheader 列表头 包含列标题信息的单元格。(必需的角色 row)(支持的状态或属性：aria-sort)
    • definition 定义 术语或概念的定义。
    • directory 目录列表 对组成员的引用列表，例如静态目录。
    • document 文档 包含辅助技术用户可能但愿在阅读模式下浏览的内容的元素。(支持的状态或属性：aria-expanded )
    • feed 滚动列表 可滚动list的articles。位置的滚动可能致使articles添加到列表的任一端或从列表的任一端移除。
    • figure 形状 可感知section的内容，一般包含图形文档，图像，代码片断或示例文本。figure 的部分多是可导航的。
    • group 组合并 一组用户界面对象，不打算经过辅助技术包含在页面摘要或目录中。(子类: row,select,toolbar) (支持的状态或属性：aria-activedescendant )
    • heading 标题 页面一部分的标题。(必需的角色或属性：aria-level )（默认 aria-level=2）
    • img 图像 用于造成图像的元素集合的容器。
    • list 列表 含有listitem的section元素(必需的子元素：group->listitem;item)
    • listitem 列表项 列表或目录中的单个项目。(子类角色：treeitem)(必需的父元素角色：group;list)(支持的状态或属性： aria-level;aria-posinset;aria-setsize)
    • math 数学公式 表示数学表达式的内容
    • none 无 其角色语义不会映射到辅助功能API的元素。与presentation相同
    • note 辅助 内容做为主要内容的辅助或辅助的部分。
    • presentation 称述 其角色语义不会映射到辅助功能API的元素。与none相同
    • row 行 表格容器中的一行单元格。（必需的父元素角色：grid,rowgroup,table,treegrid）(必需的子元素:cell,columnheader,gridcell,rowheader)(支持的状态或属性：aria-colindex；aria-level；aria-rowindex；aria-selected)
    • rowgroup 一组行元素 包含表格容器中的一个或多个行元素的结构。（必需的父元素角色：grid,table,treegrid）(必需的子元素:row)
    • rowheader 行表头 包含网格中行的标题信息的单元格。（必需的父元素角色：row)(支持的状态或属性：aria-sort )
    • separator(没有获取焦点时) 分隔 分隔符，用于分隔和区份内容或菜单项组的各个部分。
    • table 包含按行和列排列的数据的部分。(必需的子元素：row,rowgroup->row)(支持的状态或属性：aria-colcount,aria-rowcount)
    • term 定义 带有相应定义的单词或短语。
    • toolbar 工具栏 以紧凑视觉形式表示的经常使用功能按钮或控件的集合。(支持的状态或属性：aria-orientation)(默认：aria-orientation:horizontal)
    • tooltip 提示文本 显示元素描述的上下文弹出窗口。
  • 区域标识角色 (Landmark Roles)
    如下角色是用做导航标识的页面区域。全部这些角色都继承自地标基本类型，而且都是继承自landmark的。这些角色包含在此处，以使它们成为WAI-ARIA角色分类的明确组成部分。
    • banner 横幅 主要包含面向站点的内容，而不是特定于页面的内容。
    • complementary 补充 旨在与DOM层次结构中相似级别的主要内容互补，但在与主要内容分离时仍然有意义。
    • contentinfo 页尾声明信息 包含有关父文档的信息的大型可感知区域。
    • form 表单 一个landmark包含项目，对象，做为一个总体，结合建立表单集合区域。
    • main 主体 文档的主要内容。
    • navigation 导航 具备导航功能的元素（一般是链接）的集合，用来导航到相关文档。
    • region 区域 一个可感知的部分，其中包含与特定的，做者指定的目的相关的内容，而且足够重要以致于用户可能但愿可以轻松地导航到该部分并将其列在页面摘要中。这样的页面摘要能够由用户代理或辅助技术动态生成。
    • search 搜索 包含一组项目和对象，这些项目和对象做为一个总体组合在一块儿以建立搜索工具
  • 实时区域角色 (Live Region Roles)
    如下角色是实时区域，能够经过实时区域属性进行修改。
    • alert 警告 一种具备重要且一般是时间敏感信息的实时区域。(默认 aria-live=assertive;aria-atomic=true)
    • log 日志记录 其中以有意义的顺序添加新信息而且旧信息可能消失。(默认aria-live=polite)
    • marquee 滚动文字 一种非必要信息频繁变化的实时区域。(默认aria-live=off )
    • status 状态栏 其内容是用户的咨询信息，但不足以证实警报的合理性，一般但不必定表示为状态栏。(子类角色：progerssbar,timer)(默认 aria-live=polite,aria-atomic=true)
    • timer 计数 一种包含数字计数器的活动区域，该数字计数器指示从起始点开始的通过时间量，或者剩余到结束点的时间。
  • 窗口角色 (Window Roles)
    如下角色充当浏览器或应用程序中的窗口。
    • alertdialog 警告弹出框 一种包含警报消息的对话框，其中初始焦点聚焦在对话框内的元素。
    • dialog 对话框 对话框是WEB应用程序主窗口的后代窗口。对于HTML页面，主应用程序窗口是整个WEB文档，即body元素。（子类角色: alertdialog）

区域标识角色 (Landmark Roles) 实践

几个HTML5分区元素自动建立ARIA标识区域。所以，为了向辅助技术用户提供页面的逻辑视图，了解使用HTML5分区元素的效果很是重要。

HTML5分区元素的默认role标识

  • aside:complementary
  • footer:contentinfo在body元素的上下文中
  • header:banner在body元素的上下文中
  • main:main
  • nav:navigation
  • section:region当它具备使用aria-labelledby或的可访问名称时aria-label

标识设计的通常原则
在其中一个标志性区域中 包括页面上的全部可感知内容并为每一个标志性区域赋予语义上有意义的做用是确保辅助技术用户不会忽视与其需求相关的信息的最有效方式之一。

第1步：肯定逻辑结构

  • 将页面分红可感知的内容区域，设计者一般使用对齐和间距在视觉上指示。
  • 能够根据须要将区域进一步定义为逻辑子区域。
  • 子区域的示例是门户应​​用程序中的portlet。

第2步：为每一个区域分配 role标识

  • 根据区域中的内容类型分配 role标识。
  • banner，main，complementary和contentinfo标识应该是顶级的标识。
  • 能够嵌套 role标识以识别所呈现信息的父/子关系。

第3步：标记区域

  • 若是在页面上屡次使用特定的 role标识，请为该标识的每一个实例提供惟一标签。有一种罕见的状况是，为标识的多个实例提供相同的标签多是有益的：每一个实例的内容和目的是相同的。例如，一个大的搜索结果表有两组相同的分页控件 - 一个在上面，一个在表下面，因此每一个集都在一个标记为搜索结果的导航区域中。在这种状况下，向区分这两个实例的标签添加额外信息可能会比有用更使人分心。
  • 若是标识仅在页面上使用一次，则可能不须要标签。请参阅下面的Landmark Roles部分。
  • 若是区域以标题元素开头（例如h1-h6），则能够使用该aria-labelledby属性将其用做区域的标签。
  • 若是某个区域须要标签但没有标题元素，请使用该aria-label属性提供标签。
  • 不要将标记角色用做标签的一部分。例如，具备标签“站点导航”的导航标识将由屏幕阅读器宣布为“站点导航导航”。标签应该只是“网站”。

一个banner标志性标识，在每一页的网站内开始面向网站内容。面向网站的内容一般包括诸如网站赞助商的徽标或身份以及特定于站点的搜索工具之类的内容。横幅一般出如今页面顶部，一般横跨整个宽度。

  • 每一个页面可能有一个banner标识。
  • 该banner标识意义的应该是一个顶级标识。
  • 当页面包含嵌套document和/或application角色（例如，一般经过使用iframe和frame元素）时，每一个document或application角色能够具备一个banner界标。

  • 若是页面包含多个banner标识，则每一个标识都应具备惟一标签。

  • HTML5 header元素banner在其上下文是body元素时定义了一个标识。
  • 当HTML5 header元素是banner如下任何元素的后代时，它不被视为具备标识意义（请参阅HTML辅助功能映射 )：
    • article
    • aside
    • main
    • nav
    • section

若是header未使用HTML5 元素技术，role="banner"则应使用属性来定义banner标识。

banner标识示例

complementary

complementary标识是文档，设计成与在DOM层次结构中的相似水平的主要内容互补的支撑部分，可是从主内容分离时仍然有意义。

  • complementary 标识应该是顶级标识（例如，不包含在任何其余标识内）。
  • 若是补充内容与主要内容无关，则应分配更通常的角色（例如region）。
  • 若是页面包含多个complementary标识，则每一个标识都应具备惟一标签）。

使用HTML5 aside元素定义complementary标识。

若是aside未使用HTML5 元素技术，请使用role="complementary"属性来定义complementary标识。

complementary标识示例

contentinfo

一个contentinfo标识是一个方法来识别一个网站中的每一个页面的底部常见的信息，一般称为页面的“脚注”，包括诸如版权和连接隐私和可访问性声明的信息。

  • 每一个页面可能有一个contentinfo标识。
  • 该contentinfo标识意义的应该是一个顶级标识。
  • 当页面包含嵌套document和/或application角色（例如，一般经过使用iframe和frame元素）时，每一个document或application角色能够具备一个contentinfo界标。

  • 若是页面包含多个contentinfo标识，则每一个标识都应具备惟一标签。

  • HTML5 footer元素contentinfo在其上下文是body元素时定义了一个标识。
  • 当HTML5 footer元素是contentinfo如下任何元素的后代时，它不被视为具备标识意义：
    • article
    • aside
    • main
    • nav
    • section

若是footer未使用HTML5 元素技术，role="contentinfo"则应使用属性来定义contentinfo标识。

contentinfo标识示例

form

form标志性标识包含的项目和对象，做为一个总体，结合起来，创造一种形式的集合，当没有其余命名的标识是适当的区域（如主或搜索）。

  • 当表单用于搜索功能时，使用search标识而不是form标识。
  • 一个form具备标识意义应该有一个标签，以帮助用户了解表单的目的。
  • form标识的标签应对全部用户可见（例如h1-h6元素）。
  • 若是页面包含多个form标识，则每一个标识都应具备惟一标签。
  • 只要有可能，formHTML文档中的标识中包含的控件应使用本机主机语义：
    • button
    • input
    • select
    • textarea

HTML5 form元素form在具备可访问名称（例如aria-labelledby，aria-label或title）时定义标识。

使用它role="form"来识别页面的区域； 不要用它来识别每一个表单字段。

form标识示例

main

main界标标识网页的主要内容。

  • 每一个页面都应该有一个main标识。
  • 该main标识意义的应该是一个顶级标识。
  • 当页面包含嵌套document和/或application角色（例如，一般经过使用iframe和frame元素）时，每一个document或application角色能够具备一个main界标。
  • 若是页面包含多个main标识，则每一个标识都应具备惟一标签。

使用HTML5 main元素定义main标识。

若是main未使用HTML5 元素技术，请使用role="main"属性来定义main标识。

main标识示例

Navigation 标识提供了一种识别旨在用于网站或页面内容导航的连接组（例如列表）的方法。

  • 若是页面包含多个navigation标识，则每一个标识都应具备惟一标签。
  • 若是navigation标识具备与navigation页面上的另外一个标识相同的连接集，则对每一个navigation标识使用相同的标签。

使用HTML5 nav元素定义navigation标识。

若是nav未使用HTML5 元素技术，请使用role="navigation"属性来定义navigation标识。

navigation标识示例

region

region标识是用户可以浏览到部分是足够重要的页面包含内容的感知的部分。

  • 一个region具备标识意义必须有标签。
  • 若是页面包含多个region标识，则每一个标识都应具备惟一标签。
  • 该region标识可用于识别名为标识未适当描述的内容。

HTML5 section元素region在具备可访问名称（例如aria-labelledby，aria-label或title）时定义标识。

若是section未使用HTML5 元素技术，请使用role="region"属性来定义region标识。

region标识示例

search标志性包含项目和对象，做为一个总体，结合建立搜索功能的集合。

  • 当表单用于搜索功能时，使用search标识而不是form标识。
  • 若是页面包含多个search标识，则每一个标识都应具备惟一标签。

没有定义search标识的HTML5元素。

该role="search"属性定义了一个search标识。

search标识示例

状态和属性

通用属性：

  • aria-atomic <true|false> 指示辅助技术是否将基于aria-relevant属性定义的更改通知呈现更改区域的所有或部分。
  • aria-current(状态) <id> 表示容器或相关元中的当前项的元素。
  • aria-keyshortcuts <String> 表示已实现的键盘快捷键，用于激活或为焦点提供焦点。
  • aria-label <String> 定义一个字符串值标记当前元素。
  • aria-relevant <additions|removals|text|all> additions表示新增节点的时候作出反应；removals表示删除节点时重要操做；text表示文本改变是值得重视的；all等同于同时使用上面三个属性值。
  • aria-roledescription <String> 为元素的角色定义可读的，本地化的描述。

小部件属性：

  • aria-autocomplete<inline|list|both|none> 表示用户的文本框的自动提示是否提供。若是是none,则支持autocomplete的元素其autocomplete需设置为off；若是是inline|list|both则需设为on
  • aria-checked(状态) <true|false|mixed> true表示元素被选择；false表示元素未被选择；mixed表示元素同时有选择和为选择状态。
  • aria-disabled(状态) <true|false> true表示当前是非激活状态；false表示清除非激活状态。
  • aria-expanded(状态) <undefined|true|false> 该属性对应HTML5的open属性。表示展开状态。默认为undefined, 表示当前展开状态未知。true表示元素是展开的；false表示元素不是展开的。
  • aria-haspopup <true|false> true表示点击的时候会出现菜单或是浮动元素； false表示没有pop-up效果。
  • aria-hidden(状态) <true|false> true表示元素隐藏(不可见)，false表示元素可见。
  • aria-invalid(状态) <true|false> 表示元素值是否错误的。默认为false, 表示是OK的，若是为true, 则表示值验证不经过。
  • aria-label <String> 标记当前元素。
  • aria-level <Number> 表示等级。
  • aria-modal <true|false> 指示元素在显示时是否为模态。
  • aria-multiline <true|false> 指示文本框是接受多行输入仍是仅接受一行。
  • aria-multiselectable <true|false> 表示是否可多选。默认为false, 表示一次只能选择一个项。true表示一次能够选择多个项。例如手风琴展开收起效果，咱们能够使用aria-multiselectable来告知辅助设备，一次能够展开多个项仍是只有一个展开。
  • aria-orientation <undefined|horizontal|vertical> 指示元素的方向,默认为undfined
  • aria-placeholder <String> 定义一个简短的提示（一个单词或短语），用于在控件没有值时帮助用户输入数据。提示能够是样本值或预期格式的简要描述。
  • aria-pressed(状态) <undefined|true|false|mixed> 默认为undfined, 表示按下状态未知；true表示元素往下（按钮按下）；false表示元素抬起；mixed表示元素同时有按下和没有按下的状态。
  • aria-readonly <true|false> 表示是否只读。默认为false, 表示元素值能够被修改；true表示元素指不能被改变。
  • aria-required <true|false> 多半用在表单控件中。对应HTML5中required属性。默认为false, 表示元素值能够为空；true表示元素值是必需的。
  • aria-selected(状态) <undefined|true|false> 默认为undefined，表示元素选择状态未知。true表示元素已选择；false表示未被选中。
  • aria-sort <ascending|descending|none|other> 表示表格或格栅中的项是以升序排列仍是降序排列。
  • aria-valuemax <Number> 容许的最大值。
  • aria-valuemin <Number> 容许的最小值。
  • aria-valuenow <Number> 表示当前值。
  • aria-valuetext <String> 定义等同于aria-valuenow人可读的文本。

激活区域属性：

  • aria-atomic<true|false> 表示区域内容是否完整播报。值能够为true和false。当为true时，表示辅助设备须要把基于 aria-relevant 属性定义的区域内容都通报给使用者；若是为false则表示只须要通报修改的部分。
  • aria-busy<true|false|error> 表当前区域的忙碌状态。默认为false, 表清除busy状态；可选为true, 表该区域正在加载；或为error, 表示该区域验证无效。若是某个区域内有多个地方须要修改，须要所有修改完毕再通知使用者的话，就能够先将aria-busy设为true, 等到所有内容更新完毕后再设成false. 该属性能够避免辅助工具在区域内容更新完毕前不断即时提醒使用者。
  • aria-live off|polite|assertive|rude 绝大多数的更新应该在用户闲暇的时候告知，即时提示对用户是一种干扰。若是但愿内容彻底更新后再提示，能够使用aria-busy。默认为off, 表示不宣布更新；polite表示只有用户闲时宣布；assertive表示尽快对用户宣布；rude表示即时提醒用户，必要的时候甚至中断用户。
  • aria-relevant <additions|removals|text|all> 表示区域内哪些操做行为须要作出反应。能够空格分隔多个一块儿显示. additions表示新增节点的时候作出反应；removals表示删除节点时重要操做；text表示文本改变是值得重视的；all等同于同时使用上面三个属性值。

关系属性：

  • aria-activedescendant<id> 当dom聚焦在composite,textbox,group或application时，标识当前获取焦点的子元素id
  • aria-colcount <Number> 定义 table, grid 或 treegrid 的总列数
  • aria-colindex <Number> 定义 table, grid 或 treegrid 的列索引或位置
  • aria-colspan <Number> 定义 table, grid 或 treegrid 的cell或gridcell所跨越的列数
  • aria-controls <id1 id2 ...> 该属性定义了元素间不能经过文档结构决定的关联关系。aria-controls属性主要被role为group, region, 或widget的元素使用。
  • aria-describedby <id1 id2 ...> 该属性定义了文档结构表现不出来的的元素间的相互关联性。该属性旨在经过标签提供更多用户可能须要的信息。若是指定了不仅一个id, 全部元素会合并在一块儿共同建立一条单独的描述。
  • aria-details <id> 标识为对象提供详细的扩展描述的元素。
  • aria-errormessage 标识为对象提供错误消息的元素。
  • aria-flowto <id1 id2 ...> 若是该属性值对应的是单独的id, 辅助技术会恢复目标元素的阅读；若是对应的是多个id, 则辅助技术会让用户去选择、导航到目标元素。
  • aria-labelledby <id1 id2 ...> 通常用在区域元素上，对于的id通常为对应的标题或是标签元素的id.关系型属性。
  • aria-owns <id> 表示所拥有的元素。值为目标元素id.
  • aria-posinset <Number> 表示当前位置。用在设置和获取一个集合内某项的当前位置。
  • aria-rowcount <Number> 定义 table, grid 或 treegrid 的总行数
  • aria-rowindex <Number> 定义 table, grid 或 treegrid 的行索引或位置
  • aria-rowspan <Number> 定义 table, grid 或 treegrid 的cell或gridcell所跨越的行数
  • aria-setsize <Number> 设置的尺寸大小值。

基础控件

按钮 button

按钮是一个组件，可以让用户触发一个操做或事件，例如提交一个表单、打开一个对话框、取消操做、或执行删除操做。告知用户一个按钮会打开对话框的惯用方法是将“...”（省略号）添加到按钮上，例如“另存为...”

除了常规按钮组件外，WAI-ARIA还支持其余2种按钮类型：

  • 切换按钮 toggle button：能够关闭（未按下）或打开（按下）的双状态按钮。为了告知辅助技术该按钮是个切换按钮，须要为其指定属性 aria-pressed的值。例如，音频播放器中被标记为静音的按钮能够经过设置其按下状态为 true，来指示声音被静音。重要提示：按钮状态改变时，其标签不改变。在此示例中，当按下状态为 true 时，其标签仍为“静音”，这样屏幕阅读器就会像这样朗读：“静音” 切换按钮“已按下”。或者，若是设计文档要求按钮标签从“静音”变为“取消静音”，则不须要设置 aria-pressed 属性。
  • 菜单按钮 menu button：如菜单按钮 所述，当其 aria-haspopup属性设置为 true 或者 menu 时，该按钮会被辅助技术视为一个菜单按钮。

注意 按钮执行的动做类型与连接的功能大相径庭（参见 连接模式 ）。组件的外观和角色与其提供的功能相匹配，这很是重要。可是，偶尔某些元素会有连接的视觉样式，却执行按钮的操做。在这种状况下，为元素添加 button 角色，能够帮助辅助技术用户理解元素的功能。可是，更好的解决方案是调整其视觉设计，以匹配其功能和ARIA角色。

示例

按钮示例：将可点击的HTML div 和 span 元素做为可访问命令和切换按钮的示例。

Toggle Buttons - Inclusive Components

A Theme Switcher - Inclusive Components

键盘交互

当按钮有焦点时：

  • Space或Enter：激活按钮
  • 按钮激活后，根据按钮的操做类型设置焦点。例如：
    • 若是激活按钮打开一个对话框，焦点将移至对话框内。（见 对话框（模态））
    • 若是激活按钮会关闭一个对话框，焦点一般会返回到打开该对话框的按钮上，除非该对话框执行的功能会听从上下文的逻辑，转到一个不一样的元素。例如，激活对话框中的取消按钮将焦点返回到打开对话框的按钮。可是，若是对话框是确认删除其来自页面的操做，焦点将会根据逻辑移至一个新的上下文。
    • 若是激活按钮不会关闭当前上下文，按钮激活后，焦点仍停留在该按钮上，例如，一个应用或从新计算的按钮。
    • 若是按钮操做会致使上下文变动，例如，转到向导中的下一步，或添加其余搜索条件，此时，能够将焦点移至新操做的起点。
    • 若是使用快捷键激活按钮，焦点一般保留在激活快捷键的上下文中。例如，若是把快捷键 Alt+U 分配给“向上”按钮，该按钮会将当前聚焦的列表项目移至列表中的较高位置，当焦点在列表中时，按 Alt+U 将焦点移出列表。

WAI-ARIA角色，状态和属性

  • 按钮具备的角色 button。
  • 按钮有一个可访问的标签
  • 默认状况下，可访问名称是从按钮元素内部的全部内容计算得来。可是，无障碍名称也能够使用 aria-describedby 或 aria-label 提供。
  • 若是按钮有功能描述，则将按钮元素的 aria-describedby 的值设置为包含描述的元素的ID。
  • 当与按钮相关联的动做不可用时，该按钮的 aria-disabled 设置为 true。
  • 若是按钮是一个切换按钮，则其具备 aira-pressed 状态属性。当按钮被打开时，该状态属性的值为 true，当被关闭时，该状态属性的值为false。

连接 组件提供了对资源的交互索引。目标资源能够是外部的的，也能够是本地的，例如，当前页面内、页面外、应用。

注意 做者们强烈建议使用原生语言的连接元素，例如一个具备 href 属性的HTML A 元素。与其余 WAI-ARIA 组件角色同样，应用link角色到一个元素，浏览器不会自动添加标准连接行为，例如导航到连接目标或上下文菜单操做。当使用 link 角色时，为元素提供这些特性是开发者的责任。

示例

连接举例: 用HTML标签 span 和 div 构建连接部件。

键盘交互

  • Enter: 执行连接而且将焦点移至连接目标。
  • Shift + F10 (可选): 打开连接的上下文菜单。

WAI-ARIA 角色，状态和属性

包含连接文本或图形的元素有 link 角色 。

阅读更多链接 read more

  • 将标题选择器添加到标题或段落，并用于aria-labelledby=""连接到标题文本。
  • aria-label=""直接在连接中添加描述性文本。
  • 将id选择器添加到标题或段落，并用于aria-describedby=""连接到标题文本。
  • 使用该类visuallyhidden可视地隐藏有关连接的更多信息。
  • 尽量将更多连接读入按钮，由于它们容许更多标签选项。

示例

<a href="#" aria-labelledby="headline" class="read-more">Read More</a>

提示 tooltip

Tooltip是元素得到键盘焦点或鼠标悬停在其上时，显示的与元素相关的信息弹窗。它一般在一小段延迟后出现，并在 Escape 按下或鼠标移出时消失。

Tooltip组件不会得到焦点。包含可聚焦元素的悬停能够使用非模态对话框模式实现。

示例
Tooltips & Toggletips - Inclusive Components

键盘交互

Escape: 关闭工具提示框。

注意

  1. 当工具提示组件显示时，焦点停留在触发元素上。
  2. 若是当触发元素得到焦点时唤起工具提示组件，当元素失去焦点时（onBlur），工具提示组件消失。若是鼠标移入唤起工具提示组件，则鼠标移出时消失。

WAI-ARIA 角色，状态和属性

  • 做为工具提示组件容器的元素具备角色 tooltip。
  • 触发工具提示组件的元素使用 aria-describedby 索引工具提示组件元素。

多媒体控件

图片 img

非装饰性img务必加上具备描述性的alt。
使用alt而不是title，如下任何一种都不能在浏览器和屏幕阅读器组合中可靠地工做。
非空title的空alt

<img src="a.gif" alt="" title="some text">

非空title，没有alt

<img src="a.gif" title="some text">

Short note on use of alt=”” and the title attribute

关于站点图标

  • 添加到网站的<img>须要具备alt属性。若是图像是信息性的，请将该等图像设置为该图像alt的描述性替代。
  • 避免使用照片，图像或图标等通用字符串做为alt值，由于它们不会向用户传达有价值的内容。尽量具备描述性。
  • 确保文本图像中的任何文本至少为14磅，而且与背景具备良好的对比度。
  • 当使用图像做为连接时，必须考虑如何将alt文本读回给辅助技术的用户。如下示例alt在用做连接或独立图像资源时显示徽标的相应文本。

a11y-站点图标示例

关于SVG
让屏幕阅读器和语音识别工具等辅助技术（AT）能够访问SVG的最佳方法是使用<svg>标签将其直接放入HTML中
避免使用<embed>，<object>或<img>元素，由于它们不像浏览器那样支持内联SVG
在SVG标记中包含一个<title>和<description>
使用aria-labelledby=""和引用标题和描述元素的id值
使用该role=""属性为SVG提供工做
在SVG添加中“隐藏”屏幕阅读器中的元素 role="presentation"

a11y-svg示例

音频

在考虑可访问性的状况下构建您的媒体！在开始时使用可访问性比在之后尝试使用它更容易。全部组件都是如此，尤为是媒体组件。
确保您的播放器能够访问，并包含暂停，中止和播放媒体的控制元素。
不要自动播放媒体。这可能会形成混乱和烦恼。
确保您的媒体有其余方法来获取内容。例如，添加音频文件的脚本。
a11y-音频示例

视频

在考虑可访问性的状况下构建您的媒体！在开始时使用可访问性比在之后尝试使用它更容易。全部组件都是如此，尤为是媒体组件。

  • 确保您的播放器能够访问，并包含暂停，中止和播放媒体的控制元素。
  • 不要自动播放媒体。这可能会形成混乱和烦恼。
  • 确保您的媒体有其余方法来获取内容。例如，为视频添加字幕和/或提供供用户阅读的记录。
  • 确保您的媒体不会引发癫痫发做！在将媒体添加到您的网站以前，请使用光敏癫痫分析工具（PEAT）检查您的媒体。

a11y-视频示例

表单类控件

单选按钮组　radio group

radio group是一组可勾选按钮，称为单选按钮，一次只能勾选一个按钮。一些实现能够在勾选状态下的全部按钮初始化该集合，以迫使用户在移动焦点以前勾选其中一个按钮。
示例

键盘交互

对于工具栏中不包含的radio group

本节介绍为大多数radio group实施的键盘交互。对于嵌套在工具栏内的radio group的特殊状况，请使用如下部分中描述的键盘交互。

  • Tab和Shift + Tab：将焦点移入和移出radio group。当焦点移动到radio group时：
  • 若是选中单选按钮，则会在选中的按钮上设置焦点。
  • 若是未选中任何单选按钮，则会在组中的第一个单选按钮上设置焦点。
  • Space：若是还没有选中，则检查聚焦单选按钮。
  • Right Arrow 和DownArrow：将焦点移动到组中的下一个单选按钮，取消选中先前聚焦的按钮，而后选中新聚焦的按钮。若是焦点位于最后一个按钮上，则焦点移动到第一个按钮。
  • Left Arrow and Up Arrow：将焦点移动到组中的上一个单选按钮，取消选中先前聚焦的按钮，而后选中新聚焦的按钮。若是焦点在第一个按钮上，则焦点移动到最后一个按钮。

注意
上面描述的初始焦点行为与某些浏览器为本机HTMLradio group提供的行为略有不一样。在某些浏览器中，若是未选择任何单选按钮，则使用Shift + Tab将焦点移动到收音机组中会将焦点放在最后一个单选按钮而不是第一个单选按钮上。

对于工具栏中包含的radio group
由于箭头键用于在工具栏的元素之间导航而Tab键将焦点移入和移出工具栏，当radio group嵌套在工具栏内时，radio group的键盘交互与收音机的键盘交互略有不一样不在工具栏内的组。例如，用户须要可以在全部工具栏元素之间导航，包括单选按钮，而无需更改选中的单选按钮。所以，当使用箭头键浏览工具栏中的单选按钮组时，选中的按钮不会更改。嵌套在工具栏中的radio group的键盘交互以下。

  • Space：若是未选中聚焦单选按钮，则取消选中当前选中的单选按钮并检查聚焦单选按钮。
  • Enter（可选）：若是未选中聚焦单选按钮，则取消选中当前选中的单选按钮并检查聚焦单选按钮。不然，什么都不作。
  • Right Arrow：
  • 当焦点在单选按钮上而且该单选按钮不是radio group中的最后一个单选按钮时，将焦点移动到下一个单选按钮。
  • 当焦点位于单选按钮组中的最后一个单选按钮上而且该单选按钮不是工具栏中的最后一个元素时，将焦点移动到工具栏中的下一个元素。
  • 当焦点位于单选按钮组中的最后一个单选按钮上时，该单选按钮也是工具栏中的最后一个元素，将焦点移动到工具栏中的第一个元素。
  • Left Arrow：
  • 当焦点位于单选按钮上且该单选按钮不是收音机组中的第一个单选按钮时，将焦点移至上一个单选按钮。
  • 当焦点位于单选按钮组中的第一个单选按钮且该单选按钮不是工具栏中的第一个元素时，将焦点移动到工具栏中的上一个元素。
  • 当焦点位于单选按钮组中的第一个单选按钮上时，该单选按钮也是工具栏中的第一个元素，将焦点移动到工具栏中的最后一个元素。

  • Down Arrow（可选）：将焦点移动到收音机组中的下一个单选按钮。若是焦点位于收音机组中的最后一个单选按钮上，则将焦点移至组中的第一个单选按钮。
    -Up Arrow（可选）：将焦点移动到radio group中的上一个单选按钮。若是焦点位于收音机组中的第一个单选按钮上，则将焦点移至组中的最后一个单选按钮。

    注意
    工具栏中的单选按钮一般以更像切换按钮的方式设置样式。有关示例，请参阅简单编辑器工具栏示例

WAI-ARIA角色，状态和属性

  • 单选按钮包含在具备角色radiogroup的元素中或由其拥有。
  • 每一个单选按钮元素都有角色无线电。
  • 若是选中单选按钮，则无线电元素的aria-checked设置为true。若是未选中，则将aria-checked设置为false。
  • 每一个无线电元素由其内容标记，具备由aria-labelledby引用的可见标签，或具备用aria-label指定的标签。
    -radiogroup元素具备由aria-labelledby引用的可见标签或具备用aria-label指定的标签。
  • 若是存在提供关于radio group或每一个单选按钮的附加信息的元素，则这些元素由具备aria-describedby属性的radiogroup元素或无线电元素引用。

开关 switch

开关和复选框是相似的组件，由于它们具备 on(checked) 和 off(unchecked)状态。
但屏幕朗读器仍会识别复选框的语义,须要加上role="switch"。

另外一种实现方式是button加上role="switch"
示例

搜索

  • 在父元素role =“search”中包装搜索组件，以增长其对辅助技术的可发现性。
  • 只要有可能，请使用label元素将文本与表单元素明确关联。标签的for属性必须与表单控件的id彻底匹配。
  • 当带有描述性文本的按钮旁边时，某些表单字段不须要显式label元素。例如：标记为搜索的按钮旁边的搜索字段。在这些状况下，您仍应在标记中添加标签，但您能够在视觉上隐藏它。
  • 请注意，全部辅助技术都不认可placeholder，所以不适合替换适当的标签。此外，宣布占位符的辅助技术将首先读取占位符，而后读取输入的标签，而后读取输入的类型。因此必定不要重复输入标签做为占位符，不然会被屡次朗读。

a11y-search示例

复选框 checkbox

WAI-ARIA支持两种类型的 checkbox：

  1. 双态: 最多见的复选框类型，它容许用户在两个状态间切换——选中、未选中.
  2. 三态: 这种类型的复选框支持额外的第三种状态 - 部分选中.

三态复选框的一种常见使用场景是在软件安装时，一个单独的三态复选框用来表明和控制整个安装选项组的状态。而且，该组中的每一个选项均可以单独使用双态复选框开启或关闭。

  • 若是该组中的全部选项都被选中，该三态复选框呈现的总体状态为选中。
  • 若是该组中的部分选项被选中，该三态复选框呈现的总体状态为部分选中（partially checked）。
  • 若是该组中没有选项被选中，该三态复选框呈现的总体状态为未选中。

用户仅使用一个操做，就能够改变三态复选框组中全部选项的状态：

  • 选中总体复选框，能够选中组中的全部选项。
  • 取消选中总体复选框，能够取消选中组中的全部选项。
  • 而且，在某些实现中，系统可能会记住上次选中的选项，总体状态为部分选中。若是提供了此功能，第三次激活总体复选框会恢复选项组中部分被选中的状态。

示例

键盘交互

当复选框拥有焦点时, 按 Space 键来改变复选框的状态

WAI-ARIA角色，状态和属性

  • 复选框的角色为 checkbox。
  • 复选框具备可访问标签，最好的方式是使用 aria-labelledby 关联可见标签:
    • 将可见的内容放在角色为 checkbox 元素里面。
    • 在角色为 checkbox 的元素上经过 aria-labelledby 属性的值为一个可见的内容。
    • aria-label 属性设置在角色为 checkbox 元素上。
  • 选中后，复选框元素状态 aria-checked 设置为 true。
  • 若是未选中，它的状态 aria-checked 设置为 false。
  • 当部分选中，它的状态 aria-checked 设置为 mixed。
  • 若是使用一个可见标签可将一组复选框标识为一个逻辑组，这些复选框应该被包含在一个具备 group 角色的元素中，且该元素的 aria-labelledby 设置为包含标签的元素的ID。
  • 若是复选框或复选框组包括额外的相关联静态描述文案，复选框或复选框组的属性 aria-describedby 设置为包含描述元素的ID。

单选按钮组

单选按钮组，是一个可选中按钮的组合，被称为单选按钮，且在该组合中，只有一个按钮处于选中状态。

  • <fieldset>包围整个复选框或单选按钮组。<legend>提供了分组的说明。
  • 一些辅助技术会读取每一个字fieldset的legend文本，所以它应该简洁且具备描述性。这有助于使用辅助技术的人经过单选按钮组来理解他们正在回答的问题。
  • WAI-ARIA提供了一个分组角色，其功能与fieldset和legend类似。外部元素具备role = group以指示包含的元素是组的成员，而且aria-labelledby属性引用将用做组的标签的文本的id。

示例

键盘交互

  • 在单选按钮组获取焦点时:
    • 若是有一个单选按钮被选中，那么焦点设置在这个按钮上。
    • 若是没有被选中的单选按钮，那么将焦点设置在第一个单选按钮上。
  • Space: 若是该按钮尚未被选中，则选中当前聚焦的单选按钮。
  • Right Arrow 和 Down Arrow: 移动焦点到组合中的下一个单选按钮，取消选中先前聚焦的按钮，而且选中新聚焦的按钮。若是焦点在最后一个按钮上，焦点移至第一个按钮。
  • Left Arrow 和 Up Arrow: 移动焦点到组合中的上一个单选按钮，取消选中先前聚焦的按钮，并选中新聚焦的按钮。若是焦点在第一个按钮上，焦点移至最后一个按钮。

注意 上文所述的初始聚焦行为，与一些浏览器为原生HTML按钮组所提供的行为略有不一样。在某些浏览器中，若是没有选中任何一个单选按钮，使用 Shift+ Tab 将焦点移至单选按钮组，焦点将会被放置在最后一个单选按钮，而不是第一个单选按钮。

WAI-ARIA 角色，状态和属性

  • 单选按钮被具备 radiogroup 角色的元素包含或拥有。
  • 每一个单选按钮的role值都为 radio 。
  • 若是一个单选按钮被选中，那么该 radio 元素的 aria-checked 将被设置为 true。 若是没有被选中，aria-checked 设置为 false。
  • 每个 radio 元素由其内容标记，使用 aria-labelledby，索引一个可见标签，或使用 aria-label 指定一个标签。
  • radiogroup 使用 aria-labelledby 索引一个可见标签，或者使用 aria-label 指定一个标签。
  • 若是元素提供了单选按钮组或每一个单选按钮的额外信息，这些元素被 radiogroup 元素或 radio 元素使用 aria-describedby 属性索引。

滑块 slider

滑块是供用户从给定范围内选择值的输入控件。滑块一般有个拖动触点，能够沿着条或轨道移动来改变滑块的值。

示例

键盘交互

  • Right Arrow: 按必定量增长滑块的值；
  • Up Arrow: 按必定量增长滑块的值；
  • Left Arrow: 按必定量减少滑块的值；
  • Down Arrow: 按必定量减少滑块的值；
  • Home: 将滑块设置为其范围内的最小值；
  • End: 将滑块设置为其范围内的最大值；
  • Page Up (可选): 大幅度增长滑块的值（比 Up Arrow 增长的值大）。
  • Page Down (可选): 大幅度减少滑块的值（比 Down Arrow 减少的值大）。

注意

  1. 焦点放在滑块上(鼠标用户能够移动的视觉对象，也称为thumb组件)。
  2. 在某些场景下，反转上面指定值变化的方向(例如： Up Arrow 减少滑块的值)，能够建立更直观的体验 _（译者注：能够理解为滑块为纵向方向排列）

WAI-WRIA 角色、状态和属性

  • 每一个可聚焦滑块触点元素具备 slider 角色。
  • 每一个滑块元素的 aria-valuenow 属性设置为滑块当前的十进制值。
  • 每一个滑块元素的 aria-valuemin 属性设置为滑块十进制的最小容许值。
  • 每一个滑块元素的 aria-valuemax 属性设置为滑块十进制的最大容许值。
  • 当另外一个滑块的范围（如最小值或者最大值）依赖另外一个滑块的当前值，当前值改变的时候依赖滑块的 aria-valuemin 或 aria-valuemax 也要更新。
  • 若是 aria-valuenow 的值对用户不友好，例如周几通常使用数字呈现，将 aria-valuetext 属性设置为一个字符串，这样滑块值更易理解，例如 "Monday"。
  • 若是滑块具备可视的标签，那么滑块元素经过 aria-labelledby 引用，不然滑块元素上设置 aria-label 标签。
  • 若是滑块是垂直方向的，则把 aria-orientation 设置为 vertical。滑块的 aria-orientation 的默认值是 horizontal。

滑块（多个触点） sliderwothumb

多触点滑块是具备两个或更多触点的滑块，每一个触点都在一组相关值中设置值。例如，在产品搜索中，能够使用双触点滑块使用户可以设置搜索的最小和最大价格限制。在许多双触点滑块中，不容许触点彼此经过，例如当滑块设置范围的最小值和最大值时。例如，在价格范围选择器中，设置范围下限的触点的最大值受限于设置范围上限的触点的当前值。相反，上端触点的最小值受到下端触点的当前值的限制。可是，在某些多触点滑块中，每一个触点都会设置一个不依赖于其余触点值的值。
示例
多触点滑块示例：演示双触点滑块，用于选择航空公司航班和酒店预订的价格范围。
键盘交互

  • 每一个触点都在页面标签序列中，而且与单触点滑块具备相同的键盘交互。
  • 不管滑块内的触点值和视觉位置如何，Tab键顺序都保持不变。例如，若是触点的值发生变化，使其移动通过其余触点之一，则Tab键顺序不会更改。

WAI-ARIA角色，状态和属性

  • 用做可聚焦滑块的每一个元素都有角色滑块。
  • 每一个滑块元素都将aria-valuenow属性设置为表示滑块当前值的十进制值。
  • 每一个slider元素都将aria-valuemin属性设置为十进制值，表示滑块的最小容许值。
  • 每一个滑块元素的aria-valuemax属性设置为十进制值，表示滑块的最大容许值。
  • 当另外一个滑块的范围（例如，最小值和/或最大值）取决于滑块的当前值时，当值改变时，更新从属滑块的aria-valuemin或aria-valuemax的值。
  • 若是aria-valuenow的值不是用户友好的，例如，星期几由数字表示，则aria-valuetext属性被设置为使滑块值可理解的字符串，例如“Monday”。
  • 若是滑块具备可见标签，则滑块元素上的aria-labelledby会引用它。不然，滑块元素具备由aria-label提供的标签。
  • 若是滑块垂直定向，则将aria-orientation设置为垂直。滑块的aria-orientation的默认值是水平的。

数值调节按钮 spinbutton

数值调节按钮是个将值限定在离散数值集合或范围的输入组件。例如，在一个设置闹钟的部件中，一个数值调节按钮容许用户在0-59间选择分钟。

数值调节按钮一般有三个组件，包含一个显示当前值的文本框，一个增长按钮，一个减少按钮。通常来讲，文本框是惟一可聚焦组件，由于增长和减少功能可以使用光标键访问，通常来讲，文本框还容许用户直接编辑其值。

若是数值范围很大，数值调节按钮支持以较小和较大的幅度调节其值。例如，在闹钟示例中，用户能够使用 Up Arrow 和 Down Arrow 以1分钟的步长改变值，而且能够使用 Page Up 和 Page Down 以10分钟的步长改变值。

示例

键盘交互

  • Up Arrow: 递增。
  • Down Arrow: 递减。
  • Home: 若是数值调节按钮具备最小值，则设置数值调节按钮的值为最小值。
  • End: 若是数值调节按钮具备最大值，则设置数值调节按钮的值为最大值。
  • Page Up (可选): 以大于 Up Arrow 的调节幅度增长值。
  • Page Down (可选): 以大于 Down Arrow 的调节幅度减少值。
  • 若是数值编辑按钮的文本框容许直接编辑其值，支持如下键。
    • 适用于设备平台的标准单行文本编辑键（请参阅下面的注释）。
    • 可打印字符: 在文本框中输入字符。注意，许多实现仅容许某些字符做为值的一部分，并防止输入任何其余字符。 例如，小时和分钟的数值调节只容许从0到59的整数值，冒号'：'以及字母'AM'和'PM'。 任何其余字符输入不会更改文本字段的内容和按钮的值。

注意

  1. 操做过程当中焦点仍在文本字段上。
  2. 适用于设备平台的标准单行文本编辑键：
  3. 包括输入键，光标移动，选择和文本操做。
  4. 用于编辑功能的标准键分配依赖于操做系统。
  5. 提供文本编辑功能的最强大的方法须要依靠浏览器，浏览器为HTML文本输入类型的组件和具备 contenteditable HTML属性的元素支持文本编辑功能。
  6. 重要: 确保JavaScript不会干扰浏览器提供的文本编辑功能，方法是捕获用于执行它们的事件。

WAI-WRIA 角色、状态和属性

  • 做为数值调节按钮的可聚焦元素具备 spinbutton 角色。通常来讲，是支持文本输入的元素。
  • spinbutton元素的 aria-valuenow 属性用十进制值，表示当前值。
  • 若是它具备已知的最小值，spinbutton元素的 aria-valuemin 属性设置为十进制值，表示数值调节按钮的最小容许值。
  • 若是它具备肯定的最大值，spinbutton元素的 aria-valuemax 属性设置为十进制值，表示数值调节按钮的最大容许值。
  • 若是 aria-valuenow 的值用户很差理解，例如周几通常使用数字呈现，能够将spinbutton元素的 aria-valuetext 属性设置为一个字符串，让数值选择按钮的值更好理解，例如 "Monday"。
  • 若是spinbutton具备一个可见标签，在spinbutton元素上使用 aria-labelledby 索引，不然，使用 aria-label 属性为spinbutton元素提供一个标签。

列表框 listbox

listbox 控件呈现了一个选项列表，并容许用户选择一个或多个。容许选择一个选项的列表框是一个单选列表框；容许选择多个选项的列表框是一个多选列表框。

当屏幕阅读器呈现一个列表框，可能会渲染出其名称、状态和每一个选项在列表中的位置。选项的名称是一个由浏览器计算获得的字符串，通常来自选项元素的内容。做为一个平面字符串（flat string），名称不包含任何语义信息。所以，若是选项包含一个语义元素，例如一个标题，屏幕阅读器用户不会访问到该语义。另外，listbox角色传递给辅助技术的交互模型，不支持选项内元素的交互。由于listbox组件的这些特性，它并无提供可访问方式来呈现交互元素的列表，例如连接、按钮或复选框。为了呈现这些交互元素的列表，参见 grid。

为了让屏幕阅读器用户容易感知和理解，避免使用长选项名称。当选项被朗读时，选项的总体名称做为一个独立语音单元被朗读。当一次按键操做就朗读太多的信息，将会很难理解。长的名称会增长朗读中断的发生，而抑制信息的感知，由于用户通常不得不从新朗读整个选项。并且，若是用户不理解说了什么，在listbox组件中，屏幕阅读器用户很难实现按字、词、短语朗读。

选项集中每一个选项名称使用相同的单词或短语开头也能够显著下降键盘和屏幕阅读器用户的可用性。滚动列表来找到特定选项，对屏幕阅读器用户来讲很是费时，由于他们在听到每一个选项的不一样以前，都必须听到重复的单词或短语。例如，若是一个选择城市的列表框，其选项的每一个城市名称前面都有国家名称，若是每一个国家都列出了不少城市，屏幕阅读器用户将要不得不在听到城市名称以前听到国家名称。在这种状况下，最好有2个列表框，一个用于国家，一个用于城市。

键盘交互

对于一个垂直向的列表框：

  • 当一个单选列表框接收到焦点：
    • 若是在列表框接收焦点前，没有选择任何选项，第一个选项得到焦点。可选的，第一个选项能够自动选择。
    • 若是列表框得到焦点以前选择了一个选项，焦点设置在所选择的选项上。
  • 当一个多选列表框接收到焦点：
    • 若是列表框接收焦点以前没有选择任何选项，焦点设置在第一个选项而且选择状态不会自动改变。
    • 若是列表框接收焦点以前选择一个或多个选项，焦点设置在已选择选项的第一个。
  • Down Arrow: 移动焦点到上一个选项。可选，在一个单选列表框中，选择也能够跟随焦点移动。
  • Up Arrow: 将焦点移至前一个选项。一般，一个单选列表框，选择也能够跟随焦点移动。
  • Home (可选): 将焦点移至第一个选项。一般，一个单选列表框，选择也能够跟随焦点移动。对于超过5个选项的列表，强烈建议支持此键。
  • End (可选): 将焦点移至最后一个选项。一般，一个单选列表框，选择也能够跟随焦点移动。对于超过5个选项的列表，强烈建议支持此键。
  • 建议全部列表框都支持键入提示。尤为是那些拥有超过七个选项的列表：
    • 键入字符：焦点移至名称以键入字符开头的下一个项目上。
    • 快速键入多个字符：焦点移至名称以键入字符串开头的下一个项目上。
  • 多选：开发者能够实现如下两种交互模型中的一种来支持多项选择：一个是推荐模型，当导航列表时不须要用户按住修饰键，例如 Shift 或Control ，或一种替代模型，当导航时须要用户按住修饰键，防止丢失选择状态。
    • 推荐的选择模型 - 没有必要按住辅助键：
      • Space: 改变焦点选项的选择状态。
      • Shift + Down Arrow (可选): 将焦点移至下一个选中项而且切换选项的选中状态。
      • Shift + Up Arrow _(可选)_: 将焦点移至前一选中项而且切换选项的选中状态。
      • Shift + Space (可选): 从最近选中的项目中选择相邻的元素聚焦。
      • Control + Shift + Home (可选): 选择从聚焦的选项到第一个选项的全部的选项。
      • Control + Shift + End (可选): 选择从聚焦的选项到最后一个选项的全部选项。
      • Control + A (可选): 选择列表中的全部选项。或者，若是选择了全部选项，它也可能取消选择全部选项。
    • 替代选择模型 —— 在不按住 Shift 或 Control 修饰键移动焦点不会取消选择全部已选择节点，除非当前聚焦节点：
      • Shift + Down Arrow: 将焦点移至下一个选项并切换选项的选择状态。
      • Shift + Up Arrow: 将焦点移至上一个选项并切换选项的选择状态。
      • Control + Down Arrow: 将焦点移至下一个选项但不改变选项的选择状态。
      • Control + Up Arrow: 将焦点移至上一个选项但不改变选项的选择状态。
      • Control + Space: 改变焦点选项的选择状态。
      • Shift + Space (可选): 从最近选中的项目中选择相邻的元素聚焦。
      • Control + Shift + Home (可选): 选择从聚焦的选项到第一个选项的全部的选项。
      • Control + Shift + End (可选): 选择从聚焦的选项到最后一个选项的全部选项。
      • Control + A (可选): 选择列表中的全部选项。或者，若是选择了全部选项，它也可能取消选择全部选项。

注意

  1. DOM焦点（活跃元素）与选择状态有功能上的区别。更多细节，请参阅 this description of differences between focus and selection。
  2. listbox 角色支持 aria-activedescendant 属性，当经过键盘导航（keybord navigation）时，它提供一种非传统方式在 treeitem 元素间移动DOM焦点。有关详细信息，请参阅 Managing Focus in Composites Using aria-activedescendant
  3. 在单选列表框中，移动焦点能够选择性的取消先前选择选项的选择，并选择新聚焦的选项。这样的选择模型被称之为 "选择跟随焦点"。具备选择跟随焦点在某些状况下很是有用，但会严重下降其余状况中的可访问性。有关指南，请参阅 Deciding When to Make Selection Automatically Follow Focus。
  4. 若是全选或取消全选是个重要功能，使用不一样控件实现这些操做，例如 "全选" 和 "取消全选按钮"，会显著提高可用性。
  5. 若是在一个列表框的选项水平排列：
  6. Down Arrow 行为和上面描述的 Right Arrow 同样，反之亦然。
  7. Up Arrow 行为和上面描述的 Left Arrow 同样，反之亦然。

WAI-ARIA 角色，状态和属性

  • 包含或拥有全部列表框选项的元素拥有角色 listbox。
  • 列表框中的每一个选项都有 option 角色，而且是 listbox 角色元素的DOM后代，或者在列表框元素上使用 aria-owns 属性索引。
  • 若是列表框不是另外一个部件的一部分，那么它有一个可见的label经过 aria-labelledby 与有 listbox 角色的元素相关联。
  • 单选列表框中，选中的选项 aria-selected 设置为 true。
  • 若是列表框支持多选：
  • 若是可用选项的集合没有完整地显示在DOM中，而是根据用户滚动动态加载，它们的 aria-setsize 和 aria-posinset 适当设定。
  • 若是选项是水平排列的， listbox 角色元素的 aria-orientation 设置为 horizontal。

a11y-表单 下拉框示例

文字输入框 Text Inputs & Textarea

  • 保持简单 - 屏幕阅读器不支持连接到同一表单元素的多个标签。
  • 为每一个输入使用标签，并使for =“”和id =“”值匹配。ID在每一个页面上必须是惟一的，每一个惟一表单元素只能连接一个标签。
  • 使用指示性的方法使必填字段显而易见：边框颜色更改，星号，描述文本等。
  • 具备错误验证的字段应具备咏叹调描述，以确保辅助技术读取关联的字段级错误消息。若是错误消息具备id =“my-error-message”，则输入应该具备aria-describedby =“my-error-message”。

a11y-文字输入框示例

导航类控件

手风琴 accordion

手风琴是一组垂直堆叠的交互式标题，每一个标题包含标题，内容片断或表示内容部分的缩略图。标题用做控件，使用户可以显示或隐藏其相关的内容部分。当在单个页面上呈现多个内容部分时，一般使用折叠来减小滚动的须要。

经过如下术语来理解手风琴：

手风琴标题：
表示内容模块的标签或缩略图，同时也用来展开内容，在某些实现中，也用来隐藏内容模块。

手风琴面板：
与手风琴标题相关联的内容模块

在某些手风琴中，手风琴标题旁边有永久可见的其余元素。例如，每一个手风琴标题都伴随一个菜单按钮来提供每一个面板的访问操做。并且在某些状况下，手风琴面板可能永久展开可见。

示例：

键盘交互

  • Enter 或 Space:
  • 当焦点位于折叠状态的手风琴标题上时，展开相关联面板。若是实现只容许一个面板被展开，且另外一个面板被展开，则折叠这个面板。
  • 当焦点位于展开状态的手风琴标题上时，若是实现支持折叠，则折叠该面板。某些实现须要始终展开面板，而且只容许展开一个面板，这时手风琴标题不须要支持折叠功能。
  • Down Arrow (可选): 若是焦点在一个手风琴标题上，则将焦点移至下一个手风琴标题。若是焦点在最后一个手风琴标题上，则不响应或将焦点移至第一个手风琴标题。
  • Up Arrow (可选): 若是焦点在一个手风琴标题上，则将焦点移至上一个手风琴标题，若是焦点在第一个手风琴标题上，则不响应或将焦点移至手风琴的最后一个标题。
  • Home (可选): 当焦点在手风琴的标题上，将焦点移至第一个手风琴标题
  • End (可选): 当焦点在手风琴的标题上，将焦点移至最后一个手风琴标题
  • Control + Page Down (可选）: 若是焦点在手风琴面板内，将焦点移至面板标题上。若是焦点在手风琴标题上，将焦点移至前一个手风琴标题。若是焦点在第一个手风琴标题上，则不响应或将焦点移至最后一个手风琴标题。
  • Control + Page Up (可选): 若是焦点在手风琴面板内，将焦点移至该面板的标题上。若是焦点在手风琴标题，将焦点移至前一个手风琴标题。若是焦点在第一个手风琴标题，容许不响应操做或将焦点移至最后一个手风琴标题

角色、状态、属性

  • 每一个手风琴标题包含在一个角色为 button 的元素内。
  • 每一个手风琴标题 button 都被具备 heading 角色的元素包裹，且该元素设置了合适的 aria-level 值，对应页面的信息结构。
    • 若是原生语言具备默认 heading 和 aria-level 元素，例如HTML标题标签，能够使用原生语言元素。
    • button 元素是 heading 元素内的惟一元素。也就是说，若是有其余永久可见元素，他们不能被包含在 heading 元素中。
  • 若是与手风琴标题关联的手风琴面板是展开的，标题的 button 元素的 aria-expanded 属性设置为 true。若是面板折叠的，aria-expanded属性设置为 false。
  • 手风琴标题的 button 元素 aria-controls 设置为包含手风琴面板的内容元素的ID。
  • 若是与手风琴标题关联的手风琴面板是展开的，且不容许该面板折叠，那标题的 button 元素的 aria-disabled 设置为 true。
  • 可选，每一个面板容器的元素，都有 region 角色，且使用 aria-labelledby值索引控制面板呈现的按钮。
    • 避免在建立路标 region 扩展的状况下，使用 region 角色，例如在一个包含超过6个面板的手风琴中，可能会同时展开。
    • 当面板包含标题元素或嵌套手风琴时，region 角色对屏幕阅读器用户对于结构的感知特别有帮助。

面包屑 breadcrumb

面包屑包含当前页面的父页面的连接列表，该列表是层级顺序的。它能够帮助用户在网站或网络应用程序中找到本身的位置。面包屑一般水平放置在页面的主要内容以前。

示例

面包屑示例

键盘交互

不适用

WAI-ARIA 角色，状态和属性

  • 面包屑路径被包含在导航区域内。
  • 导航区域使用 aria-label 或 aria-labelledby 标记。
  • 当前页面的连接的 aria-current 属性设置为 page。若是呈现当前页面的元素不是个连接，aria-current可选。

轮播图 carousel（slide show or image rotator）

轮播图经过顺序显示一个或多个幻灯片的子集来呈现一组项目，称为幻灯片。一般，一次显示一张幻灯片，用户能够激活隐藏当前幻灯片的下一个或上一个幻灯片控件，并将下一张或上一张幻灯片“旋转”到视图中。在一些实施方式中，播放在页面加载时自动开始，而且一旦显示全部幻灯片，它也能够自动中止。虽然幻灯片能够包含任何类型的内容，可是每一个幻灯片仅包含单个图像的图像轮播是常见的。

确保全部用户都能轻松控制而且不会受到滑动旋转的不利影响，这是使轮播图可访问性的一个重要方面。例如，若是在屏幕上看不到的幻灯片被错误地隐藏（例如，在屏幕外显示），则屏幕阅读器体验可能使人困惑和被误导。相似地，若是幻灯片自动播放但使用屏幕阅读器的用户不知道，则用户能够读取幻灯片1上的元素，对下一个元素执行朗读命令，而不是听到幻灯片1上的下一个元素，幻灯片2中的元素，不知道刚刚朗读的元素来自全新的上下文。

提供足够播放控制所需的功能包括：

  • 用于显示上一张和下一张幻灯片的按钮。
  • 可选，用于选择要显示的特定幻灯片的控件或控件组。例如，幻灯片选择器控件能够标记为选项卡列表中的选项卡，其中幻灯片由tabpanel元素表示。
  • 若是轮播图能够自动播放，它还：
    • 有一个中止和从新播放的按钮。这对于支持在不移动键盘焦点或鼠标的模式下操做的辅助技术尤其重要。
    • 当键盘焦点进入轮播图时中止播放。除非用户明确要求它这样作，不然它不会从新播放。
    • 只要鼠标悬停在轮播图上，就中止播放。

示例

如下术语用于描述轮播的组件。

slide
一组内容容器中的单个内容容器，用于保存要由轮播呈现的内容。

rotation control
用于中止和启动自动幻灯片旋转的交互式元素。

next slide control
交互式元素，一般为箭头样式，显示旋转序列中的下一张幻灯片。

previous slide control
交互式元素，一般设置为箭头，显示旋转序列中的上一张幻灯片。

slide picker controls
一组元素，一般称为小点，使用户可以在旋转序列中选择要显示的特定幻灯片。

键盘交互

  • 若是轮播图具备自动播放功能，则当轮播图中的任何元件接收到键盘焦点时，自动播放将中止。除非用户激活旋转控制，不然它不会恢复。
  • Tab和Shift +Tab：将焦点移动到页面选项卡序列指定的轮播的交互元素 - 不须要为Tab建立脚本。
  • 按钮元素实现按钮模式中定义的键盘交互。注意：激活播放控件，下一张幻灯片和上一张幻灯片不会移动焦点，所以用户能够根据须要轻松地重复激活它们。
  • 若是存在，播放控件是轮播图内Tab键序列中的第一个元素。它必须先于旋转内容，以便轻松定位。
  • 若是选项卡元素用于幻灯片选择器控件，则它们实现选项卡模式中定义的键盘交互。

WAI-ARIA 角色，状态和属性
本节介绍三种轮播样式的元素组成：

  • 基本的：具备播放，上一张幻灯片和下一张幻灯片控件，但没有幻灯片选择器控件。
  • 带标签的：具备基本控件和单击tab中止的、使用tabs pattern实现的幻灯片选择器控件。
  • 分组的：在一组幻灯片选择器控件中具备基本控件和一系列tab焦点，每一个控件都实现按钮模式。由于每一个幻灯片选择器按钮都会向页面选项卡序列添加一个元素，因此此样式对键盘用户来讲是最不友好的。

基本轮播图元素

  • 包含轮播图的全部组件的轮播图容器元素，包括轮播图控件和幻灯片，具备角色region或角色group。轮播容器最合适的角色取决于页面的信息结构。查看landmark regions guidance，以肯定轮播图是否被指定为标识区域。
  • 轮播容器将aria-roledescription属性设置为carousel。
  • 若是轮播具备可见标签，则其可访问标签由设置为包含可见标签的元素的ID的轮播容器上的属性aria-labelledby提供。不然，可在轮播容器上设置的属性aria-label提供可访问的标签。请注意，因为aria-roledescription设置为“carousel”，所以标签不包含单词“carousel”。
  • 播放控件，下一个幻灯片控件和上一个幻灯片控件是原生按钮元素（推荐）或实现按钮模式。
  • 播放控件具备由其内部文本或aria-label提供的可访问标签。标签改变以匹配按钮将执行的动做，例如“中止滑动播放”或“开始滑动播放”。激活按钮时更改的标签清楚地代表幻灯片内容能够自动更改以及什么时候更改。注意，因为标签改变，播放控制没有指定任何状态，例如，aria-pressed。
  • 每一个幻灯片容器都具备角色group，其属性aria-roledescription设置为slide。
  • 每张幻灯片都有一个名称：
    • 若是幻灯片具备可见标签，则其可访问标签由幻灯片容器上的属性aria-labelledby提供，该容器设置为包含可见标签的元素的ID。
    • 不然，幻灯片容器上的属性aria-label提供了可访问的标签。
    • 若是识别幻灯片内容的惟一名称不可用，则数字和集合大小能够用做有意义的替代，例如，“3 of 10”。注意：一般状况下，包含可访问名称中的设置位置和大小信息是不合适的。异常在此实现中颇有用，由于组元素不支持aria-setsize或aria-posinset。选项卡式轮播实现模式没有此限制。
    • 请注意，因为aria-roledescription设置为“slide”，所以标签不包含单词“slide”。
  • (可选)，包含该组幻灯片元素的元素将aria-atomic设置为false，将aria-live设置为：
    -off：若是转盘自动播放。
    -polite：若是轮播图不自动播放。

带标签的轮播元素
带标签的转盘的结构与基本的转盘相同，不一样之处在于：

  • 每一个幻灯片容器都有角色tabpanel代替group，而且它没有aria-roledescription属性。
  • 它具备使用选项卡模式实现的幻灯片选择器控件，其中：
    • 每一个控件都是一个tab元素，所以激活选项卡会显示与该选项卡关联的幻灯片。
    • 每一个标签的可访问名称经过包括幻灯片的名称或编号来指示它将显示哪一个幻灯片，例如“幻灯片3”。若是每张幻灯片都有惟一名称
    • 则最好使用幻灯片名称控件集分组在tablist元素中，其中可访问的名称由aria-label的值提供，用于标识选项卡的用途，例如“选择要显示的幻灯片”。
    • tab，tablist和tabpanel实现选项卡模式中指定的属性。
      分组的轮播元素
      分组轮播具备与基本轮播相同的结构，但它还包括滑动选择器控件，其中：
  • 幻灯片选择器控件集包含在具备角色group的元素中。
  • 包含选取器控件的组具备可访问标签，该标签由aria-label的值提供，用于标识控件的用途，例如“选择要显示的幻灯片”。每一个选取器控件都是本机按钮元素（推荐）或实现按钮模式。
  • 每一个选取器按钮的可访问名称与其显示的幻灯片的名称相匹配。实现此目的的一种技术是将aria-labelledby设置为引用幻灯片组group素的值。
  • 表示当前显示的幻灯片的选择器按钮将属性aria-disabled设置为true。注意：aria-disabled优先于HTMLdisabled属性，由于这是屏幕阅读器用户受益于页面Tab序列中包含的禁用按钮的状况。

菜单、菜单栏 menu & mennu bar

menu 是一个组件，为用户提供一个选择列表，例如一组操做或功能。菜单通常经过激活 menu button 打开或变为可见，选择菜单中一个会打开子菜单的项目，或激活一个命令，例如Windows中的 Shift + F10 ，来打开上下文的特定菜单。当用户激活菜单中的选项时，菜单一般会关闭，除非是打开子菜单。

持续可见的菜单是 menubar。 菜单栏一般是水平的，一般用以建立相似不少桌面应用中窗口顶部附近的菜单栏，让用户快速访问一组连续的命令。

标识菜单项目会唤起一个对话框的常规作法是在菜单标签后面添加"…"（省略号），例如"另存为 …"。

示例

键盘交互

如下为键盘行为的假定描述：

  1. 一个水平 menubar 包含数个 menuitem 元素。
  2. menubar 中的全部项目都有子菜单，全部子菜单都有不少垂直排列的项目。
  3. 一些子菜单中的 menuitem 也有垂直排列的子菜单。

阅读如下内容时，请记住：

  1. 可聚焦元素，可能具备 menuitem, menuitemradio , 或 menuitemcheckbox,角色，被成为是菜单项目。
  2. 若是行为仅适用于某些类型的项目，例如menuitem 元素，则使用特定的角色名称。
  3. 子菜单，也称为弹出菜单，是具备 menu 角色的元素。
  4. 除了须要注意的状况外，经过menubutton打开的菜单与从菜单栏打开的菜单表现一致。
  • 当 menu 打开，或者当 menubar 接收焦点时，键盘焦点设置在第一个项目上。全部项目都是可聚焦的，如 Keyboard Navigation Inside Components。
  • Enter: 当焦点位于一个具备子菜单的 menuitem 上时，打开子菜单并将焦点放在其子菜单的第一个项目上。 - 不然，激活该项目并关闭菜单。
  • Space:
    • （可选）：当焦点在一个menuitemcheckbox时，更改状态而不关闭菜单。
    • （可选）：当焦点位于未选中的menuitemradio上时，不会关闭菜单，选中聚焦的 menuitemradio，并取消选中同一组中的任何其余已选中的 menuitemradio 元素。
    • （可选）：当焦点位于一个具备子菜单的menuitem上时，打开子菜单并将焦点放在其子菜单的第一个项目上。
    • （可选）：当焦点位于一个没有子菜单的 menuitem 元素时，激活 menuitem 并关闭菜单。
  • Down Arrow:
    • 当焦点在 menubar 里的一个 menuitem 时，打开它的子菜单，并将焦点放在子菜单中的第一个项目上。
    • 当焦点在一个menu上，将焦点移至下一个项目，可选的，从最后一个项目返回到第一个项目。
  • Up Arrow:
    • 当焦点在一个 menu 上时，将焦点移至上一个项目，可选的，从第一个项目移至最后一个。
    • (可选)：当焦点在menuitem 中一个 menubar上时，打开其子菜单，并将焦点放置在子菜单的最后一个项目上。
  • Right Arrow：
    • 当焦点在一个menubar上，将焦点移至下一个项目，可选的，从最后一个项目返回到第一个项目。
    • 当焦点在 menu 的一个具备子菜单的 menuitem 上时，打开子菜单并将焦点放置在其第一个项目上。
    • 当焦点在一个 menu 中的不具备子菜单的项目上时，执行如下3个操做：
      1. 关闭子菜单和任何父菜单。
      2. 将焦点移至 menuitem 中的下一个 menubar.
      3. （推荐）打开该menuitem 的子菜单但不用将焦点移至子菜单，或者打开该menuitem的子菜单，并将焦点放置在子菜单的第一个项目上。
        请注意，若是没有menubar，例如从一个菜单按钮打开一个菜单，当焦点在一个没有子菜单的项目上时， Right Arrow 不会执行任何操做。
  • Left Arrow：
    • 当焦点在一个menubar上时，将焦点移至上一个项目，可选的，从第一个项目移至最后一个。
    • 当焦点在菜单中一个项目的子菜单时，关闭子菜单并将焦点返回给父级menuitem。
    • 焦点在 menubar 栏中的一个项目的子菜单时，执行如下3个操做：
      1. 关闭子菜单。
      2. 把焦点移至menuitem中的前一个menubar.
      3. （推荐）打开该menuitem的子菜单但不用将焦点移至子菜单，或者打开该menuitem的子菜单，并将焦点放置在子菜单的第一个项目上。
  • Home: 若是不支持光标键循环，则将焦点移至当前menu或`menubar 的第一个子项。
  • End: 若是不支持光标键循环，则将焦点移至当前menu 或menuba`r 的最后一个子项。
  • 对应于可打印字符的任意键（可选）：将焦点移至当前菜单中标签以可打印字符开头的菜单项。
  • Escape: 关闭包含焦点的菜单并将焦点返回到元素或上下文，例如打开菜单的菜单按钮或父级`menuitem
  • Tab: 将焦点移至Tab序列中的下一个元素，而且若是得到焦点的项目不在 menubar 中，关闭其 menu 和全部打开的父级 menu 容器
  • Shift + Tab: 将焦点移至Tab序列中的上一个元素，而且若是得到焦点的项目不在 menubar 中，关闭其 menu 和全部打开的父级 menu 容器 。

注意

  1. 禁用的菜单项是可聚焦的，但没法激活。
  2. 菜单中的separator不可聚焦或交互。
  3. 做为上下文操做的结果，若是一个菜单被打开或菜单栏得到焦点， Escape 或 Enter 可能会将焦点返回到调用的上下文。例如，当在编辑文本时按下快捷键时，一个富文本编辑器的菜单栏可能会得到焦点，例如alt + F10。在这种状况下，点击Escape 或从菜单中激活一个命令可能会将焦点返回给编辑器。
  4. 尽管建议开发者不要这样作，但仍是有一些导航菜单栏的实现，其menuitem 元素既能执行功能又能打开子菜单。在这种实现中， enter 和 Space 执行导航功能，例如，加载新内容，而Down Arrow则在水平menuitem中打开与其相关联的子菜单
  5. 当menubar中的项目垂直排列，menu容器中的项目水平排列时：
    A. Down Arrow 执行 Right Arrow 如上所述的表现，反之亦然。
    B. Up Arrow 执行 Left Arrow 如上所述的表现，反之亦然。

WAI-ARIA角色，状态和属性

  • 菜单是呈现选项的容器。做为菜单的元素具备menu 或 menubar 角色。
  • 包含在菜单中的项目是包含menu或menubar的子元素，而且具备一下任意角色：
  • 若是激活一个 menuitem 会打开一个子菜单，那么该 menuitem 被认为是一个父级。一个子菜单的菜单元素被它的父级 menuitem 包含或拥有。
  • 父级menu的aria-haspopup 设置为 true。
  • 如下方法可被用于让脚本可以在菜单的项目间移动焦点，如 Keyboard Navigation Inside Components:
    • 菜单容器的 `tabindex 设置为 -1 或 0 并将 aria-activedescendant 设置为聚焦项目的ID。
    • 菜单中的每一个项目的 tabindex 设置为-1, 除了菜单栏中的第一个项目的 tabindex 设置为 0。
  • 当 menuitemcheckbox 或 menuitemradio 选中时， aria-checked 设置为 true.
  • 当菜单项目不可用时，aria-disabled 设置为 true.
  • 能够经过在组之间放置具备 separator 角色的元素来将菜单中的项目分红组。例如，当菜单包含一组 menuitemradio 项目时，应使用此技术。
  • 全部 separators 应有与其方向一致的 aria-orientation 值。
  • 若是一个菜单栏是垂直方向的，它的aria-orientation 值设为 vertical. 菜单栏的 aria-orientation 属性的默认值是 horizontal。
  • 若是一个菜单是水平方向的，它的 aria-orientation 值设为 horizontal. 。菜单栏的 aria-orientation 属性的默认值是 vertical。

注意 若是在菜单容器上设置aria-owns ，来包含不是该容器DOM子元素的元素，那么这些元素将按照它们被引用的顺序出如今读取顺序中，而且在全部DOM子元素以后。管理焦点的脚本须要确保视觉焦点顺序与此辅助技术阅读顺序相匹配。

菜单按钮 menu button

菜单按钮是一个能够打开 menu 的 button 。它的样式一般与典型按钮同样，且带有一个向下的箭头或三角，来提示用户激活按钮会展开一个菜单。

示例

键盘交互

  • 按钮拥有焦点时:
    • Enter: 打开菜单并将焦点置于第一个菜单项上。
    • Space: 打开菜单并将焦点置于第一个菜单项上。
    • (可选) Down Arrow: 打开菜单并将焦点置于第一个菜单项。
    • (可选) Up Arrow: 打开菜单并将焦点置于最后一个菜单项。
  • 菜单打开后须要的键盘交互参照 Menu or Menu bar。

WAI-ARIA角色，状态和属性

  • 打开菜单的元素具备 button 角色。
  • 具备 button 角色的元素，其 aria-haspopup 属性为 menu 或 true。
  • 当菜单展开时, 有 button 角色的元素的 aria-expanded 属性设置为 true。 当菜单收起时, 建议不设置 aria-expanded 属性。若是当菜单收起时，设置了 aria-expanded 属性，其值应该为 false。
  • 经过激活按钮展开的包含菜单项的元素，具备 menu 角色.
    -可选的，具备 button 角色的元素，其 aria-controls 属性具备特定的值，用来指向具备 menu 角色的元素。
  • 在 Menu or Menu bar 中介绍了菜单元素所需的附加角色，状态和属性。

导航 navigation

基本导航
全部导航元素都应该有一个<nav>标签。
若是必须使用更通用的元素（如a）<div>，请添加role="navigation"到每一个导航栏以明确将其标识为辅助技术用户的标志性区域。
菜单应根据其个别功能进行标记。使用能够使用class="visuallyhidden">, aria-label=""或aria-labelledby=""轻松地向您网站上的不一样菜单添加上下文。

移动导航
将<button>元素用于移动导航图标。
若是您使用纯粹装饰的图标，请声明alt=""，由于不须要其余信息。若是您使用的图标对功能很重要，请提供其余alt="_descriptive text goes here_"信息。
当您在显示移动图标时添加描述性文本以便为按钮的用途提供更多上下文时，它对全部用户都颇有帮助。
将移动打开/关闭按钮放在<nav>元素中，并使用它们切换导航的另外一个子包装器的状态。这将确保屏幕阅读器仍然能够发现导航地标，即便它处于关闭/隐藏状态。

分页器 pagination

尽量将分页器放在<nav>元素中。
若是不使用<nav>元素，则须要添加role="navigation"到标记。注意：使用<nav>元素时隐含了此角色，所以同时使用这两个元素有点多余。
标记包括aria-label="pagination"用于描述导航类型的标记。
添加aria-current="page"到指向当前页面的连接。这将告诉AT焦点连接指向当前页面。
aria-disabled="true"禁用连接时添加到连接。

分页器示例

扩展器 disclosure

扩展器是一种控制内容部分的可见性的按钮。当隐藏受控内容时，它一般被设计为具备向右箭头或三角形的典型按钮，以暗示激活按钮将显示其余内容。当内容可见时，箭头或三角形一般指向下方。
示例

键盘交互
当扩展器控制具备焦点时：

  • Enter：激活扩展器控制并切换扩展器内容的可见性。
  • Space：激活扩展器控制并切换扩展器内容的可见性。

WAI-ARIA角色，状态和属性

  • 显示和隐藏内容的元素具备角色button。
  • 当内容可见时，带有角色button的元素将aria-expanded设置为true。
    隐藏内容区域时，将其设置为false。
  • （可选）具备角色button的元素具备为aria-controls指定的值，该值引用包含显示或隐藏的全部内容的元素。

工具栏 toolbar

工具栏 是一个对控件进行分组的容器，例如，按钮、菜单按钮、或复选框。

当一组控件在视觉上呈现为一个组合，能够使用 toolbar 角色来告知屏幕阅读器用户分组的呈现和目的。组合控件到工具栏，在键盘交互中是一个减小Tab停留数量的有效方式。

优化工具栏小部件的优势：

  1. 实现焦点管理，这样在Tab顺序中只包含一个toolbar站点，使用光标键能够在toolbar的控件间移动焦点。
  2. 避免在工具栏中包含须要光标键操做的控件，例如文本框或单选按钮。若是必须使用，只能包含一个这样的控件且让其做为最后一个元素。
  3. 当且仅当组合中包含三个或三个以上的控件时，才能使用工具栏做为分组元素。

键盘交互

  • 当工具栏获取焦点时，焦点被设置在第一个可用控件上。或者，若是工具栏先前已获取过焦点，则焦点被设置在工具栏中最后一个被聚焦的元素上。（译者注：通常状况下，屏幕阅读器用户会使用Tab快速浏览页面上的内容，顺序为从上到下、从左到右，此时，若工具栏获取焦点，则将焦点设置在第一个可聚焦的元素上，若使用 Shift + tab 反向浏览，若工具栏获取焦点，则将焦点设置在最后一个可聚焦的元素上。）
  • 水平工具栏(默认)：
    • Left Arrow: 将焦点移至上一个控件。可选：焦点从第一个控件移至最后一个控件上。
    • Right Arrow: 将焦点移至下一个控件。可选：焦点从最后一个控件移至第一个控件上。
  • Home (可选): 将焦点移至第一个元素。
  • End (可选): 将焦点移至最后一个元素。

注意

  1. 若是工具栏中的项目垂直排列：
  2. Down Arrow 与 Right Arrow 功能同样。
  3. Up Arrow 与 Left Arrow 功能同样。
  4. 般来讲，使用键盘进行导航时，不可用元素不可聚焦。可是，在某些须要发现功能的场景中，若是不可用元素可聚焦，能够帮助屏幕阅读器用户发现这些功能的存在。相关指导信息，请参阅 Focusability of disabled controls。
  5. 在应用程序中，快速访问工具栏很是重要，例如，从编辑器的文本区域快速访问到编辑器的工具栏，建议使用文档快捷键，从相关上下文中移动焦点到对应工具栏。

WAI-WRIA 角色、状态和属性

  • 用于工具栏容器的元素设置role为 toolbar。
  • 若是工具栏有可视的标签，它被工具栏元素上的 aria-labelledby 引用。不然，工具栏元素具备由 aria-label提供的标签。
  • 若是工具栏控件是垂直排列的，工具栏元素应该设置 aria-orientation 为 vertical。其默认值为 horizontal。

卡片 card

  • 确保全部须要突出显示的元素都有标签焦点指示符。
  • 您添加到网站的每一个<img>都须要具备alt属性。若是图像用作传达信息，请将alt设置为该图像的描述性替代。
  • 若是图像是相邻文本的装饰或冗余，请设置alt =“”，这将向辅助技术用户传达图像对于理解页面不是必需的。
  • 避免使用照片，图像或图标等通用字符串做为alt值，由于它们不会向用户传达有价值的内容。尽量具备描述性。
  • 您能够使用描述性文本添加class =“visualhidden”，以便为按钮或连接的目的提供更多上下文。

a11y-卡片示例
Cards - Inclusive Components

窗体类控件

警告框 alert

alert 是一个呈现简短、重要信息的元素，以一种引发用户注意而不打断用户任务的方式。动态渲染的警告会被大多数屏幕阅读器自动朗读，在某些操做系统中，警告会触发警告提示音。与此同时，须要注意的是屏幕阅读器不会告知用户在加载完成前已经存在的警告。

由于警告是用来提供重要和潜在的时间敏感信息，而不会打扰用户继续工做，重要的一点是它不会影响键盘焦点。alert dialog 为那些必须打断工做流的状况设计的。

一样重要的是，避免设计自动消失的警告。一个消失太快的警告，可能致使不符合 WCAG 2.0 success criterion 2.2.3。另外一个重要的设计考虑是警告引发的终端频率。频繁打断会下降视障和认知障碍用户的可用性，这让知足 WCAG 2.0 success criterion 2.2.4 的需求更加困难。

示例

键盘交互

一个警告框（WAI-ARIA 活动区域）不须要任何键盘交互。

WAI-ARIA 角色，状态和属性

该组件的角色为 alert。

警告和消息对话框 alert & message dialog

一个警告对话框是一个模态对话框，可中断用户的工做流程，以传达一个重要的信息，并得到响应。包含操做确认提示和错误消息确认。alertdialog 角色可以让辅助技术和浏览器从其余对话框中区分出警告对话框，这样就能给予警告对话框特殊对待，例如播放一个系统警告提示音。

示例

警告模态框示例

键盘交互

请参阅 modal dialog pattern 键盘交互部分。

WAI-ARIA 角色，状态和属性

  • 包含对话框全部元素的元素，包括警告信息和任何对话框按钮，具备 alertdialog 角色。
  • 角色设置为 alertdialog 的元素拥有如下状况中的一种：
    • 若是对话框具备一个可见标题，具备一个 aria-labelledby 索引包含具备对话框标题的元素。
    • aria-label 的值，若是对话框没有可见的标题。
  • 角色为 alertdialog 的元素，具备 aria-describedby 属性来索引包含警告信息的元素。

组合框 combo box

组合框是由两个不一样元素组合而成的小部件：1）单行文本框 2）用于帮助用户设置文本框值的关联弹出元素。弹出窗口能够是listbox(列表框)，grid(网格)，tree(树)或dialog(对话框)。许多实现还包括第三个可选元素 - 与文本框相邻的图形按钮，指示弹出窗口的可用性。若是建议可用，则激活按钮会显示弹出窗口。

默认状况下隐藏弹出窗口，触发其显示的条件取决于其实现。一些可能的弹出显示条件包括：

  • 只有在文本框中键入了必定数量的字符而且这些字符与其中一个建议值的某些部分匹配时，才会显示它。
  • 即便文本框为空，它也会在文本框聚焦后当即显示。
  • 按下Down Arrow键或激活"显示"按钮时显示，可能依赖于文本框的内容。
  • 若是文本框的值以建立与建议值的一个或多个部分匹配的方式更改，则会显示该值。
    Combobox小部件可用于在如下两种方案之一中设置单行文本框的值：
  1. 必须从预约义的一组容许值中选择文本框的值，例如，位置字段必须包含有效的位置名称。请注意，listbox(列表框)和menu button(菜单按钮)模式在此方案中也颇有用；组合框和替代模式之间的差别以下所述。
  2. 文本框能够包含任何任意值，可是向用户建议的值是有利的，例如，搜索字段能够建议相似或先前的搜索以节省用户时间。
    建议值的性质和建议的呈现方式称为自动完成行为。组合框能够有如下四种形式的自动完成：
    1. 无自动完成：触发弹出窗口时，不管文本框中键入的字符如何，它包含的建议值都是相同的。例如，弹出窗口建议一组最近输入的值，而且建议不会随用户键入而更改。经过手动选择列出
    2. 自动完成：触发弹出窗口时，它会显示完成或逻辑上对应于文本框中键入的字符的建议值。除非用户在弹出窗口中选择一个值，不然用户键入的字符串将成为文本框的值。
    3. 使用自动选择列出自动完成：触发弹出窗口时，它会显示完成或逻辑上对应于文本框中键入的字符的建议值，而且第一个建议会自动突出显示为已选中。除非用户选择不一样的建议或更改文本框中的字符串，不然当组合框失去焦点时，自动选择的建议将成为文本框的值。
    4. 具备内联自动完成功能的列表：这与具备一个附加功能的自动选择列表相同。所选建议的未被用户键入的部分（完成字符串）在文本框中的输入光标后显示为内联。内联完成字符串在视觉上突出显示并具备选定状态。

使用任何形式的列表自动完成功能，弹出窗口可能会在用户键入时显示和消失。例如，若是用户键入一个两个字符串，触发五个要显示的建议，但而后键入造成一个没有任何匹配建议的字符串的第三个字符，弹出窗口可能会关闭，若是存在，则内联完成字符串消失。
构建视觉上紧凑的窗口小部件并容许用户从一组离散值中选择一个值时，一般listbox（列表框）或menu button(菜单按钮)钮更易于实现和使用。组合框的一个特征是将其与listbox（列表框）和menu button(菜单按钮)区分开来，组合框的值显示在编辑字段中。
所以，组合框为用户提供了listbox（列表框）和menu button(菜单按钮)都缺乏的功能，即可以选择部分或所有值以便复制到剪贴板。区分组合框和menu button(菜单按钮)小部件与列表框小部件的一个特征是它们提供撤销机制的能力。
在许多实现中，用户能够在组合框或菜单中导航该组容许值，而后经过按下escape来决定恢复小部件在导航以前具备的值。相反，导航listbox（列表框）会当即更改其值，而escape不会提供撤消机制。

注意:
ARIA 1.1中引入了组合框以弹出网格，树或对话框的选项。ARIA 1.1规范中所作的更改还增长了对代码模式的支持，该代码模式使辅助技术可以将文本框和弹出窗口呈现为可单独感知的元素。ARIA 1.0和1.1模式将在如下部分中介绍。虽然一旦辅助技术支持足够，建议使用ARIA 1.1模式，但没有计划弃用ARIA 1.0模式。

示例

键盘交互

  • Tab：文本框位于页面Tab访问顺序中。
  • 注意：弹出指示器图标或按钮（若是存在），弹出窗口和弹出后代将从页面选项卡序列中排除。

文本框键盘交互
当焦点位于文本框中时：

  • Down Arrow：若是弹出窗口可用，请将焦点移至弹出窗口：
    • 若是自动完成行为在按下Down Arrow以前自动选择了建议，则会根据自动选择的建议重点关注建议。
    • 不然，将重点放在弹出窗口中的第一个可聚焦元素上。
  • Up Arrow（可选）：若是弹出窗口可用，则将焦点放在弹出窗口中的最后一个可聚焦元素上。
  • Escape：若是可见，则关闭弹出窗口。（可选）清除文本框。
  • Enter：若是自动选择了自动填充建议，则经过将输入光标放在文本框中可接受值的末尾或对值执行默认操做来接受建议。例如，在消息传递应用程序中，默认操做多是将接受的值添加到消息收件人列表，而后清除文本框，以便用户能够添加另外一个收件人。
  • 可打印字符：在文本框中键入字符。请注意，某些实现可能会将某些字符视为无效并阻止其输入。
  • 适用于设备平台的标准单行文本编辑键（请参阅下面的注释）。
  • Alt +Down Arrow（可选）：若是弹出窗口可用但未显示，则显示弹出窗口而不移动焦点。
  • Alt +Up Arrow（可选）：若是显示弹出窗口：
    • 1.若是弹出窗口包含焦点，则将焦点返回到文本框。
    • 2.关闭弹出窗口。

注意,适用于设备平台的标准单行文本编辑键：

  1. 包括输入键，光标移动，选择和文本操做。
  2. 编辑功能的标准键分配取决于设备操做系统。
  3. 提供文本编辑功能的最强大的方法是依赖浏览器，这些浏览器为具备类型文本的HTML输入和具备可疑HTML属性的元素提供它们。
  4. 重要信息：经过捕获用于执行它们的键的关键事件，确保JavaScript不会干扰浏览器提供的文本编辑功能。

列表框弹出键盘交互
当焦点位于列表框弹出窗口中时：

  • Enter：经过关闭弹出窗口并将接受的值放在文本框中，并将输入光标放在值的末尾，接受列表框中的焦点选项。
  • Escape：关闭弹出窗口并将焦点返回到文本框。（可选）清除文本框的内容。
  • Right Arrow：将焦点返回到文本框而不关闭弹出窗口，并将输入光标向右移动一个字符。若是输入光标位于最右侧的字符上，则光标不会移动。
  • Left Arrow：将焦点返回到文本框而不关闭弹出窗口，并将输入光标向左移动一个字符。
    若是输入光标位于最左侧的字符上，则光标不会移动。
  • 任何可打印字符：将焦点返回到文本框而不关闭弹出窗口并键入字符。
  • Backspace（可选）：将焦点返回到文本框并删除光标前的字符。
  • Delete（可选）：将焦点返回到文本框，若是选择了建议，则删除选定的状态，并删除内联自动完成字符串（若是存在）。
  • Down Arrow：将焦点移至并选择下一个选项。若是焦点位于最后一个选项上，则将焦点返回到文本框或不执行任何操做。
  • Up Arrow：将焦点移至并选择上一个选项。若是焦点在第一个选项上，则将焦点返回到文本框或不执行任何操做。
  • Home（可选）：将焦点移至并选择第一个选项或将焦点返回到文本框并将光标放在第一个字符上。

  • End（可选）：将焦点移动到最后一个选项或将焦点返回到文本框并将光标放在最后一个字符以后。

    注意
    1. DOM Focus在组合框文本框中维护，辅助技术焦点使用aria-activedescendant在列表框中移动，如使用aria-activedescendant管理复合材料中的焦点所述。
      2.选择跟随列表框中的焦点；列表框一次只容许为文本框值选择一个建议值。

网格弹出键盘交互
在网格弹出窗口中，每一个建议值能够由单个单元格或整行表示。请参阅下面的注释，了解网格设计的这一方面如何影响键盘交互设计以及选择移动以响应焦点移动的方式。

  • Enter：经过关闭弹出窗口并将所选值放在文本框中，并将输入光标放在值的末尾，接受当前选择的建议值。
  • Escape：关闭弹出窗口并将焦点返回到文本框。（可选）清除文本框的内容。
  • 任何可打印字符：将焦点返回到文本框而不关闭弹出窗口并键入字符。
  • Backspace（可选）：将焦点返回到文本框并删除光标前的字符。
  • Delete（可选）：将焦点返回到文本框，若是选择了建议，则删除选定的状态，并删除内联自动完成字符串（若是存在）。
  • Right Arrow：将焦点向右移动一个单元格。（可选）若是焦点位于行中最右侧的单元格上，焦点可能会移动到下一行中的第一个单元格。若是焦点位于网格中的最后一个单元格上，则不执行任何操做或将焦点返回到文本框。
  • Left Arrow：将焦点向左移动一个单元格。（可选）若是焦点位于行中最左侧的单元格上，焦点可能会移动到上一行中的最后一个单元格。若是焦点位于网格中的第一个单元格上，则不执行任何操做或将焦点返回到文本框。
  • Down Arrow：向下移动一个单元格。若是焦点位于网格的最后一行，则不执行任何操做或将焦点返回到文本框。
  • Up Arrow：向上移动一个单元格。若是焦点位于网格的第一行，则不执行任何操做或将焦点返回到文本框。
  • Page Down（可选）：将焦点向下移动做者肯定的行数，一般是滚动，以使当前可见行集中的底行成为第一个可见行之一。若是焦点位于网格的最后一行，则焦点不会移动。
  • Page Up（可选）：将焦点向上移动做者肯定的行数，一般是滚动，以便当前可见行集中的顶行成为最后一个可见行之一。若是焦点位于网格的第一行，则焦点不会移动。
  • Home（可选）：要么：
    • 将焦点移动到包含焦点的行中的第一个单元格。或者，若是网格每行少于三个单元格或每行多个建议值，则焦点可能会移动到网格中的第一个单元格。
    • 将焦点返回到文本框并将光标放在第一个字符上。
  • End（可选）：要么：
    • 将焦点移动到包含焦点的行中的最后一个单元格。或者，若是网格每行少于三个单元格或每行多个建议值，则焦点可能会移动到网格中的最后一个单元格。
    • 将焦点返回到文本框，并将光标放在最后一个字符以后。
  • Control + Home（可选）：将焦点移动到第一行。

  • Control + End（可选）：将焦点移动到最后一行。

    注意
    1. DOM Focus在组合框文本框中维护，辅助技术焦点使用aria-activedescendant在网格内移动，如使用aria-activedescendant管理复合材料中的焦点所述。
    2. 网格一次只容许为文本框值选择一个建议值。
    3. 在网格弹出窗口中，每一个建议值能够由单个单元格或整行表示。
      这方面的设计影响焦点和选择运动：
      A.若是每一个单元格包含不一样的建议值：
    • 选择遵循焦点，以便选择包含焦点的细胞。
    • 水平箭头键导航一般从一行包装到另外一行。
    • 垂直箭头键导航一般从一列包装到另外一列。
      B.若是一行中的全部单元格都包含有关相同建议值的信息：
    • 选择包含焦点的行，或者当同一行中的任何单元格包含焦点时，选择包含建议值的单元格。
    • 水平键导航能够从一行换行到另外一行。
    • 垂直箭头键导航不会从一列换行到另外一列。

树弹出键盘交互
在树弹出窗口的一些实现中，一些或全部父节点能够用做建议类别标签，所以可能不是可选择的值。
请参阅下面的注释，了解设计的这一方面如何影响选择移动以响应焦点移动的方式。
当焦点位于垂直方向的树弹出窗口时：

  • Enter：经过关闭弹出窗口并将所选值放在文本框中，并将输入光标放在值的末尾，接受当前选择的建议值。
  • Escape：关闭弹出窗口并将焦点返回到文本框。（可选）清除文本框的内容。
  • 任何可打印字符：将焦点返回到文本框而不关闭弹出窗口并键入字符。
  • Right Arrow：
    • 当焦点在封闭节点上时，打开节点；焦点和选择不动。
    • 当焦点位于打开的节点上时，将焦点移动到第一个子节点，若是可选，则选择它。
    • 当焦点在终端节点上时，什么都不作。
  • Left Arrow：
    • 当焦点在开放节点上时，关闭节点。
    • 当焦点位于也是末端节点或封闭节点的子节点上时，将焦点移动到其父节点并在可选择时选择它。
    • 当焦点位于也是末端节点或封闭节点的根节点上时，不执行任何操做。
  • Down Arrow：将焦点移动到可聚焦的下一个节点，而无需打开或关闭节点，若是可选，则选择它。
  • Up Arrow：将焦点移动到可关注的上一个节点，而无需打开或关闭节点，若是可选，则选择它。
  • Home：将焦点移动到树中的第一个节点，而不打开或关闭节点，若是可选，则选择它。
  • End：将焦点移动到树中可聚焦的最后一个节点，而不打开节点，若是可选，则选择它。

注意
1.DOM Focus在组合框文本框中维护，辅助技术焦点使用aria-activedescendant在树中移动，如使用aria-activedescendant管理组合焦点所述。
2.树只容许一次为文本框值选择一个建议值。
3.在树弹出窗口中，部分或所有父节点可能不是可选值；它们能够做为建议值的类别标签。若是焦点移动到不是可选值的节点，则：

  • 先前选择的节点（若是有）保持选中状态，直到焦点移动到可选择的节点。
  • 没有选定的值。
  • 在任何一种状况下，焦点在视觉上都与选择不一样，所以用户能够很容易地看到是否选择了值。
    4.若是树中的节点水平排列：
    A. 向下箭头执行右箭头如上所述，反之亦然。
    B. 向上箭头执行为左箭头如上所述，反之亦然。

对话框弹出键盘交互
焦点在对话框弹出窗口中时：

  • 有两种方法能够关闭弹出窗口并将焦点返回到文本框：
    • 1.在对话框中执行操做，例如激活按钮，指定文本框的值。

    • 2.取消退出对话框，例如，按Escape或激活对话框中的取消按钮。取消将返回焦点返回到文本框而不更改文本框值或将焦点返回到文本框并清除文本框。该对话框实现了模态对话框模式中定义的键盘交互。

      注意
      与其余组合框弹出窗口不一样，对话框不支持aria-activedescendant，所以DOM焦点从文本框移动到对话框中。

WAI-ARIA角色，状态和属性
首先列出ARIA 1.1和ARIA 1.0模式不一样的角色，状态和属性指南。随后的指导适用于这两种模式。

  • 在实现ARIA 1.1模式的组合框中：
    • 用做组合框容器的元件具备角色组合框。
    • 具备角色组合框的元素包含或拥有具备角色文本框或角色搜索框的文本框元素。
    • 当组合框弹出窗口可见时，组合框元素包含或拥有具备角色列表框，树，网格或对话框的元素。
    • 若是组合框弹出窗口具备除列表框之外的角色，则具备角色组合框的元素将aria-haspopup设置为与弹出窗口类型对应的值。也就是说，aria-haspopup设置为网格，树或对话框。
    • 当组合框弹出窗口可见时，textbox元素的aria-controls设置为引用组合框弹出元素的值。
  • 在实现ARIA 1.0模式的组合框中：
    • 用做文本框的元素具备角色组合框。
    • 当组合框弹出窗口可见时，具备角色组合框的元素将aria-owns设置为引用具备角色列表框的元素的值。
    • 具备角色组合框的元素具备列表框的aria-haspopup的值。请注意，具备角色组合框的元素具备listbox的隐式aria-haspopup值。
    • textbox元素的aria-multiline值为false。请注意，aria-multiline的默认值为false。
    • 当组合框弹出窗口不可见时，具备角色组合框的元素将aria-expanded设置为false。
    • 当弹出元素可见时，aria-expanded设置为true。请注意，具备角色组合框的元素具备aria-expanded为false的默认值。
    • 当组合框得到焦点时，DOM焦点放在文本框元素上。
    • 当聚焦列表框，网格或树弹出窗口的后代时，DOM焦点保留在文本框上，文本框将aria-activedescendant设置为引用弹出窗口中的焦点元素的值。
    • 在具备列表框，网格或树弹出窗口的组合框中，当建议值在视觉上指示为当前选定的值时，包含该值的选项，gridcell，row或treeitem将aria-selected设置为true。
    • 若是组合框具备可见标签，则具备角色组合框的元素将aria-labelled设置为引用标记元素的值。不然，组合框元素具备由aria-label提供的标签。
    • textbox元素的aria-autocomplete设置为与其自动完成行为相对应的值：
    • none：显示弹出窗口时，不管文本框中键入的字符如何，它包含的建议值都是相同的。
    • list：触发弹出窗口时，它会显示完成或逻辑上对应于文本框中键入的字符的建议值。

    • both：当触发弹出窗口时，它会显示完成或逻辑上对应于文本框中键入的字符的建议值。此外，所选建议的未被用户键入的部分（称为完成字符串）在文本框中的输入光标后显示为内联。内联完成字符串在视觉上突出显示并具备选定状态。

      注意
      1. 当引用用于弹出窗口的如下模式列表的角色，状态和属性文档时，请记住组合框是单​​选小部件，其中选择始终在弹出窗口中关注焦点。
      2. 弹出元素的角色，状态和属性在各自的设计模式中定义：
      • listbox 角色，状态和属性
      • grid 角色，状态和属性
      • tree 角色，状态和属性
      • dialog 角色，状态和属性

对话框(模态) dialog modal

对话框 是叠加在主窗口或另外一个对话框上的窗口。Window下的模态对话框是惰性的。也就是说，用户不能与对话框以外的内容进行交互。当前活跃窗口以外的非活跃内容，通常是模糊不清或灰暗的，这样就让这些内容很难被辨别，而且在某些实现中，若是试图与非活跃内容进行交互将致使对话框被关闭。

与非模态对话框类型相似，模态对话框限制了TAB顺序。也就是说，Tab 和 Shift + Tab 不会把焦点移出对话框。可是，与非模态对话框不一样的是，模态对话框没有提供在不关闭当前对话框的状况下，将键盘焦点移出对话框窗口的方法。

alertdialog 角色是特殊状况的对话框角色，被专门设计用来将用户的注意力转移至简短、重要的信息上。其用法被描述在 警告对话框设置模块。

示例

模态对话框示例

键盘交互

在如下的描述中，术语 tabbable element 是指 tabindex 值大于等于0的元素。注意：强烈不建议使用大于0的值。

  • 当对话框被打开时，焦点移至对话框内的元素。请参阅下面关于初始焦点处理的注释。
  • Tab:
    • 将焦点移至对话框内的下一个可聚焦元素。
    • 若是焦点是最后一个元素，将焦点移至对话框内的第一个可聚焦元素。
  • Shift + Tab:
    • 将焦点移至对话框内的上一个可聚焦元素。
    • 若是焦点是在第一个元素，将焦点移至对话框内的最后一个可聚焦元素。
  • Escape: 关闭对话框。

注意

  1. 当对话框被打开时，根据内容的性质和大小放置焦点。
  • 在任何状况下，焦点都应该移至对话框中的一个元素上。
  • 除非建议某个操做的状况，焦点应该被初始设置在第一个可聚焦的元素上。
  • 若是对话框里面的内容很是多，聚焦第一个交互元素会致使起始内容滚出视窗，建议给对话框顶部的静态元素添加 tabindex="-1"
  • 若是对话框内容是一个不容易逆转的流程的最后一步，例如删除数据或者完成资金交易，建议将焦点设置在最小的破坏性操做上，特别是撤销比较困难或不可撤销的操做。一般这种状况下使用 警告对话框。
  • 若是对话框内容仅包含提供额外信息或是继续处理的交互，则建议将焦点设置为最有可能使用的元素上，例如 "OK" 或 "Continue" 按钮。
  1. 当一个对话框关闭时，焦点返回到唤起该对话框的元素上，除了：
  • 唤起元素不复存在，此时，焦点被设置在逻辑工做流程中的另外一个元素上。

  • 包含如下场景的工做流程设计，能够聚焦到一个更加符合逻辑的、不一样的元素。

    1. 用户不太可能须要当即从新唤起对话框。
    2. 对话框中完成的任务与工做流程中的后续步骤直接相关。

    例如，网格包含一个具备用于添加行的按钮的相关工具条。 Add Row按钮打开一个提示输入行数的对话框。对话框关闭之后，焦点应该放在新增行的第一个单元格中。

  1. 强烈建议在全部对话框中的Tab序列中，包含一个具备 button 角色的可见元素来关闭对话框，例如一个关闭图标，或者取消按钮。

WAI-ARIA 角色，状态和属性

  • 做为对话框容器的元素具备 dialog 角色。
  • 须要操做对话框的全部元素都是 dialog 角色元素的后代。
  • 对话框容器元素的 aria-modal 被设置为 true。
  • 该对话框包括：
    • aria-labelledby 属性的值指向可见的对话框标题。
    • 标签由 aria-label 属性指定。
      -可选的，aria-describedby 属性被设置在具备 dialog 角色的元素上，指明对话框中的哪些元素包含描述对话框的主要目的或信息的内容。指定描述元素，当对话框打开时，可以让屏幕阅读器在朗读对话框标题和初始聚焦元素的同时，朗读该描述。

注意

  • 经过将 aria-modal 设置为 true，将对话框标记为模态对话框，能够防止某些辅助技术用户感知到对话框外的内容，若是一个对话框被标记为模态对话框，但对其余用户来讲又不表现为模态对话框，这些辅助技术的用户将会获得很差的体验。因此， 如下两点同时出现时，标记为模态对话框：
  1. 应用程序代码防止全部用户以任何方式和对话框外的元素进行交互。
  2. 视觉样式模糊了对话框外的内容。
  • ARIA1.1中引入的 aria-modal 属性替代了 aria-hidden，为了告知辅助技术对话框的内容是不可交互的。然而，但传统对话框的实现中，aria-hidden被用来让对话框外的内容变得让辅助技术用户不可访问，更重要的是：
  1. 在每一个包含无效内容的元素上都将 aria-hidden 设置为 true。
  2. 对话框元素不是任何 aria-hidden 为 true 的元素的后代。

结构类控件

动态列表 feed

Feed是页面的一部分，可在用户滚动时自动加载新的内容部分。Feed中内容的各个部分以文章元素显示。所以，能够将Feed视为动态的文章列表，这些文章一般会无限滚动。

当用户滚动（例如网格）时，最能区分馈送与支持加载数据的其余ARIA模式的特征是馈送是结构而不是小部件。所以，具备阅读模式的辅助技术（例如屏幕阅读器）在与Feed内容交互时默认为阅读模式。可是，与大多数其余WAI-ARIA结构不一样，Feed会在网页和辅助技术之间创建互操做性合同。合同管理滚动交互，以便辅助技术用户能够阅读文章，按文章向前和向后跳转，并在阅读模式下可靠地触发新文章加载。

例如，购物网站上的产品页面可能具备一次显示五个产品的相关产品部分。当用户滚动时，请求更多产品并将其加载到DOM中。虽然静态设计可能包含用于加载另外五个产品的下一个按钮，可是在用户滚动时自动加载更多数据的动态实现简化了用户体验并减小了与查看前五个产品建议相关的惯性。可是，遗憾的是，当网页基于滚动事件动态加载内容时，它可能会给辅助技术的用户带来可用性和互操做性困难。

经过在网页和辅助技术之间创建如下互操做性协议，馈送模式实现可靠的辅助技术阅读模式交互：

  1. 在Feed的上下文中，网页代码负责：
  • 基于哪一个文章包含DOM焦点对内容进行适当的可视滚动。
  • 根据哪篇文章包含DOM焦点来加载或删除Feed文章。
    2.在feed上下文中，具备阅读模式的辅助技术负责：
  • 经过确保article元素或其后代之一具备DOM焦点来指示哪一个文章包含读取光标。
  • 提供读取模式键，将DOM焦点移动到下一篇和前一篇文章。
  • 提供读取模式键，用于将读取光标和DOM焦点移动到结束以前和开始以前。

所以，实现馈送模式容许屏幕阅读器在保持其读取模式的同时可靠地读取和触发馈送内容的加载。
feed模式的另外一个特征是它有助于辅助技术用户的脱脂阅读。

网页做者能够为每篇文章提供可访问的名称和描述。经过识别提供标题和主要内容的文章内部的元素，辅助技术能够提供使用户可以从一篇文章跳到另外一篇文章并有效地辨别哪些文章值得更多关注的功能。

示例
Feed模式的示例实现
键盘交互
Feed模式不基于桌面GUI小部件，所以feed角色与任何完善的键盘约定无关。建议支持如下或相似的界面。
当焦点位于Feed中时：

  • Page Down：将焦点移至下一篇文章。
  • Page Up：将焦点移至上一篇文章。
  • Control + End：在焦点后将焦点移动到第一个可聚焦元素。

  • Control + Home：在焦点前将焦点移动到第一个可聚焦元素。

    注意
    1. 因为缺少惯例，提供易于发现的键盘界面文档尤其重要。
    2. 在某些状况下，Feed可能包含嵌套Feed。例如，社交媒体Feed中的文章可能包含该文章的评论摘要。要导航嵌套的Feed，用户首先将焦点移动到嵌套的Feed中。支持嵌套Feed导航的选项包括：
    • 用户使用Tab将焦点移动到包含文章内容的嵌套订阅源中。若是文章包含大量连接，按钮或其余小部件，这可能会很慢。
    • 提供一个键，用于将焦点从包含文章中的元素移动到嵌套Feed中的第一个项目，例如Alt + Page Down。
    • 要继续阅读外部Feed，Control + End会将焦点移至外部Feed中的下一篇文章。
    1. 在极少数状况下，Feed文章包含使用上述建议键的小部件，Feed导航键将操做包含的小部件，而且用户须要将焦点移动到不使用Feed导航键以便导航的元素Feed。

WAI-ARIA角色，状态和属性

  • 包含Feed文章集的元素具备角色Feed。
  • 若是Feed具备可见标题，则feed元素经过引用包含标题的元素来标记aria-labelledby。不然，feed元素具备使用aria-label指定的标签。
  • Feed中的每一个内容单元都包含在带有角色aritcle的元素中。Feed中的全部内容都包含在article元素中。
  • 每一个article元素都有aria-labelledby，指的是文章中能够做为区别标签的元素。
  • 它是可选的，但强烈建议每一个article元素经过引用文章中做为文章主要内容的一个或多个元素来描述aria-describedby 。
  • 每一个article元素都将aria-posinset设置为一个值，该值表示其在Feed中的位置。
  • 每一个article元素都将aria-setsize设置为一个值，该值表示已加载的文章总数或Feed中的总数，具体取决于哪一个值对用户更有帮助。若是Feed中的总数未肯定，则能够用aria-setsize值-1表示。
  • 将article元素添加到Feed容器或从Feed容器中删除时，若是操做须要多个DOM操做，则feed元素在更新操做期间将aria-busy设置为true。请注意，当操做完成或某些辅助技术用户可能没法看到更改时，将aria-busy设置为false很是重要。

网格 grid

网格 组件是一个容器，可以让用户使用方向导航键，例如 arrow keys、 Home 和 End，来浏览其包含的信息和与其包含的元素进行交互。做为提供灵活键盘导航的通用容器小部件，它能够知足各类各样的需求。它能够用于简单的组合复选框或导航连接的集合，也可用于复杂的目的，例如完整功能的电子应用表格。尽管 WAI-ARIA 属性和辅助技术使用"row" 和 "column" 的术语，描述和呈现 grid 角色元素的逻辑结构，可是在元素上使用 grid 角色，并不须要将其视觉呈现实现为表格。

当呈现的内容是表格时，从 grid 和 table 中选择实现模式时，考虑如下因素。

  • grid 是一个复合小部件，因此它：
  • Table中的全部可聚焦元素均被包含在页面Tab序列中。

grid 模式的使用大体可分为两类：展现表格信息（数据表格）和集合其余部件（布局栅格）。尽管数据网格和布局栅格使用相同的ARIA角色、状态和属性，它们内容和目的中的不一样是考虑键盘交互设计的重要因素。为了强调这些因素，如下两节分别介绍了数据网格和数据栅格的键盘交互模式。

示例

  • 布局网格示例: 用于布局窗口小部件的网格的三个示例实现，包括导航连接的集合，邮件收件人列表和一组搜索结果。
  • 数据网格示例: 网格的三个示例实现，包括与呈现表格信息（如内容编辑，排序和列隐藏）相关的功能。
  • 高级数据网格示例: 具备相似于典型电子表格的行为和功能的网格示例，包括单元格和行选择。

呈现表格信息的数据网格

grid 可用于显示具备列标题，行标题或二者均有的表格信息。若是表格信息是可编辑的或可交互的， grid 模式特别有用。例如，当数据元素是更多信息的连接时，不是将它们呈如今静态表格中并在页面tab序列中包含全部连接，实现 grid 模式提供给用户更加直观和有效的键盘导航方式，同时缩短了页面的tab序列的长度。 grid 还能够提供诸如单元格内容编辑，选择，剪切，复制和粘贴等功能。

在一个呈现表格数据的 grid 中，每个单元格都包含一个可聚焦的元素或其单元格自己可聚焦，不管单元格内容是否可编辑或可交互。有一个例外：若是行列的表头单元格没有提供功能，例如排序或过滤，它们不须要可聚焦。一个缘由是当用户与 grid 交互时，屏幕阅读器须要处于应用阅读模式，而不是文档阅读模式，这很是重要。在应用阅读模式时，屏幕阅读器用户只能发现可聚焦的元素和标记可聚焦元素的内容。所以，屏幕阅读器用户可能会在不知情的状况下忽略网格中包含的元素，当它们不可聚焦或不用于标记列或行。

数据网格键盘交互

如下键经过在网格的单元格之间移动焦点来提供网格导航。默认状况下，这些键盘命令在网格元素接收到焦点后默承认用。例如，用户将焦点移动具备 Tab 的网格后。

  • Right Arrow: 将焦点向右移动一个单元格。若是焦点位于行中最右侧的单元格，则焦点不会移动。
  • Left Arrow: 将焦点向左移动一个单元格。若是焦点位于行中最左侧的单元格，则焦点不会移动。
  • Down Arrow: 将焦点往下移动一个单元格。若是焦点位于列中的底部单元格上，则焦点不会移动。
  • Up Arrow: 将焦点往下移动一个单元格。若是焦点位于列中的顶部单元格上，则焦点不会移动。
  • Page Down: 以开发者设定的行数移动焦点，通常滚动时，当前可见行集合中的最后一行会变为第一次滚动后可见行中的一行。
  • Page Up: 移动焦点到开发者设定的行数，通常滚动时，当前可见行集合中的第一行会变为滚动后可见行中的一行。
  • Home: 将焦点移至包含焦点所在行的第一个单元格。
  • End: 将焦点移至包含焦点所在行的最后一个单元格。
  • Control + Home: 将焦点移至第一行中的第一个单元格。
  • Control + End: 将焦点移至最后一行的最后一个单元格。

注意

  • 当使用以上网格导航键移动焦点时，根据单元格内容，在单元格内元素或网格单元格上设置焦点。 请参阅 Whether to Focus on a Cell or an Element Inside It。
  • 当使用导航键在单元格间移动焦点，例如光标键，它们不能用于某些操做，例如操做组合框或在单元格内移动编辑光标。若是须要此功能，请参阅 Editing and Navigating Inside a Cell。
  • 若是导航功能能够动态地向DOM添加更多的行或列，则将焦点移至网格的开头或结尾的键盘事件（例如 control + End ），可将焦点移至DOM中的最后一行，而不是先前可用数据的最后一行。

若是网格支持单元格、行、列的选择，通常使用如下的键实现这些功能。

  • Control + Space: 选择包含焦点的列。
  • Shift + Space: 选择包含焦点的行。若是网格包含带有用于选择行的复选框的列，则该键能够用做在焦点不在复选框时勾选框的快捷方式。
  • Control + A: 选择全部单元格。
  • Shift + Right Arrow: 向右扩展选择一个单元格。
  • Shift + Left Arrow: 向左扩展选择一个单元格。
  • Shift + Down Arrow: 向下扩展选择一个单元格。
  • Shift + Up Arrow: 向上扩展选择一个单元格。

注意 有关剪切，复制和粘贴键的分配，请参阅 Key Assignment Conventions for Common Functions。

组合部件的布局栅格

grid 模式可被用于组合一组可交互元素，例如连接、按钮、和复选框。因为整个网格只有一个元素包含在tab序列中，因此使用网格进行分组能够显著减小页面上的tab步骤。若是滚动元素列表会从一个大数据集中动态地加载更多的元素，例如在购物类网站中的推荐产品的连续列表中，该模式尤为有用。若是像这样的列表元素都在tab序列中，键盘用户会被困在列表中。若是组中的任何元素在鼠标悬停时都会出现关联元素， grid 模式用来为用户界面的上下文元素提供键盘访问。

与用于呈现数据的网格不一样，用于布局的 grid 不必定具备用于标记行或列的标题单元格，而且可能只包含单个行或单个列。即便有多个行和列，它也可能呈现一个独立、逻辑上相同的元素集合。例如，消息的收件人列表多是个网格，其每一个单元格包含一个表明收件人的连接。网格最初可能只有一行，可是随着收件人的添加，会变为多行。在这样的状况下，网格导航键也须要换行，以便用户能够使用 Right Arrow 和 Down Arrow 来从列表开头阅读到末尾。虽然在布局栅格中这种类型的焦点移动换行很是有用，可是若是在数据网格中使用就会让用户迷失方向，尤为是辅助技术的用户。

由于光标键被用来在 grid 中移动焦点，若是其包含的元素不须要光标键来操做， grid 将会更容器构建和使用。若是一个单元格包含相似listbox的元素，则须要额外的键盘命令来聚焦和激活 listbox，和恢复网格导航功能的命令。支持这个需求的方法在 Editing and Navigating Inside a Cell部分进行描述。

布局栅格的键盘交互

如下键经过在网格的单元格之间移动焦点来提供网格导航。这些键盘命令在 Tab 中的元素接收焦点后默承认用。

  • Right Arrow: 将焦点向右移动一个单元格。可选，若是焦点位于行中最右侧的单元格上，则焦点可能会移至下一行中的第一个单元格。若是焦点位于网格中的最后一个单元格上，则焦点不会移动。
  • Left Arrow: 将焦点向左移动一个单元格。可选，若是焦点位于行中最左侧的单元格上，则焦点可能会移至上一行中的最后一个单元格。若是焦点位于网格中的第一个单元格上，则焦点不会移动。
  • Down Arrow: 将焦点向下移动一个单元格。可选，若是焦点位于列中的底部单元格上，则焦点可能会移至下一列的顶部单元格。若是焦点位于网格中的最后一个单元格上，则焦点不会移动。
  • Up Arrow: 将焦点向上移动一个单元格。可选，若是焦点位于当前列的顶部单元格上，则焦点可能会移至前一列的最后一个单元格。若是焦点位于网格的第一个单元格上，则焦点不会移动。
  • Page Down (可选): 以开发者设定的行数向上移动焦点，通常状况下，当前可见行中的第一行会成为滚动后可见行中的一行。
  • Page Up (可选): 将对象移至做者肯定的行数上，一般是滚动的，所以当前可见的行行中的顶行将成为最后一个可见行之一。若是焦点位于网格的第一行，则焦点不会移动。
  • Home: 将焦点移至包含焦点的行中的第一个单元格。可选，若是网格具备单列或每行少于三个单元格，则焦点能够替代地移至网格中的第一单元格。
  • End: 将焦点移至包含焦点的行中的最后一个单元格。可选，若是网格具备单个列或每行少于三个单元格，则焦点能够替代地移至网格中的最后一个单元格。
  • Control + Home (可选): 将焦点移至第一行中的第一个单元格。
  • Control + End (可选): 将焦点移至最后一行的最后一个单元格。

注意

  • 当使用以上网格键移动焦点时，根据单元格内容，决定焦点是否设置在单元格内的元素上或网格单元格上。 请参阅 Whether to Focus on a Cell or an Element Inside It.
  • 当使用导航键在单元格间移动焦点时，它们不可用于相似操做组合框或在单元格内移动输入光标等的事情。若是须要此功能，请参阅Editing and Navigating Inside a Cell。
  • 若是导航功能能够动态地向DOM中添加更多的行或列，则移动焦点到网格的开头或结尾的键盘事件（例如 control + End ），可将焦点移至DOM中的最后一行，而不是后端数据中可用的最后一行。

为栅格布局提供须要单元格选择功能，是不常见的。虽然如此，但当确实须要时，这些功能通常使用如下的键:

  • Control + Space: 选择包含焦点的列。
  • Shift + Space: 选择包含焦点的行。若是网格包含用于选择行的复选框的列，当焦点不在复选框上时，可做为选中复选框的快捷键。
  • Control + A: 选择全部单元格。
  • Shift + Right Arrow: 向右扩展选择一个单元格。
  • Shift + Left Arrow: 向左扩展选择一个单元格。
  • Shift + Down Arrow: 向下扩展选择一个单元格。
  • Shift + Up Arrow: 向上扩展选择一个单元格。

注意 有关剪切，复制和粘贴键的分配，请参阅 Key Assignment Conventions for Common Functions。

键盘交互 — 设置焦点和导航单元格内容

本节介绍了数据和布局网格模式共有的键盘交互设计的两个重要方面：

一、选择单元格或单元格内元素接收焦点，来响应网格导航键盘按键事件。 二、启用网格导航键，用来与单元格内元素进行交互。

是否聚焦单元格或其包含的元素

对于辅助技术用户，导航网格时的体验质量很大程度上取决于单元格包含的内容以及设置键盘焦点的位置。例如若是一个单元格包含一个按钮，网格导航键在单元格上放置焦点，而不是按钮上，屏幕阅读器会朗读出按钮的标签，但不会告知用户存在一个按钮。

有两种最佳的单元格设计和聚焦行为组合：

  1. 一个单元格包含一个组件，其操做不须要光标键和网格导航键，在该组件上设置焦点。这些小部件的示例包括连接，按钮，菜单栏，切换按钮，单选按钮（不是单选按钮组），开关和复选框。
  2. 一个单元格包含文本或一个单独的图形，网格导航键在单元格上设置焦点。

可是组件、文本和图像的任意组合均可能被包含在一个单元格中，不遵循以上两种设置和焦点移动模式的网格，会增长开发者或用户或二者的复杂性。下面样例部分中包含的参考实现，给出了让其余单元格设计尽量可访问的一些策略，可是使用以上两种模式，才能得到最大程度的无障碍体验。

在单元格内编辑和导航

当使用导航键在单元格间移动焦点，它们不能用来执行像操做组合框或在单元格内移动光标的操做。用户可能须要用于网格导航的键来操做单元格内的元素，若是单元格包含：

  1. 可编辑内容。
  2. 多个小部件。
  3. 在交互模式中使用光标键交互的组件，例如单选按钮或滑块。

如下为禁用和恢复网格导航功能的惯用键盘操做。

  • Enter: 禁用网格导航以及：
    • 若是单元格包含可编辑内容，将焦点放置在输入框中，例如 textbox。若是输入框是个单行文本框，连续按 Enter ，会重置网格导航功能，或移动焦点到附近单元格的输入框中。
    • 若是单元格包含一个或多个组件，将焦点放置在第一个组件上。
  • F2:
    • 若是单元格包含可编辑的内容，则会将焦点放在输入字段中，例如 textbox。随后按下 F2 恢复网格导航功能。
    • 若是单元格包含一个或多个组件，将焦点放置在第一个组件上。随后按下 F2 恢复网格导航功能。
  • 字母数字键: 若是单元格包含可编辑的内容，则会将焦点放在输入框中，例如 textbox。

当网格导航被禁用时，导航行为的常规更改包括：

  • Escape: 恢复网格导航。若是正在编辑内容，它也可能会撤消修改。
  • Right Arrow 或者 Down Arrow: 若是单元格包含多个小组件，将焦点移至单元格的内下一个小组件，若是焦点在最后一个组件上，可选`地，将焦点返回给第一个小组件，或者，传递按键事件到当前聚焦的组件。
  • Left Arrow 或者 Up Arrow: 若是单元格包含多个小组件，将焦点移至单元格的内前一个小组件，若是焦点在最后一个组件上，可选，将焦点返回给第一个小组件，或者，传递按键事件到当前聚焦的组件。
  • Tab: 将焦点移至网格中的下一个组件。可选，焦点可能会在一个单元格内循环，或在网格内循环。
  • Shift + Tab: 将焦点移至网格中的上一个组件。可选，焦点可能会在一个单元格内循环，或在网格内循环。

WAI-ARIA 角色，状态和属性

  • 网格容器具备角色 grid。
  • 每一个行容器都具备 row 角色，而且是 grid 元素或 rowgroup 角色元素的后代，或被其拥有。
  • 每一个单元格是 row 元素的DOM后代，或被row元素拥有，而且具备如下角色之一：
    • columnheader 若是单元格包含标题或列的标题信息。
    • rowheader 若是单元格包含标题或行的标题信息。
    • gridcell 若是单元格不包含列或行的标题信息。
  • 若是在用户界面中有一个元素是网格的标签，在网格元素上设置 aria-labelledby 属性，该属性的值指向该标签元素。不然，使用 aria-label为网格元素指定一个标签。
  • 若是网格具备一个说明或描述，在网格元素上设置 aria-describedby 属性，其值指向包含描述的元素。
  • 若是网格提供排序功能，则在头部单元格上为 aria-sort 属性设置合适的值，来对行或列进行排序，如 grid and table properties 部分所述。
  • 若是网格支持选择，当单元格或行被选择时，被选择元素的 aria-selected 设置为 true。
  • 若是网格提供内容编辑功能，而且包含在某些条件下禁用编辑功能的单元格，在编辑功能被禁用时，设置 aria-readonly 为 true。若是全部单元格的编辑功能都被禁用，在网格元素上设置 aria-readonly 为 true。不提供编辑功能的网格在任何元素上都不包含 aria-readonly 属性。
  • 若是存在某些行或列在DOM中被隐藏或不存在的状况，例如当滚动时自动加载数据，或者网格提供了隐藏行或列的功能，使用如下属性，如grid and table properties 所述。
  • 若是网格包含跨多行或多列的单元格，而且若是 grid 角色未应用于HTML table 元素，则应用 aria-rowspan 或 aria-colspan，如 grid and table properties 所述。

注意

  • 若是具备 grid 角色的元素是HTML table 元素，那么没必要为行和单元格使用ARIA角色，由于HTML元素暗含了ARIA语义。例如，HTMLTR 具备隐含的ARIA角色 row。一个从HTML table 构建的 网格，包含跨越多行或多列的单元格，必须使用HTML rowspan 和 colspan属性，不能使用 aria-rowspan 或 aria-colspan。
  • 若是经过aria-owns属性将行或列包含在网格中，它们将在网格元素的DOM后代以后呈现给辅助技术，除非DOM后代也被包含在给 aria-owns 属性中。请参阅使用 aria-owns 进行详细说明。

表格 table

与HTML表元素同样，WAI-ARIA表格是一个静态表格结构，包含一行或多行，每行包含一个或多个单元格；它不是一个交互式小部件。所以，其单元不可聚焦或可选择。网格图案用于制做具备表格结构的交互式窗口小部件。
可是，表一般用于呈现信息和交互式小部件的组合。因为表不是窗口小部件，所以表中包含的每一个窗口小部件都是页面选项卡序列中的单独停靠点。若是窗口小部件的数量很大，则使用网格替换表能够显着减小页面选项卡序列的长度，由于网格是能够包含其余窗口小部件的复合窗口小部件。

注意
与具备本机宿主语言等效的其余WAI-ARIA角色同样，强烈建议做者尽量使用本机HTML表格元素。这对角色表尤为重要，由于它是WAI-ARIA 1.1的新功能。所以，建议使用可供目标受众使用的每种浏览器和辅助技术组合完全测试实施。

示例

键盘交互
不适用。

WAI-ARIA角色，状态和属性

  • 表容器具备角色表。
  • 每一个行容器都有角色行，它是表元素的DOM后代或者由表元素拥有的元素或具备角色行组的元素。
  • 每一个单元格都是行元素的DOM后代或由行元素拥有，并具备如下角色之一：
  • 若是单元格包含列的标题或标题信息，则为columnheader。
  • 若是单元格包含行的标题或标题信息，则为rowheader。
  • 若是单元格不包含列或行标题信息,则为cell。
  • 若是用户界面中有一个元素充当表的标签，则在table元素上设置aria-labelledby，其值为引用标签元素。不然，使用aria-label为表元素指定标签。
  • 若是表具备标题或描述，则在table元素上设置aria-describedby，其值为引用包含描述的元素。
  • 若是表包含可排序的列或行，则aria-sort将在有关排序列或行的标题单元格元素上设置为适当的值，如网格和表属性一节中所述。
  • 若是存在某些行或列被隐藏或不存在于DOM中的状况，例如，页面上有用于隐藏行或列的小部件，则应用如下属性，如网格和表属性一节中所述。
  • aria-colcount或aria-rowcount分别设置为列或行的总数。
  • aria-colindex或aria-rowindex分别设置为行或列中单元格的位置。
  • 若是表包含跨越多行或多列的单元格，则应用aria-rowspan或aria-colspan，如网格和表格属性中所述。

注意
若是行或单元格经过aria-owns包含在表中，则它们将在表元素的DOM后代以后呈现给辅助技术，除非DOM后代也包含在aria-owns属性中。

选项卡 tabs

选项卡是一个内容分层模块的集合，被称为选项卡面板，一次只能显示内容的一个面板。每一个选项卡面板都有相关联选项卡元素，当被激活，显示其相关联面板。选项卡元素列表被排列在当前显示面板的边缘，大多数状况在顶部边缘。

用于描述选项卡的术语包含：

选项卡或选项卡界面

选项卡元素组合和它们相关联的内容面板。

选项卡列表 被包含在 tablist 元素中的选项卡元素组合。

选项卡 选项卡列表中的一个元素，做为其中一个内容面板的标签，能够激活以显示对应的内容面板。

内容面板 包含与选项卡元素相关联内容的元素。

当初始化一个选项卡界面，一个选项卡面板默认显示，其相关联选项卡元素使用样式来标识其当前活跃。当用户激活一个别的选项卡元素，先前显示的内容面板被隐藏，与被激活选项卡元素相关联的内容面板变为可见，且选项卡元素被认为当前“活跃”。

示例

键盘交互

对于选项卡列表：

  • Tab: 当焦点进入选项卡列表，将焦点放置在当前活跃 选项卡 元素上。当选项卡列表包含焦点，移动焦点到当前页面 tab 序列中的选项卡列表外的下一个元素，通常状况是内容面板的第一个可聚焦元素，或内容面板自己。
  • 当焦点在水平选项卡列表中的一个选项卡元素上时：
    • Left Arrow: 移动焦点到上一个选项卡元素；若是焦点在第一个选项卡元素上，移动焦点到最后一个选项卡元素。
    • Right Arrow: 移动焦点到下一个选项卡元素。若是焦点在最后一个选项卡元素上，移动焦点到第一个选项卡元素。
  • 当焦点在水平或垂直选项卡列表中的一个选项卡元素上时：
    • Space or Enter: 若是获取焦点的选项卡不会自动激活，则激活该选项卡元素。
    • Home (可选): 移动焦点到第一个选项卡元素上。
    • End (可选): 移动焦点到最后一个选项卡元素上。
    • Shift + F10: 若是选项卡有关联的弹出菜单，则打开菜单。
    • Delete (可选): 若是容许删除操做，删除（关闭）当前选项卡元素和其相关联选项卡面板。若是还有任何选项卡元素，将焦点设置在已关闭选项卡元素的下一个元素上，而且激活新聚焦的选项卡元素。

注意

  1. 建议当选项卡元素接收到焦点时自动激活，只要它们相关的选项卡面板显示时没有明显的延迟。这种作法须要提早加载选项卡内容面板的内容。不然，自动激活标签会延缓焦点移动，这也会下降用户有效浏览选项卡列表的效率。更多相关指导，能够阅读 Deciding When to Make Selection Automatically Follow Focus
  2. 若是选项卡列表中的选项卡元素垂直排列：
  3. Down Arrow 与 Right Arrow 执行同样的操做。
  4. Up Arrow 与 Left Arrow 执行同样的操做。
  5. 若是选项卡列表是水平的，它不会监听 Down Arrow 或 Up Arrow 光标键，即便焦点在选项卡列表内，使用这些键仍会提供浏览器的常规滚动功能。
  6. 若是您有三个以上的选项卡，请务必更新aria-posinset和aria-setsize属性的值。

WAI-ARIA 角色，状态和属性

  • 选项卡组合的容器元素具备角色 tablist。
  • 每一个选项卡元素都有 tab 角色，而且被包含在具备 tablistl 角色的元素里。
  • 每一个 选项卡 拥有角色 tabpanel。
  • 每一个具备 tab 角色的元素，具备 aria-controls 属性来索引其相关联 tabpanel 元素。
  • 当前活跃 tab 元素具备 aria-selected 状态且设置为 true ，全部其余 tab 元素为 false。
  • 每一个具备角色 tabpanel 的元素有 aria-labelledby 属性，来索引其相关联 tab 元素。
  • 若是一个 tab 元素有弹出菜单 ，则它的属性 aria-haspopup 设置为 true。
  • 若是 tablist 元素是垂直排布，那么它应该设置 aria-orientation 属性值为 vertical。tablist 元素的 aria-orientation 默认值为horizontall。

树 tree view

一个树视图呈现为一个分层列表。层次结构中的任何项目均可能有子项，而且有子项的元素，能够展开或折叠来显示或隐藏子项。例如，在使用树视图显示文件夹和文件的文件系统导航器中，表明文件夹的项目可以被展开文件夹中的内容，这些内容多是文件、文件夹，或二者都有。

理解的树视图的一些术语包括：

节点
在树结构中的项目。

根结点

在树结构根部的节点；它能够具备一个或多个子节点，但不具备父节点。

子节点

有一个父节点的节点；任意节点若是不是根节点，那它就是一个子节点。

终端节点

不具备任何子节点的节点；一个终端节点要么是根节点要么是子节点。

父节点

有一个或多个子节点的节点。它能够是打开的（扩展）或关闭的（折叠）。

开节点

被展开以使其子节点可见的父节点。

闭节点

被折叠以使其子节点不可见的父节点。

当使用键盘来导航一个树结构，一个可见的键盘指示器告诉用户哪一个节点被聚焦。若是树结构容许用户一个动做只选择一个项目，那么它被称为单选择树（single-select tree），并且被聚焦的项目还有一个被选中的状态。可是，在多选择树（multi-select trees）中，容许用户一次性选择多个项目，其选择状态与焦点无关。例如，在一个典型文件系统导航器中，用户能够一次性地移动焦点来选择任意数量的文件，例如复制或移动。为已选定和具备焦点的项目提供视觉上的设计区分，这很是重要。有关详细信息，请参阅 this description of differences between focus and selection。

示例

键盘交互

对于垂直方向的树结构：

  • 当单选树接收到焦点：
    • 若是树结构接收焦点以前没有任何节点被选择，则焦点设置在第一个节点上。
    • 若是树结构得到焦点以前有一个节点被选择，则焦点设置在被选择的节点上。
  • 当多选树接收到焦点：
    • 若是树结构接收焦点以前没有任何一个节点被选择，则焦点设置在第一个节点上。
    • 若是树结构接收焦点以前有一个或多个节点被选择，则焦点设置在第一个被选择的节点上。
  • Right arrow:
    • 当焦点在展开节点上，收起节点，焦点不移动。
    • 当焦点在展开节点上，将焦点移动第一个可聚焦节点上。
    • 当焦点在最后一个节点上，不响应事件。
  • Left arrow:
    • 当焦点是在一个闭节点上，打开这个节点； 焦点不会移动。
    • 当焦点在一个同时也是终端节点或闭节点的子节点上，将焦点移至它的父节点。
    • 当焦点一个是同时也是终端节点或闭节点的根节点上，什么也不作。
  • Down Arrow: 不打开或关闭节点，将焦点移至下一个可聚焦的节点。
  • Up Arrow: 不打开或关闭节点，将焦点移至上一个可聚焦的节点。
  • Home: 不打开或关闭节点，将焦点移至树结构中的第一个可聚焦的节点。
  • End: 不打开或关闭节点，将焦点移至树结构的最后一个可聚焦的节点。
  • Enter: 激活一个节点，即执行其默认操做。对于父节点，一个可能的默认动做是打开或关闭节点。在一个选项不跟随焦点（见下面的注释）的单选树，默认的操做一般是选择焦点节点。 +建议全部的树结构支持提早键入，特别是对于包含超过7个根节点的树结构：
    • 键入一个字符：焦点移至下一个名称以输入的字符开头的节点。
    • 快速连续键入多个字符：焦点移至下一个名称以输入的字符串开头的节点。
  • (可选): 展开与当前节点在同一层级的全部兄弟节点。
  • 在多选树中选择：做者可以使用如下两种交互模式以支持多选：推荐的模式，用户正在浏览列表时不要求用户按住辅助键，如 Shift 或 Control ，或另外一种模式，当浏览时要求按住辅助键，以免丢失选择状态。
    • 推荐选择模型 - 当移动焦点时按住辅助键是没有必要的：
      • Space: 切换聚焦节点的选择状态。
      • Shift + Down Arrow (可选): 将焦点移至下一个节点，而且切换下一个节点的选择状态。
      • Shift + Up Arrow (可选): 将焦点移至上一个节点，而且切换上一个节点的选择状态。
      • Shift + Space (可选): 选择从最后选择的节点到当前节点的相邻节点。
      • Control + Shift + Home (可选): 选择具备焦点的节点以及它到第一个节点的全部节点。
      • Control + Shift + End (可选): 选择具备焦点的节点以及它到最后一个节点的全部节点。
      • Control + A (可选): 选择在树结构中的全部节点。根据须要，若是选择了全部的节点，它也能够取消选择全部节点。
    • 备选选择模型 - 移动焦点时不按住 Shift 或 Control 辅助键，会取消选中节点，聚焦的节点除外：
      • Shift + Down Arrow: 将焦点移至下一个节点，而且切换下一个节点的选择状态。
      • Shift + Up Arrow: 将焦点移至上一个节点，而且切换上一个节点的选择状态。
      • Control + Down Arrow: 不改变选择状态，将焦点移至下一个节点。
      • Control + Up Arrow: 不改变选择状态，将焦点移至前一个节点。
      • Control + Space: 切换聚焦节点的选择状态。
      • Shift + Space (可选): 选择从最近选择的节点到当前节点的相邻节点。
      • Control + Shift + Home (可选): 选择从焦点节点到第一个节点的全部节点。
      • Control + Shift + End (可选): 选择焦点节点到最后一个节点的全部节点。
      • Control + A (可选): 选择在树结构中的全部节点。根据须要，若是全部的节点都被选择了，它也能够取消选择全部节点。

注意

  1. DOM焦点（激活的元素）与选择的状态在功能上是有区别的。有关详细信息，请参阅 this description of differences between focus and selection.。
  2. tree 角色支持 aria-activedescendant 属性，它提供了另外一种使用键盘导航在 treeitem 元素间移动DOM焦点的方式。有关详细信息，请参阅 Managing Focus in Composites Using aria-activedescendant。
  3. 在单选树中，移动焦点能够取消选择以前选择的节点，并选择新聚焦的节点。这种选择模式被称为 "选择跟随焦点（selection follows focus）"。选择跟随焦点在某些状况下很是有用，在其余状况下则会严重下降可访问性。有关更多的指南，请参阅 Deciding When to Make Selection Automatically Follow Focus。
  4. 若是选择或取消选择全部节点是一个重要的功能，实现单独控制这些行为，如 "全选" 和 "取消全选" 按钮，可显著提升可用性。
  5. 若是在一个树结构中的节点被水平地布置：
  6. Down Arrow 的表现如上面描述的 Right Arrow 同样，反之亦然。
  7. Up Arrow 的表现如上面描述的 Left Arrow 同样，反之亦然。

WAI-ARIA 角色，状态和属性

  • 全部树节点都包含在或被角色为 tree 的元素所包含。
  • 做为树节点的每一个元素都有 treeitem 角色。
  • 每个根节点包含在角色为 tree 的元素或被设置了 aria-owns 的属性的 tree元素引用。
  • 每一个父节点包含或拥有 group 角色的元素。
  • 每一个子节点都包含在一个角色为 group 的元素中，或者被其拥有，该元素包含在节点中，或者由做为该子节点的父节点的节点拥有。
  • 每一个做为父节点拥有 treeitem 的元素 aria-expanded 设置为 false，当节点处于关闭状态，并设置为 true 时，该节点是在打开状态。终端节点没有 aria-expanded 属性，由于，若是他们有，他们会被辅助技术错误地描述为父节点。
  • 若是树支持多个节点的选择，拥有角色 tree 的元素拥有设置为 true 值的 aria-multiselectable 属性。不然，aria-multiselectable 要么是设置为 false 或使用默认值 false。
  • 若是树不支持多选， 选中节点的 aria-selected 被设置为 true 而且该属性不存在于树中的任何其它节点。
  • 若是树支持多种选择：
  • 拥有角色 tree 的元素拥有被 aria-labelledby 引用的可见标签或拥有指定值的 aria-label 属性 。
  • 若是因为用户移动焦点或滚动树结构引发的动态加载，DOM中不存在完整的可用节点集合，每一个节点拥有指定值的 aria-level， aria-setsize和 aria-posinset。
  • 若是 tree 元素是水平方向的，它的 aria-orientation 设置为 horizontal。一个树结构的 aria-orientation 默认值是 vertical。

注意 若是 aria-owns 设置在树容器上，以包含不是该容器DOM子元素的元素，这些元素会按它们被引用的顺序出如今读取序列中，而且在全部属于该容器的DOM子元素以后。用于管理焦点的脚本须要确保视觉焦点与这个辅助技术读取顺序相匹配。

树型网格 treegrid

treegrid呈现分层数据网格，该网格由可编辑或交互的表格信息组成。层次结构中的任何行均可以具备子行，而且能够展开或折叠具备子项的行以显示或隐藏子项。例如，在用于显示电子邮件讨论列表的消息和消息响应的treegrid中，具备响应的消息将在行中，能够展开以显示响应消息。

在树形网格中，行和单元格都是可聚焦的。不管单个单元格内容是可编辑的仍是交互式的，每一个行和单元格都包含一个可聚焦元素或者自己是可聚焦的。有一个例外：若是列标题单元格不提供排序或过滤等功能，则它们不须要是可聚焦的。对于全部单元可以接收或包含键盘焦点而言重要的一个缘由是，当用户与网格交互时，屏幕阅读器一般将处于其应用程序读取模式，而不是其文档读取模式。在应用程序模式下，屏幕阅读器用户只能听到可聚焦元素和标记可聚焦元素的内容。所以，屏幕阅读器用户可能会在不知不觉中忽略树格中包含的元素，这些元素要么不可聚焦，要么不用于标记列或行。

当使用键盘导航树形网格时，可视键盘指示器通知用户哪一个行或单元格被聚焦。若是treegrid容许用户仅为一个动做选择一个项目，则它被称为单选树格，而具备焦点的项目也具备选定状态。可是，在多选树格中，使用户可以为操做选择多个行或单元格，所选状态与焦点无关。例如，在分层电子邮件讨论网格中，用户能够移动焦点觉得操做选择任意数量的行，例如删除或移动。视觉设计必须区分所选项目和具备焦点的项目。有关更多详细信息，请参阅焦点和选择之间差别的此描述。

示例
电子邮件收件箱treegrid示例：用于导航电子邮件收件箱的树形网格，演示三种键盘导航模型 - 第一行，单元格第一，单元格。
键盘交互
如下键经过在网格的行和单元格之间移动焦点来提供treegrid导航。当网格中的元素已经得到焦点时，例如在用户使用Tab将焦点移动到网格以后，treegrid的实现使这些键命令可用。将焦点移动到网格中可能致使第一个单元格或第一个行被聚焦。焦点是转到单元格仍是行取决于做者首选项以及是否支持行焦点，由于某些treegrids可能没法为行提供焦点。

  • Enter：若是启用了仅单元格焦点而且焦点位于具备aria-expanded属性的第一个单元格上，则打开或关闭子行。不然，执行单元格的默认操做。
    -Tab：若是包含焦点的行包含可聚焦元素（例如，输入，按钮，连接等），则将焦点移动到行中的下一个输入。若是焦点位于行中的最后一个可聚焦元素，则将焦点从treegrid小部件移动到下一个可聚焦元素。
  • Right Arrow：
  • 若是焦点位于折叠的行上，则展开该行。
  • 若是焦点位于展开的行上或位于没有子行的行上，则将焦点移动到行中的第一个单元格。
  • 若是焦点位于连续的最右侧单元格上，则焦点不会移动。
  • 若是焦点在任何其余单元格上，则将一个单元格移动到右侧。
  • Left Arrow：若是焦点位于展开的行上，则折叠该行。
  • 若是焦点位于折叠的行或没有子行的行上，则焦点不会移动。
  • 若是焦点位于行中的第一个单元格而且支持行焦点，则将焦点移动到该行。
  • 若是焦点位于行中的第一个单元格而且不支持行焦点，则焦点不会移动。
  • 若是焦点在任何其余单元格上，则将一个单元格移动到左侧。
  • Down Arrow：
  • 若是焦点在一行上，则将焦点向下移动一行。
  • 若是焦点位于单元格上，则将焦点向下移动一个单元格。若是焦点位于列中的底部单元格，则焦点不会移动。
  • Up Arrow：
  • 若是焦点在一行上，则将焦点向上移动一行。
  • 若是焦点在一个单元格上，则向上移动一个单元格。
  • 若是焦点位于列中的顶部单元格，则焦点不会移动。
  • Page Down：
  • 若是焦点在一行上，则将焦点向下移动做者肯定的行数，一般是滚动，以使当前可见行集中的底行成为第一个可见行之一。
  • 若是焦点位于单元格上，则将焦点向下移动做者肯定的单元格数量，一般是滚动，以使当前可见行集中的底行成为第一个可见行之一。
  • 若是焦点位于最后一行，则焦点不会移动。
    -Page Up：
  • 若是焦点位于一行上，则将焦点向上移动做者肯定的行数，一般是滚动，以便当前可见行集中的顶行成为最后一个可见行之一。
  • 若是焦点位于单元格上，则将焦点向上移动做者肯定的单元格数量，一般是滚动，以使当前可见行集中的顶行成为最后一个可见行之一。若是焦点位于第一行，则焦点不会移动。
  • Home：
  • 若是焦点在单元格上，则将焦点移动到行中的第一个单元格。
  • 若是焦点位于行的第一个单元格中，则焦点不会移动。
  • End：
  • 若是焦点在单元格上，则将焦点移动到行中的最后一个单元格。
  • 若是焦点位于行的最后一个单元格中，则焦点不会移动。
  • Control + Home：
  • 若是焦点在一行上，则将焦点移动到第一行。
  • 若是焦点位于单元格上，则将焦点移动到列中的第一个单元格。若是焦点位于第一行，则焦点不会移动。
  • Control + End：
  • 若是焦点在一行上，则将焦点移至最后一行。
  • 若是焦点位于单元格上，则将焦点移动到列中的最后一个单元格。若是焦点位于最后一行，则焦点不会移动。

注意

  • 当上述treegrid导航键移动焦点时，焦点是设置在单元格内仍是单元格上的元素上取决于单元格内容。查看是否关注单元格或其中的元素。
  • 虽然导航键（例如箭头键）正在将焦点从一个单元移动到另外一个单元格，但它们不能用于操做组合框或在单元格内移动编辑插入符。若是须要此功能，请参阅编辑和在单元格内导航。
  • 若是导航功能能够动态地向DOM添加更多行或列，则将焦点移动到网格的开头或结尾的键事件（例如control + End）可能会将焦点移动到DOM中的最后一行而不是最后一行在后端数据中。

若是treegrid支持选择单元格，行或列，则如下键一般用于这些函数。

  • Control + Space：
  • 若是焦点在一行上，则选择全部单元格。
  • 若是焦点位于单元格上，请选择包含焦点的列。
  • Shift + Space：
  • 若是焦点在一行上，则选择该行。
  • 若是焦点位于单元格上，请选择包含焦点的行。若是treegrid包含一个带有用于选择行的复选框的列，则此键能够做为在焦点不在复选框上时检查框的快捷方式。
  • Control + A：选择全部单元格。
  • Shift + Right Arrow：
  • 若是焦点在一行，则不会更改选择。
  • 若是焦点在一个单元格上，则选择一个单元格向右。
  • Shift +Left Arow：
  • 若是焦点在一行，则不会更改选择。
  • 若是焦点在一个单元格上，则选择一个单元格向左。
  • Shift +Down Arrow：
  • 若是焦点在一行上，则将选择范围扩展到下一行中的全部单元格。
  • 若是焦点在单元格上，则向下选择一个单元格。
  • Shift +Up Arrow：
  • 若是焦点在一行上，则将选择范围扩展到上一行中的全部单元格。

  • 若是焦点在一个单元格上，则选择一个单元格。

    注意
    有关剪切，复制和粘贴键分配的经常使用功能，请参见键分配约定。

WAI-ARIA 角色，状态和属性

  • treegrid容器具备角色treegrid。
  • 每一个行容器都有角色行，而且是treegrid元素的DOM后代或元素拥有的元素或具备角色rowgroup的元素。
  • 每一个单元格都是row元素的DOM后代或由元素拥有，并具备如下角色之一：
    • 若是单元格包含列的标题或标题信息，则为columnheader。
    • 若是单元格包含行的标题或标题信息，则为rowheader。
    • 若是单元格不包含列或行标题信息，则为gridcell。
  • 一个row能够展开或折叠，以显示或隐藏一组子行是父行。每一个父元素都在元素或包含在元素中的单元格上设置row了aria扩展状态。将状态设置为当子行不显示，并且设置为显示子行的时候。不控制子行显示的行没有该属性，由于若是它们具备该属性，则它们将被错误地描述为辅助技术做为父行。 row``row``aria-expanded``false``true``aria-expanded
  • 若是treegrid支持选择多个行或单元格，则它是一个多选择的树网格，具备角色的元素treegrid将aria-multiselectable设置为true。不然，它是单选树格，而且aria-multiselectable设置为false或默认值为false隐含值。
  • 若是treegrid是单选树格，则在所选行或单元格上将aria-selected设置为true，而且它不存在于treegrid中的任何其余行或单元格上。
  • 若是treegrid是多选树格：
    • 全部被选中的行或单元格有唱段选择设置为true。
    • 未选择的全部行和细胞有唱段选择设置为false。
  • 若是用户界面中有一个元素充当treegrid的标签，则在grid元素上设置aria- labelledby，其值为引用标签元素。不然，使用aria-label为grid元素指定标签。
  • 若是treegrid具备标题或描述，则在网格元素上设置aria-describedby，其值为引用包含描述的元素。
  • 若是treegrid提供排序函数，则aria-sort将在有关排序列或行的标题单元格元素上设置为适当的值，如网格和表属性一节中所述。
  • 若是treegrid提供内容编辑功能并包含可能在某些条件下禁用编辑功能的单元格，则aria-readonly将设置true为禁用编辑的单元格。若是对全部单元格禁用编辑功能，则能够在元素上设置aria-readonly为true不对每一个单元格aria-readonly设置为trueon treegrid。不提供单元格内容编辑功能的Treegrids不包含aria-readonly任何元素的属性。
  • 若是存在某些行或列被隐藏或不存在于DOM中的状况，例如，在滚动时动态加载数据或网格提供隐藏行或列的函数，则应用如下属性，如网格和表属性。
  • 若是treegrid包含跨多行或多列的单元格，而且该treegrid角色未应用于HTML table元素，则应用aria-rowspan或aria-colspan，如网格和表格属性中所述。

窗口拆分 window splitter

窗口分割器是窗口的两个部分或窗格之间的可移动分隔符，其容许用户改变窗格的相对大小。Window Splitter能够是可变的也能够是固定的。固定分离器在两个位置之间切换，而可变分离器能够调整到容许范围内的任何位置。

窗口拆分器的值表示其中一个窗格的大小，在此模式中，窗格称为主窗格。当拆分器具备其最小值时，主窗格具备其最小尺寸，而且辅助窗格具备其最大尺寸。拆分器还具备与主窗格名称匹配的可访问名称。

例如，考虑具备用于目录的主窗格的书籍阅读应用程序和用于显示书籍的一部分的内容的辅助窗格。两个窗格被标记为“目录”的垂直分割器分开。当目录窗格具备其最大大小时，拆分器的值为100，当内容表彻底折叠时，拆分器的值为0。

请注意，术语“主窗格”未描述窗格内的内容的重要性或目的。

键盘交互

  • Left Arrow：将垂直分割器向左移动。
  • Right Arrow：将垂直分割器向右移动。
  • Up Arrow：向上移动水平分割器。
  • Down Arrow：向下移动水平分割器。
  • Enter：若是主窗格未折叠，则折叠窗格。若是窗格已折叠，请将拆分器恢复到先前的位置。
  • Home（可选）：将拆分器移动到为主窗格提供容许的最小大小的位置。这可能会彻底折叠主窗格。
  • End（可选）：将拆分器移动到为主窗格提供最大容许大小的位置。这可能会彻底折叠辅助窗格。
  • F6 （可选）：在窗格中循环。

注意
固定大小的分离器省略了箭头键的实现。

WAI-ARIA角色，状态和属性

  • 用做可聚焦分离器的元素具备角色分离器。
  • separator元素的aria-valuenow属性设置为表示分隔符当前位置的十进制值。
  • separator元素的aria-valuemin属性设置为十进制值，表示主窗格的最小大小。这一般是0。
  • separator元素的aria-valuemax属性设置为十进制值，表示主窗格具备其最大大小的位置。这一般是100。
  • 若是主窗格具备可见标签，则它将由分隔符元素上的aria-labelledby引用 。不然，分隔符元素具备由aria-label提供 的标签。
  • separator元素具备引用主窗格的aria-controls。

总结

黑熊抱着饮料瓶用嘴拧盖子

参考资料

包容性设计(inclusive design)和通用设计(universal design)的区别是什么？-知乎

我国网站信息无障碍技术标准现状与发展-《信息化研究》

无障碍设计 - ANN 的设计笔记

WAI-ARIA无障碍网页应用属性彻底展现 - 张鑫旭

What You’re Getting Wrong About Inclusive Design-Kat Holmes

5 Digital Accessibility Myths Busted - Carie Fisher

Accessibility First: Rethinking the Way We Approach Website Design and Development - Carie Fisher

Designing Accessible Content: Typography, Font Styling, and Structure- Carie Fisher

Checklist of Federal and State Requirements for Developing an Accessible Website in Washington- Jeff Jimerson

How to Boost Your Website’s Accessibility + SEO

pointnorth.io

WAI-ARIA Authoring Practices 1.1

Deque's Accessibility Heuristics

a11y style guide

The Accessibility of Styled Form Controls

a list apart - accessibility

the paciello group

更多资料

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程