Tag: immagini

Testo alternativo sulle immagini: è obbligatorio per Flickr?

Le immagini sulle community fotografiche devono avere un testo alternativo o no?

Parlando di immagini ed accessibilità è fondamentale considerare il testo alternativo (alt=”…”), spesso indispensabile. C’è però un caso particolare: le community fotografiche come Flickr, che hanno al centro di tutto delle immagini senza altri contenuti testuali.

In questo tipo di contesto, l’alt text è davvero indispensabile? L’argomento viene trattato in maniera molto interessante su Rebuilding the Web, con alcune riflessioni degne di nota.

A cosa serve il testo alternativo?

Il testo alternativo serve per comunicare lo stesso significato di un’immagine quando quest’ultima non è visibile. Questo è un concetto fondamentale: molti infatti si confondono, pensando che l’alt text serva a descrivere un’immagine aggiungendo altri significati.

Il fattore determinante è il contesto in cui viene inserita l’immagine, che ne influenza il significato.

Prendiamo un’immagine come esempio:

Foto di un gatto addormentato

Se fosse affiancata dal testo “Il mio gatto dorme sempre”, un testo alternativo valido potrebbe essere “E’ su un letto a fare l’ennesimo pisolino”. Oppure se il testo fosse “Ho un gatto da 7 anni”, potrei usare come alt “Dorme spesso ed è bianco”.

Questi esempi non sono assoluti, le combinazioni possibili sono tante e non è sempre intuitivo stabilire il testo alternativo migliore per un’immagine. Chiarire il concetto non è semplice, ma se vi vengono in mente esempi migliori fatemi sapere!

Immagini senza contesto

Nel caso  di immagini non accompagnate da alcun testo invece le cose diventano più complicate, proprio perché non esiste un contesto in cui inserire il testo alternativo.

Aggiungere un alt text come “Il mio gatto mentre dorme sul letto nella casa al mare in Versilia” comunicherebbe sicuramente informazioni utili, ma nel modo sbagliato. Il testo alternativo (lo dice la parola) deve servire a trasmettere un significato equivalente, senza aggiungere dettagli non intuibili altrimenti.

E le immagini sui siti di photo-sharing?

Proprio per questo motivo l’alt text perde significato sulle community che hanno al centro di tutto delle immagini. Qual è la soluzione migliore? Non è facile dare una risposta, ma una pratica corretta potrebbe essere sfruttare i campi destinati a titolo e descrizione per spiegare la foto, lasciando l’alt vuoto.

Prendendo l’esempio di Flickr, nell’ultimo redesign l’alt delle foto è “photo”. Serve a qualcosa? Non direi, sarebbe stato meglio lasciarlo vuoto. Sono presenti però titolo e descrizione, che se usati correttamente potrebbero proprio servire allo scopo desiderato.

In un sito simile, il problema di spiegare il significato di un’immagine non è una questione di accessibilità, ma di usabilità. Non sono infatti solo gli utenti non vedenti a voler conoscere il soggetto di un’immagine: anche tutti gli altri visitatori hanno bisogno di dettagli che non sono intuibili dal contesto.

Una parte di questo problema sarà progressivamente risolto grazie all’uso della tecnologia: basti pensare al gps che ricava la posizione di una foto ed ai dati exif, che vengono già mostrati in automatico. Per quanto riguarda il resto al momento non ci sono soluzioni: solo con una descrizione testuale aggiuntiva sarà possibile avere delle pagine veramente informative, usabili ed accessibili.

Sprite Me: un nuovo strumento per creare CSS Sprites

Un tool per generare i CSS Sprites in automatico, su qualsiasi pagina e con tutti i browser.

Sprite Me è uno strumento potente: si tratta di una bookmarklet che consente di ottimizzare qualsiasi pagina si stia navigando per l’utilizzo dei CSS Sprites.

Se non avete mai sentito parlare dell’argomento, prima di continuare vi consiglio di leggere il post “Usare gli Sprite CSS” pubblicato qualche mese fa proprio su questo sito, visto che è una pratica indispensabile per ogni web designer.

