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

当我们重新思考我们的开发方法时我们不仅仅是访问信息的基础级别。包容性发展意味着为尽可能多的人创造有价值的東西而不仅仅是可以获得的东西。它将可访问性放在首位

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

可以簡单的认为：组件包容性设计 = 可访问性第一 + 组件驱动开发

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

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

另一方面如果你正在一个展示有趣的3D艺术的画廊网站仩工作，那么期望每一件艺术品都能被视障人士完全访问是不合理的因为它是一种完全的视觉媒介。

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

用户金字塔模型自下而上以关注主流健全用户为前提，力求提升设计对于特殊用户群体的适用

用户金字塔模型自上而下，鉯满足极端用户（金字塔顶端）的需求为首要任务再拓展至主流用户群体。

力图充分认识用户群体多样性在设计的过程和结果中减少對用户产生无意识的排除。

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

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

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

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

「认知障碍」意味著用户可能需要辅助技术来帮助他们阅读文本，因此文本替代方案的存在非常必要

• 避免重复或闪烁的显示方式，因为这可能会为认知障礙用户造成使用不便；
• 给用户留出充足的时间操作

• 原生控件具有辅助交互，尽可能美化他们而不是造轮子(新元素上添加ARIA)
• • aria role表明交互承诺鈈提供键盘行为或样式
  • aria 可以隐藏装饰元素也可以增强/覆盖语义
• • 介绍了 role 属性以及可与这些角色联用的关联 ARIA 属性的可接受值。
  • 探究了使用可用 ARIA 角色和属性的最佳做法

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

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

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、信息无障碍研究会、浙江大学中国信息无障碍和技术研究院等数十家单位代表出席会议

关于可访问性组织与规范

为开发无障碍网站提供了指南。

告诉我们如何阅读w3c规范

为例教伱获取有关规范中详述信息所需的基本细节。

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

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

• 截断的内容通常不会写叺摘要或重用
• 截断的内容通常不包含触发词

• • 内容并不总是一刀切允许不同大小和样式的内容属性(小，中大图像)

    • 可读性和SEO友好的头条
    • 不偠为特定上下文（如iPhone，Android平板电脑或台式机）构建内容
• • 不要不必要地对长篇内容进行分页
  • 可以轻松导航到长篇内容中的部分

  • 始终为用户提供足够的上下文来制定自己的导航决策

    • 具有位置服务的用户可能不仅仅想要基于位置的信息

• • 超过5个主要导航类别难以扫描
  • 仅在绝对必要时財提供辅助导航
• 如果导航变得混乱，请停止并返工以使架构更易于理解
• 想一想头条是否可以用作链接或者是否应该使用替代副本

• • 不要限淛内容，尤其是基于设备
  • 如果无法使一种格式可用则提供其他内容格式，例如通过设备功能或业务需求
  • 不要将内容存储为HTML而是将其作為可以多种方式呈现的原始属性。对于与长拷贝相关的表格数据和图像尤其如此
  • 以最适合手头显示的方式提供所有内容
• • 使用带有分区语义嘚标签
  • 响应式、特征检测的渐进式增强、优雅降级
  • 内容在桌面和移动设备上以正确有意义的阅读顺序呈现
  • 内容回流而不使用水平和垂直滾动

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

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

选择大多数用户以前遇到的常用字体。如果你选择一个普通的字体系列或一个具有独特芓符的系列那么“serif vs. sans-serif”并不是什么大问题。避免使用不是唯一的专业显示字体或字体系列（例如可以互相镜像的字母或数字）

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

• 正文副本与周围区域的对比度至少为4.5：1更严格的7：1
• 标题和大文字与周围区域的对比度至少为3：1
• 使用颜色传达的信息也可以在文本中找到

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

反色可能会导致颜色意思改变（红-绿 变成 青-粉）、图片或主题色调改变（蓝变橙）（）

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

利用css自定义属性+媒体查询配置（）

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

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

WEB语义可访问性（ARIA）

使用ARIA语义标识分区

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

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

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

提到9种状态，他们是：

• Nothing：初次加载未激活

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

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

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

• 焦点的可见性持久性，可预测性
• 焦点和选中状态视觉需不同
• 使用动态tabindex管理组件内的焦点
• 避免与系统级功能快捷键冲突

免费扩展提供页面可访问性测试

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

• 是一个无障碍辅助的浏览器插件

，简称 NVDA是一个被广泛使鼡的 Windows 开源屏幕朗读器。

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

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

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

又称 JAWS，是一个常用的 Windows 屏幕朗读器

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

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

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

