Week 11: NHS Care Cards

https://service-manual.nhs.uk/design-system/components/care-cards#emergency-care-card-red-and-black

Important to note:

  • Care cards should be specific and include the information the user needs. Do not say: “Contact your GP if this happens.” Explain in the care card in what circumstances users should contact their GP.
  • People with visual disabilities may not be able to recognise care cards by their colour. Use clearly worded headings to help them.

    We also add hidden text to the care card header to make the level of urgency clear to people who use screen readers. This also helps people who use headings to navigate the page as the text is part of the heading.

    <h3><span class="visually-hidden">Non urgent care</span> Speak to a GP if<h3>

    If people use high contrast mode in Windows, the care card colours don’t show, so people can’t distinguish them. To make the cards look important, we use a border in this mode to make them stand out from the rest of the content.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website with WordPress.com
Get started
%d bloggers like this: