Commenti a: Nascondere un elemento con i CSS in modo accessibile http://www.tomstardust.com/archives/nascondere-un-elemento-con-i-css-in-modo-accessibile/ Web Design blog: accessibilità, xhtml e css Tue, 09 Mar 2010 15:11:43 +0000 http://wordpress.org/?v=2.9.2 hourly 1 Di: Tom http://www.tomstardust.com/archives/nascondere-un-elemento-con-i-css-in-modo-accessibile/#comment-15503 Tom Tue, 09 Jun 2009 14:05:18 +0000 http://www.tomstardust.com/?p=750#comment-15503 @EsseZeta: cerco sempre di fare in modo che i miei siti siano leggibili anche senza CSS, è quello che dovrebbero fare tutti quando sviluppano, scrivendo prima l'HTML e pensando solo dopo alla presentazione. Adoro iniziative come il <a href="http://naked.dustindiaz.com/" rel="nofollow">CSS Naked Day</a> (che però non seguo per questioni di target), non so se hai presente. Comunque è vero, non sempre è possibile raggiungere la perfezione, ma è bene impegnarsi per provarci :) @EsseZeta: cerco sempre di fare in modo che i miei siti siano leggibili anche senza CSS, è quello che dovrebbero fare tutti quando sviluppano, scrivendo prima l’HTML e pensando solo dopo alla presentazione.

Adoro iniziative come il CSS Naked Day (che però non seguo per questioni di target), non so se hai presente. Comunque è vero, non sempre è possibile raggiungere la perfezione, ma è bene impegnarsi per provarci :)

]]> Di: EsseZeta http://www.tomstardust.com/archives/nascondere-un-elemento-con-i-css-in-modo-accessibile/#comment-15502 EsseZeta Tue, 09 Jun 2009 12:48:59 +0000 http://www.tomstardust.com/?p=750#comment-15502 solo per ringraziarti dell'attenzione... :) la notazione che fai aproposito della duplicazione del titolo-del-blog è giustissima e molto attenta e pertinente... per la cronaca, opterò per far leggere allo screen reader "Logo del blog - Titolo-del-blog"... perché devo/voglio lasciare l'immagine nel codice... così ce l'ho anche con css disattivati... PS (una curiosità: ne discutevo su Edit nei giorni scorsi): ti capita di realizzare progetti che reggano anche senza css? è un po' ozioso ed estremo... ma lo è anche lavorare per quando .js è disabilitato (css e js si equivalgono per quanto riguarda la loro presenza/abilitazione), solo che per .js ci impegniamo a non farlo intrusivo, e per css mai (o comunque con minor coscienza)... eppure credo si dia l'opportunita del concetto di "non-intrusive css" (che è un po' ciò che facciamo quando ordiniamo il markup in maniera SEO oriented con i contenuti "duri" prima del resto e poi spostiamo con margini negativi e simili) buona giornata... solo per ringraziarti dell’attenzione… :)

la notazione che fai aproposito della duplicazione del titolo-del-blog è giustissima e molto attenta e pertinente…

per la cronaca, opterò per far leggere allo screen reader “Logo del blog – Titolo-del-blog”… perché devo/voglio lasciare l’immagine nel codice… così ce l’ho anche con css disattivati…

PS (una curiosità: ne discutevo su Edit nei giorni scorsi): ti capita di realizzare progetti che reggano anche senza css? è un po’ ozioso ed estremo… ma lo è anche lavorare per quando .js è disabilitato (css e js si equivalgono per quanto riguarda la loro presenza/abilitazione), solo che per .js ci impegniamo a non farlo intrusivo, e per css mai (o comunque con minor coscienza)… eppure credo si dia l’opportunita del concetto di “non-intrusive css” (che è un po’ ciò che facciamo quando ordiniamo il markup in maniera SEO oriented con i contenuti “duri” prima del resto e poi spostiamo con margini negativi e simili)