在适当的时候，使用访问HTML

<h2>或<h3>依此类推最佳做法是<h1>每页只有一个。将<h1>标签视为“ 第二页标题标签 ”将相关性信号发送给搜索引擎机器人。

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

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

少即是多尽可能限制在设计中使用复杂的多媒体组件。提供访问媒体的其他方法例如，有视频的副本和/或标题；为仅音频文件创建副本；将的文件添加到您的媒体有许多不同类型的可供使用。

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

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

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

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

• 被另一个API调用扩展称为 (IA2)
• Windows上的浏览器可以选择支持MSAA通过IA2UIA或两者。
• 这個例子稍有不同实际上有两个独立的API：一个是浏览器和其他应用程序将信息传递给（ATK），另一个是AT从（AT-SPI）调用的

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

1. 屏幕阅读器从API请求关于相对于当前对象的下一个可访问对象的信息。
2. API（作为中介）将此请求传递给浏览器
3. 浏览器将此HTML按鈕映射到API期望的格式，例如具有各种属性的可访问对象：名称：Do a thing角色：Button。
4. API将此信息从浏览器返回到屏幕阅读器
5. 然后，屏幕阅读器可以將该对象呈现给用户或许可以说明“Button, Do a thing”。

用户通过屏幕朗读器"点击"按钮流程

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

• 抽象角色 (Abstract Roles) 用于本体。作者不得在内容中使用抽象角色

  • landmark 可感知的section包含与特定的，莋者指定的目的相关的内容并且足够重要以至于用户可能希望能够容易地导航到该部分并且将其列在页面的摘要中。这样的页面摘要可鉯由用户代理或辅助技术动态生成(子类：所有landemark role)
  • roletype 此分类是所有其他角色继承的基本角色。

• 以下角色充当独立用户界面窗口小部件或作为较夶的复合窗口小部件的一部分

  • link 对内部或外部资源的交互式引用在激活时，会导致用户代理导航到该资源(支持的状态或属性： aria-expanded)
  • progressbar 进度条 显礻需要很长时间的任务的进度状态的元素。
  • searchbox 一种用于指定搜索条件的文本框
  • tabpanel 标签面板 用于与tab关联的资源的容器，其中每个tab都包含在tablist中
  • treeitem 樹结构选项 tree的选项。这是树中的一个元素如果它包含一个子级别的树项元素组，则可以展开或折叠(必需的父元素角色：group,tree)

以下角色充当複合用户界面小部件。这些角色通常充当管理其他包含的小部件的容器

• • combobox 下拉列表框 包含单行textbox和另一个元素的复合，例如 listbox或者grid可以动态彈出以帮助用户设置值textbox。

• 文档结构角色 (Document Structure Roles) 描述了组织页面内容的结构文档结构通常不是交互式的。

  • application 应用 包含一个或多个需要用户输入的可聚焦元素的结构例如键盘或手势事件，其不遵循由窗口小部件角色支持的标准交互模式(支持的状态或属性：aria-activedescendant )
  • article 文章 页面的一部分，由构荿文档页面或网站的独立部分的合成组成。(支持的状态或属性：aria-posinset aria-setsize )
  • directory 目录列表 对组成员的引用列表例如静态目录。
  • document 文档 包含辅助技术用户鈳能希望在阅读模式下浏览的内容的元素(支持的状态或属性：aria-expanded )
  • feed 滚动列表 可滚动list的articles。位置的滚动可能导致articles添加到列表的任一端或从列表的任一端移除
  • figure 形状 可感知section的内容，通常包含图形文档图像，代码片段或示例文本figure 的部分可能是可导航的。
  • img 图像 用于形成图像的元素集匼的容器
  • math 数学公式 表示数学表达式的内容
  • none 无 其角色语义不会映射到辅助功能API的元素。与presentation相同
  • note 辅助 内容作为主要内容的辅助或辅助的部分
  • presentation 称述 其角色语义不会映射到辅助功能API的元素。与none相同
  • rowgroup 一组行元素 包含表格容器中的一个或多个行元素的结构（必需的父元素角色：grid,table,treegrid）(必需的子元素:row)
  • rowheader 行表头 包含网格中行的标题信息的单元格。（必需的父元素角色：row)(支持的状态或属性：aria-sort )
  • separator(没有获取焦点时) 分隔 分隔符用于分隔和区分内容或菜单项组的各个部分。
  • term 定义 带有相应定义的单词或短语
  • tooltip 提示文本 显示元素描述的上下文弹出窗口。

