摘要：可以简单的认为组件包容性设计可访问性第一组件驱动开发包容性设计是一种设计过程，还有很多的设计过程，没有对错，按需选择。包容性设计力图充分认识用户群体多样性，在设计的过程和结果中减少对用户产生无意识的排除。
前言
包容性设计这个术语并不是一个新概念。这是自2005年以来一直存在的一个短语。它被定义为“尽可能多的人可以访问和使用的主流产品/服务的设计，而不需要特殊的适应或专门的设计“。
当我们重新思考我们的开发方法时，我们不仅仅是访问信息的基础级别。包容性发展意味着为尽可能多的人创造有价值的东西，而不仅仅是可以获得的东西。它将可访问性放在首位。
海登·皮克林（Heydon Pickering）用他的“ 包容性设计模式 ”（Inclusive Design Patterns）中的这句话总结了它：
通过选择我们认为普通用户可以阅读的字体，我们会有意识地疏远我们的一部分用户。相反，通过选择适合那些努力阅读的人的字体，我们得出了一个适合每个人的选择。这是一种高效，有效的包容性设计。
可以简单的认为：组件包容性设计 = 可访问性第一 + 组件驱动开发
包容性设计是一种设计过程，还有很多的设计过程，没有对错，按需选择。
还有，现实点。“100%可访问性”是一个无法实现的理想-你总是会遇到某种边缘情况，导致某个用户发现某些内容难以使用-但你应该尽你所能去做。如果您计划包含一个使用WebGL制作的时髦的3D饼图，您可能希望包括一个数据表，作为数据的可访问的替代表示。或者，您可能只需要包含表并去掉3D饼图-每个人都可以访问该表，编写代码更快，CPU密集型更少，维护也更容易。面向用户设计另一方面，如果你正在一个展示有趣的3D艺术的画廊网站上工作，那么期望每一件艺术品都能被视障人士完全访问是不合理的，因为它是一种完全的视觉媒介。
( 上图为用户金字塔模型 & 包容性设计立方体模型 )
设计过程名词解释：
通用/共用性设计 (universal design)
用户金字塔模型自下而上，以关注主流健全用户为前提，力求提升设计对于特殊用户群体的适用。
无障碍设计 (barrier-free design)
用户金字塔模型自上而下，以满足极端用户（金字塔顶端）的需求为首要任务，再拓展至主流用户群体。
包容性设计 (inclusive design)
力图充分认识用户群体多样性，在设计的过程和结果中减少对用户产生无意识的排除。
WEB中的无障碍访问视觉无障碍设计
确保文字、可交互控件和背景的对比度，满足最低标准。
别只用颜色传达信息，让文字字号可调。
确保界面上所有的控件都可借助辅助技术使用，如屏幕阅读器，放大镜和盲文显示器。 这就意味着必须让 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. 可访问的网站和应用程序简单或丑陋
有很多漂亮且易于访问的网站，包括（但不限于）：
24 ways
Chase Bank
Deque Systems
Funka
Indiana University
Jiffy Lube
National Oceanic and Atmospheric Administration (NOAA)
The White House
University of Washington
U.S. WEB Design System
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 检查表提供了一些概览：
Wuchang 提供的 WCAG 检查表（WCAG checklist from Wuhcag）
WebAIM 提供的 WCAG 检查表（WCAG checklist from WebAIM）
A11Y Project 提供的检查表（Checklist from The A11Y Project）
WEB包容性设计要素 信息结构与内容
慎用截断
截断的内容通常不会写入摘要或重用
截断的内容通常不包含触发词
永远不要截断头条新闻
始终提供长拷贝的摘要
需要时提供替代副本
构建内容系统
内容并不总是一刀切，允许不同大小和样式的内容属性(小，中，大图像)
可读性和SEO友好的头条
不要为特定上下文（如iPhone，Android，平板电脑或台式机）构建内容
内容应易于导航
不要不必要地对长篇内容进行分页
可以轻松导航到长篇内容中的部分
始终为用户提供足够的上下文来制定自己的导航决策
具有位置服务的用户可能不仅仅想要基于位置的信息
提供大量的触发词
保持导航整洁
超过5个主要导航类别难以扫描
仅在绝对必要时才提供辅助导航
尽量避免超过三级导航
如果导航变得混乱，请停止并返工以使架构更易于理解
想一想头条是否可以用作链接，或者是否应该使用替代副本
内容应该可用
不要限制内容，尤其是基于设备
如果无法使一种格式可用，则提供其他内容格式，例如通过设备功能或业务需求
不要将内容存储为HTML，而是将其作为可以多种方式呈现的原始属性。对于与长拷贝相关的表格数据和图像尤其如此
以最适合手头显示的方式提供所有内容
开发注意事项
使用带有分区语义的标签 MDN 的 HTML 元素参照（MDN HTML elements reference）
响应式、特征检测的渐进式增强、优雅降级
内容在桌面和移动设备上以正确，有意义的阅读顺序呈现
内容回流而不使用水平和垂直滚动
使文字可读为视频提供了字幕；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
使用颜色传达的信息也可以在文本中找到
WCAG —— 理解色彩对比度要求
有关色彩对比度的一切以及为何你应该重新考虑它
A11yProject —— 什么是色彩对比度
使用 Colorable 来计算出一个完全无障碍的调色板
WebAIM —— 色彩对比度检验工具
The Paciello Group —— 色彩对比度分析工具
夜间模式夜间模式指的是在操作系统中可以设置高对比度模式，对应浏览器@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的三个常见用途是：
隐藏装饰图像； 它相当于给图像空的alt文本。
在表语义不传达有意义的关系的情况下，抑制用于布局的表的表语义。
消除复合窗口小部件结构中的插入孤立元素的语义，如上面的示例中所示的选项卡列表，菜单或树。
关于子元素自动隐藏语义的角色
要求所有子元素都具有访问性的角色是：
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
检查工具
网络无障碍性评估工具（WEB Accessibility Evaluation Tool）是一个无障碍辅助的浏览器插件。
无障碍辅助功能树
Inspect.exe (免费的桌面应用程序为windows作为windows SDK)的一部分
在chrome通过在地址栏输入 chrome://accessibility/查看 可访问性树。
工具概述 - http://webaim.org/articles/tools
通用工具 - http://pa11y.org
可视化工具包 - http://khan.github.io/tota11y
色盲模拟器 - http://www.color-blindness.co...
颜色安全 - http://colorsafe.co
VoiceOver - http://webaim.org/articles/vo...
Wave - http://wave.webaim.org
在 Firefox 中使用无障碍辅助功能检测器
在 Chrome 中激活无障碍辅助功能检测器
在 OS X Safari 中使用无障碍辅助功能检测器
屏幕朗读器
付费产品：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排名。至少，它会激怒你的用户。
标签
在适当的时候，使用访问HTML 5网页元素，如，， 元素。 标题标签应该是有序的,避免跳过标题标签。这意味着a 后跟 ， 后跟 或依此类推。最佳做法是每页只有一个。将标签视为“ 第二页标题标签 ”，将相关性信号发送给搜索引擎机器人。 确保没有断开的链接。使用内部标记类型链接，但不要过度。提供描述性链接文本。避免使用像click here和的短语read more。跳过向链接添加描述性标题属性（将鼠标悬停在链接上时显示的文本）。添加链接标题不一定是错误的，但对SEO或网站可访问性来说可能无济于事。 图像与多媒体 在命名图像时尽可能保持一致和准确。避免使用非字母字符（例如7，％，＆，$）并在单词之间使用短划线，而不是在图像名称或替代文本中使用下划线。将替代文字保留在125个字符以内。如果您需要更多字符，请使用标题文本或进一步描述页面主文本区域中的图像。编写可理解的替代文本，关键字填充对任何人都没有好处 - 使用屏幕阅读器的人会烦恼，搜索引擎机器人会惩罚你。 少即是多。尽可能限制在设计中使用复杂的多媒体组件。提供访问媒体的其他方法。例如，有视频的副本和/或标题；为仅音频文件创建副本；将盲文格式的文件添加到您的媒体。有许多不同类型的替代格式可供使用。 内容篇幅 不要使用粗体和斜体标记来突出显示单词，而是使用强烈和强调。在视觉上它们看起来彼此相似，但屏幕阅读器（在正确的模式下）将强调包围和标签的单词，而它们将完全忽略或仅略微改变和标签。 不要复制您的内容。搜索引擎机器人会注意到并惩罚你。您的用户会感到困惑。 项目符号和编号列表有助于为读者分解您的内容，使其更加用户友好。一些研究表明，搜索引擎机器人更喜欢使用列表和数字序号标记的内容而不是纯文本。 用户代理（例如，浏览器），可访问性API和辅助技术之间的关系 ACCESSIBILITY APIS
Windows: Microsoft Active Accessibility (MSAA), 被另一个API调用扩展称为 IAccessible2 (IA2)
Windows: UI Automation (UIA), 微软MSAA的继任者。 Windows上的浏览器可以选择支持MSAA通过IA2，UIA或两者。
MacOS: NSAccessibility (AXAPI)
Linux/Gnome: Accessibility Toolkit (ATK) and Assistive Technology Service Provider Interface (AT-SPI). 这个例子稍有不同，实际上有两个独立的API：一个是浏览器和其他应用程序将信息传递给（ATK），另一个是AT从（AT-SPI）调用的。 屏幕阅读器朗读某个按钮的工作流程 屏幕阅读器从API请求关于相对于当前对象的下一个可访问对象的信息。 API（作为中介）将此请求传递给浏览器。 在某些时候，浏览器引用DOM和样式信息，并发现相关元素是一个非隐藏按钮：。 浏览器将此HTML按钮映射到API期望的格式，例如具有各种属性的可访问对象：名称：Do a thing，角色：Button。 API将此信息从浏览器返回到屏幕阅读器。 然后，屏幕阅读器可以将该对象呈现给用户，或许可以说明“Button, Do a thing”。 用户通过屏幕朗读器"点击"按钮流程 用户提供特定的屏幕阅读器命令，例如击键或手势。 屏幕阅读器调用API中的方法来调用按钮。 API将此交互转发给浏览器。 浏览器如何响应传入的交互取决于上下文，但在这种情况下，浏览器可以通过WEB API将其作为“单击”事件引发。 浏览器不应指示点击来自辅助技术，因为这样做会侵犯用户的隐私权。 WEB开发人员已为点击注册了一个JavaScript事件监听器; 现在执行它们的回调函数，就像用户用鼠标单击一样。 了解Accessibility API主要从Role(角色),State(状态),Properties(属性)三个方面入手。 角色分类如下：
抽象角色 (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)
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） 几个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标识是文档，设计成与在DOM层次结构中的类似水平的主要内容互补的支撑部分，但是从主内容分离时仍然有意义。
complementary 标识应该是顶级标识（例如，不包含在任何其他标识内）。 如果补充内容与主要内容无关，则应分配更一般的角色（例如region）。 如果页面包含多个complementary标识，则每个标识都应具有唯一标签）。 使用HTML5 aside元素定义complementary标识。 如果aside未使用HTML5 元素技术，请使用role="complementary"属性来定义complementary标识。 complementary标识示例 一个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标志性标识包含的项目和对象，作为一个整体，结合起来，创造一种形式的集合，当没有其他命名的标识是适当的区域（如主或搜索）。 当表单用于搜索功能时，使用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标识意义的应该是一个顶级标识。 当页面包含嵌套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标识可用于识别名为标识未适当描述的内容。 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
aria-current(状态)
aria-keyshortcuts
aria-label
aria-relevant
aria-roledescription 小部件属性：
aria-autocomplete
aria-checked(状态)
aria-disabled(状态)
aria-expanded(状态)
aria-haspopup
aria-hidden(状态)
aria-invalid(状态)
aria-label
aria-level
aria-modal
aria-multiline
aria-multiselectable
aria-orientation
aria-placeholder
aria-pressed(状态)
aria-readonly
aria-required
aria-selected(状态)
aria-sort
aria-valuemax
aria-valuemin
aria-valuenow
aria-valuetext 激活区域属性：
aria-atomic
aria-busy
aria-live off|polite|assertive|rude 绝大多数的更新应该在用户闲暇的时候告知，即时提示对用户是一种干扰。如果希望内容完全更新后再提示，可以使用aria-busy。默认为off, 表示不宣布更新；polite表示只有用户闲时宣布；assertive表示尽快对用户宣布；rude表示即时提醒用户，必要的时候甚至中断用户。
aria-relevant 关系属性：
aria-activedescendant
aria-colcount
aria-colindex
aria-colspan
aria-controls
aria-describedby
aria-details
aria-errormessage 标识为对象提供错误消息的元素。
aria-flowto
aria-labelledby
aria-owns
aria-posinset
aria-rowcount
aria-rowindex
aria-rowspan
aria-setsize 按钮是一个组件，能够让用户触发一个操作或事件，例如提交一个表单、打开一个对话框、取消操作、或执行删除操作。告知用户一个按钮会打开对话框的惯用方法是将“...”（省略号）添加到按钮上，例如“另存为...” 除了常规按钮组件外，WAI-ARIA还支持其他2种按钮类型：
切换按钮 toggle button：可以关闭（未按下）或打开（
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。 转载请注明本文地址：https://www.ucloud.cn/yun/59475.html或
所有aria属性和角色的继承树状图 -W3C
以下角色充当独立用户界面窗口小部件或作为较大的复合窗口小部件的一部分
以下角色是用作导航标识的页面区域。所有这些角色都继承自地标基本类型，并且都是继承自landmark的。这些角色包含在此处，以使它们成为WAI-ARIA角色分类的明确组成部分。
以下角色是实时区域，可以通过实时区域属性进行修改。
以下角色充当浏览器或应用程序中的窗口。
在其中一个标志性区域中 包括页面上的所有可感知内容并为每个标志性区域赋予语义上有意义的作用是确保辅助技术用户不会忽视与其需求相关的信息的最有效方式之一。
本文是为了帮大家快速回顾了测试中知识点，这套面试手册整整花了一个月的时间整理出来，上传到Git上目前star数达到了27K+。内容涵盖了诸多技术栈的面试题和答案，相信可以帮助大家在最短的时间内用作面试复习，能达到事半功倍效果。 同时用XMind画了一张导图记录软件测试的学习笔记，有需要的朋友，帮作者关注点赞收藏三连一下，即可无偿下载一份！ 测试开发手册完整版PDF☞☞☞ 软件测试核心知识点目录内容...
摘要：前端每周清单第期与模式变迁与优化界面生成作者王下邀月熊编辑徐川前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。 showImg(https://segmentfault.com/img/remote/1460000013279448); 前端每周清单第 51 期: React Context A...
摘要：拓扑图组件作为最典型的客户需求应用，自然是首篇登场。入门手册中也有个简单的编辑器例子，教用户如何自定义创建节点连线和多边形的示例教材，学习自定义拓扑图交互可从此例子入手。 HT 是啥：Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向，接着就朝这个方向慢慢打磨，如今 HT ...
摘要：关于认证考试手册发布之际，阿里巴巴开发规范认证考试也同步上线，通过在线考试，检测你对手册中开发规范的掌握程度，并发放官方认证证书。认证考试致谢阿里巴巴开发规范能够成册，离不开集团内移动开发工程师的大力支持，在此感谢大家的无私奉献和付出。 春节余味尚未消，我们为移动开发者准备了一份迟到的新年礼物——《阿里巴巴Android开发手册》，继《阿里巴巴Java开发手册》之后，阿里巴巴开发规范家...
MySQL™ 参考手册 此文档分别记录了MySQL 8.0到8.0.19，以及基于NDB 8.0版到8.0.18-ndb-8.0.18的NDB Cluster版本。它可能包括尚未发布的MySQL版本功能的文档，有关已发布的版本的信息，请参阅MySQL 8.0发行说明。 MySQL 8.0的特性。本手册描述的特性没有包含在每个MySQL 8.0版本中，此类特性可能不包含在许可给你的MySQL 8.0...
阅读 2165·2021-11-08 13:13
阅读 1080·2021-10-09 09:41
阅读 1485·2021-09-02 15:40
阅读 3035·2021-08-17 10:13
阅读 2445·2019-08-29 16:33
阅读 3006·2019-08-29 13:17
阅读 3007·2019-08-29 11:00
阅读 3183·2019-08-26 13:40
