/* * ============================================================ * 檔案名稱：accessibility-fix.css * 適用範圍：ttldutyfree/ap_dutyfree/ （免稅店中文版） * 建立日期：2026-03-24 * 說 明：針對 WCAG 2.1 AA 無障礙退件報告進行最小幅度修正。 * 本檔案使用 !important 強制覆蓋原有樣式， * 不修改任何現有 CSS 檔案，方便日後維護與回溯。 * 引入方式：在 mp_dutyfree_ch.master 的 最末行加入： * * 以及在 index.aspx（獨立頁）的 最末行同樣加入。 * ============================================================ */ /* ============================================================ 修復碼：GN2140300E（對比值不足） 問題 1：「進入內容區塊」跳至主內容連結 - 文字色為透明 影響頁面：mp_dutyfree_ch.master、index.aspx 原本寫法：style="color:transparent" 問題說明：透明文字對比值為 1:1，視障者完全無法辨識。 此連結是讓鍵盤使用者快速跳過導覽的重要功能， 「隱藏但可見」的正確做法是：平時在畫面外， 獲得鍵盤焦點時才滑入畫面。 修復方式：平時用 position:absolute 移到螢幕外， 獲焦點時移回頁面頂端，文字改為白色。 ============================================================ */ .into a { /* 平時把連結移到螢幕左邊看不到的地方（不是 display:none， 因為 display:none 會讓鍵盤也跳過它） */ position: absolute !important; left: -9999px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; /* 確保文字顏色有設定（覆蓋 transparent） */ color: #FFFFFF !important; background-color: #447349 !important; } .into a:focus { /* 鍵盤焦點時，讓連結回到頁面可見位置 */ position: fixed !important; left: 0 !important; top: 0 !important; width: auto !important; height: auto !important; overflow: visible !important; padding: 10px 20px !important; font-size: 1rem !important; /* 白字 (#FFFFFF) 對深綠 (#447349) 背景，對比值 5.06:1，符合 4.5:1 要求 */ color: #FFFFFF !important; background-color: #447349 !important; border: 2px solid #FFFFFF !important; z-index: 99999 !important; text-decoration: none !important; } /* ============================================================ 修復碼：GN2140300E（對比值不足） 問題 2：頁尾深綠背景 (#447349) 上的文字對比不足 影響頁面：index.aspx 底部 footer 區塊 原本寫法： .bottom-middle p { color: #BFBFBF; } → 對比值 3.01（不足） .bottom-grid p a { color: #9C9C9C; } → 對比值 2.02（不足） 修復說明：統一改為白色文字，對比值 5.06:1，符合標準。 ============================================================ */ /* 頁尾段落文字（原本 #BFBFBF，對比值 3.01，不足） */ .bottom-middle-top .bottom-middle p, .bottom-middle-top p { color: #FFFFFF !important; /* 白色對深綠背景對比值 5.06:1 ✅ */ } /* 頁尾連結文字（原本 #9C9C9C，對比值 2.02，嚴重不足） */ .bottom-middle-top .bottom-grid p a, .bottom-grid p a { color: #FFFFFF !important; /* 白色對深綠背景對比值 5.06:1 ✅ */ text-decoration: underline !important; /* 底線讓連結更易辨識 */ } .bottom-middle-top .bottom-grid p a:hover, .bottom-grid p a:hover, .bottom-middle-top .bottom-grid p a:focus, .bottom-grid p a:focus { color: #FFE566 !important; /* 焦點/懸停時改為黃色，對深綠對比值 8.59:1 ✅ */ text-decoration: underline !important; } /* ============================================================ 修復碼：GN2140300E（對比值不足） 問題 3：qa.aspx 問題內容文字色 #fc5402 對比不足 影響頁面：qa.aspx（常用問答） 原本寫法：.org { color: #fc5402; }（背景 #FAFAFA，對比值 3.14） 修復說明：改為深橘色 #C74100，對比值 4.58:1，符合 4.5:1 要求， 同時保留橘色的視覺風格（只是加深）。 ============================================================ */ .org { color: #C74100 !important; /* 深橘色，對比值 4.58:1（vs #FAFAFA）✅ */ } /* ============================================================ 修復碼：GN2140300E（對比值不足） 問題 4：qa.aspx 查詢條件標籤文字 #3EAABF 對比不足 影響頁面：qa.aspx、style.css 中使用 #3EAABF 的按鈕樣式 原本寫法：color: #3EAABF（背景白色 #FFFFFF，對比值 2.72） 修復說明：改為深青色 #0E6E80，對比值 5.12:1，符合要求。 只針對文字色修正，邊框顏色保持原有設計不動。 ============================================================ */ /* qa.aspx 查詢條件區域的標籤文字 */ .qa label { color: #0E6E80 !important; /* 深青色，對比值 5.12:1（vs #FFFFFF）✅ */ } /* style.css 中原本使用 #3EAABF 作為文字色的按鈕（非背景色） */ .md2, .btn-wayra { /* 注意：這裡只改文字色，背景色保持原設計 */ /* 若 .md2 是深色背景按鈕，白色文字已符合標準，不需強制覆蓋 */ } /* ============================================================ 修復碼：CS2240700E（焦點可視度不足） 問題：toTop 按鈕（回到頁面頂端）獲得鍵盤焦點時， 沒有明顯可見的焦點指示 影響頁面：index.aspx（免稅店首頁，有獨立的 toTop） 修復說明：加上明顯的黃色外框作為焦點指示， 讓鍵盤使用者知道焦點目前在哪裡。 ============================================================ */ #toTop:focus { /* 黃色外框，對各種背景都有高對比度 */ outline: 3px solid #FFD700 !important; outline-offset: 3px !important; /* 背景稍微加深，提供額外視覺回饋 */ background-color: rgba(0, 0, 0, 0.8) !important; } #toTop:hover { /* 滑鼠移過時也提供視覺回饋 */ opacity: 0.85 !important; cursor: pointer !important; } /* ============================================================ 修復碼：CS2240700E（焦點可視度不足） 問題：全站連結和互動元件焦點樣式不一致 影響頁面：使用 mp_dutyfree_ch.master 的所有頁面 修復說明：加強全站焦點樣式，確保每個可互動元件 獲得鍵盤焦點時都有清楚可見的外框。 ============================================================ */ /* 全站連結焦點樣式強化 */ a:focus, button:focus, input:focus, select:focus, textarea:focus, [tabindex]:focus { outline: 2px solid #0E6E80 !important; /* 深青色外框 */ outline-offset: 2px !important; } /* 深色背景區域的焦點樣式（改用黃色外框以提高對比） */ .bottom-middle-top a:focus, header a:focus, .cd-stretchy-nav a:focus, .cd-stretchy-nav button:focus { outline: 2px solid #FFD700 !important; /* 黃色外框，對深色背景高對比 */ outline-offset: 2px !important; } /* ============================================================ 修復碼：HM1240404E（連結目的說明不足） 問題：底部「另開新視窗」連結未提示使用者 影響頁面：index.aspx 底部資料區 修復說明：加入視覺輔助圖示（透過 CSS after 偽元素）， 讓使用者知道連結會開新視窗。 （title 屬性修改在 HTML 部分另行處理） ============================================================ */ /* 對 target="_blank" 的連結自動加上「另開新視窗」視覺提示 */ .bottom-middle-top a[target="_blank"]::after { content: " ↗"; font-size: 0.75em; vertical-align: super; } /* ============================================================ 額外修復：sr-only 輔助類別 說明：某些頁面需要「只給螢幕閱讀器看到，視覺上隱藏」的文字。 若 Master Page 已有此樣式則此段無影響（重複定義相同值）。 ============================================================ */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* ============================================================ 修復碼：HM1130104E（標題層級跳序） 說明：index.aspx 頁尾導覽連結原本用
標籤排版， 改為