网站可访问性是什么?外贸网站的WCAG 2.2要点与欧盟EAA要求

Ryan

前端工程师 - Ryan

2022年1月22日 最后更新:2026年10月
网站可访问性是什么?外贸网站的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. 1自动检测Lighthouse、WAVE、axe等工具
  2. 2W3C快速检查用Easy Checks查基础项目
  3. 3键盘测试只用键盘走完一次询盘流程
  4. 4读屏软件抽查听一遍首页和一个产品页
自动工具只能发现一部分问题,Lighthouse得满分不代表网站符合WCAG。
  1. 自动检测:用Lighthouse(Chrome开发者工具或PageSpeed Insights中都有)跑一遍“无障碍”审核。它的得分是各项审核的加权平均,权重基于axe的用户影响评估。也可以用WAVE、axe等工具查看具体问题位置。Lighthouse怎么用,见PageSpeed Insights和Lighthouse有什么区别;
  2. W3C的快速检查:W3C提供了一套“Easy Checks”,几分钟就能检查标题、替代文本、对比度、键盘访问等基础项目。W3C也说明,这些检查只覆盖少量问题,是快速初查,不是完整评估;
  3. 键盘测试:放下鼠标,只用Tab、Shift+Tab、回车和空格键,完成一次“浏览产品、切换语言、提交询盘”的流程,看焦点是否始终可见、能否顺利完成;
  4. 读屏软件抽查:用系统自带或免费的读屏软件(如Windows上的NVDA、苹果设备上的VoiceOver)听一遍首页和一个产品页,判断图片描述和链接文字是否说得通。

注意

自动工具只能发现一部分问题,Lighthouse得满分不代表网站符合WCAG。面向欧盟消费者直接销售的网站,建议请专业机构做一次完整评估。

宇航员在电脑前查询

建站阶段就该定下的几件事

  • 设计规范:确定品牌色时同时检查文字和背景的对比度,避免上线后再改整套配色;
  • 组件规范:导航菜单、轮播图、弹窗、标签页等组件,从一开始就支持键盘操作和清晰的焦点样式;
  • 内容规范:编辑上传图片时必须填写替代文本,链接文字写明去向,标题按层级使用;
  • 多种找到内容的方式:清晰的主导航、面包屑和站内搜索,让访客可以用自己习惯的方式找到页面;
  • 多语言网站:每个语言版本设置正确的lang属性,具体做法见外贸独立站多语言SEO指南。

常见问题

可访问性和可用性是一回事吗?

不完全是。可用性关注一般用户能否高效、顺畅地使用网站;可访问性关注包括残障人士在内的所有人能否使用网站。两者有很多重叠,可访问性好的网站,通常对所有人都更好用。

老网站要全部重做才能达到WCAG要求吗?

不一定。大部分问题集中在模板和公共组件上,例如页头、导航、页脚、表单和产品页模板。先修改模板,再处理逐页的内容问题(如替代文本),效率最高。

Lighthouse无障碍得分100分,就说明符合法规了吗?

不能这样认为。Lighthouse等自动工具只能检测可以用程序判断的问题,像替代文本写得是否准确、键盘操作顺序是否合理,都需要人工检查。

中文网站也需要做可访问性吗?

WCAG是不分语言的技术标准,中文网站同样适用。本文重点讨论外贸网站,是因为欧盟和美国的相关规定对面向这些市场的企业影响更直接。

面向欧美市场,从设计开始考虑无障碍

可访问性越早考虑,成本越低:在设计和开发阶段定好配色、组件和内容规范,比上线后逐页返工容易得多。如果你计划面向欧美市场新建或改版外贸网站,希望在设计阶段就把这些要求考虑进去,可以了解Sytech的外贸网站建设服务,价格方案见价格页。

原创文章归Sytech版权所有,转载请注明出处,商用请联系本站获取版权。

Ryan

前端工程师 - Ryan

Sytech科技前端工程师,专注于网络搭建和网站SEO优化多年,擅长于网站数据分析和海外网站运营、维护。

相关文章推荐正在加载中...

想要马上开始
定制开发您的网站建设?

添加微信咨询 扫描二维码添加微信客服

微信二维码 微信客服

其它联系方式

Sytech科技电话

邮寄联系地址 广州市番禺区钟村街道长华创意谷18栋8~9号 联系服务热线 020 8480 8073