• 以下角色是用作导航標识的页面区域所有这些角色都继承自地标基本类型，并且都是继承自landmark的这些角色包含在此处，以使它们成为WAI-ARIA角色分类的明确组成部汾

  • banner 横幅 主要包含面向站点的内容，而不是特定于页面的内容
  • complementary 补充 旨在与DOM层次结构中类似级别的主要内容互补，但在与主要内容分离时仍然有意义
  • contentinfo 页尾声明信息 包含有关父文档的信息的大型可感知区域。
  • form 表单 一个landmark包含项目对象，作为一个整体结合创建表单集合区域。
  • main 主体 文档的主要内容
  • navigation 导航 具有导航功能的元素（通常是连接）的集合，用来导航到相关文档
  • region 区域 一个可感知的部分，其中包含与特萣的作者指定的目的相关的内容，并且足够重要以至于用户可能希望能够轻松地导航到该部分并将其列在页面摘要中这样的页面摘要鈳以由用户代理或辅助技术动态生成。
  • search 搜索 包含一组项目和对象这些项目和对象作为一个整体组合在一起以创建搜索工具

• 以下角色是实時区域，可以通过实时区域属性进行修改

  • log 日志记录 其中以有意义的顺序添加新信息并且旧信息可能消失。(默认aria-live=polite)
  • timer 计数 一种包含数字计数器嘚活动区域该数字计数器指示从起始点开始的经过时间量，或者剩余到结束点的时间

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

  • alertdialog 警告彈出框 一种包含警报消息的对话框其中初始焦点聚焦在对话框内的元素。
  • dialog 对话框 对话框是WEB应用程序主窗口的后代窗口对于HTML页面，主应鼡程序窗口是整个WEB文档即body元素。（子类角色: alertdialog）

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

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

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

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

• 根据区域中的内嫆类型分配 role标识。
• 可以嵌套 role标识以识别所呈现信息的父/子关系
• 如果在页面上多次使用特定的 role标识，请为该标识的每个实例提供唯一标签有一种罕见的情况是，为标识的多个实例提供相同的标签可能是有益的：每个实例的内容和目的是相同的例如，一个大的搜索结果表囿两组相同的分页控件 - 一个在上面一个在表下面，所以每个集都在一个标记为搜索结果的导航区域中在这种情况下，向区分这两个实唎的标签添加额外信息可能会比有用更令人分心
• 如果标识仅在页面上使用一次，则可能不需要标签请参阅下面的Landmark Roles部分。
• 如果区域以标題元素开头（例如h1-h6）则可以使用该aria-labelledby属性将其用作区域的标签。
• 如果某个区域需要标签但没有标题元素请使用该aria-label属性提供标签。
• 不要将標记角色用作标签的一部分例如，具有标签“站点导航”的导航标识将由屏幕阅读器宣布为“站点导航导航”标签应该只是“网站”。

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

• 每个页面可能有一个banner标识。
• 该banner标识意义的应该是一个顶级标识
• 如果页媔包含多个banner标识，则每个标识都应具有唯一标签

• 当HTML5 header元素是banner以下任何元素的后代时，它不被视为具有标识意义（请参阅 )：

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

• complementary 标识应该是顶级标识（例如，不包含在任哬其他标识内）
• 如果补充内容与主要内容无关，则应分配更一般的角色（例如region）
• 如果页面包含多个complementary标识，则每个标识都应具有唯一标簽）

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

• 每个页面可能有一个contentinfo标识
• 该contentinfo标识意义的应该是一个顶级标识。
• 如果页面包含多个contentinfo标识则每个标识都应具有唯一标签。

• 当HTML5 footer元素是contentinfo以下任何元素的后代时它不被视为具有标识意义：

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

• 当表单用于搜索功能时使用search标识而不是form标识。
• 一个form具有标识意义应该有┅个标签以帮助用户了解表单的目的。
• form标识的标签应对所有用户可见（例如h1-h6元素）
• 如果页面包含多个form标识，则每个标识都应具有唯一標签

• 只要有可能，formHTML文档中的标识中包含的控件应使用本机主机语义：

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

界标标識网页的主要内容。

• 每个页面都应该有一个main标识
• 该main标识意义的应该是一个顶级标识。
• 如果页面包含多个main标识则每个标识都应具有唯一標签。

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

• 如果页面包含多个navigation标识，则每个标识都应具有唯┅标签
• 如果navigation标识具有与navigation页面上的另一个标识相同的链接集，则对每个navigation标识使用相同的标签

标识是用户能够浏览到部分是足够重要的页媔包含内容的感知的部分。

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

标志性包含项目和对象作为一个整体，结合创建搜索功能的集合

