在網頁無障礙領域，最具爭議的問題之一是，在創建某些類型的交互元素時，應該使用按鈕還是鏈接。為什么這個問題如此有爭議？多年來，無障礙專家已經無數次回答了這個問題。同時，還有大量的參考文獻提供了這個問題的答案。

答案很簡單，只有在沒有考慮到為什么鏈接和按鈕的外觀和行為完全不同的情況下，才會引起爭議。

按鈕和鏈接的行為有何不同？

首先，了解按鈕和鏈接的區別很重要。我曾看到有人錯誤地將它們混為一談，過度簡化為 "執行動作 "的元素。雖然它們都能讓用戶執行不同的操作，但這并不意味著它們是相同的元素。

我們通過閱讀一些 HTML Living Standard 和 WAI-ARIA 1.2 的內容來回答這個關于行為差異的問題。

注意：本文僅討論 HTML <button> 和 <a> 元素。

關于鏈接

HTML Living Standard 有一個專門討論鏈接的部分。以下是該文檔提供的釋義：

鏈接是一個概念性結構，代表兩個資源之間的連接。

它還指出，鏈接有兩種類型：外部資源鏈接和超鏈接。

我們分別舉例說明。

外部資源鏈接

指向外部資源的鏈接是指當前網站之外的資源。可以通過設置 rel 屬性為 "external" 來標記這些鏈接，然后還可以使用像 a[rel="external"] 這樣的 CSS 屬性選擇器對它們應用獨特的樣式。例如，您可能選擇在每個 rel="external" 的鏈接后面附加文本 "(外部鏈接)"。這可以通過以下 CSS 實現：

a[rel="external"]::after {
  content: " (external link)";
}

相關概念：提前警告用戶上下文變化，以盡量減少混淆

還可以對帶有 target="_blank" 的鏈接應用特殊樣式。在以下示例中，文本“（在新標簽頁中打開）”被添加到鏈接中，以警告用戶激活鏈接時會發生多個上下文變化。

a[target="_blank"]::after {
  content: " (opens in new tab)";
}

這與 Success Criterion 3.2.5: Change on Request 有關，該標準指出：

只有在用戶提出要求時才會更改上下文，或者有一種機制可以關閉這種更改。

出于許多原因，提醒用戶某個操作會導致上下文變化非常重要。一些用戶可能因為認知限制或視覺、閱讀或智力障礙而無法察覺到上下文的變化。對于運動能力有限的用戶來說，意外和不必要的上下文變化會導致他們需要付出額外努力才能回到原來的狀態。

超鏈接

超鏈接是指向當前網站內資源的鏈接。下面是一些例子：

• 鏈接到當前頁面上的另一個位置，例如目錄有一個鏈接到標題元素的鏈接
• 鏈接到網站的另一個頁面，例如鏈接到另一個網站的相關博文
• 可下載文件的鏈接，這些文件將在以后使用，而不是立即使用

根據 HTML Living Standard，<a> 元素的 rel 屬性有多個值可用于指定元素為超鏈接：alternate、author、bookmark、help、license、next、prev、search 和 tag。

我列出這長長的值列表并不是因為我認為了解每一個都很重要。這樣做是為了更明顯地展示原生 <a> 元素所處理的大量功能。你可能聽說過，當你想將 <button> 元素變成鏈接時，可以應用 role="link"，但這遠遠不夠。

當想渲染一個鏈接時，不使用原生的 <a> 元素會導致大量功能喪失，而我們討論的這一個屬性只是觸及了表面。在這里，ARIA 的第一條規則非常重要：

如果可以使用具有所需語義和行為的原生 HTML 元素或屬性，而不是重新利用一個元素并添加 ARIA 角色、狀態或屬性來使其可訪問，那么請這樣做。

ink ARIA 角色

在定義鏈接方面，我們還有一個話題要討論，那就是 link 角色。 link 是 <a> 元素的默認角色。下面是該角色的定義方式：

對內部或外部資源的交互式引用，激活后可使用戶代理導航到該資源。

還有一條注釋寫道：

如果按下鏈接會觸發操作，但不會改變瀏覽器焦點或頁面位置，建議作者考慮使用按鈕角色而不是鏈接角色。

根據我們迄今為止所了解的所有信息，我認為我們可以對鏈接做出如下定義：連接兩個資源的元素，激活后可執行以下操作之一：下載鏈接資源、將瀏覽器焦點切換到頁面的另一部分或將瀏覽器位置切換到另一個頁面。

關于按鈕

HTML Living Standard 并沒有像對鏈接那樣為我們提供太多關于按鈕的非技術信息，因此我將依賴 MDN Web 文檔和 WAI-ARIA 1.2 規范來進行定義。

<button> 元素

MDN Web Docs 對按鈕元素的定義如下

<button> HTML 元素是一種交互式元素，用戶可以用鼠標、鍵盤、手指、語音指令或其他輔助技術激活它。一旦激活，它就會執行一個可編程的操作，如提交表單或打開對話框。

按鈕元素接受的一長串屬性：

