La spaziatura tra i testi ALT

Considerate alcune immagini ammucchiate insieme, per esempio come pulsanti di navigazione:

<IMG SRC=univ.gif ALT=”L’Università”><IMG SRC=citta.gif ALT=”La città”>…

Quando esaminate da un browser in modalità solo testo, questo prenderà a leggere:

L'UniversitàLa città...

Si possono considerare varie soluzioni:

• L’uso di semplice spazio bianco per separare le scritte adiacenti, come nei testi ALT:

  "Sinistra ", "Destra ", "Indice ", "Configura " ecc.,

  è considerato in generale insoddisfacente, perché potrebbe generare confusione su dove si trovano i confini tra i collegamenti; notate inoltre che l’HTML4 ammonisce contro l’uso di “spazio bianco” iniziale/finale nei valori di attributo.

• Le barre verticali costituiscono una popolare alternativa: per ottenere ad es.:

  |Sinistra|Destra|Indice|Configura|

  i testi ALT potrebbero essere rispettivamente: "|Sinistra|", "Destra|", "Indice|", "Configura|"

• Le parantesi rappresentano una soluzione ben bilanciata e riflettono un uso idiomatico di vecchia data, proprio dei browser testuali, di rappresentare IMG con [LINK], [INLINE] ecc.: fornire testi ALT quali "[L'Università]", "[La città]", "[Indice principale]", ecc., produce l’ovvio risultato:

  [L'Università][La città][Indice principale]

Le idee precedenti sono utilizzabili in una vasta gamma di situazioni di navigazione. Tuttavia, attualmente un approccio più produttivo potrebbe consistere nel fornire dei collegamenti testuali come meccanismo primario di navigazione, e di usare i fogli di stile CSS per proporre una loro presentazione decorativa.

Per una navigazione amichevole in modalità testo ed accessibile

Alcune linee guida per l’accessibilità raccomandano di avere qualcosa in più di uno o più spazi per separare collegamenti testuali adiacenti. Ma la maggior parte degli utilizzatori di browser grafici non necessita o non vuole tali separatori. Ecco dunque un suggerimento: come testi ALT all’interno del contenuto dei collegamenti, usate i testi appropriati senza separatori aggiuntivi. Poi, tra quelle immagini, all’esterno del contenuto dei collegamenti, posizionate delle GIF trasparenti da un pixel con i loro testi alt impostati su ” | “, in modo che fungano da separatori per la modalità solo testo. Si veda la barra di navigazione posta qui sotto, dove questo sistema è usato praticamente.

Notate che per i pulsanti l’altezza e la larghezza non sono specificate, mentre per i pixel di separazione l’altezza e la larghezza (=1) sono specificate. Mi sono messo a giocherellare con tutto ciò su una serie di browser, e mi sembra di aver raggiunto un buon compromesso. Quando il caricamento delle immagini è abilitato, i browser grafici producono un risultato che è praticamente indistinguibile dai precedenti costrutti. Con browser/versioni di tipo grafico, con il caricamento delle immagini disabilitato, alcuni hanno dato buoni risultati, mentre altri sono stati visualmente piuttosto scadenti, ma tutti sono stati per lo meno utilizzabili. I risultati con i browser testuali (Lynx ed emacs-w3) sono stati del tutto accettabili.

Bene, questa è solo una delle soluzioni possibili: forse altri autori troveranno un compromesso migliore; e, con lo sviluppo in futuro di browser specializzati, la necessità di ricorrere a stratagemmi di questo tipo potrà diminuire.