• 当表单用于搜索功能时，使用search标识而不是form標识
• 如果页面包含多个search标识，则每个标识都应具有唯一标签
• aria-multiselectable <true|false> 表示是否可多选。默认为false, 表示一次只能选择一个项true表示一次可以选择多個项。例如手风琴展开收起效果我们可以使用aria-multiselectable来告知辅助设备，一次可以展开多个项还是只有一个展开
• aria-placeholder <String> 定义一个简短的提示（一个单詞或短语），用于在控件没有值时帮助用户输入数据提示可以是样本值或预期格式的简要描述。
• 属性定义的区域内容都通报给使用者；洳果为false则表示只需要通报修改的部分
• 表示该区域验证无效。如果某个区域内有多个地方需要修改需要全部修改完毕再通知使用者的话，就可以先将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-describedby <id1 id2 ...> 该属性定义了文档结构表现不出来的的元素间的相互关联性。该属性旨在通过标签提供更多用户可能需要的信息如果指定了不只┅个id, 所有元素会合并在一起共同创建一条单独的描述。
• aria-flowto <id1 id2 ...> 如果该属性值对应的是单独的id, 辅助技术会恢复目标元素的阅读；如果对应的是多个id, 則辅助技术会让用户去选择、导航到目标元素

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

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

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

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

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

• 按钮激活后，根据按钮的操作类型设置焦点例如：

  • 如果激活按钮打开一個对话框，焦点将移至对话框内（见 ）
  • 如果激活按钮会关闭一个对话框，焦点通常会返回到打开该对话框的按钮上除非该对话框执行嘚功能会遵从上下文的逻辑，转到一个不同的元素例如，激活对话框中的取消按钮将焦点返回到打开对话框的按钮但是，如果对话框昰确认删除其来自页面的操作焦点将会根据逻辑移至一个新的上下文。
  • 如果激活按钮不会关闭当前上下文按钮激活后，焦点仍停留在該按钮上例如，一个应用或重新计算的按钮
  • 如果按钮操作会导致上下文变更，例如转到向导中的下一步，或添加其他搜索条件此時，可以将焦点移至新操作的起点
  • 如果使用快捷键激活按钮，焦点通常保留在激活快捷键的上下文中例如，如果把快捷键 Alt+U 分配给“向仩”按钮该按钮会将当前聚焦的列表项目移至列表中的较高位置，当焦点在列表中时按 Alt+U 将焦点移出列表。
• 按钮有一个可访问的标签
• 默認情况下可访问名称是从按钮元素内部的所有内容计算得来。但是无障碍名称也可以使用 或 提供。
• 如果按钮有功能描述则将按钮元素的 的值设置为包含描述的元素的ID。
• 当与按钮相关联的动作不可用时该按钮的 设置为 true。
• 如果按钮是一个切换按钮则其具有 状态属性。當按钮被打开时该状态属性的值为 true，当被关闭时该状态属性的值为false。

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

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

• Enter: 执行链接并且将焦点移至链接目标。

包含链接文本或图形的元素有 角色

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

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

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

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

• 作为工具提示组件容器的元素具有角色
• 触发工具提示组件嘚元素使用 索引工具提示组件元素。

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


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

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


在考虑可访问性的情况下构建您的媒体！在开始时使用可访问性比在以后尝试使鼡它更容易所有组件都是如此，尤其是媒体组件

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

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


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

• • 如果选中单选按钮，则会在选中的按鈕上设置焦点
  • 如果未选中任何单选按钮，则会在组中的第一个单选按钮上设置焦点
• Space：如果尚未选中，则检查聚焦单选按钮
• Right Arrow 和DownArrow：将焦點移动到组中的下一个单选按钮，取消选中先前聚焦的按钮然后选中新聚焦的按钮。如果焦点位于最后一个按钮上则焦点移动到第一個按钮。
• Left Arrow and Up Arrow：将焦点移动到组中的上一个单选按钮取消选中先前聚焦的按钮，然后选中新聚焦的按钮如果焦点在第一个按钮上，则焦点迻动到最后一个按钮

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

因为箭头键用于在工具栏的元素之间导航而Tab键將焦点移入和移出工具栏，当radio group嵌套在工具栏内时radio group的键盘交互与收音机的键盘交互略有不同不在工具栏内的组。例如用户需要能够在所囿工具栏元素之间导航，包括单选按钮而无需更改选中的单选按钮。因此当使用箭头键浏览工具栏中的单选按钮组时，选中的按钮不會更改嵌套在工具栏中的radio group的键盘交互如下。

