Highlighting important information

[elliot-butler-ho]

What

A number of internal services across government have implemented a highlight pattern to focus a user's attention to particular parts of data. The pattern is used to visually highlight text, differentiating it from other information on the screen. It exists in the Home Office design system figma file and is used in Home Office services already: Entity search and CRS data breaches.

The following use cases of the pattern have been identified across gov so far:

• To highlight to users where data has changed - NHS cervical screening management system
• To highlight to users where data is different when comparing - Identity verification, Home Office
• To highlight to users where data matches when comparing - n'Delius records, MoJ
• To highlight to users matched data from a search request - Entity search, Home Office

Why

The pattern has been well tested in multiple services and already exists on live services within Home Office and MoJ.
The task to compare data is common, particularly for internal case working / management services. The ability to visually highlight elements should save the user time to find what they are looking for, especially when there is a lot of content on the page, or comparing multiple sets of data at once - valuable for repeat users.

Anything else

Examples in existing services:
Home Office Entity search - used to display matched search results

(Proposed) mock up design to be used in Home Office UKVI identity verification - used to identify differences in two data sets

NHS cervical screening management - used to identify changes in medical records

MoJ - used to identity similar data in cases and merge them

Accessibility considerations

Even though we can call out the highlighted text for screen reader users, conscious that the visual colour may not be ideal for users who are partially sighted. Colour contrast against the Home Office grey background may also not be ideal. Curious to hear any comments around this.

[devansXD]

This will be relevant when thinking about accessibility https://service-manual.nhs.uk/design-system/styles/colour#accessibility

[elliot-butler-ho]

I also posted this thread on the gov design system github and received some great insights / user feedback from NHS and MOJ services using the pattern.

To summarise, the highlighted text has tested well with users, with positive feedback that it works well as a visual cue to draw attention to information.

Next steps will be to:

• review the accessibility side of the code and establish a recommended mark up
• review the shades of yellow to improve colour contrast for partially sighted users, particularly when used on a grey background, such as Home Office internal services.

[mrmartyndawson]

Entity search doesn't use this highlight pattern in the search results screen as above any more, this highlighted text is now a hyperlink through to a lower level details page.

As the contrast between the highlight (yellow) and the link colour (blue) fail accessibility guidelines, we've decided to remove the highlight.

[elliot-butler-ho]

Accessible code and semantics of the highlight pattern, made working with the accessibility and inclusion team - as tested in research sessions.

Colour tints in CSS still to be finalised.

HTML
<mark class="ho-highlight"><strong>text here</strong></mark>

CSS

.ho-highlight {
  background-color: #FFE5CC;
  border-bottom:2px solid #FFB266
}

mark::before,
mark::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

mark::before {
  content: " [highlight start] ";
}

mark::after {
  content: " [highlight end] ";
}

[tomyems]

Issue created for dev work on making the component: #495

To discuss the design choice including colour or guidance for the page, use this discussion.
To discuss the technical implementation including writing tests and so on, use the issue.

[tomyems]

Improved strength of research findings: https://63fcabeb767019005583b658--hods.netlify.app/components?name=Highlight

[tomyems]

Rephrased to 'severities of vision loss: https://63fcbae52b356b0d85c997c7--hods.netlify.app/components?name=Highlight

[tomyems]

Corrected services using this components: https://6407506a6a15180f524def75--hods.netlify.app/components?name=Highlight

[tomyems]

Add to guidance an explanation of how this interacts with screen reader users:

when there’s some highlighted text it’ll say “highlight start” -( then reads the highlighted text) followed by “highlight end” where the highlight has stopped