What Are Inaccessible Links?

Links are the main element of the web but many websites don’t use them to their full potential.

Providing links to emails or telephones, or even places or addresses will increase the usability of your website, but more importantly, it will increase the accessibility of your page!

People won’t need to copy and paste text using their screen reader, they will be able to automatically follow the link to get to the right place without more input.

Famous Websites With Inaccessible Links

These examples are from some of the most famous websites in the world, used every day by millions or even billions of people.

No accessible address or Whatsapp number on Al Jazeera No accessible address or Whatsapp number on Al Jazeera

No accessible phone numbers on CNN No accessible phone numbers on CNN

No accessible address on ABC News No accessible address on ABC News

No accessible telephones number and addresses on Stack Overflow No accessible telephones number and addresses on Stack Overflow

No accessible email on Craigslist No accessible email on Craigslist

After this brief introduction, we will discuss all the different types of links you should try to use to improve the accessibility of your HTML content or pages.

The Basic Links

Links to an internal anchor or to an external page. You can read more about the correct usage of links and buttons here.

<a href="domain.com/page">Let's go to an external link!</a>
<a href="#internalAnchor">Let's go to a page anchor link!</a>

Email Link

It’s the second most used type of link to provide a simple way to send an email, it’s known by most developers already, but in any case:

<a href="myname@domain.com">Send me an email!</a>

Telephone Link

Here’s the quickest way to make a telephone number accessible to mobile users or to PC users with Skype or similar software to make calls.

The prefix tel means telephone-uri or telephone subscriber ID.

You just need to remember to add the prefix tel:.

<a href="tel:+447700900328">Call me at this number!</a>

SMS Link

This link has the same format as the telephone links but it’s for sending text SMS. You can even add some text to the body of the SMS automatically!

<a href="sms:+447700900328">Send me an SMS like the old times!</a>

Whatsapp Link

Whatsapp provides a direct link through their subdomain wa.me with your phone number without the "+", in this case, an Italian number with prefix "39".

<a href="https://wa.me/390123456789">Send me a message on Whatsapp!</a>

Address or Place Link

For addresses or locations, we still don’t have a proper standard but providing a link to Google Map’s web page will be enough for many occasions, and for countries where you can’t use this service, like China, you can provide alternative links like Baidu Maps.

The standard way is to use latitude and longitude coordinates, because they can be used on all usual maps providers.

Google Maps uses latitude and longitude:

<a href="https://www.google.com/maps/place/80.145752,33.390435">
Came visit me on Svalbard!
</a>

And for Baidu, we can’t use latitude and longitude due to different standards used inside mainland China, with strange offsets still related to the Cold War.

I suggest you open Baidu Maps, find a location and copy the URL you will see in the address bar, something like: "https://map.baidu.com/@1580909.4439028562,5303807.420056639,6.99z".

<a href="https://map.baidu.com/@1580909.4439028562,5303807.420056639,6.99z">
Came visit me in China!
</a>

References and Resources