Panoramica

La maggior parte delle persone conoscono più o meno la alt text. Inoltre, non vi è alcun elemento indipendente nel codice " alt testo ". Per essere tecnicamente corretto, è l'attributo alt del tag img . Ma il problema non riguarda il suo nome ma la sua funzione. Guardate che cosa significa avere un buon alt text.

L'importanza del testo alternativo

Attualmente, uno dei più grandi problemi di accessibilità sul web è la mancanza di testo alternativo per la grafica e le immagini. I non vedenti utilizzano spesso i lettori di schermo o display Braille per consentire loro di leggere il testo nelle pagine web. Quando queste tecnologie assistive "leggere" le immagini senza alt text, non sono in grado di trasmettere il loro significato.

Quando un lettore di schermo "legge" un'immagine senza attributi alt , ci sono diverse cose che possono accadere:

1. Si può semplicemente evitare l'immagine come se non fosse nemmeno presente sulla pagina.
2. Si può trovare il testo che corrisponde ad esso in un modo o nell'altro come il nome del file immagine e il letto al posto del testo alternativo.

Il comportamento esatto di lettore di schermo varia tra le marche di lettori di schermo e il codice della pagina web. Ma comunque, tale risultato non è desiderabile: o l'utente non viene informato del contenuto dell'immagine, o si riceve un sms, probabilmente inutile.

Esempio: con alt text

Ascoltate questa registrazione di un Home Page Reader 3.0 per la stessa immagine. Questa volta, ha un alt testo. Pertanto, possiamo sentire la differenza.

Selezionare un formato per la registrazione: Wav | Mp3 | RealMedia | Transcript (Inglese)

Ecco l'immagine che abbiamo appena ascoltato:

Aggiunta di un testo alternativo consente agli utenti di screen reader per avere le stesse informazioni di coloro che possono vedere l'immagine.

Come aggiungere alt text

Vediamo un altro esempio di un'immagine:

Il codice HTML di questa immagine è:

È possibile digitare il codice esattamente come vedete sopra in un editor di testo oppure è possibile utilizzare software come Dreamweaver, FrontPage o GoLive per ottenere la stessa cosa. In Dreamweaver, l' alt testo viene aggiunto utilizzando la finestra Proprietà come mostrato nella figura seguente:

sous Alternative representations . In Microsoft FrontPage, si fa clic due volte sull'immagine per aprire la finestra di dialogo Proprietà immagine digitare il testo alternativo nel campo di testo sotto rappresentazioni alternative.

Altri editori hanno caratteristiche simili per aggiungere UEN testo alternativo. Consultare la documentazione per le istruzioni su come aggiungere un attributo alt .

Ora che abbiamo un'idea migliore l'attributo alt e di come sia semplice aggiungere un attributo alt a un'immagine, a parlare di quello che dovrebbe essere l'attributo alt .

Come utilizzare le immagini

Le immagini sui siti web sono utilizzati in 3 modi:

1. di trasmettere contenuti importanti.
2. per attirare l'attenzione e non trasmettere un vero contenuto.
3. per puntare ad altre aree del sito o ad altri siti.

L' alt text è la più appropriata per un'immagine dipende da come l'immagine viene utilizzata. Infatti, la stessa immagine può essere utilizzato per ragioni diverse in circostanze diverse e ogni utilizzo di questa immagine ha una alternativa diversa testo. Mantenere la seguente regola in mente:

Con questo in mente, le informazioni più importanti per trasmettere in un testo alternativo a una mappa immagine è la destinazione del link.

Per trasmettere l'immagine

Le immagini che contengono contenuti importanti

Se un'immagine o grafico contiene informazioni che è importante nel contesto del sito, allora l'attributo alt per visualizzare tali informazioni in un modo che è consistente con l'obiettivo di dell'immagine. Ricordare che lo scopo dell'immagine non è necessariamente lo stesso aspetto dell'immagine.

Esempio 1

Ad esempio, il sito della formazione CD WebAIM usa le immagini per la navigazione principale, come mostrato nell'immagine qui sotto.

Queste immagini sembrano linguette cartelle di file. Alcune di queste schede sono marroni e gli altri sono blu. Quando la scheda è selezionata, diventa bianco. Una parte del testo è in maiuscolo, minuscolo è una parte. Tutti questi dettagli sono importanti per il look and feel del sito web, ma per chi non può vedere, sono per lo più irrilevante. L'aspetto importante di questi grafici è che indicano altre aree del sito. Con questo in mente, vorrei dare un testo alternativo che riflette il fatto che l'utente può cliccare sull'immagine per andare in un'altra area del sito. In questo caso, la destinazione del link è traccia 2 della formazione, che è l'area per i coordinatori. L' alt text è più appropriata per questo quadro è il seguente:

