1

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.

enter image description here

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

1 Answer 1

1

Try to keep it simple. Start with the Disclosure pattern. Each filter will be a separate disclosure widget.

The actual dropdown of checkboxes can be a simple grouping of checkboxes. You can either use the native <fieldset> to group them or a <div role="group" aria-label="filter 3">.

You mention the page URL doesn't change when filters are selected. Do you have text on the page somewhere that says how many results there are? If that text changes when filters are selected, you'd want the text contained in a live region.

<div aria-live="polite" aria-atomic="true" id="searchResults>
   5 results
</div>

I saw this same question posted on stackoverflow but then removed. I think it was ok to post there since the answer requires some coding.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.