選單
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

可訪問性 連結狀態


為什麼

不同的連結狀態可幫助使用者與連結互動。已訪問狀態可以幫助短期記憶喪失的人理解他們已經閱讀過哪些內容。懸停狀態可以幫助肌肉控制能力下降的人知道何時點選。焦點連結可幫助鍵盤使用者瞭解他們即將啟用哪個連結。


什麼

連結幾乎不需要介紹。它們是 Web 的核心。連結有很多狀態。以下是五種最常見狀態。在 CSS 術語中,這些是偽類

  • 未訪問
  • 已訪問
  • 懸停
  • 啟用
  • Focus

如何操作

為了確保所有連結狀態都可訪問,我們必須記住這三個技巧。我們將以 ICRC(紅十字國際委員會)主頁中的一個示例為例。

Screenshot from the front page of ICRC, International Committee of the Red Cross.

1. 下劃線

連結預設帶有下劃線。在正文中移除連結的下劃線在大多數情況下都是個壞主意。我們在關於僅顏色的部分已學過這一點。這對未訪問和已訪問的連結最為重要。

在 ICRC 的示例中,正文中有一個連結——戰爭規則。沒有下劃線。讓我們從樣式表中移除 text-decoration: none;

Screenshot from ICRC, where the link has underline.

現在,這個連結對於色盲人士來說是可訪問的。


2. 對比度和焦點

所有狀態都必須具有足夠的對比度,正如我們在顏色對比度中學到的那樣。此外,焦點連結與非焦點狀態必須具有足夠的對比度。

Screenshot from ICRC showing a focused link that is hard to read.

現在,連結戰爭規則處於焦點狀態。文字有一個沒有偏移的橙色輪廓。此焦點狀態存在兩個問題。首先,橙色輪廓與白色背景的對比度較低。其次,缺乏偏移使文字難以閱讀。讓我們使用該網站配色方案中已有的紅色,並新增一些偏移。

Screenshot from ICRC showing a readable focused link with a red outline.

好多了!一個對於使用鍵盤導航和/或視力受損的人士來說可訪問的焦點連結。

此改進使用了 CSS 屬性 outline-coloroutline-offset


3. 懸停

清晰的懸停狀態對每個人都有幫助,特別是對運動障礙人士。

Animated image from ICRC shoing a subtle hover effect.

在 ICRC 的頁尾中,您可以看到一系列快速連結。它們具有非常微妙的懸停狀態,顏色從淺灰色變為白色。此效果可以改進。

Screenshot from ICRC with an improved hover effect, making the text bold.

在此示例中,我們為懸停狀態添加了一個效果:粗體文字。現在使用者更清楚他們將要執行的操作。



×

聯絡銷售

如果您想將 W3Schools 服務用於教育機構、團隊或企業,請傳送電子郵件給我們
sales@w3schools.com

報告錯誤

如果您想報告錯誤,或想提出建議,請傳送電子郵件給我們
help@w3schools.com

W3Schools 經過最佳化,旨在方便學習和培訓。示例可能經過簡化,以提高閱讀和學習體驗。教程、參考資料和示例會不斷審查,以避免錯誤,但我們無法保證所有內容的完全正確性。使用 W3Schools 即表示您已閱讀並接受我們的使用條款Cookie 和隱私政策

版權所有 1999-2024 Refsnes Data。保留所有權利。W3Schools 由 W3.CSS 提供支援