Tornando a Sprite Me, ecco cosa è capace di fare con un semplice clic:

  1. Trovare tutte le immagini di sfondo utilizzate sulla pagina corrente, mostrando l’elemento a cui appartengono con un semplice mouseover
  2. Riunire le immagini che possono essere accorpate, a seconda della loro posizione e delle proprietà utilizzate. Ad esempio se un background si ripete verticalmente dovrà occupare l’intera altezza dello sprite.
  3. Creare il background unico, cliccando sul tasto “make sprite”. La cosa non avviene in automatico perchè c’è la possibilità di riorganizzare le singole immagini prima di accorparle, decidendo quindi se affidarsi totalmente allo strumento o fare delle correzioni manuali.
  4. Generare il codice CSS necessario per utilizzare la nuova immagine unica

Per verificare le potenzialità di Sprite Me vi consiglio di provare la demo prima di installarlo.

In genere non sono un amante degli strumenti automatici come questo perchè hanno sempre qualche difetto, ma credo in questo caso di dover fare un’eccezione. Ho notato che a volte le regole CSS generate non sono molto elastiche, ma la possibilità di correggere il risultato manualmente e di generare l’immagine in maniera automatica permettono di aggirare i possibili problemi.

Effettuate qualche prova per decidere se fa al caso vostro, il fatto che sia una bookmarklet vi permetterà di averlo a portata di mano su tutti i maggiori browser, Internet Explorer incluso.

Come allineare le immagini dei post di WordPress

Alcune semplici istruzioni per risolvere i problemi delle immagini affiancate al testo su Wordpress.

Ultimamente mi è capitato spesso di trovare persone in difficoltà con l’allineamento delle immagini all’interno dei post di WordPress.

Dalla versione 2.5 infatti è cambiato il modo in cui vengono gestite: se prima erano utilizzati gli orrendi tag HTML come align=”left”, ora il funzionamento è diverso e tutto viene gestito tramite le classi CSS aligncenter, alignleft ed alignright.

Se quindi avete dei problemi simili a questo screenshot nell’allineamento delle immagini accanto al testo, molto probabilmente il tema che utilizzate non è ottimizzato per le ultime versioni di WordPress, dalla 2.5 in poi.

La soluzione

Il rimedio è semplice, e si trova anche sul sito ufficiale di WordPress. Infatti è sufficiente modificare il foglio di stile del tema che utilizzate (di solito style.css), aggiungendo le seguenti righe di codice:
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}
La parte relativa alla classe wp-caption è per i sottotitoli delle immagini, introdotti dalla versione 2.6 di WordPress. Se non li utilizzate potete evitare di inserire quella parte di codice, ma vi consiglio comunque di copiarla per evitare problemi.

Se volete avere un CSS valido, vi faccio notare inoltre che le definizioni sul border-radius non sono standard, quindi dovrete eliminarle e rinunciare agli angoli arrotondati dei sottotitoli.

Come scrivere il testo alternativo sulle immagini

La realizzazione di un sito accessibile passa anche per gli attributi alt delle immagini: ecco come rispettare legge Stanca e WCAG 2.0

Uno dei primi punti da osservare per la realizzazione di un sito accessibile è l’utilizzo di testi alternativi sui contenuti non testuali come le immagini. Potrebbe sembrare un compito facile da assolvere, ma non è sempre così, soprattutto perchè a seconda delle situazioni le soluzioni possibili cambiano radicalmente.

Legge Stanca e WCAG 2.0

La normativa italiana e le linee guida del W3C sono molto precise a riguardo, questi sono gli enunciati:

Legge Stanca, requisito n°3

Fornire una alternativa testuale equivalente per ogni oggetto non di testo presente in una pagina e garantire che quando il contenuto non testuale di un oggetto cambia dinamicamente vengano aggiornati anche i relativi contenuti equivalenti predisposti. L’alternativa testuale equivalente di un oggetto non testuale deve essere commisurata alla funzione esercitata dall’oggetto originale nello specifico contesto.

WCAG 2.0, linea guida 1.1

Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

Per ogni immagine presente sulla pagina è quindi necessario fornire un’alternativa testuale: il cosiddetto alt text.

Come usare l’attributo alt

Prima di tutto è d’obbligo tenere presente che ogni immagine inserita nel codice HTML di una pagina, soprattutto con doctype di tipo XHTML 1.0 Strict, necessita dell’attributo alt. Questo serve non solo quando l’attributo ha un valore, perchè è sempre utile indicare (ad esempio agli screen reader) che l’immagine non ha un significato rilevante e può essere saltata (usando alt=””). Questo accade spesso con le immagini puramente decorative, che sarebbe comunque meglio inserire tramite il foglio di stile.

