如何提高 PageSpeed Insights 無障礙功能分數

如何提高 PageSpeed Insights 無障礙功能分數

 

如何提高 PageSpeed Insights 無障礙功能分數

 

提高網站的無障礙功能不僅能提升 PageSpeed Insights 的分數,還能改善 SEO、使用者體驗和轉換率。透過以上措施,您可以確保網站對所有使用者都友好且可訪問。

 

如何提高 PageSpeed Insights 無障礙功能分數

 

首先:

為什麼無障礙功能重要?
 

  1. 對視力低下者的影響

    • 部分視力低下者難以區分 低對比度 的內容,導致文字難以辨識。
    • 這些人可能無法輕易識別輪廓、邊界和細節,影響網站的可讀性。

       

  2. 色覺障礙的普遍性

    • 視力低下的人數約為完全失明者的三倍。
    • 色盲影響約 8% 的美國男性、0.4% 的女性,顏色對比不足時可能難以區分文字與背景。

       

  3. 連結可辨識性問題

    • 連結與周圍文字的對比度低於 3:1,視力低下或色盲者可能無法察覺哪些文字是可點擊的連結。
    • 若連結 沒有額外的樣式區分(如底線),則會進一步影響可辨識性。

 

 

 

提高 PageSpeed Insights 無障礙功能分數解說圖:

 

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

 

加入好友