Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Design pattern for Autocomplete missing #1134

Open
JAWS-test opened this issue Aug 21, 2019 · 3 comments
Open

Design pattern for Autocomplete missing #1134

JAWS-test opened this issue Aug 21, 2019 · 3 comments

Comments

@JAWS-test
Copy link

JAWS-test commented Aug 21, 2019

Why is there no design pattern for input fields (no combo box) with autocomplete function? This element is very widespread on the web, wider than many of the other design patterns in the WAI-ARIA authoring practices. Also, for many of the ARIA design patterns, there are HTML equivalents that should be better used. This is not the case with Autocomplete, so any web developer who wants to use an input field with Autocomplete will have to resort to a well-functioning solution with ARIA.
Almost all HTML/JS frameworks offer solutions for Autocomplete, but only a few are accessible. The keyboard operability is often given, but the output with the screen reader often does not work, because the corresponding ARIA roles (such as listbox and option) are missing or because the insertion of suggestions is not output via live region.
If an Autocomplete pattern should be developed, I can advise what works well with JAWS and Chrome, Firefox and IE 11.

@jnurthen
Copy link
Member

Can you detail how this is different to Example 1 at https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html ? Is this just perhaps a question of terminology?

@JAWS-test
Copy link
Author

JAWS-test commented Aug 21, 2019

Many frameworks differentiate between combobox and autocomplete (for instance: https://demos.telerik.com/kendo-ui/combobox/index and https://jqueryui.com/autocomplete/).

  • A combo box allows you to select from a limited number of entries that can be filtered. Free text input can also be possible, but is not required. All list entries that exist and match the filter criterion are always displayed. All list entries can be displayed with arrow keys without text input.
    There is a visual hint to the list entries (analogous to a drop-down list). Only entries that contain the complete text entry are displayed.
  • An input field with Autocomplete allows text input, which is supported by suggestions. Not all, but the best hits are displayed. The number of hits can be virtually infinite (e.g. Google search). No entries are displayed without text input. Visually it is a normal input field. The entries do not have to match the text input (e.g. if I enter "healthy fruit", the autocomplete function can suggest "apple". This would not be possible with a combo box).

I.e.

  • Combobox needs role=combobox.
  • Autocomplete is only an input field without ARIA role. When displaying suggestions, the number of suggestions is indicated by a live region.

I don't like the first two examples at https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html as they are indeed a mixture of the different concepts of combobox and autocomplete. The third example is better (but it has the problem that the list is not completely displayed in the visible area when the combo box is at the bottom of the window).

@JAWS-test
Copy link
Author

Another argument for a good autocomplete solution would be that role=combobox doesn't work with IE 11 at all and doesn't work well with Chrome and Firefox, see: FreedomScientific/standards-support#221. These problems wouldn't occur with a correctly implemented autocomplete input field.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants