欢迎订阅专栏:万字解析 WCAG 2.1 AA 网页内容无障碍指南
本篇简单介绍下国内外网站无障碍的支持,以及一些流行的第三方组件库的无障碍支持概况。
国内网站
百度
AXE Tool:10+ issues,大部分是颜色对比度问题。
搜索页问题比较多,50+。
键盘:设置按钮无法键盘操作;登陆按钮没有焦点样式。
支持点击右下角按钮,开启辅助模式(无障碍模式)。
掘金
AXE Tool:100+ issues,大部分是颜色对比度问题,可以说带颜色的文字基本都不符合。
键盘:右上角登陆注册可以键盘操作,但是不显示焦点样式;右侧布局内容无法键盘操作。
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
官网里没搜到accessibility、无障碍说明,找个Dialog控件试试。
元素没有焦点样式,弹框里按Tab焦点就跑到遮罩下面了。基本是不支持无障碍了。
国外
Material UI (MUI)
官网:mui.com/
能直接搜索到Accessibility说明文档:mui.com/base-ui/get...,里面详细说明了UI库对Accessibility的支持情况,以及需要使用者使用UI库时需要注意的地方。
- AXE Tool扫描情况,对于控件部分基本没问题,但是文档网站导航依然能扫出来颜色对比度问题,可能只是文档网站没做好规范。
- 键盘测试基本没发现问题。
Chakra UI
搜下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规范指南。