accessibilità <h1>

[bonzox]

Di solito l'h1 è il titolo che metto in testa alla pagina.
Se metto il logo/titolo con un'immagine,
Per mettere h2 i titoli dopo e non saltare l'h1 posso metterlo e poi via css display:none.

Ha senso come accessibilità. Ok il logo avrebbe il suo alt, ma dopo mi si incasina il senso dei titoli <h>

[Federix]

Puoi mettere tranquillamente

<h1>[img][/img]</h1>

[bonzox]

Ok, grazie mille.

Scusa se la domanda era stupida...

[seed_squall_it]

Meglio ancora, potresti usare una tecnica di image replacement come la Pixy Cover-Up Span, in modo da mantenere accessibile l'informazione veicolata testualmente dall'<h1> (il titolo).

h1 {
font-size: 1px;
width: 200px;
height 140px;
padding: 0;
margin: 0;
position: relative;
}

h1 span {
background-image: url(LOGO.jpg);
background-repeat: no-repeat;
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
}

<h1>TITOLO DEL SITO<span></span></h1>

Esistono altre tecniche di image replacement, come la Phark e la BIR (che considero le più accessibili). Hanno solo due difetti: la Phark funziona con tutti i browser solo se l'elemento a cui applichi lo sfondo è posizionato in modo assoluto o flottante. Il vantaggio è che la Phark non usa una coppia di tag <span> vuota (anche se comunque <span> è un tag neutro e quindi non "sporca" più di tanto il markup e non altera il significato semantico dell'elemento <h1>).
La BIR è invece simile alla Pixy Cover-Up Span, ma inserisce il testo all'interno dei tag <span>, che quindi non sono vuoti. Poi utilizza lo z-index per spostare gli elementi in modo da sovrapporli. Tuttavia il suo principale difetto è che non può funzionare con Konqueror. Il vantaggio di usare l'image replacement è che puoi gestire il logo come meglio credi tramite i CSS. Ad es., puoi fare in modo che il CSS per la stampa visualizzi il titolo testualmente, oppure che sostituisca l'immagine di sfondo del logo a colori con una in bianco e nero.

[pacovox]

Fino a qualche tempo fa le tecniche di image replacement mi sembravano veramente una manna piovuta dal cielo, ultimamente però stò notando che Google le considera come tecniche da penalizzare, in quanto effettivamente quello che vede l'utente non è in realtà quello che vi è nel codice.
Purtroppo queste tecniche vengono considerate come cloacking da Google a prescindere dalla buona fede.

[seed_squall_it]

Certo che la trovo davvero un'assurdità. Ultimamente Google sta attuando una politica insensata. Ad es., ho sentito che penalizzava quei siti che usavano un menu di "quick navigation" nascosto (che ovviamente serviva solo per determinati dispositivi, quali PDA). Questo perché essendo codice nascosto, era considerato appunto come cloacking. Ora sta facendo la stessa cosa con le tecniche di image replacement, che sono utilissime per non "perdere" le informazioni. A questo punto tanto vale fare siti completamente testuali con qualche immagine di sfondo giusto per accontentare anche l'occhio e fregarsene dell'accessibilità. Ma si rendono conto di quello che stanno facendo? Cioè...io preparo un sito con CSS per lo schermo e per la stampa...in fase di stampa voglio stampare il logo non come immagine ma come testo (oppure come immagine in bianco e nero) e...non posso farlo senza usare l'image replacement! Sarebbe meglio che i signori di Google (così come quelli che hanno creato quell'infamia di browser che è IE 6) si dessero una calmata e ci pensassero un po' prima di fare cose del genere. Alla fine chi sviluppa per il web deve tenersi aggiornato, cercare di "creare" pensando all'utente, attenendosi agli standard e rendendo fruibili e accessibili le informazioni, magari perdendo la testa per trovare un buon compromesso tra grafica e struttura dei contenuti, senza contare tutti gli hack necessari per certi pseudo-browser...e dopo tutto questo si è sempre in balia di gente che da un giorno all'altro cambia le regole o che "fa le sue regole" (vedi IE).
Google può anche essere il motore più famoso e utilizzato del mondo, ma sentire che considera l'image replacement come cloacking gli fa perdere parecchi punti. Sbaglierò, ma da qualche mese a questa parte il settore informatico è peggiorato fin troppo: che si tratti di hardware, software, motori di ricerca, ecc., nessuno riesce più a fare qualcosa di buono (e Windows XP e IE 6 ne sono la prova più eclatante: sono bidoni, non software).

[neonatofrancesc]

Salve a tutti è la prima volta che srivo sul forum di html.it anche se per me è un punto di riferimento.
Per il mio sito ho usato anche io la tecnica Pixy Cover-Up span,mettendo al posto del tag <h1> un <div> soltanto che adesso vorrei mettere o un titolo testuale o una immagine sulla stampa e non so come fare ;potreste aiutarmi per cortesia?
Grazie infinita Luigi

[seed_squall_it]

Se devi mettere un titolo, l'elemento corretto da usare non è un <div>, ma appunto un heading (da <h1> ad <h6>, a seconda del suo "livello di importanza"). Ovviamente devi annullargli i margini e i padding che ha di default.

Per la stampa devi scrivere un CSS apposito e associarlo al tipo di media "print":

<link rel="stylesheet" type="text/css" href="css/stile-schermo.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/stile-stampa.css" media="print" />

Nel CSS per la stampa non dovrai fare altro che assegnare un'immagine di sfondo diversa all'elemento <span> (magari in bianco e nero o scala di grigi), oppure non assegnargli nulla, in modo che il titolo contenuto nell'elemento di heading sia visibile. Quando visualizzi la pagina su schermo, il browser utilizza in automatico il CSS associato al media "screen", mentre quando stampi la pagina, viene usato il CSS associato al media "print".

[neonatofrancesc]

Nel foglio di stile ho inserito quanto segue:
<h1>titolo<span></span></h1>
Nel foglio di stile print invece:

h1 span{background:url(immagine.jpg);}
ma non si visualizza nulla.Con cortesia potresti scrivermi il css giusto?
Grazie infinite

[seed_squall_it]

Mi pare alquanto improbabile che tu abbia scritto nel CSS <h1>Titolo<span></span></h1>...casomai l'avrai scritto nel codice XHTML.

Il codice per la Pixy è il seguente:

h1 {
width: XXpx;
height: YYpx;
padding: 0;
margin: 0;
position: relative;
}

h1 span {
background-image: url(immagine.jpg);
background-repeat: no-repeat;
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
}

Il CSS per la stampa non si integra con quello per lo schermo, ma lo sostituisce completamente. Devi scrivere due CSS separati, con regole diverse per ogni elemento, e quindi associarli alla pagina con i due tag <link /> che ti ho postato nel messaggio precedente.