How to Activate tel: Links Only on Devices Capable of Making Calls

tel: links are crucial for providing users with quick access to call features directly from your website. However, displaying them on devices that do not support calling can create a confusing or unnecessary user experience. In this article, we’ll explore the options for activating tel: links only on devices capable of making calls, with a focus on the implementation using the navigator API, as well as accessibility and SEO considerations.

Available Options for Managing `tel:` Links

When it comes to implementing tel: links, there are several options:

CSS Control: Use display: none and media queries to hide links on desktop devices.
userAgent Detection: Use JavaScript to detect the device based on the userAgent string.
navigator API: Combine userAgent analysis with connection type detection for a more robust solution.

After evaluating the options, I chose to use the navigator API along with userAgent detection to create an effective and versatile solution.

Why I Preferred the `navigator` API

The navigator API allows you to check additional information about the device, such as the connection type (e.g., cellular). This approach provides greater control than using only the userAgent and improves the accuracy of mobile device detection. Combining these two techniques ensures that tel: links are visible and functional only on devices that can actually make calls.

Detailed Implementation

Here’s a complete example of how to implement this solution:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>`tel:` Link with Fallback</title>
    <style>
        .phone-link[href="javascript:void(0);"] {
            pointer-events: none;
            color: grey;
            cursor: default;
        }
        .phone-link .tooltip {
            font-size: 0.9em;
            color: grey;
        }
    </style>
</head>
<body>

    <a href="javascript:void(0);" data-phone="1234567890" class="phone-link">Call</a>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            try {
                let isMobile = /Mobi|Android|iPhone|iPad|iPod/.test(navigator.userAgent);
                if (navigator.connection && navigator.connection.type === 'cellular') {
                    isMobile = true;
                }

                if (isMobile) {
                    document.querySelectorAll('.phone-link').forEach(function (link) {
                        link.href = "tel:" + link.dataset.phone;
                    });
                } else {
                    document.querySelectorAll('.phone-link').forEach(function (link) {
                        link.style.color = 'grey';
                        link.title = 'Calling available only on mobile devices';
                        link.innerHTML += ' <span class="tooltip">(Available only on mobile)</span>';
                    });
                }
            } catch (error) {
                console.error("Error detecting device or activating `tel:` links:", error);
            }
        });
    </script>

</body>
</html>

Accessibility Considerations

Ensuring that the solution is accessible to all users is crucial:

Clarity and Visual Feedback: Provide clear visual feedback for disabled links through messages or tooltips.
Screen Reader Support: Use attributes like aria-label or aria-describedby to ensure that the links are understandable for screen reader users.
Keyboard Navigation: Add tabindex="-1" to disabled links to exclude them from keyboard navigation.

SEO Impact

tel: links do not directly impact SEO, but it’s important to:

Descriptive Text Content: Provide clear context for search engines and improve user experience.
Mobile-First Indexing: Ensure that content is optimized for mobile devices to enhance visibility.

Conclusion

Using the navigator API combined with other detection techniques is a solid solution to activate tel: links only on devices that can use them. Paying attention to accessibility and SEO ensures that the site is user-friendly and search engine optimized.

Available Options for Managing tel: Links

Why I Preferred the navigator API