We often need to apply hyperlinks to email addresses and phone numbers to make it easy for users to quickly contact us. However, simply applying links directly to email addresses and phone numbers results in an inaccessible experience for screen reader users.

Quick note: Screen reader users often navigate a page by jumping from link to link, having them read aloud. This behavior makes it important to have descriptive link text on each link so that the user can perceive the link’s function without needing additional context.

Here’s an example of inaccessible links. I’ll explain why they are inaccessible below:

If you have questions, you can contact us at contactinfo@fakeuniversity.edu or (555) 867-5309.

Why is it inaccessible to link an email address directly?

When a link is applied directly to an email address, like this one: contactinfo@fakeuniversity.edu, a sighted user might be able to understand the link, but a screen reader user will likely hear that link being read as an incoherent jumble of letters since that email address is not actually a word.

Why is it inaccessible to link a phone number directly?

If we link a phone number like this: (555) 867-5309, the screen reader will simply read “5 5 5 8 6 7 5 3 0 9” which is nonsense.

We usually improve that by placing special “screen-reader-only” text within the link to give it more context. For example, a link may look like Phone number:(555) 867-5309 but the screen reader will — when we apply the special text — actually read the link as “Phone number: 5 5 5 8 6 7 5 3 0 9” which is decent, but still sounds a bit robotic.

More problems arise, however, when a phone number link shares a sentence with an email link because — depending on the link text used for the email link — it may be unclear which link applies to the phone number and which link applies to the email address. Here’s an example of such a well-intentioned but confusing setup:

If you have questions, you can contact us at contactinfo@fakeuniversity.edu or (555) 867-5309.

The “contact us” link above is easier to understand with a screen reader than a jumbled email address link, but if I click it…will I call them or email them? It’s hard to tell.

The ‘Email Us, Call Us’ method

The best way to provide parity between the sighted and non-sighted user experiences is to link specific and descriptive accompanying text for email and phone links, like this:

If you have questions, you can email us at contactinfo@fakeuniversity.edu or call us  at (555) 867-5309.

In the example above, it’s pretty obvious what each link accomplishes, both sighted and nonsighted users will have the same experience, and we managed to put both an email link and a phone link in the same sentence without any ambiguity about which one is which. What a win!