Tag

[davidhunter08]

What

Use tags to show a status.

Related

NHS design system guidance NHS design system discussion GOV.UK Design System guidance GOV.UK Design System discussion

Examples on the NHS App

Examples

   

Journeys found on

• Request repeat prescription
• Find NHS services near you
• Prescriptions
• Upcoming and past appointments

Notes

The GOV.UK Design System team have recently made some tag design changes to improve the accessibility and readability of the tag text.

Progress

Design checklist

• [x] Gather evidence and consolidate designs
• [x] Create a rough proposal (Figma)
• [x] Build a working version (HTML or Native)
• [x] Draft guidance
• [x] Design sign off

Development criteria

• [x] Make WCAG 2.2 compliant
• [x] Add HTML / Nunjucks version
• [x] Add vue.js version
• [x] Add Figma version
• [x] Add design system guidance

[davidhunter08]

GOV.UK tag component update:

Design changes:

• no longer uppercase
• no longer bold
• remove 1px extra letter spacing
• increase font size to 19px
• change colours to use lighter background colours

These changes are to improve the accessibility and readability of the tag text, and to make the tags look less like clickable buttons.

Here's a preview of the changes.

[davidhunter08]

I asked on x-gov Slack if the background colour of the tag needs a contrast ratio of at least 3:1 against the page background?

The answer...

Non-text contrast only applies to interactive components and graphics necessary to understand the content.

I'd argue that tag backgrounds/borders do not need to meet the 3:1 contrast ratio as they are not interactive elements and the context tags provide is in the tag's text, with the colour being supplemental.

The text should still meet a minimum contrast ratio of 4.5:1 with whatever background colour is in use.

Also note how the gov.uk tag will render in high contrast mode...

Our current tag element does the same using a transparent outline.

In v5 we redesigned the tags and removed the outline, however, as it made the tags look very similar to how buttons are rendered in High Contrast Mode. We've opted to bolden the text instead.

[michaelgallagher]

@davidhunter08 so would that apply to the edges of cards too? (thinking about the "keyline or no?" question)

[growe88]

Have just been looking through a Mural page of research findings from Compass and have found this comment. ->

User believes tag to be a clickable button.

Possible solutions to make this element look less like a button include:

1. Desaturating the background colour: this would reduce the contrast on the white background, and differentiate itself from the saturated green primary CTAs. Side-by-side the new GDS tag colours are slightly dimmer, which sacrifices the small pop of vibrance on the page in exchange for (hopefully) less users mistaking the tag for a button. (https://github.com/alphagov/govuk-design-system-backlog/issues/62)

2. Reducing text weight from bold to regular: This change is also in line with the GDS redesign. This solution seems to lend itself to larger screens, in which larger font sizes can be used (GDS text size is 19pt compared to our mobile size of 14pt). This change would likely require our text colour to be made darker for increased contrast, but will be something in which I will experiment.

[michaelgallagher]

@growe88

1. do we know how often this happens?
2. is the entire card clickable? (it should be) and if so: does this matter? (meaning: if a user thinks the tag is clickable, and the result is that they click it and go to the next page ... well, that is what was supposed to happen, right?)
3. Aligning with the changes rolled out by GDS recently makes sense to me!
4. Does this need to be a tag? Would the words "action needed" in red do the job?

[davidhunter08]

Example from Hackney Council

• sentence case
• font weight normal

https://design-system.hackney.gov.uk/components/tag

[Tosin-Balogun]

Prescription and medicines use tag to tell status of an prescription order