过滤/排序“下拉列表”的可访问性模式是什么？

Question

I have a design that displays a list of content that you can filter by different categories. Each filter is displayed in a dropdown menu that lets you choose one or more options, which when activated (either through click or keyboard), will update the results on the page. The page url does not change in response to the filter and there is no "submit" button to apply the filter.

I'm confused which ARIA pattern to use: Menu (with menu/menuitem roles) or Combobox (with listbox/option roles).

Answer 1

In my opinion you should go with a combobox .

Otherwise, it should be a menubar rather than menu :

A menu that is visually persistent is a menubar .

Managing focus

Aside from the question which role to use, you need to decide whether to manage focus or not. It is recommended (should) for menu and menubar , which would mean that the whole bar only has one tab stop, and navigation between the single dropdowns is done via arrow keys .

Website or application?

This depends on how much your site feels like an application overall. If it's more of a website, keyboard users in general are more accustomed to tabbing than to managed focus. For users it is sometimes a surprise that you need to navigate within components by means of arrow keys.

If there are other composite widgets as well that manage focus, you absolutely could do so for this part as well.

Responsive Design

A menubar should allow left and right arrow keys to navigate the filters, and up and down to focus the options. Managing focus would get complicated with Responsive Design : Once items wrap, it becomes less obvious how to navigate to them.

Actions vs Selections

A menu is usually used for actions. To quote some references (emphasis mine):

A menu is a widget that offers a list of choices to the user, such as a set of actions or functions .

– Menu or Menu bar pattern

The WAI ARIA standard defines an actual `nole="menu"' widget, but this is specific to application-like menus which trigger actions or functions .

– Bootstrap

Since the filters only allow choosing options, and not executing commands or functions, I would rather go with combobox .

Searchability

Combobox also implies that it's a flat list of options, maybe grouped. This is immediately known. A menu can potentially have sub menus, so it's less clear what to expect when opening a filter list.

Since combobox is a flat list, users can type Printable characters to directly jump to a list item. This is not the expectation for menus.

Show the user's selection

Since the filters close once a selection is made, it is best practice to display the chosen value or values in the closed item. Also known as the Visibility of System Status .

A combobox will do so, and screen readers would even announce the current choice without opening the list. A menu does not have that behaviour.