At work there are plans afoot to reconcile various differing Autocomplete implementations into a single, reusable component. So far there’s been a written audit presenting all instances and how they differ in functional and technical respects. There’s also been design work to identify visual commonalities and avoid future inconsistencies. I’d now like to add another perspective: an investigation into which HTML materials and (if necessary) ARIA supplements are appropriate to ensure we build something accessible and resilient.
My experience is that to achieve the right result, HTML semantics and related concerns can’t just follow and bend to spec and visual design goals, but rather must influence the setting of those goals.
I’ll flesh out my findings in due course, but for now here are the key resources I’ve identified and plan to dig deep into.
Adrian Roselli’s article Stop Using ‘Drop-down’. To summarise the options of interest:
- ARIA Listbox lets you create a DIY thing that has the same roles and semantics as a
<select>but where you have greater stylistic control. There are different ways to implement a Listbox. Datalistis the native HTML version of a combo box. A combo box is essentially a<select>with a text field.Datalistis announced by screen readers in different ways but as far as I can gather these are quirky rather than terrible. I found a nice Twitter thread on DataList which not only shows off its function but also includes a promising accessibility-related comment from Patrick H Lauke of Tetralogical. The drawback, becauseDatalistis native HTML, is that its options are not stylelable.- ARIA Combobox is a pattern that combines ARIA
combobox,textboxandlistboxroles, and the benefit it brings is to allow a level of custom design that you couldn’t achieve withDatalist. Autocomplete(not to be confused with the HTMLautocompleteattribute) describes a control which provides users with suggestions that may not be available in the DOM already… for example when you fetch options via Ajax in reponse to what the user types.
With regard to Autocomplete, Adrian points to Adam Silver’s Building an accessible autocomplete control.
And for advice on whether or not to go with a native select or a custom control, and how best to implement listbox and combobox if that’s your choice, Adrian points to the following resources from Sarah Higley:
<select>your poison part 2 (see the Roll your own section at bottom)- Recommended Combobox Patterns pen
I also see that GOV.UK have marked a possible Autocomplete component as one of their next priorities to review. Their Autocomplete discussion thread includes examples and research and will be really helpful.