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 accessibility of a page by implementing just semantic HTML changes (additionally to indicate the link purpose you can add a specific style to it).

1. Clickable email link
2. Clickable phone link
3. Clickable SMS link
4. Clickable Geolocation link
5. Tips to increase accessibility

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 the mailto parameter and the email that is separated by a colon as follows:

<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 a 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 spacing between links by adding margin and increase tapable area by adding padding.

Tips to increase accessibility

By adding the title and aria-label attributes, you improve the accessibility of the link for users with disabilities.

• title: This attribute provides a tooltip or title for the link, which is displayed when users hover over it.
• aria-label: This attribute provides an accessible label for the link, which is useful for screen readers and assistive technologies.

Here’s a more detailed example with additional attributes:

<a href="tel:+1234567890" title="Call our support team" aria-label="Call Us">
  Call Us
</a>

Conclusion

By implementing clickable contact links with semantic HTML, you can enhance the accessibility and user-friendliness of your webpages. These links offer a seamless way for users to contact you, making their experience more convenient and engaging.