Come Attivare i Link "tel:" solo sui Dispositivi Abilitati alle Chiamate

I link tel: sono un elemento cruciale per offrire agli utenti un accesso rapido alle chiamate direttamente dal tuo sito web. Tuttavia, visualizzarli su dispositivi che non supportano le chiamate potrebbe creare un’esperienza confusa o non necessaria. In questo articolo esploreremo le opzioni per attivare i link tel: solo su dispositivi abilitati alle chiamate, con un focus sull’implementazione tramite l’API navigator, le sfide di accessibilità e SEO.

Opzioni Disponibili per Gestire i Link `tel:`

Quando si tratta di implementare link tel:, esistono diverse opzioni:

Controllo tramite CSS: Utilizzare display: none e media query per nascondere i link sui dispositivi desktop.
Verifica del userAgent: Usare JavaScript per rilevare il dispositivo basandosi sulla stringa userAgent.
API navigator: Combina l’analisi del userAgent con la verifica del tipo di connessione per una soluzione più robusta.

Dopo aver valutato le opzioni, ho scelto di utilizzare l’API navigator insieme alla verifica del userAgent per creare una soluzione efficace e versatile.

Perché Ho Preferito l’API `navigator`

L’API navigator consente di verificare informazioni aggiuntive sul dispositivo, come il tipo di connessione (ad esempio, cellular). Questo approccio offre un controllo maggiore rispetto al solo userAgent e migliora l’accuratezza del rilevamento dei dispositivi mobili. Unire queste due tecniche consente di assicurarsi che i link tel: siano visibili e funzionanti solo sui dispositivi che possono effettivamente effettuare chiamate.

Implementazione Dettagliata

Ecco un esempio completo di come implementare questa soluzione:

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Link tel: con 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">Chiama</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 = 'Chiamata disponibile solo su dispositivi mobili';
                        link.innerHTML += ' <span class="tooltip">(Disponibile solo su mobile)</span>';
                    });
                }
            } catch (error) {
                console.error("Errore nel rilevamento del dispositivo o nell'attivazione dei link tel:", error);
            }
        });
    </script>

</body>
</html>

Tematiche di Accessibilità

È fondamentale garantire che la soluzione sia accessibile a tutti gli utenti:

Chiarezza e Feedback Visivo: Fornire un feedback visivo chiaro per i link disabilitati tramite messaggi o tooltip.
Supporto ai Lettori di Schermo: Utilizzare attributi come aria-label o aria-describedby per assicurare che i link siano comprensibili ai lettori di schermo.
Navigazione da Tastiera: Aggiungere tabindex="-1" ai link disabilitati per escluderli dalla navigazione da tastiera.

Impatto SEO

I link tel: non hanno un impatto diretto sulla SEO, ma è importante:

Contenuti Testuali Descrittivi: Fornire un contesto chiaro per i motori di ricerca e migliorare l’esperienza utente.
Indicizzazione Mobile-First: Garantire che i contenuti siano ottimizzati per i dispositivi mobili per migliorare la visibilità.

Conclusione

L’uso dell’API navigator combinata con altre tecniche di rilevamento è una soluzione solida per attivare i link tel: solo sui dispositivi che possono utilizzarli. Prestare attenzione alle tematiche di accessibilità e SEO assicura che il sito sia user-friendly e ottimizzato per i motori di ricerca.

Opzioni Disponibili per Gestire i Link tel:

Perché Ho Preferito l’API navigator