Link alle immagini e il finto antipixel

Link alle immaginiRicordate 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. :-)

10 comments:

Lascia un commento


Archivio categorie

Here's the months' archive. The time is now, remember.