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

1,181 阅读5分钟

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

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

国内网站

百度

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

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

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

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

掘金

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

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

QQ

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

官方

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

无障碍模式

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

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

总结

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

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

国外网站

谷歌

AXE Tool 20+ issues。 image.png

焦点上,控制比较好,而且还能Tab到隐藏功能,如下动图: cf844516-26e4-428e-9f67-6337e4d4cc80.gif

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

image.png

搜索页

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

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

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

微软

AXE Tool只扫出一个issue。 image.png

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

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

总结

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

第三方UI库

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

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

国内

Ant Design

官网:ant.design/

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

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

测了下Modal键盘,基本支持 image.png

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

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

Element UI

官网:element.eleme.cn/

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

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

国外

Material UI (MUI)

官网:mui.com/

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

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

Chakra UI

官网:chakra-ui.com/

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

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

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

测试下键盘,效果符合WCAG规范,比如弹框内焦点循环,关闭弹框时底部按钮默认焦点。 77de29e4-1dbe-441e-8b6c-f3cbbc569d91.gif

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规范指南。