Components

Highlight

Draw attention to specific written content, from other content on the page.

12/12/1995
<mark class="hods-highlight">
  <strong>12/12/1995</strong>
</mark>

<Highlight>12/12/1995</Highlight>
Props
NameTypeDefaultDescription
idother'id' attribute to place on the base HTML element
classBlockotherBlock name override in BEM style classes applied to all elements
classModifiersotherBEM style modifiers to apply to the base HTML element
classNameotherExtra classes to apply to the base HTML element

When to use this component

The highlight can be used to solve different problems:

When to not use this component

Do not:

  • only use colour to highlight differences, use other elements such as bold
  • use with other coloured components within content
  • overuse

How it works

United Kingdon (UK)
<mark class="hods-highlight">
  <strong>United Kingdon (UK)</strong>
</mark>

<Highlight>United Kingdon (UK)</Highlight>
PEX 354 857 999
<mark class="hods-highlight">
  <strong>PEX 354 857 999</strong>
</mark>

<Highlight>PEX 354 857 999</Highlight>
Niles Turnball
<mark class="hods-highlight">
  <strong>Niles Turnball</strong>
</mark>

<Highlight>Niles Turnball</Highlight>

Writing for this component

Consider explaining the purpose of the highlight, especially if there are different use cases within a service. It takes users time to work out what the highlight is showing.

Accessibility

You should:

  • combine bold text with the highlight
  • use in moderation - overuse reduces efficacy and can cause unecessary mental load, especially for people using screen readers

Research

This component is used by:

  • an internal service to compare identity details

The highlight does not work if:

  • it's overused
  • there are multiple conflicting colours on the screen

We found this from usability testing with 3 external participants with access needs, with varying severities of vision loss. Participants used screen readers and zoom function whilst participating. High level findings include:

  • the highlight doesn’t draw the attention of users using screen readers
  • bold was more useful to alert participants who were partially sighted
  • conflicting colours on screen was disorienting for partially sighted users

Help us improve this component

This component needs improving. We need more evidence about:

  • internal staff, who use systems daily
  • users with other access needs, such as dyslexia, dyscalculia and ADHD
  • new staff members or those recently trained on a service

To contribute, add your thoughts and research findings to our GitHub discussion, or follow our contribute guidance.