Quando si progetta un sito Web con un'immagine di intestazione, è necessario considerare le esigenze degli utenti non vedenti che visitano il tuo sito utilizzando un lettore di schermo. La tecnica di margine sinistro negativo per la sostituzione di intestazioni di testo con le immagini è la soluzione più utilizzata per questo problema. Sullo sfondo di un link, si può prendere l'intestazione di testo fuori dallo schermo senza rimuoverlo completamente e poi la vostra immagine di intestazione. Poiché è consigliabile utilizzare intestazioni di un livello solo una volta su ogni pagina Web, è possibile selezionare dal tag < h1 > nel CSS per creare queste impostazioni.

Istruzioni

1

Scrivi il tuo titolo di testo nel codice HTML. Renderlo un link aggiungendo < a > Tag intorno al testo e quindi impostare l'attributo "href" all'URL del tuo sito Web. Avvolgere i tag < h1 > intorno il link per renderlo un titolo di un livello.

< h1 >< href = "Benvenuto" > http://yoursite.com/ "> Welcome to My Website! < /a >< / h1 >

2

Aggiungere tag < span > intorno al testo della vostra voce. Mettere i tag < span > all'interno dei tag < a >, non fuori. Ora avete un modo di targeting solo il testo all'interno della Rubrica quando si va a scrivere il codice CSS.

< h1 >< href = "& lt; span > benvenuto" > http://yoursite.com/ "> & lt; span > Welcome to My Website! < / span >< /a >< / h1 >

3

Scrivere un selettore CSS - il frammento di codice che "Seleziona" parte di una pagina Web--qualsiasi tag < span > all'interno di tag < h1 > di targeting. Prendere il testo fuori dallo schermo senza nasconderlo dai lettori di schermo dandogli un margine sinistro negativo di 999 ems:

h1 span {margine sinistro:-999em;}

4

Impostare la larghezza e l'altezza di qualsiasi < a > tag all'interno di tag < h1 > le stesse dimensioni come l'immagine di intestazione. Dare quei < a > Tag un valore di "visualizzare" del "blocco" per rendere la larghezza e l'altezza di lavoro. Impostare lo sfondo per l'immagine di intestazione.

H1 a {display: block; width: 300px; altezza: 100px; background: URL(path/to/your/image.png);}

Consigli & Avvertenze

• Eseguire il backup i file HTML e CSS prima di modificarli.