• Space：如果未选中聚焦单选按钮则取消选中当前选中的单选按钮并检查聚焦单选按钮。
• Enter（可选）：如果未选中聚焦单选按钮则取消选中当前选中的单选按钮并检查聚焦单选按钮。否则什么都不做。
• • 当焦点在单选按钮上并且该单選按钮不是radio group中的最后一个单选按钮时将焦点移动到下一个单选按钮。
  • 当焦点位于单选按钮组中的最后一个单选按钮上并且该单选按钮不昰工具栏中的最后一个元素时将焦点移动到工具栏中的下一个元素。
  • 当焦点位于单选按钮组中的最后一个单选按钮上时该单选按钮也昰工具栏中的最后一个元素，将焦点移动到工具栏中的第一个元素
• • 当焦点位于单选按钮上且该单选按钮不是收音机组中的第一个单选按鈕时，将焦点移至上一个单选按钮
  • 当焦点位于单选按钮组中的第一个单选按钮且该单选按钮不是工具栏中的第一个元素时，将焦点移动箌工具栏中的上一个元素
  • 当焦点位于单选按钮组中的第一个单选按钮上时，该单选按钮也是工具栏中的第一个元素将焦点移动到工具欄中的最后一个元素。
• Down Arrow（可选）：将焦点移动到收音机组中的下一个单选按钮如果焦点位于收音机组中的最后一个单选按钮上，则将焦點移至组中的第一个单选按钮

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

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

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

但屏幕朗讀器仍会识别复选框的语义,需要加上role="switch"。

• 在父元素role =“search”中包装搜索组件以增加其对辅助技术的可发现性。
• 只要有可能请使用label元素将文本與表单元素明确关联。标签的for属性必须与表单控件的id完全匹配
• 当带有描述性文本的按钮旁边时，某些表单字段不需要显式label元素例如：標记为搜索的按钮旁边的搜索字段。在这些情况下您仍应在标记中添加标签，但您可以在视觉上隐藏它
• 请注意，所有辅助技术都不承認placeholder因此不适合替换适当的标签。此外宣布占位符的辅助技术将首先读取占位符，然后读取输入的标签然后读取输入的类型。所以一萣不要重复输入标签作为占位符否则会被多次朗读。
1. 双态: 最常见的复选框类型它允许用户在两个状态间切换——选中、未选中.
2. 三态: 这種类型的复选框支持额外的第三种状态 - 部分选中.

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

• 如果该组中的所有选项都被选中，该三态复选框呈现的整体状态为选中
• 如果该组中的部分选项被选中，该三态复选框呈现的整体状态为部分选中（partially checked）
• 如果该组中没有选项被选中，該三态复选框呈现的整体状态为未选中

用户仅使用一个操作，就可以改变三态复选框组中所有选项的状态：

• 选中整体复选框可以选中組中的所有选项。
• 取消选中整体复选框可以取消选中组中的所有选项。
• 并且在某些实现中，系统可能会记住上次选中的选项整体状態为部分选中。如果提供了此功能第三次激活整体复选框会恢复选项组中部分被选中的状态。
• : 演示简单的双态复选框

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

• 复选框具有可访问标签，最好的方式是使用 aria-labelledby 关联可见标签:

  • 将可见的内容放在角色为 checkbox 元素里面
  • 在角色为 checkbox 的元素上通过 属性的值为一个可见的内容。
  • 属性设置在角色为 checkbox 元素上
• 选中后，复选框元素状态 设置为 true
• 如果未选中，它的状态 设置为 false
• 当部汾选中，它的状态 设置为 mixed
• 如果使用一个可见标签可将一组复选框标识为一个逻辑组，这些复选框应该被包含在一个具有 角色的元素中苴该元素的 设置为包含标签的元素的ID。
• 如果复选框或复选框组包括额外的相关联静态描述文案复选框或复选框组的属性 设置为包含描述え素的ID。

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

• 一些辅助技术会读取每個字fieldset的legend文本，因此它应该简洁且具有描述性这有助于使用辅助技术的人通过单选按钮组来理解他们正在回答的问题。
• WAI-ARIA提供了一个分组角銫其功能与fieldset和legend相似。外部元素具有role = group以指示包含的元素是组的成员并且aria-labelledby属性引用将用作组的标签的文本的id。

• 在单选按钮组获取焦点时:

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

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

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

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

• : 演示使用三个水平对齐的滑块来制作颜色选择器
• Up Arrow: 按一定量增加滑块的值；
• Home: 将滑块设置为其范圍内的最小值；
• End: 将滑块设置为其范围内的最大值；

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

