TomStardust.com
Web Design, accessibilità, XHTML e CSS
Sei qui: Homepage » accessibilità » Come rendere accessibili i link “continua a leggere”
ago 06 2009
Come rendere accessibili i link “continua a leggere”
Alcune indicazioni per migliorare l’accessibilità dei link “continua…” sulle pagine di un blog.
Un elemento spesso presente su siti e blog è il link “continua a leggere”, che dall’homepage consente di approfondire la lettura dei post. Pochi giorni fa anche Smashing Magazine ha dedicato a questo elemento un’intera galleria di esempi, ma è stato considerato soprattutto il lato estetico, trascurando altri aspetti come l’accessibilità.
E’ importante che certi elementi non abbiano solo un design attraente ma siano anche accessibili: non dovrebbe esserci alcun ostacolo nella navigazione del sito, a maggior ragione sui collegamenti più importanti.
Come deve essere un “continua a leggere” accessibile?
La prima cosa da tenere presente è che il testo deve essere chiaro. Scrivere “Continua” o “Clicca qui” non serve a niente se non ad aumentare la confusione, soprattutto se considerate che in una pagina spesso possono apparire anche una decina di link con etichette del genere.
La soluzione più sicura è quella di inserire nel link il titolo del post, in modo che appaia qualcosa di simile a:
Continua a leggere “Titolo del post”
Questo però non sempre è possibile, ad esempio per questioni di spazio nel caso di titoli molto lunghi.
In questi casi è l’attributo title che fa la differenza. E’ infatti l’unico modo per rendere il collegamento autoesplicativo, anche se letto al di fuori del proprio contesto. Basti pensare all’utente che con uno screen reader scorre tutti i link della pagina: senza title si troverebbe una serie di “Continua a leggere” assolutamente senza senso.
Ecco quindi una forma corretta:
<a href="#" title="Continua a leggere "titolo del post"">Continua a leggere</a>
Gli esempi da evitare
Non è possibile descrivere tutti gli esempi errati di utilizzo, ma alcuni casi sono più evidenti di altri. Tra gli errori da evitare ci sono sicuramente:
- i link “continua”, “clicca qui”, “leggi tutto” senza attributo title
- i link senza testo, come [...]
- i pulsanti “continua a leggere” realizzati con delle immagini, senza attributi alt o title
Per evitare di commettere errori banali, che potrebberò però far diventare il vostro sito inaccessibile, è sempre meglio curare dettagli come questi. Sono particolari apparentemente insignificanti, che però possono comportare gravi difficoltà nell’esperienza di navigazione.
Seguire queste raccomandazioni non richiede molto tempo: aggiungere l’attributo giusto o utilizzare il testo corretto è un lavoro da fare una volta in massimo 5 minuti, che eviterà problemi agli utenti rendendo il vostro sito più accessibile.
Usi Twitter?
6 agosto 2009 alle 16:04
F.Ciao Tom, questo articolo capita proprio a fagiolo per me! però:
Potresti fare un esempio del codice di come si potrebbe implementare l’attributo title nella query di wordpress? poiché io so che in wordpress basta creare tale stringa nel template:
E il link si crea in automatico non hai possibilità di aggiungere attributi nel tag…
…come fare? :)
7 agosto 2009 alle 19:27
Tom@F.: basta che sfrutti le funzioni php the_permalink() e the_title() per costruirti a mano la struttura che preferisci per i link, creando anche il valore giusto per l’attributo title :)
25 agosto 2009 alle 01:16
Andrea LetiIn fondo potrebbe andar bene anche:
“Continua a leggere l’articolo”
decisamente palese il significato. O mi sbaglio?
Corredato sempre da title
25 agosto 2009 alle 08:57
Tom@Andrea Leti: sì, è una soluzione corretta, l’importante è che sul title sia indicato il titolo del post .
26 agosto 2009 alle 19:59
StefanoCiao Tom,
grande articolo che come dici tu in 5 minuti risolve molte cosucce e secondo me aiuta anche a livello SEO, solo che ho lo stesso problema di F. e non ho chiara la tua risposta…come si aggiunge la funzione the_title()? :S Non è che puoi pubblicare il codice di WP per intero? Te ne sarei infinitamente grato :P
26 agosto 2009 alle 20:48
Andrea Letila funzione the_title();
viene utilizzata cosi
stai attento pero che questa funzione è figlia dela funzione the_post(); quindi se devi utilizzarla devi assicurarti che the_title(); sia all’interno ddel ciclo o dopo il ciclo.
Se nella pagine single inoltre puoi utilizzare the_title() quando ti pare nel ciclo e dopo il ciclo non prima, altrimenti chiameresti una funzione che deve ancora uscire. In questo caso come un tutti i casi wordpress da the_post(); spero di esserti stato utile. Ma soprattutto spero di essere stato chiaro.
26 agosto 2009 alle 20:49
Andrea Letiho dimenticato di scrivere come chiamarla:
:D
1 settembre 2009 alle 15:15
grazianoGrazie per il consiglio, io usavo solo continua a leggere senza nome del post.
18 maggio 2010 alle 12:40
AndreaSalve, io ho inserito il codice prima della parte che vorrei non si vedesse finchè appunto non si clicca su “continua a leggere”.
Purtroppo però quando vado a vedere sul mio blog, trovo sial il “continua a leggere” che la restante parte sottostante…
Come devo fare perchè si veda solo quando uno clicca su “continua a leggere”?
24 maggio 2010 alle 10:33
Tom@Andrea: intanto stiamo parlando di WordPress o di un’altra piattaforma? Se ti riferisci a WordPress, per interrompere un post in homepage devi inserire il tag “more”. Il tasto apposito è quello con una riga orizzontale che separa due blocchi di contenuto.