您無法創建按鈕

可訪問性最重要的方面之一是管理焦點和用戶交互。默認情況下，所有鏈接和表單控件都可以獲得焦點。這允許您使用 tab 鍵在它們之間導航，並且當其中一個元素具有焦點時，通過按 enter 鍵激活它。無論您的 Web 應用程序的複雜性如何，這種範例都非常有效。只要僅使用鍵盤的用戶能夠在鏈接和表單控件之間導航，就可以導航應用程序。

不幸的是，有時 Web 開發人員試圖在創建他們的界面時變得過於聰明。如果我想要一些看起來像鏈接但行為像按鈕的東西怎麼辦？然後你最終會看到很多看起來像這樣的代碼：

<a href="#" onclick="doSomething()">I'm a button</a>

這段代碼應該會讓你有點反胃。這是一個無處可去、什麼也不做的鏈接。它所做的只是附加一個 onclick 事件處理程序給它一個目的。由於當前此元素所需的外觀類似於鏈接，因此標記使用鏈接和 JavaScript。

熟悉 ARIA 的人可以通過以下方式“解決”問題：

<a href="#" role="button" onclick="doSomething()">I'm a button</a>

通過將 ARIA 角色設置為按鈕，您現在告訴瀏覽器和屏幕閱讀器，此鏈接應被解釋為按鈕（在頁面上執行操作）而不是鏈接（導航您離開）。這與前面的代碼有相同的問題，只是您試圖欺騙瀏覽器將鏈接視為按鈕。實際上，最好只使用按鈕：

<button onclick="doSomething()">I'm a button</button>

要使用的標記絕不能基於 UI 元素的外觀。相反，您應該嘗試找出該元素的真正用途並使用適當的標記。您始終可以將按鈕設置為看起來像鏈接或鏈接看起來像按鈕，但這些只是視覺上的區別，不會改變操作。

如果這些是我見過的 Web 應用程序中最嚴重的罪過，我會非常高興。然而，我看到了另一個更令人不安的趨勢。一些 Web 應用程序實際上試圖通過混合和匹配 HTML、CSS 和 JavaScript 的不同部分來創建自己的按鈕。舉個例子：

<div tabindex="0" role="button" onclick="doSomething()">I'm a button</div>

這是用 <div> 創建按鈕的勇敢嘗試 .通過設置 tabindex 屬性，開發人員確保鍵盤用戶可以使用 tab 鍵導航到它。值 0 將元素添加到正常的 Tab 鍵順序中，因此它可以像任何其他鏈接或按鈕一樣接收焦點，而不會影響整體的 Tab 鍵順序。 role 通知瀏覽器和屏幕閱讀器這個元素應該被視為一個按鈕和 onclick 描述按鈕的行為。

對於使用鼠標的任何人，假設樣式正確，則此元素與實際按鈕之間沒有區別。您將鼠標移到上方並向下單擊，就會發生一個動作。但是，如果您使用鍵盤，則此按鈕與常規按鈕之間存在細微但重要的區別：幾乎所有瀏覽器都不會觸發 click 元素具有焦點並按下回車鍵時的事件。 Internet Explorer、Chrome、Firefox 和 Safari 在這種情況下都會忽略回車鍵（Opera 是唯一會觸發 click )。

回車鍵觸發 click 默認情況下在鏈接和按鈕上使用時的事件。如果您嘗試創建自己的按鈕，如上例所示，回車鍵無效，因此用戶無法執行該操作。

這種可怕的模式在 Google 產品中最為常見。也許最具諷刺意味的用法是在 Gmail 中。當你按下 ?鍵，會彈出一個對話框，顯示可用的鍵盤快捷鍵，並允許您啟用更高級的快捷鍵。

看起來“啟用”這個詞是一個鏈接，所以你按幾次 Tab 讓它獲得焦點，然後按 Enter。什麼都沒發生。為什麼？因為鏈接實際上既不是鏈接也不是按鈕，它是一個 <span> .下面是實際代碼：

<span id=":s7.pl" role="link" class="aoy" tabindex="1">Enable</span>

幾乎正是本文前面提到的有問題的模式。所以基本上為了打開鍵盤快捷鍵，你需要能夠使用鼠標。事實上，Gmail 上的很多按鈕都是這樣製作的。如果不是鍵盤快捷鍵，它基本上沒有鼠標就無法使用。

Gmail 並不是唯一使用這種模式的 Google 網站。它可以在整個谷歌網站網絡中找到，包括谷歌群組和谷歌分析（也隱藏焦點矩形）。僅這一點就讓不使用指點設備的視力正常的用戶難以使用 Google 產品。

如果您希望用戶與某物進行交互，那麼您需要使用鏈接或按鈕。在按下回車鍵時，它們在獲得焦點和激活方面都具有正確的行為。只要操作是導航（更改 URL），就應該使用鏈接，並且所有其他操作都應該使用按鈕。您可以輕鬆地設置這些樣式以創建您想要的視覺效果，但沒有什麼可以替代原生鏈接和按鈕的可訪問性。