點解無障礙訪問同同意而家相互交疊

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 點樣提供無障礙訪問