a11y - 按鈕列表應該是 tablist 還是保留為按鈕列表？

Question

我有一個按鈕列表，用於過濾 SPA 應用程序中的目錄。 結構如下所示：

<div>
  <button>filter 1</button>
  <button>filter 2</button>
  <button>filter 3</button>
</div>
<div>
   {results}
</div>

單擊每個按鈕會導致從服務器獲取新結果，然后在區域 {results} 中更新。

我們有一位可訪問性專家堅持我們將上述結構更改為選項卡列表，但我不知道它會如何工作，據我了解，選項卡列表需要選項卡和相應的選項卡面板。 按鈕可以是選項卡，但選項卡面板呢？ 我沒有預先存在的數據，必須在單擊按鈕時獲取它。

我將如何更新上述內容以使其符合可訪問性？

Answer 1

它有點像 tablist ，因為點擊按鈕本質上會改變您的視圖，但沒有可訪問性的原因，您必須使用tablist 設計模式。

我同意你會“強迫”它進入模式，因為你只有一個更新的面板而不是三個單獨的面板。

讓一組 3 個按鈕全部更新同一個容器而不使用 tablist 是非常好的。

對盲人用戶來說，他們有 3 個按鈕可供選擇嗎？ 如果沒有，將它們包含在列表中可能會很好。 您可以使用真正的<ul>並關閉項目符號樣式或使用role="list"和role="listitem" 。

<div role="list">
  <span role="listitem">
    <button>filter 1</button>
  </span>
  <span role="listitem">
    <button>filter 2</button>
  </span>
  <span role="listitem">
    <button>filter 3</button>
  </span>
</div>

我使用<span>容器作為按鈕來保持原始示例的內聯性質。

接下來，對於無視力的用戶來說，當按鈕被選中時頁面已經更新是顯而易見的嗎？ 這可能就像說“選擇一個按鈕將更新結果”一樣簡單，也可能從按鈕標簽中顯而易見。 根據您的情況，可能需要aria-live 。 但這超出了您最初問題的范圍。