Accessible Telephone Numbers

1. Use a tel: prefix for both mobile and desktop views:

   <a href="tel:number" … >

2. Always display the number itself, don't hide it behind a "Call us now!" CTA.

   <a href="tel:+447831123456">Call us now!</a>

3. Always use an international +44 prefix in the href:

   <a href="tel:+44number" … >

4. Don't allow spaces in the href attribute, but they're allowed in the link text for clarity:

   <a href="tel:+447831123456">07831 123 456</a>

5. Be sure to remove the lead zero when using an international code +44.
   For example: "07831 123 456" becomes "+44 7831 123 456"

   <a href="tel:+447831123456">+44 7831 123 456</a>

6. Whether the text copy number uses the international format or not is down to its expected use.
   For example: Report a card lost or stolen abroad.

   <a href="tel:+447831123456">+44 7831 123 456</a>

7. Add text to the link to describe the number when it's taken out of context:

   <a href="tel:+447831123456">Help centre: 07831 123 456</a>

8. Don't use an aria-label to spell out the number:

    aria-label="0 7 8 3 1 1 2 3 4 5 6" 

9. Do use CSS to encourage single digit read out - but it doesn't always work:

   [href^="tel:"] { speak-as: digits; }

10. Please remember that colour alone is not enough to distinguish a link from the copy.
    I suggest making the number bolder and slightly larger than the standard copy.
    And perhaps consider keeping the underline too?
11. Ensure the telephone number isn't obscured by the focus ring when focussed by keyboard.

    [href^="tel:"]:focus-visible {
        outline: .125em solid [outline-color];
        outline-offset: .25em;
    }

12. Do not prevent the number from wrapping on smaller devices:

    a { text-wrap: nowrap; }

All these rules pulled together gives: Help centre: 07831 123 456

And, Lost card abroad: +44 7831 123 456

<a href="tel:+447831123456">Help centre: <b>07831 123 456</b></a>

<a href="tel:+447831123456">Lost card abroad: <b>+44 7831 123 456</b></a>

[href^="tel:"] {
    color: [text-color];
    text-underline-offset: 2px;
}
[href^="tel:"]:focus-visible {
    outline: .125em solid [outline-color];
    outline-offset: .25em;
}
[href^="tel:"] > b {
    speak-as: digits;
    font-size: 1.25em;
    padding-left:.125em;
}