Vai ai contenuti

LAU



Home > realizzare > accessibilità: codice HTML/XHTML > E se il cliente vuole il "continua"?


E se il cliente vuole il "continua"?

Utilizzare parole generiche e ripetute per i collegamenti compromette l'accessibilità della pagina. Una tecnica CSS permette di usare e ripetere ad esempio il "continua" e rendere la pagina allo stesso tempo accessibile.

a cura di: Vincenzo Mania | 28 settembre 2005


Capita spesso di progettare delle pagine web che contengono l'abstract del contenuto di un articolo seguito dal link "continua" che ci fa arrivare all'articolo per esteso.

Sappiamo bene che utilizzare, all'interno di una pagina web, parole così generiche e ripetute per i collegamenti compromette l'accessibilità della pagina: frasi come "continua" o "leggi l'articolo" non danno nessuna informazione sul documento che stiamo per raggiungere attraverso il link ma ancor di più sono alquanto fastidiose per chi attraverso screen-reader, effettua la navigazione tra i link, soprattutto se i "continua" presenti nella pagina sono più di uno.

L'ideale sarebbe effetuare il link sul titolo dell'abstract.

Ma sei il cliente vuole per forza il "continua"?

A questo proposito ci vengono in aiuto i CSS. Russ Weakley individua una tecnica CSS che ci permette di usare il "continua" e rendere la nostra pagina accessibile: basta scrivere al fondo di ogni abstract, ad esempio, "continua la lettura di titolo dell'articolo", inserire uno span dopo il "continua" che ci permette via CSS di nascondere, con un posizionamento assoluto al di fuori della pagina, la frase che segue al "continua".

Riusciremo in questo modo ad accontentare il cliente e ad avere dei link significativi che ci consentono di avere la pagina accessibile.

Vediamo dunque come è possibile applicare questa tecnica.

Supponiamo di avere un abstract di un'articolo, compreso di titolo e del "continua", vediamo come apparirebbe senza applicare la tecnica di Russ Weakley:

XHTML tag per tag
Lista completa dei tag XHTML con descrizione delle funzionalità, supporto dei browser ed esempi pratici di applicazione.
Continua la lettura di XHTML tag per tag

e vediamo invece come apparirebbe applicando la tecnica CSS:

XHTML tag per tag
Lista completa dei tag XHTML con descrizione delle funzionalità, supporto dei browser ed esempi pratici di applicazione.
Continuala lettura di XHTML tag per tag

Ecco il codice HMTL e la regola CSS da applicare.

Codice HTML:

<a href="xhtml_tagxtag/lista.shtml">Continua
<span>la lettura di XHTML tag per tag</span></a>

Regola CSS:

span{
position: absolute;
left: -1000px;
width: 900px;
}

torna su

Riferimenti

torna su

[ Torna all’inizio della pagina ]



Sito realizzato dal Laboratorio di Accessibilità e Usabilità del CSI-Piemonte - Privacy, cookies e accessibilità

[ Torna all’inizio della pagina ]