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 引入了直接针对暗黑模式个新标准——这搭同意尤其相关:
- 3.3.8 无障碍身份验证——禁止将认知谜题作为同意摩擦。
- 3.3.7 冗余输入——用户勿应该为了撤回同意而重新输入信息。
- 2.4.11 焦点勿被遮挡——横幅本身勿应该遮挡其背后元素个焦点指示器。
- 2.5.7 拖拽动作——如果你个横幅使用拖拽接受互动,必须提供单指针替代方案。
RTL 搭国际化
无障碍访问延伸到从右到左个语言(阿拉伯语、希伯来语、波斯语、乌尔都语)以及屏幕阅读器发音:
- 当文档语言是 RTL 时,在横幅上设置 dir="rtl",让按钮顺序搭焦点流向同阅读方向一致。
- 在翻译后个横幅文字上用正确个 lang 属性,让屏幕阅读器以正确个语音发音朗读文字。
- 镜像图标——箭头、尖括号搭进度指示器应该针对 RTL 语言环境进行翻转。
测试你个横幅以符合 WCAG 合规
勿要只依赖单一工具。将自动扫描搭真实辅助技术测试结合起来:
- axe DevTools 或 Lighthouse——自动捕获约 30-40% 个 WCAG 违规。
- Windows 上个 NVDA 或 JAWS,Mac/iOS 上个 VoiceOver,Android 上个 TalkBack——用真实个屏幕阅读器进行测试。横幅能勿能只通过屏幕阅读器被朗读、导航搭关闭?
- 纯键盘导航——拔掉鼠标。如果你无法通过键盘接受、拒绝搭管理偏好,键盘用户同样无法做到。
- 色盲模拟——Chrome DevTools 内置了视觉障碍模拟器。检查在红色盲、绿色盲搭蓝黄色盲下,接受搭拒绝按钮是否可以区分。
- 放大到 400%——WCAG 要求内容在 400% 缩放时无需横向滚动还能正常使用。固定定位个横幅通常无法通过这个测试。
我们发现个常见无障碍问题
- 将拒绝隐藏在齿轮图标后头——暗黑模式加无障碍失败(图标按钮无可访问名称)。
- 焦点从来到勿了横幅——横幅吸引了视觉注意但在 Tab 顺序中被跳过。
- 模态横幅无焦点锁定——用户可以在横幅声称阻止互动时 Tab 进入背景页面。
- 偏好更改时无 aria-live——屏幕阅读器用户听勿到伊俚个选择已经保存个确认。
- 翻译后个横幅无 lang 属性——屏幕阅读器用英语语音发音朗读西班牙语文字。
FlexyConsent 哪能提供无障碍访问
FlexyConsent 开箱即符合 WCAG 2.2 AA:
- 所有控件均可通过键盘操作,并具有可见个 3:1 焦点指示器。
- 正确配置 role="dialog",并附有 aria-labelledby 搭 aria-describedby。
- 焦点锁定,可选横幅支持 Escape 关闭。
- 每个文字元素(包括拒绝按钮)对比度均达 4.5:1 以上。
- 自动为阿拉伯语、希伯来语、波斯语搭乌尔都语语言环境翻转 RTL 布局。
- 每个翻译版本均设置 lang 属性,确保屏幕阅读器正确发音。
- 缩放友好布局,在 400% 缩放时还能正常使用。