万字解析 WCAG 2.1 AA 网页内容无障碍指南(终章):国内外无障碍支持概况

欢迎订阅专栏:万字解析 WCAG 2.1 AA 网页内容无障碍指南

本篇简单介绍下国内外网站无障碍的支持,以及一些流行的第三方组件库的无障碍支持概况。

国内网站

百度

AXE Tool:10+ issues,大部分是颜色对比度问题。

搜索页问题比较多,50+。

键盘:设置按钮无法键盘操作;登陆按钮没有焦点样式。

支持点击右下角按钮,开启辅助模式(无障碍模式)。

掘金

AXE Tool:100+ issues,大部分是颜色对比度问题,可以说带颜色的文字基本都不符合。

键盘:右上角登陆注册可以键盘操作,但是不显示焦点样式;右侧布局内容无法键盘操作。

QQ

AXE Tool和键盘测试跟上面都一样,issue多,并且没有焦点或没焦点样式。 支持切换无障碍模式

官方

之前研究国内网站无障碍时,找到了一个比较官方的网站:人民网-中国政务信息无障碍在行动wza.people.com.cn/,当时记得内容主要介绍了国内无障碍的很多内容和措施等,但是最近打不开了,不知道为啥。

无障碍模式

重点看下百度的无障碍说明:www.baidu.com/search/agin...

实现方式,试了下放大功能,是通过设置页面外层容器transform属性来实现的,其它功能没仔细研究过,感觉最有可能是通过引用第三方js来实现的,第三方会自动给当前页面通过js做各种处理。

总结

综合上面的测试,发现国内部分比较公众化、商业化的网站都是通过用户主动切换到"无障碍模式"来提供无障碍服务给用户,用开启"无障碍模式"后,就可以通过弹出的无障碍按键、或者快捷键等方式,使用无障碍服务功能。

感觉国内的无障碍标准,不是跟国际化W3C发布的WCAG指南走的,是有自己的一套标准,也就是"无障碍模式",只要网站有这个模式,并且提供了各种服务功能,就支持无障碍(WCAG)。

国外网站

谷歌

AXE Tool 20+ issues。

焦点上,控制比较好,而且还能Tab到隐藏功能,如下动图:

有Skip和Accessibility相关功能,Skip功能类似 2.4.1 Bypass Blocks 绕过模块 规则,点击Accessibility help链接:support.google.com/websearch/a...,里面详细对谷歌网站的Accessibility说明。

搜索页

AXE Tool问题较少,不到10个。

键盘操作也可以打开隐藏功能。

看了下特殊交互功能,比如这个展开折起交互,也设置了正确的role及aria属性。

微软

AXE Tool只扫出一个issue。

键盘操作可以Tab出来Skip按钮,是页面第一个焦点,点回车后即可跳过顶部导航,焦点定位到导航底部元素上。。

对于滚动的内容,也会有暂停按钮功能,也是WCAG规范里的一个规则。

总结

这次研究了谷歌和微软两大网站,通过AXE Tool扫描和键盘操作测试,发现WCAG2.1规范基本都符合,然后没发现像国内网站的"无障碍模式"入口。

第三方UI库

继续看下国内和国外比较流行的第三方UI库的WCAG无障碍支持情况。

  • 国内:Ant Design、Element UI
  • 国外:Material UI (MUI)、Chakra UI、Mantine

国内

Ant Design

官网:ant.design/

官网能搜出来一些无障碍相关文档。

里面提到了字体颜色对比度,但是AXE Tool扫了下官网,导航字体被扫出来了,可能仅是文档网站没做好支持吧。

测了下Modal键盘,基本支持

测了下Upload控件键盘,支持的挺好,隐藏的delete icon都能tab出来。

但是AXE Tool支持情况同样不乐观。

Element UI

官网:element.eleme.cn/

官网里没搜到accessibility、无障碍说明,找个Dialog控件试试。

元素没有焦点样式,弹框里按Tab焦点就跑到遮罩下面了。基本是不支持无障碍了。

国外

Material UI (MUI)

官网:mui.com/

能直接搜索到Accessibility说明文档:mui.com/base-ui/get...,里面详细说明了UI库对Accessibility的支持情况,以及需要使用者使用UI库时需要注意的地方。

  • AXE Tool扫描情况,对于控件部分基本没问题,但是文档网站导航依然能扫出来颜色对比度问题,可能只是文档网站没做好规范。
  • 键盘测试基本没发现问题。

Chakra UI

官网:chakra-ui.com/

搜下Accessibility,基本每个组件都有accessibility说明。

比如dialog控件:chakra-ui.com/docs/compon...

详细介绍了dialog控件的accessibility支持情况。测试上跟Chakra UI没区别,参考下例。

测试下键盘,效果符合WCAG规范,比如弹框内焦点循环,关闭弹框时底部按钮默认焦点。

Mantine

官网:mantine.dev/

跟Mantine类似,也是每个组件都有accessibility说明,比如modal控件:mantine.dev/core/modal/... 测试上也跟Chakra UI没区别,参考上例。

总结

对比国内外的UI库,国内的无障碍支持明显没有太重视,相比之下Ant Design的支持情况比较好。国外的UI库支持的都很好,基本规则都符合。

其它

本篇简单介绍下国内外网站无障碍的支持,以及一些流行的第三方组件库的无障碍支持概况。 从测试结果来看:

  • 国外的网站和UI库对WCAG规则支持情况比较好,如果你的网站有WCAG规范要求,可以参考国外这些网站实现效果,以及使用这些第三方组件库,会省去很多支持工作量。
  • 国内的网站基本依赖于"无障碍模式",然后UI库基本不支持WCAG规范,Ant Design相比之下能好一些。对"无障碍模式"没有太多研究,不好评价。

至此,万字解析 WCAG 2.1 AA 网页内容无障碍指南 专栏就基本告一段落了,之后可能会基于代码层面,提供一些常用控件的比较好的实现方案,能更好的支持WCAG规范指南。

相关推荐
老虎06274 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台5 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
hqxstudying6 小时前
Java创建型模式---单例模式
java·数据结构·设计模式·代码规范
祝余呀10 小时前
HTML初学者第三天
前端·html
zhanshuo17 小时前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang17 小时前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
千楼18 小时前
阿里巴巴Java开发手册(1.3.0)
java·代码规范
孤水寒月1 天前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀1 天前
html初学者第一天
前端·html
Eiceblue1 天前
使用 C# 发送电子邮件(支持普通文本、HTML 和附件)
开发语言·c#·html·visual studio