To make your page more accessible and user-friendly you can create clickable links for specific texts. It can be phone number, email, sms, and more.

In this article, I’d like to show you how you can improve the accessability of a page by implementing just semantic HTML changes (additionally to indicate the link purpose you can add a specific styles to it).

To create links with specific actions you should use an anchor tag with a href attribute that contains certain parameters (following the URI syntax).

Clickable email link

Inside the href attribute specify mailto parameter and the email that is separated by a colon

<a href="mailto:email@example.com">email@example.com</a>

Clicking on this link will open an email client on a user’s device with a specified email address to send it to.

You can specify more than one email, just separate them with a comma:

<a href="mailto:email@example.com, secondemail@example.com">Send us an email</a>

You can use other parameters for sending emails like cc and bcc.

• mailto: recipient’s email address
• cc: the email address that will receive the carbon copy of the mail (optional)
• bcc: the email address that will receive the blind carbon copy of the mail (optional)
• subject: the subject of the email (optional)
• body: the content of the email (optional)
• ?: the first parameter delimiter (optional).
• &: the other parameter delimiter (optional).

The full set of these parameters might look like this:

<a href="mailto:email@example.com?cc=secondemail@example.com, thirdemail@example.com, &bcc=lastemail@example.com&subject=Mail from my site&body=Hello!">Send us an email</a>

Clickable phone link

Having a click action on a phone number is as important as the previous one. Clicking on a phone number will instantly make a phone call.

You’ll need to specify the tel parameter separated by colon from a phone number:

<a href="tel:+012345678910">0-123-45678910</a>

A click on such a link will trigger a phone call.

Clickable sms link

To send an SMS message use the following syntax.

<a href="sms:+012345678910">Send us a message</a>

You can add a body parameter to set the initial text of the message:

<a href="sms:+012345678910?body=Hello!%20How%20are%20you%3F">Send us a message</a>

The body attribute should contain a URL-encoded value.

Clickable Geolocation link

For Android OS devices you can specify geolocation via the geo URI Scheme "geo:latitude,longitude" specified by RFC 5870.

Clicking on such a link will open a map application with given coordinates.

<a href='geo:47.26769008051434, 11.407943002524679'>Our location</a>

💡 TIP: Make sure that these links are easily clickable on mobile devices. To do so, you can increase spacingbetween links by adding margin and increase tappable area by adding padding.