buona giornata…

]]> Di: Tom http://www.tomstardust.com/archives/nascondere-un-elemento-con-i-css-in-modo-accessibile/#comment-15501 Tom Tue, 09 Jun 2009 10:45:38 +0000 http://www.tomstardust.com/?p=750#comment-15501 @EsseZeta: ciao, grazie per aver deciso di intervenire! Se usi <i>visibility: hidden</i> non hai problemi con gli screen reader, che continueranno a leggere l'elemento. Se però il logo che utilizzi ha al suo interno il titolo del blog e non è una semplice immagine, ti consiglio di aggiungerlo come background tramite CSS e non nel codice della pagina, altrimenti uno screen reader leggerà: "Logo Titolo del blog - Titolo del blog", invece di un più semplice "Titolo del blog". Spero di esserti stato di aiuto :) @EsseZeta: ciao, grazie per aver deciso di intervenire! Se usi visibility: hidden non hai problemi con gli screen reader, che continueranno a leggere l’elemento.

Se però il logo che utilizzi ha al suo interno il titolo del blog e non è una semplice immagine, ti consiglio di aggiungerlo come background tramite CSS e non nel codice della pagina, altrimenti uno screen reader leggerà: “Logo Titolo del blog – Titolo del blog”, invece di un più semplice “Titolo del blog”.

Spero di esserti stato di aiuto :)

]]> Di: EsseZeta http://www.tomstardust.com/archives/nascondere-un-elemento-con-i-css-in-modo-accessibile/#comment-15499 EsseZeta Mon, 08 Jun 2009 23:45:30 +0000 http://www.tomstardust.com/?p=750#comment-15499 ciao tom... ti leggo da tanto, ma non sono mai intervenuto... stanotte ho un dubbio relativo al nascondimento di elementi via css... vorrei discuterlo con te... l'utilizzo di visibility:hidden; può essere considerato accessibile? così (su WP): markup: <h1><a href="<?php echo get_settings('home'); ?>" title="Vai alla home page"><img src="<?php bloginfo('template_directory'); ?>/img/logo.png" alt="logo <?php bloginfo('name');?>" /><span><?php bloginfo('name');?></span></a></h1> css: .header h1 span { font-size:1px; color: #fff; visibility:hidden; } naturalmente l'aria tra gli elementi regge a una riga di testo di 1px e il colore la confonde col bg... :) ciao tom…
ti leggo da tanto, ma non sono mai intervenuto…
stanotte ho un dubbio relativo al nascondimento di elementi via css… vorrei discuterlo con te…
l’utilizzo di visibility:hidden; può essere considerato accessibile?

così (su WP):

markup:
<h1><a href="<?php echo get_settings(‘home’); ?>" title="Vai alla home page"><img src="<?php bloginfo(‘template_directory’); ?>/img/logo.png" alt="logo <?php bloginfo(‘name’);?>" /><span><?php bloginfo(‘name’);?></span></a></h1>

css:
.header h1 span {
font-size:1px;
color: #fff;
visibility:hidden;
}

naturalmente l’aria tra gli elementi regge a una riga di testo di 1px e il colore la confonde col bg…

