Description
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.