Tekst vervangen door een afbeelding op een toegankelijke manier

Bij een aantal websites die ik heb gemaakt, heb ik gebruik gemaakt van image replacement. Grafisch hoogstaande websites willen bijvoorbeeld net even een ander lettertype voor een menu of kop dan de standaard lettertypes.

Image replacement is volgens de webrichtlijnen mogelijk. De uiteindelijke informatie moet echter voor iedereen toegankelijk zijn, ook als er geen CSS- of afbeeldingenondersteuning is. In deze post ga ik dieper in op twee mogelijke oplossingen voor het vervangen van tekst door afbeeldingen waarbij de tweede oplossing toegankelijker is dan de eerste.

Methode 1: Tekst buiten beeld, container een achtergrond

<style>
	#navigation li {
		display: block;
		width: 200px;
		height: 50px;
	}
	#navigation li.nav-special {
		background: url(nav-special.gif) no-repeat top left;
	}
	#navigation li span {
		position: absolute;
		left: -3000em;
	}
</style>

<ul id="navigation">
	<li id="nav-special"><a href="#"><span>Item 1</span></a></li>
</ul>

Bovenstaande methode is de meest eenvoudige manier om image replacement voor elkaar te krijgen. Er zit echter een nadeel aan bovenstaande methode. Wanneer je de CSS uitschakelt (of bij gebruik van een screenreader) wordt netjes de tekst getoond in plaats van de afbeelding. Echter als de afbeelding niet geladen kan worden en CSS wel aanstaat, krijg de gebruiker helemaal niets te zien. Volgens de webrichtlijnen moet content voor iedereen beschikbaar zijn en op deze manier bereik je dat bij het ontbreken van de afbeeldingen niet.

Methode 2: Afbeelding plaatsen over tekst

Onderstaande methode is moeilijker te implementeren maar lost bovenstaande probleem wel op. De afbeelding wordt over de tekst geplaatst. Wanneer de afbeelding niet getoond kan worden, wordt de tekst toch nog juist getoond. Deze methode kan problemen opleveren wanneer er veel gebruik gemaakt wordt van transparante achtergronden omdat de tekst er dan alsnog achter zichtbaar is.

<style>
	#navigation li, #navigation li span {
		position: relative;
		display: block;
		width: 200px;
		height: 50px;
	}
	#navigation li span {
		position: absolute;
		left: 0; top: 0;
		background: url(nav-speciald.gif) no-repeat top left;
	}
</style>
<ul id="navigation">
	<li id="nav-special"><a href="#">Item 1<span></span></a></li>
</ul>

Dit bericht is geplaatst op zondag, 21 november 2010 @ 19:13
Categorie Tips en Tutorials.
Tags: , ,

2 Reacties op "Tekst vervangen door een afbeelding op een toegankelijke manier"

  1. Reactie by Iacobien Riezebosch en Wilco Fiers | 24 november 2010 @ 10:50

    Volgens de huidige Webrichtlijnen wordt het gebruik van css image replacement op essentiële informatie wel afgeraden.

    Voor screenreaders zijn bovenstaande methoden wellicht oplossingen, maar als je slechtziend bent is dit niet goed toegankelijk. Je kan dan niet de tekst makkelijk aanpassen (contrast, grootte) aan jouw specifieke behoeften, omdat dit in een afbeelding vast staat.

  2. Reactie by Stefan | 24 november 2010 @ 13:16

    Iacobien,

    Bedankt voor je aanvulling, en ik ben het ook helemaal met je eens! In bovenstaand voorbeeld is de navigatie inderdaad essentiële informatie en raad ik ook altijd af bij een ontwerp (naast dat het vaak moeilijker te beheren is). Overigens kan je bij koppen en navigatie ook goed gebruik maken van technieken die alleen de tekst vervangen in een ander lettertype zoals bijvoorbeeld Cufon.

Reageer