過濾/排序“下拉列表”的可訪問性模式是什么？

Question

我有一個顯示內容列表的設計，您可以按不同類別過濾這些內容。 每個過濾器都顯示在一個下拉菜單中，您可以從中選擇一個或多個選項，激活后（通過單擊或鍵盤），將更新頁面上的結果。 頁面 url 不會響應過濾器而改變，並且沒有“提交”按鈕來應用過濾器。

我對使用哪種 ARIA 模式感到困惑：菜單（具有菜單/菜單項角色）或Combobox （具有列表框/選項角色）。

Answer 1

在我看來你應該 go 與combobox 。

否則，它應該是一個menubar而不是menu ：

視覺持久的菜單是menubar 。

管理重點

除了使用哪個角色的問題之外，您還需要決定是否管理焦點。 建議（應該）用於menu和menubar ，這意味着整個欄只有一個制表位，並且單個下拉菜單之間的導航是通過箭頭鍵完成的。

網站還是應用程序？

這取決於您的站點整體上感覺像一個應用程序的程度。 如果它更像是一個網站，那么鍵盤用戶通常更習慣使用 Tab 鍵而不是管理焦點。 對於用戶來說，您需要通過箭頭鍵在組件內導航有時會讓他們感到驚訝。

如果還有其他復合小部件可以管理焦點，那么您絕對也可以對這部分進行管理。

響應式設計

菜單欄應允許左右箭頭鍵導航過濾器，並允許上下箭頭鍵聚焦選項。 使用響應式設計管理焦點會變得復雜：一旦項目包裝，如何導航到它們就變得不那么明顯了。

行動與選擇

菜單通常用於操作。 引用一些參考資料（強調我的）：

菜單是為用戶提供選項列表的小部件，例如一組操作或功能。

– 菜單或菜單欄模式

WAI ARIA 標准定義了一個實際的 `nole="menu"' 小部件，但這是特定於觸發操作或功能的類似應用程序的菜單。

– 引導程序

由於過濾器只允許選擇選項，而不能執行命令或函數，我寧願 go 和combobox 。

可搜索性

Combobox 也意味着它是一個簡單的選項列表，可能是分組的。 這是立即知道的。 菜單可能有子菜單，因此不太清楚打開過濾器列表時會發生什么。

由於 combobox 是一個平面列表，用戶可以鍵入可打印字符直接跳轉到列表項。 這不是對菜單的期望。

顯示用戶的選擇

由於一旦做出選擇過濾器就會關閉，因此最佳做法是在已關閉的項目中顯示所選的一個或多個值。 也稱為系統狀態的可見性。

combobox會這樣做，屏幕閱讀器甚至會在不打開列表的情況下宣布當前的選擇。 菜單沒有這種行為。