"Track 2: coordinatori."

In questo caso, l' alt del testo corrisponde esattamente il testo dall'immagine. Nella maggior parte dei casi in cui vi è il testo in immagini, questa è la soluzione migliore. Non ti preoccupare che non hai descrivere l'immagine. Fornire vista utente dell'immagine, non il suo aspetto.

Esempio 2

Guardate ancora il ritratto di Silvia:

Questa immagine particolare potrebbe essere utilizzato in diversi modi, con diversi obiettivi. Qui ci sono alcuni scenari possibili:

• Un insegnante di scuola primaria nella creazione di un sito web per spiegare la differenza tra dipinti, disegni e sculture. Esso comprende diversi esempi di ciascun tipo di arte. Nel testo della pagina stessa, descrive le differenze tra questi tre mezzi di comunicazione. Esso utilizza l'immagine di Silvia come una delle quattro tabelle di esempio. Uno dei alt text sarebbe possibile in questo caso "Una pittura di una giovane donna." Questo è probabilmente sufficiente, come l'insegnante ha sufficientemente descritto ciò che un dipinto del documento stesso.
• Un membro della famiglia ha fatto una lista di persone con i loro ritratti di famiglia. Dal momento che tutte le immagini sono ritratti, un alt testo è "Silvia Alvarez".
• Un istruttore di arte in un liceo crea un sito web con diversi tipi di vernici. Egli utilizza la pittura come un esempio di un ritratto, e ha spiegato nel testo della pagina che un ritratto. Un alt testo potrebbe essere "Portrait".
• Uno storico dell'arte crea un catalogo di ritratti di artisti diversi. Il suo scopo è quello di mostrare ritratti di vari artisti. L' alt text dovrebbe includere le informazioni utili per gli storici dell'arte, come il titolo dell'opera, il nome dell'artista, medium, e la data. L' alt text potrebbe dire "Silvia Alvarez, olio su tela, Paul Bohman, 2002".

Potremmo continuare con scenari diversi, ma credo di capire. Non è un alt text per una sola immagine. Dipende dal contesto e lo scopo dell'immagine. E 'l'autore di apprezzare quello che ha da scrivere.

Preciso e conciso

Le alternative testuali per le immagini deve essere quanto più preciso e sintetico possibile. Assicurati che il tuo alt text trasmette tutte le informazioni importanti relative allo scopo della sua immagine, ma non gli utenti di sovraccarico con alt text troppo lungo. I lettori di schermo o dispositivi Braille leggere sempre l' alt text, che può causare immagini caricate le pagine sono lente a leggere. Se avete bisogno di una descrizione più dettagliata delle immagini, è necessario aggiungere un attributo longdesc nell'immagine.

alt text vuoto

Immagini decorative

Il Web è diventato un ambiente grafico in cui spesso gli sviluppatori di aggiungere le immagini alle proprie pagine semplicemente per migliorare l'impatto visivo del sito. Ad esempio, l'immagine sotto potrebbe essere utilizzato per creare un angolo arrotondato a una pagina.

Le immagini in questa categoria non forniscono informazioni per l'utente, ma sono semplicemente utilizzati per scopi decorativi. Queste immagini non hanno alcun valore per chi non può vedere la pagina. Il codice HTML corretto per questo tipo di immagine è ciò che spesso viene chiamato l'attributo alt vuoto o null, scrisse quanto segue: alt="" . E 'pronunciata: alt uguale a quote quote, senza spazio in mezzo. Il codice sorgente dell'immagine in questo esempio è:

<img src="corner.gif" width="84" height="90" alt="" />

I lettori di schermo ignorare le immagini con alt testo vuoto, che è esattamente ciò che vogliamo in questo caso. Vi chiederete perché è necessario specificare alt testo vuoto. Forse, non è meglio non inserire alcun attributo alt ? E 'una buona domanda ma la risposta è che l' alt text è peggio perdere l' alt text è vuota come alcuni lettori di schermo quindi leggere il nome del file dell'immagine, che può essere fonte di confusione per ascoltare. Quando si aggiunge un alt lettori di testo schermata vuota salta l'immagine senza leggere nulla.

Dreamweaver MX permette all'autore di creare alt text con le proprietà scatola vuota.

Purtroppo, molti altri editor HTML non consentono di creare attributi alt vuoto attraverso l'interfaccia grafica. È quindi necessario modificare il codice sorgente HTML direttamente. Per fare questo, individuare l'immagine nel codice e aggiungere alt="" al tag img .

