欢迎订阅专栏:万字解析 WCAG 2.1 AA 网页内容无妨碍攻略
前语
本篇继续介绍第四章节 4. Robust 鲁棒性 和 第五章节 5. Conformance 共同性 中的规则。
WCAG 2.1 官方文档:Web Content Accessibility Guidelines (WCAG) 2.1 中文:Web内容无妨碍攻略 (WCAG) 2.1
4. Robust 鲁棒性
4.1 Compatible 兼容
4.1.1 Parsing 解析 A
运用符号语言完结的内容,元素要有完好的开端和完毕标签,元素根据其规范进行嵌套,元素不包含重复的特点,任何ID都是唯一的,除非规范答应这些特性。
解读:要求页面HTML必须:有闭合标签,元素根据其规范进行嵌套,元素不包含重复的特点,任何ID都是唯一的。
4.1.2 Name, Role, Value 称号,人物,值 A
关于一切用户界面组件(包含但不限于:表单元素,链接和由脚本生成的组件),称号和人物能够编程式确定;可由用户设置的状况、特点和值能够编程式设置;这些改变告诉对用户署理包含辅佐技能有效。
解读:要求页面一切元素,都必须有必要且正确的name、role、value、aria等特点。
尤其是role
和aria
俩特点,之前规范里经常用到,在不同作用元素,不同状况下都有特别的规范要求。
有些能够被AXE Tool
扫描出来,比如缺少部分aria特点、role和aria值匹配不上等等,可是没办法扫描对不对。比如有个messagebar div应该需求设置role=alert
,由于是提示元素,可是你给设置了role=button
,乃至role=article
,Tool也不会扫描出来。
所以关于开发和测验要求是:
- 开发:需求了解
role
都有哪些值,aria
都有哪些特点名,都是做什么用的,然后用在页面对应方位。 - 测验:用
AXE Tool
扫描、用NVDA
读屏软件测验(由于这些特点也会影响读屏软件的识别),看读屏是否有问题。再测验深点,或许就得借助第三方团队测验了,在对攻略了解不深缺乏经历的人来说,人工能测验的东西不多。
4.1.3 Status Messages 状况信息 AA
在运用符号语言完结的内容中,状况音讯能够经过人物或特点以编程方法确定,使得它们能够经过辅佐技能出现给用户而无需获得焦点。
解读:指页面上的提示语、message bar等,需求有正确的role或其它特点,用来标识这个提示的类型、状况等。
跟上面说的一个问题,这儿仅仅强调了部分状况类型的role,举例:
- 表单项的过错提示语,需求用
role=alert
:<div role="alert">message</div>
- 页面列表数据总数、或许没有数据的提示语,需求用
role=status
:<div role="status">5 results returned.</div>
- 聊天记录状况信息,用
role=log
:
<div id="chatRegion" role="log" aria-labelledby="chatHeading">
<h4 id="chatHeading">Chat History</h4>
<ul id="conversation">
<li>The latest chat message</li>
</ul>
</div>
5. Conformance 共同性
本章节要求网页在布局、设计、交互等方面坚持共同性,以提高用户的可预测性和可用性。这一原则包含多个原则和技能,例如:
- 保证每个页面、及整个页面都符合AA等级规范。
- 保证网页元素的标识和功能在整个网站中坚持共同,运用相似的款式和排版来出现相关的内容,以及提供共同的导航和交互方法等。
- 保证每一个流程操作(为了完结活动而需求完结的一系列过程)都要坚持共同性。
- 保证体系语言共同性。
经过遵循共同性原则,能够提高网站的可访问性和可用性,运用户更简单了解和运用网站的功能和内容。
总结
攻略的第四五章内容很少。到这儿,关于 WCAG 2.1 AA 网页内容无妨碍攻略中,悉数5章节规则现已都介绍完了。
下一篇或许会讲讲国内外网站无妨碍的支撑状况,一些盛行的第三方组件库的无妨碍支撑状况。以及如果你的网站有无妨碍需求,以我的视点和经历,能给PM、开发、测验,分享一些经历希望能有所协助。