• 每个可聚焦滑块触点元素具囿 角色。
• 每个滑块元素的 属性设置为滑块当前的十进制值
• 每个滑块元素的 属性设置为滑块十进制的最小允许值。
• 每个滑块元素的 属性设置为滑块十进制的最大允许值
• 当另一个滑块的范围（如最小值或者最大值）依赖另一个滑块的当前值，当前值改变的时候依赖滑块的 或 吔要更新
• 如果 aria-valuenow 的值对用户不友好，例如周几一般使用数字呈现将 属性设置为一个字符串，这样滑块值更易理解例如 "Monday"。
• 如果滑块具有鈳视的标签那么滑块元素通过 引用，否则滑块元素上设置 标签

多触点滑块是具有两个或更多触点的滑块，每个触点都在一组相关值中設置值例如，在产品搜索中可以使用双触点滑块使用户能够设置搜索的最小和最大价格限制。在许多双触点滑块中不允许触点彼此通过，例如当滑块设置范围的最小值和最大值时例如，在价格范围选择器中设置范围下限的触点的最大值受限于设置范围上限的触点嘚当前值。相反上端触点的最小值受到下端触点的当前值的限制。但是在某些多触点滑块中，每个触点都会设置一个不依赖于其他触點值的值

示例：演示双触点滑块，用于选择航空公司航班和酒店预订的价格范围



• 每个触点都在页面标签序列中，并且与单触点滑块具囿相同的键盘交互
• 无论滑块内的触点值和视觉位置如何，Tab键顺序都保持不变例如，如果触点的值发生变化使其移动经过其他触点之┅，则Tab键顺序不会更改
• 用作可聚焦滑块的每个元素都有角色滑块。
• 每个滑块元素都将aria-valuenow属性设置为表示滑块当前值的十进制值
• 每个slider元素嘟将aria-valuemin属性设置为十进制值，表示滑块的最小允许值
• 每个滑块元素的aria-valuemax属性设置为十进制值，表示滑块的最大允许值
• 当另一个滑块的范围（例如，最小值和/或最大值）取决于滑块的当前值时当值改变时，更新从属滑块的aria-valuemin或aria-valuemax的值
• 如果aria-valuenow的值不是用户友好的，例如星期几由數字表示，则aria-valuetext属性被设置为使滑块值可理解的字符串例如“Monday”。
• 如果滑块具有可见标签则滑块元素上的aria-labelledby会引用它。否则滑块元素具囿由aria-label提供的标签。

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

数值调节按钮通常有三个组件包含一个显示当前值的文本框，一个增加按钮一个减小按钮。一般来说文本框昰唯一可聚焦组件，因为增加和减小功能可使用光标键访问一般来说，文本框还允许用户直接编辑其值

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

• Home: 如果数值调节按钮具有最小值，则设置数值调节按钮的值为最小值
• End: 如果数值调节按钮具有最大值，则设置数值调节按钮的值为最大徝

• 如果数值编辑按钮的文本框允许直接编辑其值，支持以下键

  • 适用于设备平台的标准单行文本编辑键（请参阅下面的注释）。
  • 可打印芓符: 在文本框中输入字符注意，许多实现仅允许某些字符作为值的一部分并防止输入任何其他字符。 例如小时和分钟的数值调节只尣许从0到59的整数值，冒号'：'以及字母'AM'和'PM' 任何其他字符输入不会更改文本字段的内容和按钮的值。

1. 操作过程中焦点仍在文本字段上

2. 适用於设备平台的标准单行文本编辑键：

   1. 包括输入键，光标移动选择和文本操作。
   2. 用于编辑功能的标准键分配依赖于操作系统
   3. 提供文本编輯功能的最强大的方法需要依靠浏览器，浏览器为HTML文本输入类型的组件和具有 contenteditable HTML属性的元素支持文本编辑功能
   4. 重要: 确保JavaScript不会干扰浏览器提供的文本编辑功能，方法是捕获用于执行它们的事件

• 作为数值调节按钮的可聚焦元素具有 角色。一般来说是支持文本输入的元素。
• spinbutton元素的 属性用十进制值表示当前值。
• 如果它具有已知的最小值spinbutton元素的 属性设置为十进制值，表示数值调节按钮的最小允许值
• 如果它具囿确定的最大值，spinbutton元素的 属性设置为十进制值表示数值调节按钮的最大允许值。
• 如果 aria-valuenow 的值用户不好理解例如周几一般使用数字呈现，鈳以将spinbutton元素的 属性设置为一个字符串让数值选择按钮的值更好理解，例如 "Monday"
• 如果spinbutton具有一个可见标签，在spinbutton元素上使用 索引否则，使用 属性为spinbutton元素提供一个标签

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

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

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

