Anchor descrittivi

Perché conta

Gli screen reader offrono modalità per elencare tutti i link della pagina in sequenza. Se ogni voce è «leggi di più» o «dettagli», l’utente deve tornare al contesto paragrafo per capire la destinazione — operazione lenta e frustrante. Anchor descrittivi aiutano anche chi scansiona visivamente e chi naviga da tastiera con menu di link rapidi.

Liste di link

In griglie blog o catalogo, fai del titolo dell’item il testo del link principale. Call to action secondarie possono essere «Vedi prezzi per Corso base» invece di «Vedi prezzi» ripetuto. Unicità per pagina non è obbligatoria tra pagine diverse, ma evita duplicati ambigui nella stessa pagina verso URL diverse.

Markup utile

Avvolgere titolo e excerpt in un solo link enorme è valido se il titolo è descrittivo; altrimenti separa link sul titolo e testo non cliccabile per il riassunto.

<article>
  <h2><a href="/blog/lcp-guida/">Ridurre il Largest Contentful Paint</a></h2>
  <p>Tre interventi sul hero e sui font web…</p>
</article>

Link solo icona

Social, menu hamburger, download: aggiungi testo accessibile con aria-label descrittivo o testo visivamente nascosto (.sr-only) se l’icona non ha label visibile. «Facebook» va bene; «link» no.

CMS e contenuti generati

Template che stampano «Leggi di più» per ogni card vanno parametrizzati con titolo post nel anchor. Nei breadcrumb, l’ultimo item non linkato deve restare testo pagina corrente, non «Pagina». Footer con link legali ripetuti su tutto il sito va bene se le etichette sono esplicite («Privacy», «Cookie»). Evita link «Home» generico nel logo se l’alt dell’immagine già dice il nome del sito — una sola voce chiara basta.

In email transazionali replicate la stessa disciplina: pulsanti con verbo e oggetto («Conferma prenotazione 12 aprile») invece di «Clicca».

Per consolidare quanto hai letto, scegli due pagine reali del tuo sito e applica gli stessi criteri con il team: una modifica alla volta, verifica su mobile e annota nel registro interno data e responsabile. Così la lezione diventa pratica ricorrente e non un intervento una tantum prima di una campagna.

Verifica periodica

Programma ogni trimestre un controllo su pagine ad alto traffico: applica i criteri di Anchor descrittivi con la stessa procedura (browser, dispositivo, rete). Registra esito e responsabile in un foglio condiviso così il team non riparte da zero.

Se hai appena cambiato tema, plugin o builder, ripeti il controllo dopo 48 ore: cache CDN e minificazione possono mascherare errori finché non scade la vecchia versione. Coinvolgi chi scrive i contenuti, non solo chi sviluppa: molti problemi nascono da campi CMS lasciati vuoti.

Confronta i risultati con una pagina concorrente solo per capire gap di chiarezza, non per copiare testi. L’obiettivo è che un visitatore capisca in pochi secondi cosa offri e come contattarti.

Errori comuni

• aria-label che duplica testo visibile (annuncio doppio).
• Link vuoti o solo punteggiatura.
• Title attribute al posto di anchor descrittivo (supporto limitato).
• Stesso «Scopri» verso dieci prodotti diversi.
• Immagini cliccabili con alt vuoto.

In pratica, integra questo controllo nella routine di qualità del sito: una pagina campione al mese per categoria (home, servizio, articolo, checkout se presente), stesso profilo browser e rete. Annota nel registro interno data verifica e esito, così al prossimo redesign sai cosa è già stato validato. Quando il team cresce, una checklist condivisa evita che ognuno interpreti i criteri in modo diverso e riduce regressioni dopo deploy frettolosi.

Quando lavori con clienti o stakeholder non tecnici, traduci ogni raccomandazione in un esempio concreto sulla loro pagina: uno screenshot prima/dopo, una URL di prova, un tempo di caricamento misurato. Così le lezioni diventano azioni nel backlog invece di slide dimenticate. Riutilizza gli stessi criteri su ambienti preview prima della produzione e registra chi ha approvato il go-live, per tracciabilità in caso di regressione SEO o accessibilità.

In breve

• Anchor univoci e significativi in pagina.
• Titolo item come link nelle liste.
• Icone: aria-label o testo nascosto.
• Evita «leggi di più» generico ripetuto.