Hiding information
This pattern hides part of a user’s information, allowing them to securely recognise the data without showing it in full.
When to use
Use this pattern when you need to securely reveal part of a user’s data back to them.
When not to use
Do not use this pattern if it is more important for the user to easily recognise the information rather than for it to be secure.
How it works
Use this pattern in different ways depending on the type of data you’re hiding.
Hiding a number
To hide a number, you should say ‘ending with…’ and give the last 4 digits of the number, unless there is a reason to show another part of the number.
<p class="govuk-body">Telephone: ending with 7564</p>
<p class="govuk-body">Rhif ffôn: yn gorffen gyda 7564</p>
However, if you have a lot of hidden numbers on a page, using ‘ending with…’ many times can make the page harder to read. In that case, consider whether using asterisks would be clearer. If so, hide the asterisks from screen-readers using an aria-hidden attribute (see code example) and a visually hidden span saying ‘ending with…’ for screen readers.
<p class="govuk-body">
<span aria-hidden="true">Telephone: *******7564</span>
<span class="govuk-visually-hidden">Telephone: ending with “7564”</span>
</p>
<p class="govuk-body">Rhif ffôn: *******7564</p>
Hiding an email address
It is hard to conceal an email address securely. You should consider why you need to hide it, and if it would be easier for the user to show them the full email. If you need your user to easily understand that an email is theirs, do not hide it.
However, if you do need to hide an email, use asterisks after the first letter up to the ‘@’ sign. You must also hide the asterisks from screen-readers using an aria-hidden attribute (see code example) and a visually hidden span saying ‘Email address beginning with [the first letter] and ending with [@ and the domain name]’.
<p class="govuk-body">
<span aria-hidden="true">Email address: a*******@gmail.com</span>
<span class="govuk-visually-hidden">Email address: beginning with “a” and ending with “@gmail.com”</span>
</p>
<p class="govuk-body">
<span aria-hidden="true">Cyfeiriad e-bost: a*******@gmail.com</span>
<span class="govuk-visually-hidden">Cyfeiriad e-bost: yn dechrau gyda “a” aac yn gorffen gyda “@gmail.com”</span>
</p>
Research
We need more research. If you have used hiding information, get in touch to share your research findings.