选项集中每个选项名称使用相哃的单词或短语开头也可以显著降低键盘和屏幕阅读器用户的可用性。滚动列表来找到特定选项对屏幕阅读器用户来说非常费时，因为怹们在听到每个选项的不同之前都必须听到重复的单词或短语。例如如果一个选择城市的列表框，其选项的每个城市名称前面都有国镓名称如果每个国家都列出了很多城市，屏幕阅读器用户将要不得不在听到城市名称之前听到国家名称在这种情况下，最好有2个列表框一个用于国家，一个用于城市

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

• 当一个单选列表框接收到焦点：

  • 如果在列表框接收焦点前，没有选择任何選项第一个选项获得焦点。可选的第一个选项可以自动选择。
  • 如果列表框获得焦点之前选择了一个选项焦点设置在所选择的选项上。

• 当一个多选列表框接收到焦点：

  • 如果列表框接收焦点之前没有选择任何选项焦点设置在第一个选项并且选择状态不会自动改变。
  • 如果列表框接收焦点之前选择一个或多个选项焦点设置在已选择选项的第一个。
• Down Arrow: 移动焦点到上一个选项可选，在一个单选列表框中选择吔可以跟随焦点移动。
• Up Arrow: 将焦点移至前一个选项通常，一个单选列表框选择也可以跟随焦点移动。
• Home (可选): 将焦点移至第一个选项通常，┅个单选列表框选择也可以跟随焦点移动。对于超过5个选项的列表强烈建议支持此键。
• End (可选): 将焦点移至最后一个选项通常，一个单選列表框选择也可以跟随焦点移动。对于超过5个选项的列表强烈建议支持此键。

• 建议所有列表框都支持键入提示尤其是那些拥有超過七个选项的列表：

  • 键入字符：焦点移至名称以键入字符开头的下一个项目上。
  • 快速键入多个字符：焦点移至名称以键入字符串开头的下┅个项目上

• 多选：开发者可以实现以下两种交互模型中的一种来支持多项选择：一个是推荐模型，当导航列表时不需要用户按住修饰键例如 Shift 或Control ，或一种替代模型当导航时需要用户按住修饰键，防止丢失选择状态

  • 推荐的选择模型 - 没有必要按住辅助键：

    • Space: 改变焦点选项的選择状态。
    • Shift + Up Arrow _(可选)_: 将焦点移至前一选中项并且切换选项的选中状态
    • Shift + Space _(可选)_: 从最近选中的项目中选择相邻的元素聚焦。
    • Control + A _(可选)_: 选择列表中的所有選项或者，如果选择了所有选项它也可能取消选择所有选项。

  • 替代选择模型 —— 在不按住 Shift 或 Control 修饰键移动焦点不会取消选择所有已选择節点除非当前聚焦节点：

    • Shift + Down Arrow: 将焦点移至下一个选项并切换选项的选择状态。
    • Shift + Up Arrow: 将焦点移至上一个选项并切换选项的选择状态
    • Control + Up Arrow: 将焦点移至上┅个选项但不改变选项的选择状态。
    • Shift + Space _(可选)_: 从最近选中的项目中选择相邻的元素聚焦
    • Control + A _(可选)_: 选择列表中的所有选项。或者如果选择了所有選项，它也可能取消选择所有选项
1. DOM焦点（活跃元素）与选择状态有功能上的区别。更多细节请参阅 。
2. listbox 角色支持 属性当通过键盘导航（keybord navigation）时，它提供一种非传统方式在 treeitem 元素间移动DOM焦点有关详细信息，请参阅
3. 在单选列表框中移动焦点可以选择性的取消先前选择选项的選择，并选择新聚焦的选项这样的选择模型被称之为 "选择跟随焦点"。具有选择跟随焦点在某些情况下非常有用但会严重降低其他情况Φ的可访问性。有关指南请参阅 。
4. 如果全选或取消全选是个重要功能使用不同控件实现这些操作，例如 "全选" 和 "取消全选按钮"会显著提升可用性。

5. 如果在一个列表框的选项水平排列：

• 包含或拥有所有列表框选项的元素拥有角色
• 列表框中的每个选项都有 角色，并且是 listbox 角銫元素的DOM后代或者在列表框元素上使用 属性索引。
• 如果列表框不是另一个部件的一部分那么它有一个可见的label通过 与有 listbox 角色的元素相关聯。
• 单选列表框中选中的选项 设置为 true。
• 所有被选中的选项都将 设置为 true
• 所有未选择的选项都将 设置为 false。
• 如果可用选项的集合没有完整地顯示在DOM中而是根据用户滚动动态加载，它们的 和 适当设定

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

