欢迎订阅专栏：万字解析 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规范指南。