在網(wǎng)頁無障礙領(lǐng)域，最具爭(zhēng)議的問題之一是，在創(chuàng)建某些類型的交互元素時(shí)，應(yīng)該使用按鈕還是鏈接。為什么這個(gè)問題如此有爭(zhēng)議？多年來，無障礙專家已經(jīng)無數(shù)次回答了這個(gè)問題。同時(shí)，還有大量的參考文獻(xiàn)提供了這個(gè)問題的答案。

答案很簡(jiǎn)單，只有在沒有考慮到為什么鏈接和按鈕的外觀和行為完全不同的情況下，才會(huì)引起爭(zhēng)議。

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

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

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

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

關(guān)于鏈接

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

鏈接是一個(gè)概念性結(jié)構(gòu)，代表兩個(gè)資源之間的連接。

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

我們分別舉例說明。

外部資源鏈接

指向外部資源的鏈接是指當(dāng)前網(wǎng)站之外的資源?？梢酝ㄟ^設(shè)置 rel 屬性為 "external" 來標(biāo)記這些鏈接，然后還可以使用像 a[rel="external"] 這樣的 CSS 屬性選擇器對(duì)它們應(yīng)用獨(dú)特的樣式。例如，您可能選擇在每個(gè) rel="external" 的鏈接后面附加文本 "(外部鏈接)"。這可以通過以下 CSS 實(shí)現(xiàn)：

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

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

還可以對(duì)帶有 target="_blank" 的鏈接應(yīng)用特殊樣式。在以下示例中，文本“（在新標(biāo)簽頁中打開）”被添加到鏈接中，以警告用戶激活鏈接時(shí)會(huì)發(fā)生多個(gè)上下文變化。

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

這與 Success Criterion 3.2.5: Change on Request 有關(guān)，該標(biāo)準(zhǔn)指出：

只有在用戶提出要求時(shí)才會(huì)更改上下文，或者有一種機(jī)制可以關(guān)閉這種更改。

出于許多原因，提醒用戶某個(gè)操作會(huì)導(dǎo)致上下文變化非常重要。一些用戶可能因?yàn)檎J(rèn)知限制或視覺、閱讀或智力障礙而無法察覺到上下文的變化。對(duì)于運(yùn)動(dòng)能力有限的用戶來說，意外和不必要的上下文變化會(huì)導(dǎo)致他們需要付出額外努力才能回到原來的狀態(tài)。

超鏈接

超鏈接是指向當(dāng)前網(wǎng)站內(nèi)資源的鏈接。下面是一些例子：

• 鏈接到當(dāng)前頁面上的另一個(gè)位置，例如目錄有一個(gè)鏈接到標(biāo)題元素的鏈接
• 鏈接到網(wǎng)站的另一個(gè)頁面，例如鏈接到另一個(gè)網(wǎng)站的相關(guān)博文
• 可下載文件的鏈接，這些文件將在以后使用，而不是立即使用

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

我列出這長(zhǎng)長(zhǎng)的值列表并不是因?yàn)槲艺J(rèn)為了解每一個(gè)都很重要。這樣做是為了更明顯地展示原生 <a> 元素所處理的大量功能。你可能聽說過，當(dāng)你想將 <button> 元素變成鏈接時(shí)，可以應(yīng)用 role="link"，但這遠(yuǎn)遠(yuǎn)不夠。

當(dāng)想渲染一個(gè)鏈接時(shí)，不使用原生的 <a> 元素會(huì)導(dǎo)致大量功能喪失，而我們討論的這一個(gè)屬性只是觸及了表面。在這里，ARIA 的第一條規(guī)則非常重要：

如果可以使用具有所需語義和行為的原生 HTML 元素或?qū)傩?，而不是重新利用一個(gè)元素并添加 ARIA 角色、狀態(tài)或?qū)傩詠硎蛊淇稍L問，那么請(qǐng)這樣做。

ink ARIA 角色

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

對(duì)內(nèi)部或外部資源的交互式引用，激活后可使用戶代理導(dǎo)航到該資源。