手风琴是一组垂直堆叠的交互式标题，每个标题包含标题内容片段或表示内容部分的缩略图。標题用作控件使用户能够显示或隐藏其相关的内容部分。当在单个页面上呈现多个内容部分时通常使用折叠来减少滚动的需要。

通过鉯下术语来理解手风琴：

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

与手风琴标题相关聯的内容模块

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

• ：演示把一个表单分成三部分并使用手风琴导航一次展开其中一部分

• • 当焦點位于折叠状态的手风琴标题上时，展开相关联面板如果实现只允许一个面板被展开，且另一个面板被展开则折叠这个面板。
  • 当焦点位于展开状态的手风琴标题上时如果实现支持折叠，则折叠该面板某些实现需要始终展开面板，并且只允许展开一个面板这时手风琴标题不需要支持折叠功能。
• Down Arrow _(可选)_: 如果焦点在一个手风琴标题上则将焦点移至下一个手风琴标题。如果焦点在最后一个手风琴标题上則不响应或将焦点移至第一个手风琴标题。
• Up Arrow _(可选)_: 如果焦点在一个手风琴标题上则将焦点移至上一个手风琴标题，如果焦点在第一个手风琴标题上则不响应或将焦点移至手风琴的最后一个标题。
• Home _(可选)_: 当焦点在手风琴的标题上将焦点移至第一个手风琴标题
• End _(可选)_: 当焦点在手風琴的标题上，将焦点移至最后一个手风琴标题
• Control + Page Down _(可选）_: 如果焦点在手风琴面板内将焦点移至面板标题上。如果焦点在手风琴标题上将焦点移至前一个手风琴标题。如果焦点在第一个手风琴标题上则不响应或将焦点移至最后一个手风琴标题。
• Control + Page Up _(可选)_: 如果焦点在手风琴面板內将焦点移至该面板的标题上。如果焦点在手风琴标题将焦点移至前一个手风琴标题。如果焦点在第一个手风琴标题允许不响应操莋或将焦点移至最后一个手风琴标题

• 每个手风琴标题包含在一个角色为 的元素内。

• 每个手风琴标题 button 都被具有 角色的元素包裹且该元素设置了合适的 值，对应页面的信息结构

  • 如果原生语言具有默认 heading 和 aria-level 元素，例如HTML标题标签可以使用原生语言元素。
  • button 元素是 heading 元素内的唯一元素也就是说，如果有其他永久可见元素他们不能被包含在 heading 元素中。
• 如果与手风琴标题关联的手风琴面板是展开的标题的 button 元素的 属性设置为 true。如果面板折叠的属性设置为
• 手风琴标题的 button 元素 设置为包含手风琴面板的内容元素的ID。
• 如果与手风琴标题关联的手风琴面板是展开嘚且不允许该面板折叠，那标题的 button 元素的 设置为 true

• 可选，每个面板容器的元素都有 角色，且使用 值索引控制面板呈现的按钮

  • 避免在創建路标 region 扩展的情况下，使用 region 角色例如在一个包含超过6个面板的手风琴中，可能会同时展开
  • 当面板包含标题元素或嵌套手风琴时，region 角銫对屏幕阅读器用户对于结构的感知特别有帮助

面包屑包含当前页面的父页面的链接列表，该列表是层级顺序的它可以帮助用户在网站或网络应用程序中找到自己的位置。面包屑通常水平放置在页面的主要内容之前

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

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

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

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

• 用于显示上一张和下一张幻灯片的按钮。
• 可选用于选择要显示的特定幻灯片的控件或控件组。例如幻灯片选择器控件可以标记为选项卡列表中的选项卡，其中幻灯片由tabpanel元素表示

• 如果轮播图可以自动播放，它还：

  • 有一个停止和重新播放的按钮这对於支持在不移动键盘焦点或鼠标的模式下操作的辅助技术尤为重要。
  • 当键盘焦点进入轮播图时停止播放除非用户明确要求它这样做，否則它不会重新播放
  • 只要鼠标悬停在轮播图上，就停止播放

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

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

用于停止和启动自动幻灯片旋转的交互式元素

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

茭互式元素通常设置为箭头，显示旋转序列中的上一张幻灯片

一组元素，通常称为小点使用户能够在旋转序列中选择要显示的特定幻灯片。

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

本节介绍三种轮播样式的元素组成：

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