如何提高 PageSpeed Insights 無障礙功能分數
提高網站的無障礙功能不僅能提升 PageSpeed Insights 的分數，還能改善 SEO、使用者體驗和轉換率。透過以上措施，您可以確保網站對所有使用者都友好且可訪問。
首先：
為什麼無障礙功能重要？
對視力低下者的影響
- 部分視力低下者難以區分 低對比度 的內容，導致文字難以辨識。
這些人可能無法輕易識別輪廓、邊界和細節，影響網站的可讀性。
色覺障礙的普遍性
- 視力低下的人數約為完全失明者的三倍。
色盲影響約 8% 的美國男性、0.4% 的女性，顏色對比不足時可能難以區分文字與背景。
連結可辨識性問題
- 當 連結與周圍文字的對比度低於 3:1，視力低下或色盲者可能無法察覺哪些文字是可點擊的連結。
- 若連結 沒有額外的樣式區分（如底線），則會進一步影響可辨識性。
提高 PageSpeed Insights 無障礙功能分數解說圖：
無障礙對比度規則
1. 選單背景與文字對比度 ≥ 7:1
✅ 確保選單可讀性，避免使用者因對比度不足無法識別選單內容。
2. 網頁底色與文章文字對比度 ≥ 7:1
✅ 提升文章可讀性，符合 WCAG 2.1 規範，讓低視力使用者能清楚閱讀內容。
3. 連結與周圍文字的對比度 ≥ 3:1
✅ 確保連結與一般文字能被清楚區分，避免因顏色區分不明顯導致無法識別連結。
4. 連結應加上底線
✅ 不應只依靠顏色來區分連結，建議使用 底線、字體樣式變化、邊框或背景顏色 來強調連結。
如何檢查對比色是否合規？
✅ 演算法檢查：
- 連結與周圍文字的對比度是否 ≥ 3:1。
- 連結是否 具有不依賴顏色的獨特樣式（如底線、粗體等）。
❌ 不合規情況（違規）：
- 連結 沒有任何額外的樣式，且對比度低於 3:1。
- 連結 僅透過顏色區分，但對比度差異不足。
🛠 手動測試必要性：
- 當對比度 ≥ 3:1 但沒有額外樣式時，需要手動測試 連結在懸停或聚焦時是否有變化。
- 這項測試無法完全自動化，需確保使用者能夠在互動時清楚辨識連結。
✅ 自我 檢查對比色 網址：https://dequeuniversity.com/rules/axe/4.10/color-contrast
結論
網站無障礙設計不僅是對視障者友善，也能提升 SEO、使用者體驗、轉換率。
