[Salta il menu][L'elefantino con la matita, logo del sito]

Diodati.org | Accessibilità e traduzioni dal W3C      Leggi Omega Centauri!

12 Alcuni errori madornali

Prova della verità - alcuni tipici scenari con un browser in modalità testuale:
   Sentiti ringraziamenti ai nostri sponsor, [LINK] e [LINK]
   Cliccate sul browser che state adoperando:
           [LINK]    [LINK]    [LINK]

(le alternative erano in effetti IE4, IE5 e NN4: il sito in questione non lasciava nessun'altra possibilità. Evidentemente non volevano vendere nulla agli utenti di Netscape 6! Di certo il mistero più grande, per me, non è il ristretto elenco di scelte, ma perché mai la gente pensi che occorra chiedere una cosa simile.)

O questo, visto su un sistema unix per il quale il browser da loro raccomandato non è in effetti disponibile:

   Il nostro sito è navigabile al meglio con: [LINK]Clicca per scaricarlo!

Poi c'era questo gran pezzo di autopromozione:

   Un'altra graziosa scena Web da parte di [Logo societario]
Un Consiglio di Circoscrizione britannico per farsi notare:
   Benvenuti a...
   Stemma della Circoscrizione
   La Circoscrizione di
   On-Line
   Avete problemi ad accedere al nostro sito? [Cliccate qui]
Un estratto reso anonimo dalla prima pagina del sito web di una società di servizi tedesca:
   [LINK]-visual fubarGmbH direct rubriken
   [space.gif] [space.gif] [space.gif] [space.gif] [space.gif]
   [space.gif] [space.gif]
   [space.gif] [space.gif] Privat [space.gif] [space.gif] [space.gif]
   [space.gif] [space.gif] [space.gif] [space.gif] [space.gif]
   [space.gif] Aktuell [space.gif] [space.gif] [space.gif] [space.gif]
   [spitze-links.gif]

(Il mio informatore mi ha detto che li hanno immediatamente tagliati fuori da un potenziale contratto.)

Licenza poetica (?):
   requisitidelsito.jpg
   avviso.jpg
   alfinedi.jpg
   scaricaquicktime.jpg scaricaflash.jpg collaudaplugin.jpg
   contratto.jpg

Non si tratta di un artefatto del browser che sta tentando di supplire ai testi ALT mancanti! - questo artista aveva adoperato un intero lotto di immagini (quasi esclusivamente immagini di testo), ciascuna di esse solennemente corredata da un testo ALT che ripeteva il nome del file immagine; qualcosa del tipo:

   img src="immagini_richieste_per_il_sito/alfinedi.jpg" alt="alfinedi.jpg"
"Questo sito è [LINK]etscape [INLINE]"

Impiegai un bel po' di minuti a navigare tra i risultati di una ricerca sul Web per la stringa "etscape" e trovai alcuni sorgenti HTML che variavano dal leggermente idiota alla pazzia più completa!

ALT="Pallino giallo grande"

In questo modo otteniamo di leggere (o i lettori ciechi ottengono di ascoltare):

    Pallino giallo grande Introduzione
    Pallino giallo grande Il problema
          Pallino rosso piccolo Analisi storica
          Pallino rosso piccolo La situazione attuale
    Pallino giallo grande La soluzione

Il sito web dell'Ambasciata USA a Belgrado recava questo esempio degno di vincere un premio:

    Pallino rosso piccolo Risposta al terrorismo (*)
ALT="Questa immagine contiene una mappa, per favore scaricatela"

Per i browser in modalità testo, ciò non aiuta. Ho già dato in precedenza alcuni suggerimenti per un uso più appropriato. Vedete la mia pagina di accompagnamento sulle mappe immagine per maggiori dettagli e riferimenti.

ALT="Attivate il caricamento delle immagini, dannazione!"

C'è da chiedersi quanti potenziali visitatori abbia perduto questo sito a causa di un "benvenuto" dato ai robot di indicizzazione in un modo così brusco e disinformativo.

ALT="Mappa immagine di varie bandiere"

Cosa dovrebbe farsene un utente in modalità solo testo di un'immagine di alcune non meglio identificate bandiere? Si suppone che questo sia uno strumento di navigazione, non un gioco a quiz!

Alt="(Scusate, non disponibile con il vostro browser)"

Senza senso! Stavo usando Netscape con il caricamento delle immagini disabilitato. Ma anche se mi fossi trovato ad utilizzare Lynx, chi sei tu per dire che io non posso avviare un'applicazione ausiliaria per vedere questa immagine?

[LINK]-- Auto-esplicativo

Un'immagine di un certo testo "auto-esplicativo", senza alcun attributo ALT.

ALT="Inserisci il tuo testo alt qui"

¿Qué?

"L'Università di Oldtown arma il Dipartimento di Fisica"

Perbacco! Siamo arrivati a questo punto? Ah ecco: questa è la pagina web del Dipartimento di Fisica, decorata sulla sinistra con lo stemma (**) dell'Università (non la nostra: ma il nome è stato cambiato per proteggere il colpevole...).

"Foto di un toro nell'acqua in canoa"

Cosa, puoi ripetere per favore? Ah, ecco cos'è andato storto:

<IMG SRC="toro.jpg" ALT="Foto di un toro nell'acqua">
<IMG SRC="canoa.jpg" ALT="in canoa">

Il sito originale, che presentava un pittoresco fiume canadese, mostrava due immagini perfettamente ragionevoli, ma senza alcun nesso tra loro: in seguito un lettore di questo articolo, "Michael T.", mi inviò una graziosa illustrazione di questa castroneria!

"I dipartimenti accademici sono indicati da pallini rosa"

Inutilizzabile in modalità testo o su un monitor monocromatico. Scegliete un'icona grafica che possa convogliare il messaggio tramite la sua forma - in questo caso potrebbe essere un piccolo tocco (nessun danno nel farlo anche colorato); e scegliete simboli testuali distintivi da usare per i testi ALT, ad es.:

I dipartimenti accademici sono indicati
con: <IMG SRC="tocco.gif"
ALT="[*]">

(facendo naturalmente i corrispondenti aggiustamenti anche all'elenco).

Questa era una "perdita" vera e propria, dove l'autore aveva fatto l'errore di far riferimento nel testo ad alcuni aspetti della presentazione (i "pallini rosa"), che sarebbero stati percepiti solo da un sottoinsieme di lettori. Il Web, per quella che è la sua vera natura, tende a separare il contenuto dalla presentazione in questo modo: un autore attento può scegliere uno stile autoriale che non cade in tale genere di trappole.

ALT="Sto caricando... Aspettate, per favore"

Un tentativo grazioso! Ma chi garantisce che il browser stia effettivamente caricando le immagini in questo momento? Come dice Jukka K, Dovrei aspettare fino a quando non mi venga un disordine mentale tale da farmi cliccare sul pulsante "mostra le immagini"?

ALT="Diagramma della popolazione ittica in base alla data"

Questo è un problema più sottile, ma il povero lettore in modalità testo è lasciato a domandarsi: cosa diavolo è questo diagramma che si suppone mi stia parlando? Un testo più utile potrebbe essere: "Grafico: la popolazione ittica decrebbe drammaticamente durante gli anni '80 fino a che non fu deliberata una moratoria sulla pesca", o qualsiasi altra cosa il grafico effettivamente illustri.

MIT/LCSINRIAKeioDARPACEC

Diamine! Sicuro che non sia niente di sacro? - questo proveniva da (una precedente versione della) pagina di benvenuto del W3C medesimo! Numerose immagini erano state presentate insieme, senza fornire alcuna spaziatura o punteggiatura tra i loro testi ALT.

Il mio errore favorito era qualcosa di questo tipo:
<CENTER>
<FONT SIZE=6>Our Classrooms and Staff
[in italiano: "Le nostre aule ed il personale"]
</FONT>
<IMG SRC="rule.gif" ALT="fancy horizontal rule"
[in italiano: "una estrosa linea orizzontale"]
>
</CENTER>

Invece di usare <H1> per questo titolo di primo livello, lo hanno semplicemente evidenziato ingrandendo il carattere: non vi era sottintesa alcuna interruzione di riga tra il testo e l'immagine. Con il caricamento delle immagini attivo, nessun problema: la "estrosa linea orizzontale" era così grande che andava a finire automaticamente su una nuova riga. Tuttavia, con i browser in modalità testo il tutto veniva riprodotto curiosamente come:

Our Classrooms and Staff fancy horizontal rule 
[in italiano: "Le nostre aule ed il personale hanno un debole per una linea orizzontale"]

Certamente avrebbero dovuto usare per il titolo il marcatore H1. Un modo per trattare una linea orizzontale decorativa è menzionato più sopra.

(Commento: potreste riuscire a trovare alcuni degli esempi con motori di ricerca come Altavista; altri sono stati adattati, o alcuni esempi presi e assemblati in uno "strafalcione" composito. I motori di ricerca che indicizzano i testi ALT tuttora non hanno problemi a trovare una grande quantità di pagine contenenti "pallino rosso piccolo" o simili, e sfortunatamente non tutte sono guide autoriali per il Web che vi dicono di non scrivere così.)

Non credo che occorresse alcuna particolare familiarità con un browser testuale e tantomeno con un sintetizzatore vocale, per riuscire a scegliere un testo ALT utile nella maggior parte degli esempi. Se il documento fosse stato marcato dando la giusta considerazione al contenuto che si voleva comunicare al lettore, piuttosto che lasciandosi distogliere dalla meccanica del Web, allora esso avrebbe potuto "funzionare" su qualsiasi browser - e strumento di ricerca e indicizzatore. E senza subire alcun degrado del proprio aspetto visivo nelle comuni situazioni di navigazione grafica.


(*) L'involontario gioco di parole nel testo originale inglese non è traducibile in italiano ricorrendo ai termini solitamente adoperati. Il testo inglese recita infatti: Small red bullet Response to Terrorism, dove bullet significa letteralmente proiettile. La traduzione letterale suonerebbe dunque Proiettile rosso piccolo Risposta al terrorismo, frase nella quale l'effetto comico è evidente. Però nell'uso italiano comune il segnaposto colorato che in inglese si chiama bullet viene detto solitamente pallino, mai proiettile.

(**) In inglese stemma è coat-of-arms. Il testo inglese dello strafalcione - Oldtown University arms Physics Department - recava solo arms: da qui l'equivoco con il verbo to arm, equivalente dell'italiano armare.

*Leggi: Per riassumere
*Vai a: Diodati.org > Guide, articoli, scritti > Uso dei testi ALT all'interno di IMG
*Scrivi: info@diodati.org
*Ultima modifica: 15/7/2004 ore 14:24