aria-practices
aria-practices copied to clipboard
Guidance for implemention of E-Commerce style filter option narrowing
Hello
I'm looking for guidance on the correct way to implement a particular pattern I've seen on e-commerce sites.
Description
On a search page a number of filters are presented to allow the user to refine their search. When one of these filters has a lot of options, there is often a text bar that accepts input and filters the visible options to things that match the input text.
Examples
Some examples in the wild:
-
REI - on the Brand filter
- The input has an associated label element that says "find a brand". The options list is a
ul
. Options are anchor tags insideli
tags.
- The input has an associated label element that says "find a brand". The options list is a
-
Target - on the Size filter within the filter dialog
- The input has an associated label element that says "search size". There's no particular markup for the list of options. Options are checkbox inputs.
-
CVS - on the brand filter
- The input has
aria-label="Find a Brand"
. There's no particular markup on the option list. Options are divs with role="checkbox" and aria-label/aria-checked attributes.
- The input has
Discussion
Some of these choices don't seem ideal to me, for example CVS's usage of anchors for options or Target not putting the options in a list which means there's no easy way to tell how many options match the current filter text. But I'm not sure what a correct implementation would look like.
To me the functionality here feels similar to a combobox but I don't know if the fact the options are always visible precludes its usage. I may be reading too much into it but the APG and WAI-ARIA both consistently refer to suggestions as being in a "popup". The APG says "The popup is hidden by default, i.e., the default state is collapsed." WAI-ARIA says "Typically, the initial state of a combobox is collapsed." which is less prescriptive but still implies a collapsed state is possible.
Some other alternatives I've considered are a "search" role, which I think is incorrect because we don't want a landmark, or using aria-controls
.