How to properly implement typical e-commerce comboboxes

[marcus-herrmann]

Hi,

I'm not quite sure if my question belongs here or not – so please ignore, if out of place.

So I'm wondering what to consult regarding combobox patterns typical for e-commerce sites (I assume the closest match in APG is "Editable Combobox With List Autocomplete") – for example this one: https://theme-dawn-demo.myshopify.com/ (Search suggestion: "bag").

I have some issues with this implementation:
While the options are grouped in a manner that fits the spec, the APG writes regarding semantics in options: "In addition, the interaction model conveyed by the listbox role to assistive technologies does not support interacting with elements inside of an option." But the Dawn example and every other implementation I encountered works with links there. Even if it was technically no link, selecting an option (or suggested product) would lead the user to this product's detail page in the implementation reality I've encountered. That is, on top of that, an WCAG 3.2.2 violation – or is it so commonplace in online shops that one considers it "expected"?

My main question is: do you know of a better, more suitable best practice for this special pattern? I reckon, aria-haspopup="grid" kind of solves the "link in option" situation, but the AT support seems even worse here (and don't get me started on Voice Over's aria-activedescendant-support gap). I had certain high hopes at first since Shopify's Dawn theme seems to have got at least some user testing and support by Fable, at least according to this article.

[JAWS-test]

https://www.w3.org/TR/wai-aria-1.3/#combobox

Authors MUST ensure the popup element associated with a combobox has a role of listbox, tree, grid, or dialog.

If listbox and option are used, then no links may be used and no link functionality may be implemented.

If links and link functionality are required, role=dialog should be used.

[css-meeting-bot]

The ARIA Authoring Practices (APG) Task Force just discussed How to properly implement typical e-commerce comboboxes.

The full IRC log of that discussion

<jugglinmike> Subtopic: How to properly implement typical e-commerce comboboxes
<jugglinmike> github: https://github.com//issues/2999
<jugglinmike> Matt_King: I think this person is asking whether the elements in a dropdown list of a combobox can be links or work like links
<jugglinmike> Matt_King: In the example website, it looked to me like the combobox they have for their search type-ahead is working really nicely
<jugglinmike> Matt_King: If you follow that link, and you go to the search button, it opens a dialog which is just a combobox and a search button
<jugglinmike> Matt_King: I used the term which they suggested, "bags"
<jugglinmike> Matt_King: In the dropdown for the combobox, are those styled as links visually? Do they work like links for other people? They don't seem to behave like links for me; they seem to just execute a search
<jugglinmike> Matt_King: I don't know if maybe this is something that is non-obvious to a screen reader user
<jugglinmike> jugglinmike: The items function like links to me--they cause a navigation
<jugglinmike> Matt_King: Yeah, it works that way for me, too, but the screen reader doesn't tell me it's a link. I wonder if that's what people are concerned about
<jugglinmike> Matt_King: You can't open those links in a new tab as a keyboard user because the focus is on the search box
<jugglinmike> jugglinmike: I can open the links in a new tab as a mouse user by clicking with the middle button
<jugglinmike> Matt_King: I don't think there's a problem with this implementation as far as I can tell.
<jugglinmike> Matt_King: The only problem with the options not being links is that they don't have all the functionality of links. The dropdown certainly works as I would expect it to work
<jugglinmike> Matt_King: It's not clear to me why this is a special pattern
<jugglinmike> Matt_King: I don't know if using a grid in the drop-down (so that the link could be exposed as a link) is an improvement. I don't know if the dropdown items need to be exposed as links
<jugglinmike> Matt_King: Though I haven't tried this with multiple screen readers...
<jugglinmike> Matt_King: This looks just like APG's listboxes. It feels fine to me
<jugglinmike> Jem: I don't see any listbox role in this design
<jugglinmike> Matt_King: Somehow JAWS is going into forms mode, though
<jugglinmike> Jem: Ah, I see the "listbox" role, now
<jugglinmike> Jem: the role "option" is on the <li> element
<jugglinmike> Matt_King: the option is a child of group, which is allowed
<jugglinmike> Matt_King: There is a heading inside of a listbox, which is a validation issue
<jugglinmike> Matt_King: I don't know if this is a special pattern. It looks to me like this is the listbox with grouped options, and the options behave as links. There isn't a rule against options behaving as links as far as I know
<jugglinmike> Matt_King: Any executable elements is allowed to execute a command. One such command is "open this page" which is what a link does
<jugglinmike> siri: how does a user know that an item is a link if it isn't exposed as a link?
<jugglinmike> Matt_King: Well, what else would the user expect the items in a list of "search results" to do?
<jugglinmike> Zakim, end the meeting

[mcking65]

@marcus-herrmann

Your understanding that option elements in a listbox cannot be perceived as a link because children presentational is true for an option is correct. Note, however, that is a constraint on what can be perceived by AT users, not a constraint on the behavior of listbox options.

So, There are two important questions:

1. Is it permissible for a listbox option to have link-like behaviors, e.g., trigger a page load?
2. In this implementation, is it important that AT users perceive the listbox options as links?

WRT Q1: There are many examples of options, treeitems, menuitems, and tabs triggering page loads. The ARIA specification does not constrain authors from using listboxes, trees, tabs, or menus from being used to support navigation-like behaviors in web apps. Using those patterns to support various types of navigation is a design decision, and there are various tradeoffs with each. Net, the answer to question 1 is "yes, it is OK to trigger a page load with an option in a listbox.

WRT Q2, does this design serve AT users well? Are they at a disadvantage if they do not perceive the options as links?

The APG task force cannot answer this definitively because we don't know the users and what is important in this particular application. However, this specific implementation is well-aligned with APG patterns. There are only two potential disadvantages of the options not being perceivable as links by AT users:

1. AT users cannot easily open the link target in a new window from the dropdown.
2. AT users cannot easily copy the link target URI from the dropdown.

Taking off my APG TF Chair hat and speaking as a blind screen reader user and AX professional, in this particular scenario, I don't think those disadvantages are important. The search dropdown behaves very well and it works just as I would expect. I had no problem using it with JAWS and Chrome; it is easy to understand what the drop down is doing for me. It works just like many other search experiences that I have used. Props to the people who designed and built it.

[marcus-herrmann]

@mcking65 Thank you for your extensive statement. You condensed my original post down to the two core questions and answered them.

It works just like many other search experiences that I have used. Props to the people who designed and built it.

That was my impression as well. But it's really good to hear your stance on this