Immagini trasparenti e posizionamento

Gli sviluppatori utilizzano spesso immagini trasparenti e il posizionamento di creare uno spazio tra gli elementi di una pagina. Sebbene gli utenti non vedenti vedere le immagini trasparenti, possono essere visibili alle persone che usano browser testuali o screen reader. È necessario aggiungere un attributo alt="" per svuotare tutte le immagini trasparenti e di posizionamento.

Le immagini ridondanti

A volte gli sviluppatori web aggiungere un alt text ad un'immagine che è esattamente lo stesso del testo accanto all'immagine, come nell'esempio seguente:

In casi come questo, è necessario aggiungere un alt di testo vuoto in modo che gli utilizzatori di screen reader non devono sentire la stessa informazione due volte. Lo screen reader JAWS direbbe "grafici, studenti internazionali, grafici, studenti internazionali", mentre la lettura di questa sezione, che può causare confusione o almeno essere imbarazzante.

Mappa delle immagini

Lato client mappe immagine

Tutti gli strumenti di sviluppo web per la creazione lato client mappa immagine sul lato client piuttosto che lato server. Come suggerisce il nome, il server di mappe immagine lato richiedono script sul server, mentre il lato client sono curati solo nel browser client. A meno che non hanno deliberatamente scelto di creare un server-side image map, avrete probabilmente mai bisogno di crearne uno. Le mappe lato-client di immagini sono accessibili, allora non possono lato server.

Le mappe lato-client di immagini richiedono un alt text sia per l'immagine e le sue aree. Lasciate che il seguente esempio (Nota: senza collegamenti per questa mappa immagine punta da qualche parte):

C'è solo una foto qui sopra, ma ci sono cinque aree. Ognuna di queste aree porta ad una diversa posizione sul sito, è necessario trasmettere le informazioni di navigazione per ciascuna di tali collegamenti. L' alt text di queste aree dovrebbe essere esattamente lo stesso del testo nell'immagine. , Services , Contact us et Index . L' alt text per le zone è la casa, Prodotti, Servizi, Contatti e Index. Ora abbiamo gli alt aree di testo, ma per quanto riguarda l'immagine stessa? Di fuori delle aree, questa immagine non trasmettere le informazioni. L' alt text è la più appropriata per l'immagine alt di testo vuoto. Ecco il codice per l'immagine e le sue aree:

<img src= »imagemap.jpg "alt= »" width= »199" height= »303" border= »0" usemap= »#Map »> <map name= »Map »>
<area shape= »rect "coords= »7,9,191,54" href= »#maps" alt= »HOME ">
alt = ""> Prodotti
<area shape= »rect "coords= »7,127,190,172" href= »#maps" alt= »Services ">
<area shape= »rect "coords= »6,186,190,229" href= »#maps" alt= »Contact ci ">
<area shape= »rect "coords= »7,245,189,289" href= »#maps" alt= »Index ">
</ Map>

Le immagini usate come mappe immagini non avrà tutte le alt di testo vuoto. L'autore deve decidere la migliore alt text.

Importante

Una cosa da tenere a mente durante la creazione di client-side immagine della mappa è che i lettori di schermo di leggere l'ordine letterale del HTML. Strumenti come Dreamweaver spesso non etichettare la area accanto al tag img . Tags area contenente il alt text per le zone, a volte appaiono in varie posizioni nel codice qui sotto per cui la zona viene visualizzata nel browser. In questo caso, i lettori di schermo leggerà il alt testo completamente fuori dal contesto. Questo può essere molto confusa per gli utenti di screen reader. Se si utilizza Dreamweaver o altri strumenti WYSIWYG, non dimenticare di controllare il codice HTML. Se necessario, tagliare e incollare il tag area subito dopo il tag img .

Server-side mappe immagine

Poiché non esiste un modo per rendere accessibili le immagini del lato server map, il più semplice è quello di non utilizzarle. Tuttavia, alcune persone temono che le mappe lato-client di immagini non è possibile creare forme geometriche, e poi utilizzare il server-side image map. La verità è che sul lato client immagini delle mappe possono assumere qualsiasi forma purché lo sviluppatore ha la pazienza di creare tutte le aree di contatto. Un esempio di client-side image map, con particolari aree geometriche, solo per dimostrare che è fattibile (Nota: Nessuno dei collegamenti portano da nessuna parte).

In realtà, non c'è alcuna ragione per creare server mappa d'immagine lato.

Le immagini di sfondo

Se l'immagine di sfondo testo importante trasmettere informazioni o segnalazione visiva, è necessario modificare il codice HTML in modo che l'immagine è nel codice con un alt testo vero e proprio.