:)

]]> Di: La proprietà display « Blogging CSS http://www.tomstardust.com/archives/nascondere-un-elemento-con-i-css-in-modo-accessibile/#comment-15473 La proprietà display « Blogging CSS Mon, 01 Jun 2009 09:27:58 +0000 http://www.tomstardust.com/?p=750#comment-15473 [...] di questa proprietà non viene letto dagli screen readers. Potete approfondire il problema nel post Nascondere un elemento con i CSS in modo accessibile di Tommaso [...] [...] di questa proprietà non viene letto dagli screen readers. Potete approfondire il problema nel post Nascondere un elemento con i CSS in modo accessibile di Tommaso [...]

]]> Di: Best of Week (+/-) #13 | Insel der Engel' http://www.tomstardust.com/archives/nascondere-un-elemento-con-i-css-in-modo-accessibile/#comment-15420 Best of Week (+/-) #13 | Insel der Engel' Sat, 16 May 2009 22:01:46 +0000 http://www.tomstardust.com/?p=750#comment-15420 [...] Nascondere un elemento con i CSS in modo accessibile [...] [...] Nascondere un elemento con i CSS in modo accessibile [...]

]]> Di: Tom http://www.tomstardust.com/archives/nascondere-un-elemento-con-i-css-in-modo-accessibile/#comment-15399 Tom Sat, 09 May 2009 14:41:59 +0000 http://www.tomstardust.com/?p=750#comment-15399 @Marco Pedota: per quanto riguarda skip link e contenuti nascosti che hanno un'alternativa grafica (es. titoli con image replacement) non ho mai avuto problemi con i motori di ricerca, non ci sono rischi, quindi vai tranquillo. Google penalizza quando ci sono contenuti nascosti senza motivo, che contengono delle keyword. @Marco Pedota: per quanto riguarda skip link e contenuti nascosti che hanno un’alternativa grafica (es. titoli con image replacement) non ho mai avuto problemi con i motori di ricerca, non ci sono rischi, quindi vai tranquillo. Google penalizza quando ci sono contenuti nascosti senza motivo, che contengono delle keyword.

]]> Di: Marco Pedota - Studio grafico Artistiko http://www.tomstardust.com/archives/nascondere-un-elemento-con-i-css-in-modo-accessibile/#comment-15396 Marco Pedota - Studio grafico Artistiko Fri, 08 May 2009 21:46:02 +0000 http://www.tomstardust.com/?p=750#comment-15396 Io ho usato spesso e volentieri display:none proprio per un discorso di accessibilità, ovvero per inserire nel sito menù di navigazione rapida, titoli di testi che per motivi di design sul sito non ne hanno, o elementi tipo link #top per tornare al menù di navigazione rapida. Disabilitando i CSS il tutto è perfetto, la navigazione è intuitiva e semplice. Ma se gli screen reader non leggono "display:none" credo che dovrò usare { position: absolute; left: -9999px; } Non l'avevo mai usato prima pensando che non fosse un codice molto gradito ai motori di ricerca. Che ne pensi Tom? Due siti dove ho implementato accessibilità e questa regola css in partcolare sono www.ordineavvocatipesaro.it e www.serigrafiadia.it Che ve ne pare? (a livello usabilità/accessibilità ovviamente) Io ho usato spesso e volentieri display:none proprio per un discorso di accessibilità, ovvero per inserire nel sito menù di navigazione rapida, titoli di testi che per motivi di design sul sito non ne hanno, o elementi tipo link #top per tornare al menù di navigazione rapida.
Disabilitando i CSS il tutto è perfetto, la navigazione è intuitiva e semplice. Ma se gli screen reader non leggono “display:none” credo che dovrò usare { position: absolute; left: -9999px; }
Non l’avevo mai usato prima pensando che non fosse un codice molto gradito ai motori di ricerca. Che ne pensi Tom?
Due siti dove ho implementato accessibilità e questa regola css in partcolare sono http://www.ordineavvocatipesaro.it e http://www.serigrafiadia.it
Che ve ne pare? (a livello usabilità/accessibilità ovviamente)

]]> Di: Tom http://www.tomstardust.com/archives/nascondere-un-elemento-con-i-css-in-modo-accessibile/#comment-15394 Tom Fri, 08 May 2009 09:14:38 +0000 http://www.tomstardust.com/?p=750#comment-15394 @Foo: il problema è che così consideri JavaScript un requisito necessario per leggere la tua pagina. Ho cercato di spiegarlo nell'ultimo paragrafo: meglio fare in modo che tutti i contenuti siano inizialmente leggibili, e nasconderli successivamente con JavaScript. @Foo: il problema è che così consideri JavaScript un requisito necessario per leggere la tua pagina. Ho cercato di spiegarlo nell’ultimo paragrafo: meglio fare in modo che tutti i contenuti siano inizialmente leggibili, e nasconderli successivamente con JavaScript.

]]> Di: Tom http://www.tomstardust.com/archives/nascondere-un-elemento-con-i-css-in-modo-accessibile/#comment-15393 Tom Fri, 08 May 2009 09:10:18 +0000 http://www.tomstardust.com/?p=750#comment-15393 @wse: sì, gli screen reader come JAWS leggono i CSS, è proprio quello il motivo per cui bisogna fare attenzione all'utilizzo del display: none. Se non sbaglio non succede in tutte le versioni, ma le più recenti si comportano così di default. Ci sono poi utenti che disabilitano i CSS e quindi non hanno problemi di questo tipo, ma la maggioranza mantiene le impostazioni standard, come è logico aspettarsi. @wse: sì, gli screen reader come JAWS leggono i CSS, è proprio quello il motivo per cui bisogna fare attenzione all’utilizzo del display: none. Se non sbaglio non succede in tutte le versioni, ma le più recenti si comportano così di default.

Ci sono poi utenti che disabilitano i CSS e quindi non hanno problemi di questo tipo, ma la maggioranza mantiene le impostazioni standard, come è logico aspettarsi.

]]>