search

alphagov / accessible-autocomplete

An autocomplete component, built to be accessible.
https://alphagov.github.io/accessible-autocomplete/examples/
MIT License
900 stars 148 forks source link

Autocomplete instructions not available for some screen reading software #498

Open NicolaSaunders opened 3 years ago

NicolaSaunders commented 3 years ago

We are using the accessibleAutocomplete.enhanceSelectElement option to enhance a select element into an accessible autocomplete.

During testing, we received the following from https://digitalaccessibilitycentre.org/ that we wanted to share with your team:

URL: https://w3c-dev.studio24.dev/forms.html

Key audible feedback from the autocomplete was missing for JAWS users using Edge Chromium and VoiceOver users. No information on how to locate the options were present, and there was no indication that options has filtered.

VoiceOver users were not informed on how to interact with the component (such as by using Explore by touch).

Current code ref(s): <input aria-expanded="false" aria-owns="destination__listbox" aria-autocomplete="both" autocomplete="off" class="autocomplete__input autocomplete__input--show-all-values" id="destination" name="" placeholder="" type="text" role="combobox" aria-describedby="destination__assistiveHint">

Screen reader comments: JAWS: browsing with Microsoft Edge Chromium I was not advised of how to locate the options using any method of navigation. Once I entered characters, I was not informed that options were filtering and in a non-testing environment would not have been aware that I could filter content.

VoiceOver: I was advised that options were filtering once I entered characters, but no prompt advised me that I needed to explore by touch. As a highly experienced screen reader analyst I was aware of how to locate the options, but less experienced users might be unaware that they must explore by touch to locate the content.

TalkBack: I was given a prompt when in context of how to use the auto complete feature and could select an option.

Ensuring that screen reader users are advised on how to navigate to and select an option with all software will avoid any difficulty.”

Issue consistent for the following pages: The W3C team Journey 2 step 2 The W3C team | W3C Redesign Prototypes (studio24.dev) Members Journey 2 step 3 https://w3c-dev.studio24.dev/listing-members/index.html

Solution: Ensure the autocomplete instructions on how to interact with the feature and its functionality when filtering options is available for all users of assistive technology.

Please refer to the GOV.UK Design System for accessible autocomplete examples.

Note: We have not tested the GOV.UK Design System features in Microsoft Edge as this is not part of the testing matrix for GOV.UK Design System so were unaware that this was an issue in this browser and appears to be browser specific. Does not prevent users from making a selection.

edwardhorsford commented 3 years ago

Just a note that I tested VoiceOver in Safari and that still seems to be working fine. I presume this is the more common browser combo for VoiceOver (hopefully gds can confirm). I wonder though if the testing matrix should include Edge...