可訪問性 連結狀態
為什麼
不同的連結狀態可幫助使用者與連結互動。已訪問狀態可以幫助短期記憶喪失的人理解他們已經閱讀過哪些內容。懸停狀態可以幫助肌肉控制能力下降的人知道何時點選。焦點連結可幫助鍵盤使用者瞭解他們即將啟用哪個連結。
什麼
連結幾乎不需要介紹。它們是 Web 的核心。連結有很多狀態。以下是五種最常見狀態。在 CSS 術語中，這些是偽類
- 未訪問
- 已訪問
- 懸停
- 啟用
- Focus
如何操作
為了確保所有連結狀態都可訪問，我們必須記住這三個技巧。我們將以 ICRC（紅十字國際委員會）主頁中的一個示例為例。
1. 下劃線
連結預設帶有下劃線。在正文中移除連結的下劃線在大多數情況下都是個壞主意。我們在關於僅顏色的部分已學過這一點。這對未訪問和已訪問的連結最為重要。
在 ICRC 的示例中，正文中有一個連結——戰爭規則。沒有下劃線。讓我們從樣式表中移除 text-decoration: none;
現在，這個連結對於色盲人士來說是可訪問的。
2. 對比度和焦點
所有狀態都必須具有足夠的對比度，正如我們在顏色對比度中學到的那樣。此外，焦點連結與非焦點狀態必須具有足夠的對比度。
現在，連結戰爭規則處於焦點狀態。文字有一個沒有偏移的橙色輪廓。此焦點狀態存在兩個問題。首先，橙色輪廓與白色背景的對比度較低。其次，缺乏偏移使文字難以閱讀。讓我們使用該網站配色方案中已有的紅色，並新增一些偏移。
好多了！一個對於使用鍵盤導航和/或視力受損的人士來說可訪問的焦點連結。
此改進使用了 CSS 屬性 outline-color 和 outline-offset。
3. 懸停
清晰的懸停狀態對每個人都有幫助，特別是對運動障礙人士。
在 ICRC 的頁尾中，您可以看到一系列快速連結。它們具有非常微妙的懸停狀態，顏色從淺灰色變為白色。此效果可以改進。
在此示例中，我們為懸停狀態添加了一個效果：粗體文字。現在使用者更清楚他們將要執行的操作。
