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

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

avatar
文章
阅读
粉丝