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.