Accessible autocompletes

Right now we use Select2 in various parts of the Pressbooks dashboard interface. This library has known accessibility issues (see here and here). Some attempts have been made to improve it but it is still less than ideal. I’ve been looking at alternatives, and I found this:

I’d be interested to know if any community members with accessibility and inclusive design expertise have any experience with this library or the bandwidth to give it a secondary evaluation. As it stands I feel pretty confident in moving forward at some point soon to replace our uses of Select2 with this, but I value second opinions!

CC: @jmitchell @jhung @Naomi_Salmon

W3C has an example of an auto-complete combobox: https://w3c.github.io/aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html

I tested that example quickly with VoiceOver + Safari, and NVDA + FF. It’s keyboard accessible. It does not appear to announce the list of suggestions, but you can arrow through the list using the cursor keys. I’m not sure if that’s a great user experience.

I tested the Alphagov example you mentioned above, it appears to be accessible and announces suggestions. At a glance, its implementation is similar to the W3C example. (Aside: It uses the aria-owns attribute, which I’ve never seen used before. Interesting!). It seems to do the job.

jQuery UI has an AutoComplete widget - have you taken a look at it? Unlike the Aphagov example, jQuery uses an Aria live region to announce updates to the suggestion list. This region grows as the user does more attempts per page. An array holds all the suggestions and is injected into a list as the user interacts with it. The experience I found to be nice, but its implementation is very different from what W3C suggests.

The Alphagov solution seems fine, but I would also take into consideration how active the developers are and how responsive they would be to address issues.

@ned

1 Like

Thanks @jhung! This is useful feedback. I’ll check out the links you shared.