• autofocus 自動對焦
• autocomplete 自動完成
• disabled 禁用
• form 組成
• formaction 行動
• formenctype 表單類型
• formmethod 方法
• formnovalidate
• formtarget 表單目標
• name 名字
• type
• value

這是一個很大的功能。該列表還說明了為什么混合匹配 <a> 和 <button> 元素不是一個好主意。僅僅將 role="button" 應用于 <a> 元素還不足以使錨元素與按鈕元素的本地實現相匹配。事實上，如果不使用輔助技術，僅僅更改 role 并不能改變元素的外觀或行為。

button ARIA 角色

WAI-ARIA 1.2 規范指出， button 的作用是：

點擊或按下時允許用戶觸發操作的輸入。按鈕主要用于不連續的操作。將按鈕的外觀標準化，可增強用戶將部件識別為按鈕的能力。

這就是說，按鈕通常一次只用于執行一個動作。它還指出，用戶可以從按鈕的標準化外觀中獲益，從而識別出按鈕是一種交互式元素。

button 角色支持一種 ARIA 狀態，而 link 角色不支持這種狀態。這個狀態就是 aria-pressed 。它傳達了切換按鈕的 "按下"狀態。這并不是 <a> 元素的特質。這是另一個例子，說明按鈕和鏈接之間的差別有多大。

Button WAI-ARIA小工具

ARIA 創作實踐指南 (APG) 是學習無障礙語義和鍵盤界面的有用資源。它有幾個常用小工具的示例。它還包括有關常見做法的資源。

其中一個部件示例是按鈕部件。在定義了該 widget 并命名了另外兩種支持的按鈕類型（切換和菜單）后，它指出了區分鏈接和按鈕的重要性：

按鈕執行的操作類型與鏈接的功能截然不同。重要的是，窗口小部件的外觀和作用必須與其提供的功能相匹配。

它還指出，有時鏈接具有按鈕的視覺風格，但它說還有一個更好的解決方案：調整設計。

然而，元素有時具有鏈接的視覺樣式，但執行按鈕的動作。在這種情況下，為元素賦予按鈕角色有助于輔助技術用戶理解元素的功能。但更好的解決方案是調整視覺設計，使其與功能和 ARIA 角色相匹配。

比較鏈接和按鈕

現在，我們應該對鏈接和按鈕的不同之處有了一定的了解。下面再列舉幾個不同之處的例子：

• 按鈕和鏈接的鼠標指針是不同的， <a> 元素懸停時的鼠標光標是 pointer 。而對于 <button> 元素，則是默認/自動光標
• 即使本地 <button> 的角色是 link ，也始終可以通過鍵盤訪問。本地 <a> 只有在定義了 href 屬性的情況下才能通過鍵盤訪問，即使其角色為 button 也是如此。這意味著，如果您決定不將本地元素用于其預期目的，還需要做額外的工作來使鍵盤界面正常工作。
• 用戶代理和輔助技術可提供包含不同類型元素的導航列表。Mac 上的 VoiceOver 旋轉器就是一個例子。按鈕列在 "表單控件 "下，鏈接列在 "鏈接 "下。如果一個元素的編碼方式無法被輔助技術識別，那么用戶就無法正常瀏覽頁面。這并不是屏幕閱讀器的失敗。本地元素已經兼容，所以請使用它們！
• 用戶代理和輔助技術還提供了與不同類型元素交互的命令和手勢。不使用本地元素會干擾這些功能，導致用戶感到困惑和沮喪。這并不是屏幕閱讀器的失敗。本地元素已經兼容，所以請使用它們！

還有多少用戶代理或輔助技術功能被編碼不良的元素破壞？我不知道。你想測試每一個元素并找出答案嗎？我很懷疑。使用本地 HTML 元素即可！

請記住使用 ARIA 的第一條規則：

如果可以使用已內置所需語義和行為的本地 HTML 元素或屬性，而不是重新利用一個元素并添加 ARIA 角色、狀態或屬性使其可訪問，那么就這樣做吧。

不要忘記使用 ARIA 的第二條規則：

除非確有必要，否則不要改變本地語義。

為什么按鈕和鏈接的樣式不同

有四項無障礙原則指導我們必須如何構建網絡和內容。可以用縮寫詞 POUR 來記住它們：信息和界面必須是可感知的、可操作的、可理解的和穩健的。

按鈕和鏈接的外觀與無障礙環境的四項原則有什么關系呢

• 在用戶操作界面之前，他們必須能夠感知界面中哪些元素是交互式的。
• 為了讓用戶在操作界面之前做出明智的決定，界面必須易于理解。
• 為了讓用戶能在多種條件和環境下操作界面，界面必須堅固耐用。

那么答案是什么呢？

當你需要連接兩個資源，且元素被激活時需要發生以下情況之一時，請使用錨元素：

• 下載鏈接資源
• 將瀏覽器焦點移至頁面的其他部分、
• 將瀏覽器定位到另一個頁面

當需要讓用戶執行可編程操作（如提交表單或打開對話框）時，可使用按鈕元素。