万字解析 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规范指南。

相关推荐
Ocean☾1 小时前
前端基础-html-注册界面
前端·算法·html
顾菁寒16 小时前
WEB第二次作业
前端·css·html
Qhumaing16 小时前
html第一个网页
网络·html·html5
前端Hardy20 小时前
HTML&CSS:爱上班的猫咪
前端·javascript·css·vue.js·html
前端Hardy1 天前
超萌!HTML&CSS:打造趣味动画卡通 dog
前端·css·html·css3
Komorebi⁼1 天前
JavaScript的对象事件监听处理,交互式网页的关键!
开发语言·前端·javascript·css·html
布兰妮甜1 天前
HTML5:网页开发的新纪元
前端·html·html5
想要成为祖国的花朵1 天前
Web前端_HTML5(新增type类型)
前端·html·html5
羊小猪~~1 天前
前端入门一之HTML知识讲解
前端·javascript·css·前端框架·html·html5
贩卖纯净水.1 天前
初识CSS
前端·css·html