无障碍联系表单与欧洲无障碍法案

联系表单常是访客与企业之间的唯一入口。如果这扇门只能用鼠标、良好视力和破解模糊图片谜题的耐心打开，一些人就只能留在门外。自 2025 年中起，对许多向欧盟消费者销售的企业而言，这不再只是易用性问题，也成为法律问题。

欧洲无障碍法案涵盖什么

欧洲无障碍法案（《欧盟指令》2019/882）自 2025 年六月 28 日起适用。它为向消费者提供的某些产品和服务设定无障碍要求——包括电子商务、消费者银行服务、电子书、电子通信和部分客运服务。对网站而言，指整个网店或银行服务，包括客户用于联系、提问或投诉的表单。提供服务的微型企业豁免：员工少于十人，且年营业额或资产负债表总额不超过 2 百万欧元的企业。纯粹面向其他企业的服务通常不在范围内。

各成员国已将指令转为国内法。德国为《无障碍强化法》（Barrierefreiheitsstärkungsgesetz，BFSG），波兰为 2024 年关于确保某些产品和服务符合无障碍要求的法案。各国监督机关和处罚不同，但技术衡量标准大体相同：实践中为欧洲标准 EN 301 549，其又以 Web 内容无障碍指南（WCAG）为基础。

即使没有法律义务，为何仍值得做

也许您的企业豁免，或仅服务其他企业。无障碍表单仍然值得投入，原因很简单：每个半途放弃的人，都是您永远收不到的咨询。帮助屏幕阅读器用户的修正，也帮助在火车上用手机、在强光下、手腕受伤或使用非母语填写表单的人。清晰标签和有帮助的错误消息让所有人更少放弃——而没有一项会削弱垃圾信息防护。

附 WCAG 2.2 引用的实用清单

• 与输入关联的可见标签（1.3.1、3.3.2）：每个字段都有通过 for/id 连接的可见标签。仅有占位符不算标签——开始输入时它就消失。
• 说明如何修正的错误消息（3.3.1、3.3.3）：指出字段、问题及修正方式——用文字，而非仅红色边框。“请输入类似 name@example.com 的电子邮件地址”优于“输入无效”。
• 完整键盘操作（2.1.1、2.1.2）：每个字段、复选框、CAPTCHA 和提交按钮均可通过 Tab、空格和 Enter 到达并使用，无键盘陷阱。
• 可见焦点（2.4.7）：始终可看出哪个字段处于活动状态。移除浏览器焦点轮廓而无替代，不符合该准则。
• 足够对比度（1.4.3）：文本、标签和错误消息与背景的对比度至少 4.5:1（大文本为 3:1）。
• 目标尺寸（2.5.8）：按钮、复选框和链接至少 24 × 24 CSS 像素，或周围有足够间距。
• CAPTCHA 替代方式（1.1.1）和无障碍身份验证（3.3.8）：1.1.1 要求文本替代，以及不止一种感官形式的 CAPTCHA；3.3.8 严格而言涉及登录步骤，但理念可延伸——重输扭曲字母或解算术题不应是唯一通路。提供替代方式，或使用根本不需要谜题的方法。
• 向辅助技术隐藏蜜罐：陷阱字段的外层设置 aria-hidden="true"，并设置 tabindex="-1"，使屏幕阅读器和键盘用户不会落入其中。

CAPTCHA 与蜜罐：垃圾信息防护遇上无障碍

严格而言，准则 3.3.8 涉及登录和身份验证步骤，而非联系表单。但其理念同样适用：输入扭曲字母、解算术题或从网格图片中选交通灯，会完全排除一些人。通常无需谜题的方案——例如 Cloudflare Turnstile、Friendly Captcha、蜜罐配合时间检查，或 Akismet 等服务器端过滤——可阻挡垃圾信息，而不要求访客证明什么。蜜罐只有真正不可见才友好，对屏幕阅读器和键盘用户也一样：

<div class="hp" aria-hidden="true">
  <label for="hp-website">请将此字段留空</label>
  <input type="text" id="hp-website" name="website"
         tabindex="-1" autocomplete="off">
</div>
<!-- CSS: .hp { position: absolute; left: -10000px; } -->

十五分钟测试您的表单

1. 1放下鼠标，仅用键盘填写整个表单。能否到达每个字段及提交按钮，且始终看出当前位置？
2. 2先提交空表单，再填错误电子邮件地址。错误是否以文字出现在正确字段旁，是否清楚说明如何处理？
3. 3在手机上打开页面，或将浏览器缩放至 200%。是否全部可读、按钮易点击，Cookie 横幅或聊天小组件是否遮挡提交按钮？
4. 4启用屏幕阅读器（VoiceOver、NVDA 或 TalkBack）并听：每个字段是否连同标签被读出，蜜罐是否保持静默？
5. 5运行 axe-core 等自动检查。它能快速发现缺失标签和对比度问题，但不能发现所有问题——仍需上述手动步骤。

如果您更想先获得概览，formexposed 会从外部查看公开表单，不提交任何内容。无障碍检查会针对每个表单运行 axe-core，标记缺乏无障碍替代方式的 CAPTCHA、会被屏幕阅读器读出的蜜罐，并查看手机上的表单——点击目标、遮挡提交按钮的覆盖层、横向滚动。免费检查显示整体等级；这些详情在完整报告中。它是上述清单的良好起点，不能替代与真人一起测试。