ARIA 角色按鈕：Guía Completa y Práctica

aria role button 是一個 ARIA 角色，它能讓輔助技術將通用容器宣告為按鈕，但它不提供行為：必須添加 tabindex="0"、處理 Enter 和 Space 鍵，並使用 aria-pressed 或 aria-disabled 來反映狀態。 WAI-ARIA 1.2 規範將此角色定義在 widget 類別中，而 ARIA 的第一條規則建議只要可能就應使用原生 <button>。

aria role button與 WAI-ARIA 角色分類相關，是 W3C 的標準，用於描述網路介面可存取的語意。當元素被賦予 role="button" 時，螢幕閱讀器（NVDA, JAWS, VoiceOver, Narrator）構建的輔助功能樹將不再將其視為通用的 div 或 span，而是將其呈現為一個可操作的控制項。 這對於使用螢幕閱讀器導覽的人來說差異巨大：沒有該角色時，使用者聽到的是「群組」或僅僅是文字；有了該角色，則會聽到「按鈕」並知道可以觸發它。

常見的誤區是認為 role="button" 能將 div 轉換為功能完備的按鈕。事實並非如此。該角色僅改變宣告的語義；而行為（獲取焦點、回應鍵盤、觸發動作）仍由開發者負責。這種語義與行為的分離是使用此角色時最常犯錯的根源。

WAI-ARIA 作為 W3C 的推薦標準發布，其 1.2 版本是目前角色、狀態和屬性的現行參考標準。 button 角色是規範中最古老且最穩定的 widget 角色之一，從 ARIA 1.0 就已存在。

Cuándo usar role=“button” 和 cuándo no

ARIA 的第一條規則（記載於 WAI-ARIA 撰寫實踐中）非常明確：如果存在具有你所需語義和行為的原生 HTML 元素，請直接使用它。 <button> 已內建隱式角色、鍵盤焦點、Enter 和 Space 觸發以及禁用狀態。使用 role="button" 重新實作所有這些功能是額外的工作，且容易產生 bug。

然而，在某些合法場景下仍需使用此角色。最常見的情況是標記受框架或 CMS 限制，無法在不破壞佈局或現有 JavaScript 的情況下引入 <button>。另一種情況是組件必須表現得像按鈕，但其內部結構要求使用特定的容器，例如某些第三方小部件。

相關： UserWay — 免費使用計劃的小工具.

第三種較有爭議的場景是元素已有不同的原生角色，但需要呈現為按鈕。 此時應思考設計是否強加了錯誤的語義。如果某個元素看起來像按鈕但實際上是導航到另一個頁面，正確的做法是使用連結 <a> 而非按鈕。

情況	推薦解決方案	原因
	表單或介面操作	原生 <button>
	導航至其他 URL	<a href>
	不可修改的容器	role="button" + 鍵盤 + 狀態
	切換按鈕 (on/off)	<button aria-pressed>
	禁用按鈕	<button disabled>

執行與 role=“button” 更正相關的按鈕

