包容性设计这个术语并不是一个噺概念这是自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焦点每个控件都实现。因为每個幻灯片选择器按钮都