還有一條注釋寫道：

如果按下鏈接會(huì)觸發(fā)操作，但不會(huì)改變?yōu)g覽器焦點(diǎn)或頁面位置，建議作者考慮使用按鈕角色而不是鏈接角色。

根據(jù)我們迄今為止所了解的所有信息，我認(rèn)為我們可以對(duì)鏈接做出如下定義：連接兩個(gè)資源的元素，激活后可執(zhí)行以下操作之一：下載鏈接資源、將瀏覽器焦點(diǎn)切換到頁面的另一部分或?qū)g覽器位置切換到另一個(gè)頁面。

關(guān)于按鈕

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

<button> 元素

MDN Web Docs 對(duì)按鈕元素的定義如下

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

按鈕元素接受的一長(zhǎng)串屬性：

• autofocus 自動(dòng)對(duì)焦
• autocomplete 自動(dòng)完成
• disabled 禁用
• form 組成
• formaction 行動(dòng)
• formenctype 表單類型
• formmethod 方法
• formnovalidate
• formtarget 表單目標(biāo)
• name 名字
• type
• value

這是一個(gè)很大的功能。該列表還說明了為什么混合匹配 <a> 和 <button> 元素不是一個(gè)好主意。僅僅將 role="button" 應(yīng)用于 <a> 元素還不足以使錨元素與按鈕元素的本地實(shí)現(xiàn)相匹配。事實(shí)上，如果不使用輔助技術(shù)，僅僅更改 role 并不能改變?cè)氐耐庥^或行為。

button ARIA 角色

WAI-ARIA 1.2 規(guī)范指出， button 的作用是：

點(diǎn)擊或按下時(shí)允許用戶觸發(fā)操作的輸入。按鈕主要用于不連續(xù)的操作。將按鈕的外觀標(biāo)準(zhǔn)化，可增強(qiáng)用戶將部件識(shí)別為按鈕的能力。

這就是說，按鈕通常一次只用于執(zhí)行一個(gè)動(dòng)作。它還指出，用戶可以從按鈕的標(biāo)準(zhǔn)化外觀中獲益，從而識(shí)別出按鈕是一種交互式元素。

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

Button WAI-ARIA小工具

ARIA 創(chuàng)作實(shí)踐指南 (APG) 是學(xué)習(xí)無障礙語義和鍵盤界面的有用資源。它有幾個(gè)常用小工具的示例。它還包括有關(guān)常見做法的資源。

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

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

它還指出，有時(shí)鏈接具有按鈕的視覺風(fēng)格，但它說還有一個(gè)更好的解決方案：調(diào)整設(shè)計(jì)。

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

比較鏈接和按鈕

現(xiàn)在，我們應(yīng)該對(duì)鏈接和按鈕的不同之處有了一定的了解。下面再列舉幾個(gè)不同之處的例子：

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

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

請(qǐng)記住使用 ARIA 的第一條規(guī)則：

如果可以使用已內(nèi)置所需語義和行為的本地 HTML 元素或?qū)傩?，而不是重新利用一個(gè)元素并添加 ARIA 角色、狀態(tài)或?qū)傩允蛊淇稍L問，那么就這樣做吧。

不要忘記使用 ARIA 的第二條規(guī)則：

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

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

有四項(xiàng)無障礙原則指導(dǎo)我們必須如何構(gòu)建網(wǎng)絡(luò)和內(nèi)容?？梢杂每s寫詞 POUR 來記住它們：信息和界面必須是可感知的、可操作的、可理解的和穩(wěn)健的。

按鈕和鏈接的外觀與無障礙環(huán)境的四項(xiàng)原則有什么關(guān)系呢

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

那么答案是什么呢？

當(dāng)你需要連接兩個(gè)資源，且元素被激活時(shí)需要發(fā)生以下情況之一時(shí)，請(qǐng)使用錨元素：

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

當(dāng)需要讓用戶執(zhí)行可編程操作（如提交表單或打開對(duì)話框）時(shí)，可使用按鈕元素。