万字解析 WCAG 2.1 AA 网页内容无障碍指南(五):最后两章

欢迎订阅专栏:万字解析 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等属性。 尤其是rolearia俩属性,之前规范里经常用到,在不同作用元素,不同状态下都有特别的规范要求。

有些可以被AXE Tool扫描出来,比如缺少部分aria属性、role和aria值匹配不上等等,但是没办法扫描对不对。比如有个messagebar div应该需要设置role=alert,因为是提醒元素,但是你给设置了role=button,甚至role=article,Tool也不会扫描出来。

所以对于开发和测试要求是:

  1. 开发:需要理解role都有哪些值,aria都有哪些属性名,都是做什么用的,然后用在页面对应位置。
  2. 测试:用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
html 复制代码
<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、开发、测试,分享一些经验希望能有所帮助。

相关推荐
oden3 小时前
2025博客框架选择指南:Hugo、Astro、Hexo该选哪个?
前端·html
云中飞鸿3 小时前
函数:委托
javascript
老前端的功夫4 小时前
前端技术选型的理性之道:构建可量化的ROI评估模型
前端·javascript·人工智能·ubuntu·前端框架
狮子座的男孩5 小时前
js函数高级:04、详解执行上下文与执行上下文栈(变量提升与函数提升、执行上下文、执行上下文栈)及相关面试题
前端·javascript·经验分享·变量提升与函数提升·执行上下文·执行上下文栈·相关面试题
爱学习的程序媛5 小时前
《JavaScript权威指南》核心知识点梳理
开发语言·前端·javascript·ecmascript
乐观主义现代人5 小时前
go 面试
java·前端·javascript
2501_941886866 小时前
多语言微服务架构下的微服务熔断与限流优化实践
javascript
tsumikistep6 小时前
【前后端】Vue 脚手架与前端工程结构入门指南
前端·javascript·vue.js
姜太公钓鲸2337 小时前
Bootstrap是什么?作用是什么?使用场景是什么?如何使用?
前端·bootstrap·html
慧慧吖@7 小时前
关于在本地去模拟生产环境检测页面内容注意事项
前端·javascript·vue.js