[Accessibilità] Immagini nei menù di navigazione

[pierofix]

Vorrei mettere a confronto i due modi per utilizzare immagini in un menù di navigazione e analizzarne pro e contro (con voi) per giungere alla scelta migliore.

1. INSERIMENTO DELLE IMMAGINI NEL MARKUP
Un esempio potrebbe essere il seguente:

<ul>[*][img]blog.png[/img][/list]

2. UTILIZZO DEI CSS
Un esempio potrebbe essere il seguente:

<ul>[*]Blog[/list]

Con i css si può poi far sparire il testo e rimpiazzarlo con un'immagine di sfondo. Io farei così:

#blog {
   text-indent:-1000em;
   background:#fff url(blog.png) no-repeat 0 0;
}

A parer mio il modo migliore è il 2 in quanto si sfrutta appieno il markup e le informazioni sono rappresentate sotto forma di testo puro, il formato maggiormente maneggiabile anche dalle tecnologie assistive.

Il problema più grosso è tuttavia quando le immagini sono disattivate nel browser. In questo caso la soluzione migliore diventa la 1 in quanto gli attributi alt sopperiscono alla mancanza delle immagini. Con le immagini di sfondo ciò non accade, in quanto non è ovviamente possibile attribuir loro dei testi alternativi.

Rimarebbe da definire un modo per rendere visibile il testo (che io ho nascosto usando text-indent:-1000em) nel caso in cui le immagini siano disattivate.

Voi che ne pensate?

[andrea.paiola]

la soluzione più solida (retrocopatibile ecc ecc) è la prima

quella "+ nuova" è la seconda...

volendo essere creativi c'è ne è una terza: javascript

ps: non ha senso (e non è corretto) inserire un solo elemento (li) come figlio delle liste (che liste sono?!?)

[NetEscape]

A me le immagini nelle liste di navigazione danno francamente fastidio, per un problema di visibilità. Se per esempio devi rappresentare una galleria di immagini, va bene mettere la foto più rappresentativa, ma per altri concetti si cade nel simbolismo, ed il simbolismo delle icone è di difficile gestione, perchè varia da persona a persona, e varia soprattutto in base alle loro capacità di associare l'immagine al concetto. E poi io sò cecato, quindi....

[awd]

Originariamente inviato da andrea.paiola
ps: non ha senso (e non è corretto) inserire un solo elemento (li) come figlio delle liste (che liste sono?!?)

e che pignolo, era un esempio no?

Cmq il discorse è sempre lo stesso, se le immagini fanno parte del contenuto o sono necessarie per fruire l'informazione vanno nel markup, se sono solo decorative, e mi sembra il nostro caso, meglio nel css, ovviamente lasciando disponibile una descrizione testuale nel caso di visualizzazione senza css!

[pugia]

Originariamente inviato da NetEscape
A me le immagini nelle liste di navigazione danno francamente fastidio, per un problema di visibilità. Se per esempio devi rappresentare una galleria di immagini, va bene mettere la foto più rappresentativa, ma per altri concetti si cade nel simbolismo, ed il simbolismo delle icone è di difficile gestione, perchè varia da persona a persona, e varia soprattutto in base alle loro capacità di associare l'immagine al concetto. E poi io sò cecato, quindi....

Beh, un utilizzo del punto due potrebbe essere quello di utilizzare delle immagini contenente il testo con magari qualche elaborazione grafica, rendendo tutto più accattivante, mentre in caso di disattivazione delle immagini apparirebbe semplicemente il testo normale

Originariamente inviato da pierofix
Rimarebbe da definire un modo per rendere visibile il testo (che io ho nascosto usando text-indent:-1000em) nel caso in cui le immagini siano disattivate.

Io di solito piazzo il testo tra tag <span class="hidden"></span> dove .hidden { display: none; }
non so se è corretto come utilizzo però funziona bene

[andrea.paiola]

Originariamente inviato da pugia
Io di solito piazzo il testo tra tag <span class="hidden"></span> dove .hidden { display: none; }
non so se è corretto come utilizzo però funziona bene

questo comporta che su alcune versioni di screen readers il testo venga letto e su altri no

[pierofix]

Originariamente inviato da andrea.paiola
questo comporta che su alcune versioni di screen readers il testo venga letto e su altri no

Se non erro (ciao Andrea!!!) non è visibility:hidden a dare problemi agli screen-reader quanto display:none.

La soluzione di pugia dovrebbe effettivamente risolvere il problema. La pecca è che ovviamente si sporca un po' il markup. Bè, la classe "hidden" nello span si potrebbe togliere, identificando il menù e usare una soluzione simile nel CSS:

#menu a span {
   visibility:hidden;
}

Vabbè, grazie mille: ci penserò su!

[awd]

ma questo l'hai già letto?
http://pro.html.it/articoli/id_421/idcat_8/pro.html

poi ci sarebbe anche questo http://pro.html.it/articoli/id_626/idcat_11/pro.html

[pierofix]

Azz, davvero completo! Grazie mille.