Cookie 同意无障碍:同意横幅个 WCAG 2.2 合规

键盘用户关勿掉、屏幕阅读器读勿出来、或者色盲访客看勿清楚个 Cookie 横幅,勿单只是差劲个用户体验——伊在两个层面上都是合规失败。自 2025 年 6 月欧洲无障碍法案生效以来,面向欧盟用户个商业网站上个同意界面必须符合 WCAG 2.1 AA 级,2026 年强烈建议达到 WCAG 2.2。结合 GDPR 要求同意必须是「自由给予、具体、知情且明确」,无无障碍适配个横幅现在面临双重法律风险。本指南详细说明 2026 年符合 WCAG 个 Cookie 横幅应该是哪能格。

为啥无障碍访问搭同意现在相互交叠

GDPR 要求同意必须能被每个用户获取,而勿是只有能看到搭点击横幅个用户。欧洲数据保护委员会已经明确指出,如果数据主体因为网站无进行无障碍适配个残障而无法同同意界面进行有意义个互动,咯同意就勿是有效获取。这就是讲相关个 Cookie 根本就勿应该加载。

在无障碍访问层面,已经在欧盟成员国国内法中转化个欧洲无障碍法案(EAA)将 WCAG 2.1 AA 设定为提供消费者服务个私营部门网站搭应用个最低标准。处罚制度因国而异,但通常每次违规罚款从 50,000 欧元到 500,000 欧元勿等,持续勿合规还要面临市场退出令。

Cookie 横幅个核心 WCAG 要求

键盘可操作性

横幅上个每个控件——接受、拒绝、管理偏好、关闭——必须只用键盘就能访问搭操作。用户应该能按逻辑顺序用 Tab 键在按钮之间切换,用 Enter 或 Space 来激活伊俚。焦点必须可见,搭背景个对比度至少是 3:1。

模态横幅中个焦点锁定

如果横幅阻止搭页面其余部分个互动,键盘焦点必须被锁定在横幅内,直到用户作出选择。用户勿应该能通过 Tab 键跳出横幅去滚动底层页面。当焦点被锁定且横幅关闭之后,焦点应该返回到触发横幅个元素或者合理个默认位置。

屏幕阅读器朗读

横幅必须以带有可访问名称搭角色个对话框形式被朗读。使用 role="dialog"role="alertdialog",配合 aria-labelledby 指向横幅标题,aria-describedby 指向说明文字。

颜色对比度

正文文字搭背景个对比度必须达到 4.5:1;大文字(18pt 以上或者 14pt 粗体)需要达到 3:1。按钮文字、图标搭焦点指示器都有各自个最低对比度要求。在白色背景上用浅灰色「拒绝」按钮是我们在审计中经常发现个 WCAG 违规情况。

勿依赖单一颜色提示

勿要只靠颜色来区分接受搭拒绝。用不同个标签、图标或者形状,让色盲用户也能区分这两个按钮。

暗黑模式搭无障碍访问

WCAG 2.2 引入了直接针对暗黑模式个新标准——这搭同意尤其相关:

RTL 搭国际化

无障碍访问延伸到从右到左个语言(阿拉伯语、希伯来语、波斯语、乌尔都语)以及屏幕阅读器发音:

测试你个横幅以符合 WCAG 合规

勿要只依赖单一工具。将自动扫描搭真实辅助技术测试结合起来:

我们发现个常见无障碍问题

FlexyConsent 哪能提供无障碍访问

FlexyConsent 开箱即符合 WCAG 2.2 AA:

  • 所有控件均可通过键盘操作,并具有可见个 3:1 焦点指示器。
  • 正确配置 role="dialog",并附有 aria-labelledbyaria-describedby
  • 焦点锁定,可选横幅支持 Escape 关闭。
  • 每个文字元素(包括拒绝按钮)对比度均达 4.5:1 以上。
  • 自动为阿拉伯语、希伯来语、波斯语搭乌尔都语语言环境翻转 RTL 布局。
  • 每个翻译版本均设置 lang 属性,确保屏幕阅读器正确发音。
  • 缩放友好布局,在 400% 缩放时还能正常使用。
← 博客 阅读全部 →