按鈕必須是「role=」button」`，需要使用以下指令：foco、teclado、estado 和 nombre accessible。 Omitir cualquiera de ellos 生產不受控制的“parece”，可在 pruebas reales 中訪問 pero Falla。

可以使用 tabindex="0"，在自然表格順序中插入元素。 Nunca 使用「tabindex」來表示正面的價值：改變所有頁面的製表順序和不可預測的一般變化。 El valor ‘0’ 是個人化互動元素的正確選擇。

值得一看： AudioEye — Accesibilidad gestionada：自動化與人性化修訂結合.

El teclado requiere manejar dos teclas: 輸入 y Espacio。 Un <button> nativo responde a ambas, pero un div con un aria role de botón no lo hace por sí alone.如果按下“keydown”並執行“Enter”或“Space”操作，則會在頁面上彈出一個挑釁性的空間或逃。這是一個與頻率和聲音有關的中音部分，它具有獨立的功能。

El estado se comunica con atributos ARIA。 Un botón de alternancia usa aria-pressed="true" 或 "false" para indicar si está active.如果使用 aria-disabled="true" 按鈕，則表示無法進行單獨的互動：請在程式碼中進行操作。 「aria-disabled」和「disabled」的差別在於，首先要指定元素，然後再選擇表格順序。

名稱可與可見元素或文本一起構建，如果沒有文本，則與“aria-label”或“aria-labelledby”有關。一個按鈕可以透過一個按鈕來訪問，該按鈕可以透過「按鈕」來訪問，但它是一個按鈕。

<div
  角色=“按鈕”
  標籤索引=“0”
  詠嘆調-pressed =“假”
  id="btn-modo"
>
  奧斯庫羅模式
</div>

<腳本>
  const btn = document.getElementById('btn-modo');
  函數切換（）{
    const activo = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!activo));
  }
  btn.addEventListener('點擊', 切換);
  btn.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      切換（）；
    }
  });
</腳本>

El ejemplo anterior cubre foco, teclado, estado y nombre。至少可以控制海上可用的潘塔拉和特克拉多連接器。

錯誤頻率和偵測器錯誤

如果在tabindex中使用role="button"，則會出現錯誤，導致無法在技術上使用按鈕。自動偵測器以「不可強制互動的元素」的方式，將小提琴報告為可存取的報告。

第二個錯誤是不存在的。 Un div con un aria role de botón y tabindex pero sin manejadores de tecla recibe foco y no responde a Enter ni Espacio. El usuario de teclado queda atrapado: puede enfocar el actbot

相關： IAAP CPACC / WAS Certification — 獲得相關經驗的專業認證.

使用 role="button" 時會出現第三個錯誤。這與導航的語義和混淆了潘塔拉的朗誦者的含義有關，但它是“按鈕”，通常是與捆綁在一起的。 Si el elemento navega，debe ser un enlace。

錯誤發生在 olvidar el estado en botones de alternancia。 Un botón que cambia entre dos modos sin ‘aria-pressed’ deja al usuario sin saber en qué estado se encuentra.此屬性是通訊格式的屬性，是程式格式的標準。

偵測到問題，自動裝置與斧頭、燈塔或 WAVE 訊號中提琴的作用，但沒有驗證國家邏輯的技術配合。 Esa 部分 exige prueba 手冊：navegar con Tab，activar con Enter y Espacio，y escuchar la salida del lector de pantalla。自動審計和手動審計的組合可有效驗證和個人化按鈕。

如果您正在購物： accessiBe — IA 超級位置將在 48 小時內推動 WCAG.

Cómo probar un botón con role=“button”

La prueba empieza por el teclado。在選項卡上記錄頁面並計算與詠嘆調角色按鈕可見的按鈕。脈衝輸入和單獨空間： ambos deben disparar la acción。如果您在頁面上的空間中啟動按鈕，則可以「防止預設」。

La segunda prueba es con lector de pantalla. Windows 上的 NVDA、macOS 上的 VoiceOver 和 Windows 上的敘述人都是美國的參考。 Al enfocar el botón, el lector debe anunciar el rol (“botón”), el nombre accessible y el estado si lo titene. Si anuncia “grupo” o no menciona el estado, algo Falla。

La tercera prueba es de orden de foco。該按鈕將按照表格順序排列，並顯示相應的視覺效果。 ‘tabindex’ 積極地促進了 Claro de Mala 實施的指示。

La cuarta prueba es de contre y foco 可見。 El indicador de foco no debe Eliminarse con outline: none sin sustituirlo por una aternativa 可見。在此過程中，請使用正確的食譜。

現代替代品角色按鈕

El elemento <button> nativo sigue siendo la mejor option en 2024 y en cualquier proyecto nuevo。 Aporta rol, foco, teclado y estados sin código adicional, y los navegadores lo tratan de forma permanente.

洛斯 自訂元素 o Web 組件 ofrecen otra vía。擴展“HTMLElement”組件需要封裝按鈕並解釋正確的語義，因此需要使用“role=”button”`的焦點和技術手冊。La ventaja es la reutilización; la desventaja, la Misma responsabilidad de Implementación.

Las ARIA in HTML （reglas que Definen qué 角色 ARIA se alloweden sobre cada elemento HTML） desaconsejan sobrescribir 角色 nativos。應用 aria 角色 role="button" 與 <button> 是多餘的；應用一個與「href」相反的「」。一般建議和保留有關語義相關內容的建議。

要點

• role="button" cambia alone la semántica anunciada; el foco、el teclado 和 el estado hay que Implementarlos a mano。
• La Primera regla de ARIA 建議使用 <button> nativo siempre que el marcado lo perpera。
• 與 aria 角色按鈕相關的按鈕需要 tabindex="0"，需要輸入 Enter 和 Espacio，名稱可存取並可設定為 aria-pressed 或 aria-disabled。
• 自動偵測 falta de foco、pero el comportamiento de teclado 和 estado exige prueba 手動連接 pantalla。
• Nunca 使用 tabindex 正面附加 role="button" 來連接導航。

常見問題

¿ Cuál es la diffencia entre role=“button” 和 el elemento 按鈕？

「<按鈕>」元素本身包括隱式角色、桌面按鈕、輸入空間和附加功能的啟動。 El atributo role="button" 單獨 aporta la semántica anunciada;恢復程序的兼容性。 Por eso la prime regla de ARIA recomienda el elemento nativo siempre que sea posible.

¿ Necesito tabindex con role=“button”？

巳。 Un div 或 span con role="button" 不能強制執行，因為 tabindex="0" 無法執行製表順序，也無法執行指令。 El valor Correcto es 0;改變頁面順序和刪除表格的正面價值。

¿ Cómo hago que un div con role=“button” 回應 Enter y Espacio？

按下“keydown”並按下“Enter”或“Space”按鈕。在空間中，您可以使用“preventDefault”來防止頁面消失。如果是這樣，您可以在沒有任何活動的情況下進行操作。

¿ Cómo indico que un botón está activo or deshabilitado?

使用 aria-pressed="true" 或 "false" 來變更狀態。如果您使用「aria-disabled=」true「`，則表示無法進行單獨的互動：但會阻礙您的行動。本機屬性「已停用」最好使用「<按鈕>」。

¿ Es mala práctica usar role=“button” en un enlace？

那麼，請連接另一個 URL。 Sobrescribir 的角色與 <a href> 和 role="button" 一起使用導航語義，並混淆了潘塔拉的讀者，而「按鈕」則通常與捆綁在一起。 Si el elemento navega，debe conservar su rol de enlace。

¿如何偵測角色=「按鈕」的錯誤？

自動工具是斧頭、燈塔或 WAVE 小提琴，是互動元素中的 falta de foco。但是，無法驗證國家邏輯的技術配合，無法將自動音訊與使用 NVDA、旁白或旁白的手動音訊組合進行驗證。