Autocomplete: Lack of visual cue for results

[selfthinker]

This issue is from the accessibility audit of the Design System website by DAC in July 2024.

DAC's description

• Page: Home – GOV.UK Design System
• WCAG reference: none (Usability)
• Issue ID: DAC_Visual_Cues_Usability_03

When a user inputs data into the text field additional content will be revealed below. Our low vision analyst reported that when viewing the page within a highly magnified state it is difficult to determine if there is new content being added to the page and that it would be helpful if there were additional cues provided to inform them of this behaviour.

DAC's proposed solution

We suggest implementing a chevron associated to the text input to indicate to users that there is additional content being displayed below.

Other potential solutions

There might be other solutions.
If the chevron is always there, the component might be misunderstood to be a select box.
This needs some nuanced design thinking.

Additional instances

This component appears on every page but is a single component, therefore only needs to be fixed once.
It uses the accessible autocomplete component.

Needed roles

Designer, frontend developer

[hazalarpalikli]

Hello I have done some sketching on these. I need to catch-up with @CharlotteDowns and designers in the team to get a review on this. Designs are here if you want to have a look at in the meantime. https://www.figma.com/design/n8Jvs96qFFcKOw0qPe1se5/DAC-Accessibility-Issue?node-id=3-17&t=G7MQOd7VT5EKXhlg-1

[hazalarpalikli]

Hello,

I have applied high contrast colours to the solution we are proposing. Attaching the images below, more could be found here as well https://www.figma.com/design/n8Jvs96qFFcKOw0qPe1se5/DAC-Accessibility-Issue?node-id=3-17&t=nYLbHvGnE2svut3I-1

I have added some comments on the figma file. I have some concerns especially with the expanding card after the search. I am not sure if it's explicit enough and it's also allowing users to see the search below.

Alt: Design system landing page, search function with a focus state highlighted.

Alt: Design system landing page, search function with a focus state off