网站可访问性是什么?外贸网站的WCAG 2.2要点与欧盟EAA要求
网站可访问性(Web Accessibility,也常译作“网站无障碍”)指的是让包括视障、听障、行动不便和有认知障碍的人在内,都能感知、操作和理解网站的内容。国际上通行的技术标准是W3C的《Web内容无障碍指南》(WCAG),最新版本WCAG 2.2于2023年10月5日成为W3C正式推荐标准。
对外贸企业来说,这件事已经不只是“用户体验更好”:欧盟《欧洲无障碍法案》(EAA)自2025年6月28日起适用于面向欧盟消费者的电子商务等服务;美国司法部也认为,《美国残疾人法案》(ADA)的要求适用于企业在网络上提供的商品和服务。这篇文章讲清两项法规和外贸网站的关系、WCAG 2.2中最常被违反的要求,以及怎样检查和修改。
说明:本文是技术和合规方向的介绍,不构成法律意见。网站是否受某项法规约束,请咨询熟悉目标市场的专业人士。
欧盟EAA和美国ADA:和外贸网站有什么关系?
| 对比项 | 欧盟《欧洲无障碍法案》(指令(EU) 2019/882) | 美国《残疾人法案》(ADA)第三章 |
|---|---|---|
| 适用对象 | 面向欧盟消费者提供的特定产品和服务,包括电子商务服务 | 公共场所和面向公众的企业;司法部认为其要求也适用于网上提供的商品和服务 |
| 开始时间 | 2025年6月28日起适用 | 司法部在2022年3月发布网站无障碍指引 |
| 技术标准 | 符合欧盟官方公报引用的协调标准即可推定合规,目前引用的是EN 301 549 v3.2.1(基于WCAG 2.1 AA级) | 司法部没有制定详细的技术法规,指引中把WCAG列为可参考的标准 |
| 豁免 | 提供服务的微型企业(员工少于10人,且年营业额或资产负债表总额不超过200万欧元)可豁免无障碍要求 | 是否适用于具体企业,需要咨询美国律师 |
只做B2B的网站也要遵守EAA吗?
EAA的适用范围是面向“消费者”提供的服务,指令中的“消费者”是指出于其职业以外目的购买产品或接受服务的自然人;“电子商务服务”是指通过网站等远程方式、以订立消费者合同为目的提供的服务。按这些定义,只面向企业采购方、不向个人销售的B2B询盘网站,大概率不在适用范围内。但指令本身没有一句话明确写“B2B网站除外”,而且如果网站可以直接向个人下单(例如同时面向零售买家的WooCommerce商城),情况就不同了。
EAA对“服务提供者”的定义,是在欧盟市场提供服务、或向欧盟消费者提出提供服务要约的人,没有要求必须在欧盟设立公司。所以,向欧盟消费者直接销售的中国企业网站,不能简单认为与自己无关。
值得关注
2026年9月,EN 301 549的新版本v4.1.1发布,采用了WCAG 2.2,这是第一个专门为EAA编写的版本;在欧盟官方公报正式引用之前,现行参考仍是v3.2.1。新建或改版网站,直接按WCAG 2.2的AA级来做最省事。
可访问性会影响谷歌排名吗?
Google没有说过可访问性本身是排名因素。Google的页面体验文档写明,除了Core Web Vitals以外,其他页面体验方面并不会直接帮助网站在搜索结果中排名更高。但可访问性和SEO有不少共同的基础工作:
- 图片替代文本:读屏软件靠它描述图片,Google也说明替代文本是为图片提供元数据时最重要的属性;
- 清晰的标题层级:H1到H3的结构,既方便读屏用户跳转,也帮助搜索引擎理解页面;
- 描述性的链接文字:“下载球阀规格书”比“点击这里”更有用;
- 正确的页面语言:html lang属性帮助读屏软件用正确的语言朗读。
所以,做可访问性的理由应该是合规和让更多采购方顺利使用网站,而不是期待排名提升。
WCAG 2.2中,外贸网站最常违反的要求
WCAG分为A、AA、AAA三个级别,法规和采购要求通常以AA级为目标。下表列出外贸网站上最常见的问题:
| 成功标准(级别) | 要求 | 常见问题 | 怎么改 |
|---|---|---|---|
| 1.1.1 非文本内容(A) | 非文本内容要有等效的文字替代 | 产品图、证书图片没有替代文本 | 为有信息的图片写替代文本,纯装饰图片留空 |
| 1.4.3 对比度(AA) | 普通文字对比度至少4.5:1,大号文字至少3:1 | 白底上的浅灰色文字,图片上直接压文字 | 调深文字颜色,用对比度工具检查 |
| 1.4.11 非文字对比度(AA) | 界面组件和图形与相邻颜色对比度至少3:1 | 表单输入框边框太浅,图标看不清 | 加深边框和图标颜色 |
| 2.1.1 键盘(A) | 所有功能都能通过键盘操作 | 下拉菜单只能鼠标悬停打开,轮播图无法用键盘控制 | 用Tab键走一遍页面,修复无法到达或无法操作的元素 |
| 2.4.4 链接目的(A) | 能从链接文字或其上下文判断链接去向 | 整页都是“Read more”“点击这里” | 链接文字写明去向 |
| 2.4.11 焦点不被遮挡(AA,2.2新增) | 获得键盘焦点的元素不能被完全遮挡 | 固定顶栏、Cookie横幅、在线客服窗口挡住焦点元素 | 调整固定元素的位置和滚动偏移 |
| 2.5.8 目标尺寸(AA,2.2新增) | 点击目标至少24×24 CSS像素(有例外情况) | 手机上的社交图标、语言切换按钮太小、挨得太近 | 加大点击区域或间距 |
| 3.1.1 页面语言(A) | 能通过程序确定页面的默认语言 | 多语言网站各语言版本的html lang都写成同一种语言 | 每个语言版本设置正确的lang属性 |
| 3.2.6 一致的帮助(A,2.2新增) | 多个页面都提供的联系方式等帮助入口,相对顺序保持一致 | 联系方式和在线咨询入口在不同页面位置不一 | 在统一的模板位置放置联系入口 |
| 3.3.2 标签或说明(A) | 需要用户输入时提供标签或说明 | 询盘表单只用占位文字,没有标签 | 每个字段都有可见的标签,必填项说明清楚 |
询盘表单是B2B网站最关键的转化点,也是可访问性问题最集中的地方,表单的其他优化方法见B2B网站询盘表单优化;手机端的点击区域等问题,见移动端体验优化的五个隐藏问题。
怎样检查网站的可访问性?
方法四种检查方法,各用什么来查
- 1自动检测Lighthouse、WAVE、axe等工具
- 2W3C快速检查用Easy Checks查基础项目
- 3键盘测试只用键盘走完一次询盘流程
- 4读屏软件抽查听一遍首页和一个产品页
- 自动检测:用Lighthouse(Chrome开发者工具或PageSpeed Insights中都有)跑一遍“无障碍”审核。它的得分是各项审核的加权平均,权重基于axe的用户影响评估。也可以用WAVE、axe等工具查看具体问题位置。Lighthouse怎么用,见PageSpeed Insights和Lighthouse有什么区别;
- W3C的快速检查:W3C提供了一套“Easy Checks”,几分钟就能检查标题、替代文本、对比度、键盘访问等基础项目。W3C也说明,这些检查只覆盖少量问题,是快速初查,不是完整评估;
- 键盘测试:放下鼠标,只用Tab、Shift+Tab、回车和空格键,完成一次“浏览产品、切换语言、提交询盘”的流程,看焦点是否始终可见、能否顺利完成;
- 读屏软件抽查:用系统自带或免费的读屏软件(如Windows上的NVDA、苹果设备上的VoiceOver)听一遍首页和一个产品页,判断图片描述和链接文字是否说得通。
注意
自动工具只能发现一部分问题,Lighthouse得满分不代表网站符合WCAG。面向欧盟消费者直接销售的网站,建议请专业机构做一次完整评估。
建站阶段就该定下的几件事
- 设计规范:确定品牌色时同时检查文字和背景的对比度,避免上线后再改整套配色;
- 组件规范:导航菜单、轮播图、弹窗、标签页等组件,从一开始就支持键盘操作和清晰的焦点样式;
- 内容规范:编辑上传图片时必须填写替代文本,链接文字写明去向,标题按层级使用;
- 多种找到内容的方式:清晰的主导航、面包屑和站内搜索,让访客可以用自己习惯的方式找到页面;
- 多语言网站:每个语言版本设置正确的lang属性,具体做法见外贸独立站多语言SEO指南。
常见问题
可访问性和可用性是一回事吗?
不完全是。可用性关注一般用户能否高效、顺畅地使用网站;可访问性关注包括残障人士在内的所有人能否使用网站。两者有很多重叠,可访问性好的网站,通常对所有人都更好用。
老网站要全部重做才能达到WCAG要求吗?
不一定。大部分问题集中在模板和公共组件上,例如页头、导航、页脚、表单和产品页模板。先修改模板,再处理逐页的内容问题(如替代文本),效率最高。
Lighthouse无障碍得分100分,就说明符合法规了吗?
不能这样认为。Lighthouse等自动工具只能检测可以用程序判断的问题,像替代文本写得是否准确、键盘操作顺序是否合理,都需要人工检查。
中文网站也需要做可访问性吗?
WCAG是不分语言的技术标准,中文网站同样适用。本文重点讨论外贸网站,是因为欧盟和美国的相关规定对面向这些市场的企业影响更直接。
面向欧美市场,从设计开始考虑无障碍
可访问性越早考虑,成本越低:在设计和开发阶段定好配色、组件和内容规范,比上线后逐页返工容易得多。如果你计划面向欧美市场新建或改版外贸网站,希望在设计阶段就把这些要求考虑进去,可以了解Sytech的外贸网站建设服务,价格方案见价格页。
原创文章归Sytech版权所有,转载请注明出处,商用请联系本站获取版权。
相关文章推荐正在加载中...
