HTML 可訪問性 combobox 角色

Question

我的項目中有以下布局：

<div class="css-c18mwd-ImageFrameBase-ImageFrameWithGradient-SecondaryImageFrameWithGradient e1jjxv8j4">
<button tabindex="0" aria-haspopup="true" class="css-11ubmv-MediaGridButton e1jjxv8j1">Enlarge Nordic Blue Nokia X20 from Front and Back</button>
</div>

但是當我查看輔助功能選項卡時，它顯示我的button的角色是combobox ，如下面的屏幕截圖所示。

如何將其更改為更易於訪問並像頁面上的其他button一樣具有按鈕的作用？

Answer 1

這是一個奇怪的案例。 我相信你應該刪除aria-haspopup （和tabindex當你在它的時候，這對於<button>是多余的）。

就像我們繼續之前的提醒一樣：重要的是屏幕閱讀器最終宣布了什么，並符合相關標准。

從haspopup屬性文檔：

彈出元素通常顯示為位於其他內容之上的內容塊。 作者必須確保用作彈出內容容器的元素的角色是menu, listbox, tree, grid或dialog ，並且aria-haspopup的值與彈出容器的角色相匹配。

如果我從您的評論中正確理解您正在打開圖像的更大視圖。 從上面的列表中，唯一合適的角色是dialog 。

在查看dialog role 的文檔時，您不會發現任何提及haspopup ，我也沒有看到任何具有該屬性的對話框模式。

甚至ARIA Authoring Practices Guide 上的模態對話框示例也沒有使用該屬性。 Bootstrap Modal也沒有。

所以我的建議是遵循這些指南並簡單地刪除aria-hasdialog並確保您的對話正確實施所有要求。

此外，我相信瀏覽器並不是要根據該屬性中的值來改變元素的角色。 我更放心的是aria-hasdialog已被棄用，除了選定的角色，而button就是其中之一。 如果它改變了這個角色，這有什么意義呢？

試驗結果

Chrome 在所有這些情況下都公開了combobox角色：

<button aria-haspopup="true">Enlarge Image</button>
<button aria-haspopup="true" aria-expanded="false">Enlarge Image</button>
<button aria-haspopup="dialog">Enlarge Image</button>

但 Chromvox 將宣布：

放大圖片，彈出按鈕
放大圖像，彈出按鈕折疊
放大圖像，按鈕

我還沒有用 NVDA 測試過，如果有人可以用 Jaws 測試那就太好了。

Firefox 有所不同，但也改變了前兩個的角色，這似乎很合適。

也許我們應該向 Webkit 團隊提交錯誤報告。