Link alle immagini e il finto antipixel
Ricordate i test di accessibilità di qualche tempo fa? La maggior parte degli errori riscontrati scaturivano dalle immagini, ovvero gli elementi più difficili da descrivere attraverso uno screen reader o un browser disabilitato per la visualizzazione.
L’altro giorno ragionavo sul modo in cui risolvere il problema partendo dal fatto che è possibile inserire un’immagine all’interno della propria pagina sia attraverso l’(X)HTML che attraverso il CSS.
Nel primo caso (esempio 1) attraverso il tag img che necessita, oltre all’attributo src, dell’ attributo alt per una breve descrizione e di un attributo longdesc che linki ad una pagina esterna con la descrizione dettagliata; nel secondo caso (esempio 2) semplicemente utilizzando un’immagine come background di un div (o di elementi come p , span etc.).
Il test di accessibilità effettua lo scan dell’(X)HTML, per cui una soluzione potrebbe essere lo spostamento di tutte le immagini nel CSS.
Il problema sorge in presenza delle immagini che costituiscono anche dei link.
Vengo subito al caso di cui vi volevo parlare: gli antipixel, i famosi bottoncini di cui non potete più fare a meno per dare un’ordine ai link sulla sidebar. (vedi anche qui)
Nell’esempio 3 due antipixel creati nei due modi precedenti; ora bisogna dotarli di un link.
Nel primo caso (esempio 4) il link ad img come largamente utilizzato.
Ho provato quindi a spostare l’immagine nel CSS; intuitivamente si potrebbe fare nel modo dell’ esempio 5, inserendo nel CSS la proprietà cursor:pointer per far comparire la manina al passaggio del mouse in IE. Dalla validazione XHTML si scopre però che l’inserimento di un div all’interno di un a non è consentito (un elemento inline con può contenere un elemento blocco .
Il primo sistema per aggirare il problema è far sì che, tramite javascript, il div stesso abbia proprietà di link (esempio 6) con specificati a favore dell’accessibilità sia l’evento del mouse che quello da tastiera ma non compare alcun riferimento alla pagina linkata nella barra di stato del browser.
La seconda tecnica consiste nel dotare un link di un background . Utilizzando la propietà CSS display:block l’immagine viene visualizzata correttamente, ma lo screen reader si trova davanti ad un riferimento insesistente, un link vuoto. Nell’esempio 7 ho inserito così all’interno del tag a uno span con del testo.
Lo span verrà fatto scomparire, come in una tecnica di Image Replacement, attraverso il CSS.
Mentre cercavo tutt’altro, ieri mi è capitato tra le mani una tecnica che, a tal proposito, elimina il problema alla radice: l’antipixel senza immagine.
Inline Buttons, di Petr Stanícek, descrive come sostituire un bottone immagine con un link di solo testo (vedi esempio 8).
Tuttavia, il bottone è sembrato abbastanza diverso dall’antipixel originale, per cui ho effettuato alcuni cambiamenti che potete vedere nell’esempio 9.
Gli elementi a, em e span hanno la proprietà display:block a cui ho aggiunto larghezza ed altezza fissi.
Il font Verdana è abbastanza diverso dallo Silkscreen con i suoi pixel ben definiti. Un’idea potrebbe essere quella di sostituire la scritta con un’immagine e ricominciare allegramente tutto da capo. :-)
La soluzione, da te proposta, di spostare tutte le immagini nel CSS ha senso solo quando tali immagini hanno uno scopo puramente grafico (uno sfondo, ad esempio).
Quando invece le immagini sono caratterizzanti (un logo, ad esempio) è necessario che vengano rappresentate anche sulle tecnologie assistive. Dunque con gli attributi alt e longdesc e quindi inserite nel codice XHTML.
Questo perché un’immagine caratterizzante è utile sia per l’utente comune, sia per chi è costretto ad utilizzare tecnologie assistive o browser datati/ridotti.
Attenzione anche ad affidarsi solo ed esclusivamente ai validatori di accessibilità.
Tali validatori sono estremamente superficiali e in ogni modo prendono in esame esclusivamente valori oggettivi tralasciando gli aspetti fondamentali di un documento accesibile. L’accuratezza della descrizione ad esempio.
L’accessibilità (come del resto l’usabilità) va sempre e comunque testata su soggetti o va fatto uso di software che simuli deficienze o problemi legati alla visualizzazione dei contenuti e che tali test vadano valutati da personale umano.
Questo perché l’accesibilità è un valore soggettivo che va studiato caso per caso.
Ciao.
L’esempio che citi tu, il logo, mi da alcune perplessità perchè si tratta di un’altro elemento che credo non debba essere legato in profondità con l’HTML.
Supponiamo di disporre per un sito due stylesheet differenti che l’utente può scegliere attraverso uno switcher.
Il primo CSS creerà uno stile sobrio il cui logo sarà semplicemente una piccolo simbolo in bianco e nero.
Il secondo CSS mostrerà un’esplosione di colori con gradienti e ombre e il logo di conseguenza sarà un simbolo che seguirà lo stile della pagina.
Il logo quindi non potrà essere inserito attraverso un tag img, perchè rimarrebbe lo stesso al cambiare dello stylesheet. Molto meglio un <h1 id=”logo”> Nome Sito<h1> con il background di #logo variabile.
Riguardo alla validazione, ti do perfettamente ragione. Così come gli altri validatori si tratta di una sorta di “analizzatore sintattico” che non percepisce il contesto. Serve ad applicare al meglio gli standard,(talvolta eccessivamente restrittivi e destinati alla deprecazione) e quindi come dire: non basta, ma aiuta. :-)
come se foss’antani, del resto.
eheheh…occorre leggere allo specchio per scovare anche il significato nascosto.
per far sparire il contenuto non serve uno span interno, è sufficiente dare un text-indent:-5000px al contenitore (il link, in questo caso).
skidx con il mio nick perchè non hai cancellato il cookie, ti riferisci a questo: http://phark.typepad.com/phark/2003/08/accessible_imag.html?
Mi sa che non funziona con IE 5 e IE per Mac: oltre che il testo trasla anche il background.
[...] Float Tutorial How to create Flick Animations Vertical centering in CSS. The laws of webdesign. Five Five simple steps to designing grid systems CSS Tests Link alle immagini ed il finto antipixel Albino Blacksheep’s live design CSS Play (Demo, menù ed esperimenti vari) Ten more CSS tricks you may not know How to size text using ems CSS Panic Guide CSS Shorthand Guide Ideas for a better form Caroline’s Corner: Registration Forms – what to do if you can’t avoid Them CSS-Only, Table-less Forms Il Form o la form? Form Help without popups. [...]
[...] Float Tutorial How to create Flick Animations Vertical centering in CSS. The laws of webdesign. Five Five simple steps to designing grid systems CSS Tests Link alle immagini ed il finto antipixel Albino Blacksheep’s live design CSS Play (Demo, menù ed esperimenti vari) Ten more CSS tricks you may not know How to size text using ems CSS Panic Guide CSS Shorthand Guide Ideas for a better form Caroline’s Corner: Registration Forms – what to do if you can’t avoid Them CSS-Only, Table-less Forms Il Form o la form? Form Help without popups. [...]
Great to see you making an impact in Trondheim mate. Keep living up to your potential! I’m certainly really interested now to follow this up, even without seeing you live! Good work :o)
Thank you for this article. erotidfg That’s all I can say. You most definitely have made this blog into something special. You clearly know what you are doing, you’ve covered so many bases.Thanks!