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 phone numbers on CNN No accessible address on ABC News No accessible telephones number and addresses on Stack Overflow 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>
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="email@example.com">Send me an email!</a>
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.
telephone-uri or telephone subscriber ID.
You just need to remember to add the prefix
<a href="tel:+447700900328">Call me at this number!</a>
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 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://firstname.lastname@example.org,5303807.420056639,6.99z”.
<a href="https://email@example.com,5303807.420056639,6.99z"> Came visit me in China! </a>
Test your website for accessibility issues!
There are many custom product to do so like Husable that will provide you a real human test valuation of your website to discover real problems that automatic tools won’t find or discover cause you simply need a human!
References and Resources
- Accessibility: web links should be links and web buttons should be buttons.