Per eliminare ogni dubbio su cosa scrivere nell’attributo alt, la soluzione migliore è porsi una semplice domanda:

“Se dovessi illustrare al telefono la pagina che stai visitando, descriveresti l’immagine e il suo contenuto?”

Se la risposta è sì, allora è bene che quell’immagine abbia un testo alternativo, altrimenti non servirà a niente. Il metodo viene direttamente da Roger Johansson, e lo trovo perfetto per casi come questi.

L’importante è ricordarsi sempre di non esagerare, perchè è facile cadere nell’errore opposto: inserire troppe informazioni (inutili) in una pagina. Rendere accessibili le immagini di un sito non significa usare testi alternativi esageratamente lunghi e descrittivi: creerebbero solamente problemi. La cosa migliore è inserirli solo dove necessario, ad esempio in immagini che contengono del testo, per far arrivare all’utente lo stesso identico messaggio.

Conclusioni

Non è sempre facile trovare il giusto testo alternativo per le immagini di una pagina web. Le soluzioni variano a seconda dei casi, ma la regola fondamentale è ricordarsi che il testo alternativo deve servire per veicolare lo stesso messaggio dell’immagine, non per descriverla.

La differenza tra le due cose in certi casi potrebbe essere sottile, ma l’importante è essere coscienti del problema e cercare di risolverlo. Un sito accessibile passa anche per questi dettagli.

Slideshow e gallerie di immagini accessibili

Le migliori soluzioni JavaScript per realizzare gallerie di immagini accessibili, utilizzando i framework jQuery e Mootools.

Dall’uscita di Lightbox le soluzioni JavaScript per realizzare gallerie di immagini si sono moltiplicate: le scelte a disposizione sono innumerevoli, ma non è solo l’aspetto estetico quello che conta. Molto spesso gli script disponibili in rete sono fin troppo pesanti per il loro scopo, o non tengono presenti gli standard minimi per quanto riguarda l’accessibilità dei contenuti.

In questo articolo troverete una selezione di alcuni effetti che consentono di creare gallerie di immagini accessibili: non intrusivi, degradano nel modo giusto se JavaScript è disabilitato, e si appoggiano a framework già collaudati come jQuery e Mootools. Potrebbero essere migliorati ulteriormente, ma sono un’ottima base di partenza.

SmoothGallery

Soluzione basata sulla libreria Mootools, consente di creare slideshow di immagini mettendo a disposizione vari parametri come lo scorrimento automatico ed il tempo riservato ad ogni fotografia. E’ possibile anche avere più set di immagini nella stessa galleria: funzione comoda per risparmiare spazio nella pagina.

In assenza di JavaScript, le immagini appaiono comunque precedute da titolo e descrizione. Il difetto riguarda i controlli, non è infatti possibile scorrere le foto da tastiera.

Slideshow 2

Un buon set di effetti a disposizione anche per questo script basato sul framework Mootools, che può essere a sua volta esteso con altre funzionalità, come l’anteprima delle immagini con Lightbox.

Notevole la realizzazione degli esempi: disabilitando JavaScript le funzionalità restano le stesse, spariranno semplicemente le transizioni. Ottimi anche i controlli, non c’è alcun problema a spostarsi tra le immagini utilizzando anche la tastiera.

Galleria

Probabilmente il migliore tra quelli presentati, questo script si basa su jQuery e pesa solamente 4kb. Non è intrusivo, degrada senza problemi in assenza di JavaScript o con i CSS disabilitati e può essere personalizzato facilmente anche nell’aspetto. Le immagini sono organizzate in una lista nel codice HTML: una soluzione ottimale.

Notevole anche l’efficienza dello slideshow, perchè le foto vengono caricate e mostrate solo quando disponibili, evitando attese nel momento dell’interazione.

Se conoscete altre soluzioni accessibili per la creazione di gallerie di immagini segnalatele nei commenti, è sempre utile conoscere le migliori risorse in questo ambito. Potete trovare altri script nel mio precedente post dedicato a Lightbox ed ai suoi cloni: se comunque volete uno slideshow accessibile il mio consiglio è di partire dagli script appena illustrati.