Anchor con screen reader

Design Content Design
1

Ciao,
Sto testando la navigazione di un sito con NVDA.
Non so se è uno standard di tutti gli screen reader però ho notato che se racchiudo più tag in un unico anchor li intepreta come fosse link separati
Esempio:

<a href="#">
  <h3>Titolo</h3>
  <p>Testo</p>
</a>

Lo screen reader legge “link titolo” e a seguire “link testo”.
Quale sarebbe buona prassi da usare?

Meglio forse mettere il link su un pulsante a seguito del testo, così?

<h3>Titolo</h3>
<p>Testo</p>
<a href="#">Leggi tutto</a>

A livello di usabilità specie su mobile, secondo me è meglio avere tutto l’elemento cliccabile piuttosto che il solo bottone/link alla fine.

2

È sicuramente la seconda la strada più corretta anche e prima di tutto a livello di semantica del markup.
Per rendere tutta la “card” cliccabile, — l’unico caso in cui mi sembra utile è di fatto quello di una card su due piedi, — il modo più semplice forse è quello di usare uno pseudo elemento, per es: ::after (come spiegato qui).

3

Ciao Daniele,
Grazie per la risposta. Non ho capito bene cosa intendi per “card su due piedi”.

Ho altresì notato che se il testo è su più righe NVDA le legge a pezzi e ciascuno lo interpreta come un link a se.

4

Avere titolo, sottotitolo e link di approfondimento mi sembrava il caso tipico di un componente comunemente chiamato “card”: intesa come una piccola scheda anteprima di un contenuto per es. in un elenco di notizie.
Concordo con te che possa essere molto interessante a livello di aumento usabilità su dispositivi mobile in questo caso poter cliccare tutta l’area della card e non solo il titolo o un “Leggi di più”… Questo certo non vale per ogni uso possibile e andrà valutato caso per caso. Nel link sopra alla fine del messaggio precedente ci sono diverse possibilità e modalità per implementare il click su tutto senza modificare la gerarchia dell’html.

5

Ah ho capito, era una questione di punteggiatura, pensavo che esistesse un tipo di card denominata “su due piedi” che non conoscevo… :smiley:
Si il caso è proprio quello di una card per le news in home page.
In ogni caso questo non rende il sito non accessibile ma semplicemente lo rende forse un po’ meno intuitivo. Se navigo con il tab, da link a link, viene letto nel modo desiderato, cioè titolo+testo insieme.
Devo capire se con quel trick riesco a sistemare senza rompere tutto il Layout.
Ti ringrazio!

se vuoi consigliarmi anche sull’altro 3d che ho aperto… :crazy_face: