Introduction

’Telephone numbers’ in this context means all landline telephone, mobile or SMS numbers.

There are several display formats that describe how numbers should be shown and these should be used along with accessibility considerations.

Caution

In iOS, Safari automatically detects numbers that it assumes are phone numbers and converts them into hyperlinks.

How to prevent issues with this

Guidance

Do

• Separate the area code from the local number with a space.
• Split longer local numbers with a space for readability.
• Loose the preceding 0 when applying the calling from overseas format (+44 etc).
• Use a space after 5th digit on a mobile number for readability.
• Try to keep a number on one line where possible, without wrapping.
• Show numbers for customers to call in a different style to those they have provided

Don't

• Push the area code and digits together.
• Format major city numbers like smaller town formats and vice versa.
• Show (0) in the calling from overseas format.
• Display phone numbers as links on devices that cannot make calls.
• Collect numbers without explaining why they are needed.
• Use a phone icon with the number - there is currently no phone icon within Nucleus.
• Disclose customer phone numbers to the public.

Special numbers

To aid memorability, the patterns we use for freephone, non-geographical or emergency numbers are as follows:

Format	Usage
0800 XXX XXX / 0800 XXX XXXX	Freephone
0333 XXX XXX / 0333 XXX XXXX	Non-geographic
105	Electrical emergency
0800 111 999	Gas emergency

In some cases, if you have a number such as 0800 112 233, it could be more memorable to display it as 0800 11 22 33.

Area codes and local numbers

The length of area codes and local numbers varies across the UK, which means there are several valid formats (X = any digit 0-9):

Format	Usage
02X XXXX XXXX	Cardiff, Coventry, London, Portsmouth, Southampton and all of Northern Ireland
01X1 XXX XXXX / 011X XXX XXXX	Most other major cities
01XXX XXXXXX / 01XXX XXXXX	Smaller cities, provincial towns and rural areas

From overseas

If a UK number is to be dialled from overseas, we should format it using the +44 prefix and remove the leading 0 from the rest of the number:

01234 567890 becomes +44 123 4567890

Mobile phone numbers

There is no set pattern for mobile phone numbers, although it is helpful to break up the number with at least one space for readability. Typically after the 5th digit.

07XXX XXXXXX

SMS numbers

SMS (Short Message System) numbers are typically 5 digits long with no spaces.

54321

Ref: area-codes.org.uk

Displaying numbers as links

If you intend for a telephone number to be a link, put “tel:…” in the href without any spacing.

<a href="tel:0800111999">0800 111 999</a>

Or similarly to create an SMS, put “sms:…”

<a href="sms:01234567890">01234 567890</a>

With SMS links you can also pre-populate the message body text by adding information to the href. The text used should be kept concise and clear.

<a href="sms:01234567890;?&body=/* body text here */">01234 567890</a>

Even though many modern mobile browsers can automatically detect telephone numbers without this and display them as links, they should not be relied on because they can also misinterpret other numbers (such as meter reading numbers) and display them incorrectly as links. Also, the setting may have even been disabled by the user.

Using intentional links, especially when used with supportive text, help define and distinguish them from incorrectly interpreted other types of number.

It cannot always be determined if the user’s device supports calls or not, as this depends on the software (eg. Skype) they may have installed on mobile or desktop devices.

If you don’t want to display a number as a link do not use the <a> tag. For example, when displaying a customer’s phone number they have provided, they don’t need to be able to call themselves.

Prevention of iOS automatic behaviour

In iOS, Safari automatically detects numbers that it assumes are phone numbers and converts them into hyperlinks. This feature is designed to make it easier for users to call a phone number directly. However, this automatic behaviour can sometimes interfere with the user experience.

For example, a reference number could be misinterpreted as a phone number.

To prevent Safari from automatically detecting and linking phone numbers, a format-detection meta tag can be used in the <head> of the HTML document:

<meta name="format-detection" content="telephone=no">

Adding this meta tag disables automatic phone number detection.

When it is required to include a clickable phone number link, create it using tel::

<a href="tel:0123456789">01234 567890</a>

This approach ensures that only the specified phone numbers are clickable, while other numbers remain unlinked.

Supportive text

Using precursory text with the number can help the user understand the intention. For example:

Call us on 0800 123123

With the addition of a time frame can also a good idea to help set expectations:

Call us on 0330 123123 9.00am – 5.00pm, Monday to Friday.

In the context of requesting a number from a customer (such as in a form), it can be helpful to explain to them why you might contact them and when.

Icon

There is currently no phone icon available within Nucleus. It is recommended not to use one for this reason at this time.

Accessibility

The aria-label attribute provides the text label for an object.

When a screen reader encounters the object, the aria-label text is read so that the user will know what it is.” W3.org

Some screen-readers may read a phone number as a larger number for example the last part of 01234 567890 may be read as ‘five-hundred and sixty-seven thousand eight-hundred and ninety’. This could be overridden by using the aria-label with separated digits using spaces and commas:

<a href="tel:08001234567" aria-label="0800, 1 2 3, 4 5 6 7">0800 123 4567</a>

Then the above would be read as ‘O-eight-hundred, one two three, four five six seven’ - how the number typically sounds.

However, this could be overriding the screen-reader user’s preference, so should only be used in the event of an issue being raised. (Further testing of this with regular screen-reader users is recommended).

Flexibility

If the system is consumed by a non-UK-based team, they might need to use a different set of rules. The above can be modified to work with the formatting used in other countries.