如何提高 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、使用者體驗、轉換率。