可訪問性 按鈕和連結

為什麼

按鈕和連結是特定型別的互動元件。它們各自與輔助技術的互動方式不同。正確使用每種元件都有助於輔助技術的使用者與元件進行互動。

什麼

如何操作

在介紹中，我們看到視覺設計並不決定應該使用哪個 HTML 元素。一個看起來像按鈕但行為像連結的連結，就是一個 <a>。

“註冊成為司機”按鈕和其下方的連結都被編碼為 <a>。那麼，我們什麼時候應該使用 <button> 呢？

讓我們仔細看看 Uber 的網站。頁首的第一個部分有五個元素——一個 logo，一個下拉選單和三個連結。其中一個被編碼為 <button>。

點選“公司”會開啟一個下拉選單。這是一個在當前頁面執行操作的互動。在這裡使用 <button> 是正確的。其下方的連結，如“關於我們”、“我們的產品”等，都正確地使用了 <a> 元素進行編碼。

箭頭指示這是一個帶有下拉選單的按鈕，開啟時會改變方向。這是一個很好的額外視覺提示。

這樣做的一個好處是，語義化 HTML 為螢幕閱讀器提供了上下文，螢幕閱讀器會大聲朗讀頁面內容。你將在關於輔助技術的第 7 模組中瞭解更多關於螢幕閱讀器的內容。

在這種情況下，使用 <div> 是錯誤的。為什麼？

• 按鈕預設有更合適的樣式。
• 螢幕閱讀器將其識別為按鈕。
• 它是可聚焦的。
• 它是可點選的。

對於僅依賴鍵盤導航的使用者來說，連結和按鈕都是可訪問的；都可以用滑鼠和鍵盤點選，也可以使用鍵盤的 Tab 鍵在它們之間進行切換。

現在您知道何時使用 <button> 以及何時使用 <a>。還有什麼需要注意的嗎？

正確的連結

連結將使用者從一個頁面帶到另一個頁面，或者有時帶到頁面上的另一個部分。為了使連結可訪問，請記住

• 使用 href 屬性指定連結目的地。
• 在 href 屬性中使用正確的 URL。URL 可以是絕對的或相對的。https://uber.com/about 是一個絕對 URL。/about 是一個相對 URL。
• 不要用 <span> 或 <div> 等其他元素模擬連結。
• 在當前視窗開啟連結。不建議在新視窗中開啟連結。

Uber 示例中的“關於我們”連結的編碼如下，稍作簡化：

這是一個正確且健康的連結。