search

alphagov / govuk-design-system

One place for service teams to find styles, components and patterns for designing government services.
https://www.gov.uk/design-system
MIT License
517 stars 236 forks source link

Re-design visuals of search results #4195

Closed hazalarpalikli closed 3 days ago

hazalarpalikli commented 1 month ago

Hypothesis

Improve the visuals of search results without relying on visually hidden text so we can help users who relies on screen readers make the distinction between search term vs the category.

Identified Problem

When searching for results within the autocomplete components, each result is presented with two key sets of information. The first line includes the item/string that has been searched for, which is followed by indicating what area of the GOV.UK Design System it resides under.

However, while this structure is useful in the event of multiple items having the same name but residing in different parts of the design system; the current programmatic presentation is not equivalently provided to screen reader users as it is visually. Currently each option will read as one line and the is no distinction between the search term and the category it belongs to. Visually this is obvious to users due to the information being provided on a separate line and in some instances with a chevron to indicate subcategories. However, none of this stylist information is provided to screen reader users.

Ticket for this work is https://github.com/alphagov/govuk-design-system/issues/4006

Previous tests

Owen has run testing against the comma solution he found the following:

I've run testing against the comma solution, following some team conferring where it was noted that ideally the screen reader output should reflect the visual output as closely as possible. I've added a column to the testing spreadsheet linked above.

Testing results for this one are very positive. Dictation for all screen readers clearly deliminates the search result and the section information associated with said result with a pause between items. The only downside is that text boxes provided by screen readers to display what they dictate would display a space before the comma. For example, using Radios and Components, this sounds like

Radios, Components

...but looks like

Radios , Components

I personally don't think this is an issue as the impact to user experience is neglegable. I'm going to press for this solution for now.

Needed roles

Designer, content, frontend developer

hazalarpalikli commented 1 month ago

Moving this to block, i'll pick this up when i am back.

kellylee-gds commented 3 weeks ago

We'll use the 'wild card meeting' on Thursday to review the search results designs, agree on solutions if possible and assess implementation timeline.

calvin-lau-sig7 commented 1 week ago

To do to ship: