Good Mood

Page Content

Terminologia

Ci sono diversi termini che vengono comunemente utilizzati per descrivere il testo ALT. Possono essere utilizzati in diversi contesti, anche all’interno di questo sito Web.,

• ALT text – il concetto di aggiunta di una descrizione alternativa testo screen reader friendly di un’immagine. Questo può essere implementato in modo diverso tra i tipi di documento.
• Attributo ALT (HTML) – In HTML, il testo ALT viene inserito nell’attributo ALT all’interno del tag IMG.
• ALT “Tag” – Riferimento stenografico all’attributo ALT.

Demo di testo ALT

Scopo

Il testo ALT aggiunge una descrizione di testo a un’immagine su una pagina Web e dovrebbe essere usato per tutte le immagini, i punti grafici e le regole orizzontali grafiche.,

Il testo ALT è accessibile dagli utenti di screen reader per fornire loro un equivalente di testo di immagini. Nei browser visivi come Firefox, il testo ALT viene visualizzato quando un’immagine è rotta o quando tutte le immagini sono state disabilitate.

Linea guida WCAG

Linea guida WCAG 2.0 1.1.1.—”Tutto il contenuto non testuale che viene presentato all’utente ha un’alternativa testuale che serve allo scopo equivalente.”

Esempi di pulsanti immagine

Considera le immagini per le sezioni un ipotetico sito di istruzione al di sotto del quale tutte contengono testo decorativo.,
Nota: Qualsiasi testo utilizzato in un’immagine deve seguire le linee guida di leggibilità e contrasto.

Output del Lettore dello Schermo Con il tasto ALT del Tag

Se le immagini non vengono caricate, il testo ALT mostra ciò che le immagini avrebbero detto in un browser come Firefox.

Uscita del lettore di schermo senza tag ALT

Senza il testo ALT, nessuno può sapere quale sarebbe stato il contenuto dell’immagine.

di Attuazione l’Attributo ALT

di Seguito sono riportati alcuni esempi di come come testo alternativo può essere implementato a seconda del contesto.

George Washington Painting

Visualizza il codice

Implementa il testo ALT come attributo nel tag IMG. Vedi esempio sotto.

Nota: la lunghezza del testo ALT consigliata è di circa 125 caratteri. Questo ospita il campo di testo ALT JAWS screen reader. Tuttavia questo non rientra nelle linee guida WCAG.

Didascalie delle immagini rispetto al testo ALT

Qualsiasi informazione sull’immagine, come le informazioni sul copyright, l’origine dell’immagine o informazioni aggiuntive deve essere inserita nel testo della didascalia sotto l’immagine, non nel testo ALT. Vedi l’esempio qui sotto.

Didascalia: Pittura “Washington and Lafayette at Valley Forge” di John Ward Dunsmore del 1907. Immagine gentilmente concessa dalla Library of Congress.,

Loghi

Per i loghi, soprattutto i “logo” che si ripetono, è sufficiente per identificare il logo, non necessariamente completamente descrivono

Usi Impropri del Testo ALT

NON dovrebbe essere usato per:

• introdurre testo tooltip,
• fornire informazioni sul copyright o sulla fonte di un’immagine o
• trasmettere informazioni supplementari sulla grafica.,
• introdurre termini di ricerca (questo può essere fatto tramite un buon uso delle intestazioni).

Testo Alt vuoto per immagini decorative

Alcune immagini vengono utilizzate esclusivamente per scopi di layout o per migliorare il contenuto per gli utenti vedenti e non forniscono alcun contenuto.

Il tag ALT per queste immagini può essere vuoto ( <alt= “” > o <alt=” “>) in modo che gli screen reader li ignorino del tutto.,

L’esempio seguente utilizzerà un’immagine di esempio di una barra degli strumenti arcobaleno, seguita da alcuni esempi di codice accessibili e inaccessibili.

Barra degli strumenti arcobaleno

Supponiamo che un lato Web sia stato progettato con una barra degli strumenti arcobaleno utilizzata per separare pezzi di testo.

Nota: L’attributo ALT con il carattere di spazio è considerato meno corretto, ma può essere l’unica opzione consentita in alcuni sistemi di gestione dei contenuti.

Testo Alt conciso

Se una descrizione testuale è già fornita per un’immagine all’interno del testo principale della pagina, il tag ALT può solo fornire un riepilogo dell’immagine, non una descrizione completa.,

Vedi Immagini complesse per esempi di come questo può essere utilizzato in diverse situazioni.

Testo di esempio con immagine

Di seguito è riportata un’immagine di una molecola di grassi saturi con 18 molecole di carbonio. Si noti che i singoli legami tra gli elementi rendono la catena del carbonio relativamente diritta.,

Collegamenti a descrizioni estese

In alcuni casi può essere necessario aggiungere un collegamento a una descrizione estesa di un’immagine, specialmente nei casi in cui le immagini vengono utilizzate per trasmettere contenuti significativi. Ci sono diversi modi in cui questo può essere realizzato, tra cui un tag LONGDESC, un D—link o un link più esplicito alla descrizione più lunga. Vedi sotto per esempi

Link al testo della didascalia

Se l’informazione è critica, un link di didascalia palese può essere la soluzione migliore. Questo metodo fornisce l’indicazione più chiara che è disponibile una descrizione più lunga.,

Visualizza Descrizione estesa del testo

D-links

Alcuni esperti sostengono l’uso di un D-link per segnalare la presenza di una descrizione estesa del testo. Tuttavia, alcuni utenti potrebbero non essere a conoscenza della convenzione. Questo metodo è meglio utilizzato per fornire informazioni puramente supplementari.

D

Attributo LONGDESC

Questo è un attributo nascosto nei browser visivi, ma riconosciuto da alcuni screen reader. LONGDESC è la soluzione migliore per fornire dettagli aggiuntivi che migliorano i contenuti, ma non è fondamentale., Va notato che LONGDESC ha un supporto incompleto sia tra i browser visivi che tra i lettori di schermo ed è deprecato in HTML5.

Collegamenti e pulsanti

Per le immagini utilizzate come elementi di navigazione per attivare funzioni come la stampa, il caricamento o il salvataggio, il testo ALT dovrebbe descrivere la destinazione o la funzione, non l’immagine.

Schermo di stato Penn cliccabile vs. Non cliccabile

Quando uno schermo di stato Penn viene utilizzato su una pagina Web, il testo ALT utilizzato dipende dal fatto che sia cliccabile (cioè collegamenti alla home page di Penn State) o meno.,

Se un’immagine Penn State shield viene utilizzata per fornire un collegamento cliccabile alla home page, il testo ALT dovrebbe indicare la destinazione (ad esempio ALT=”Penn State Home Page”) Nota che il tag IMG è incorporato all’interno di un tag A per il collegamento.

Nota: Se lo scudo NON è cliccabile, il testo ALT può essere “Penn State” o “Penn State shield”.

Attributo TITLE per suggerimenti

L’attributo TITLE di un testo IMG può essere utilizzato per generare un suggerimento per gli utenti vedenti. Ma si prega di essere consapevoli che.,

• L’attributo TITLE NON viene letto ad alta voce per impostazione predefinita nella maggior parte degli screen reader.
• Il testo ALT di solito non viene visualizzato come suggerimento nella maggior parte dei browser.

Se è necessario un suggerimento per gli utenti vedenti, è possibile utilizzare sia un attributo TITLE che ALT con le stesse informazioni per garantire che le stesse informazioni vengano consegnate a entrambi i segmenti di pubblico.

Vedi questo esempio qui sotto

Preferiti Pulsante Cuore con suggerimento

Prendere in considerazione una versione dell’immagine cuore qui sotto che può essere utilizzato in un’interfaccia per selezionare gli elementi preferiti (ad esempio canzoni preferite o e-book).,

Sia il testo ALT che l’attributo TITLE sono “Preferiti”

Visualizza il codice