Naast het verbeteren van de zichtbaarheid van de zoekmachine, stelt het gebruik van echte tekst en niet tekst in beeldvorm de bezoekers met visuele of cognitieve beperkingen in staat om de informatie te begrijpen.
- Zorg ervoor dat je echte tekst gebruikt en geef het vorm met CSS.
Hoe pas je dit toe?
Teksten in de vorm van afbeeldingen kunnen bestaan uit een van beide:
- Alleen tekst
- Tekst geassocieerd met een afbeelding (bijv. een banner)
“Echte tekst” is tekst die niet in een afbeelding is ingebakken, maar daadwerkelijk als tekst op bijvoorbeeld een Word-pagina verschijnt.
Tekst die je bijvoorbeeld in een contentmanagementsysteem (CMS) invoert, wordt als echte tekst op een pagina weergegeven.
Gebruik echte tekst
Met uitzondering van de hieronder genoemde voorbeelden, moet je echte tekst gebruiken.
Met CSS kun je het gewenste visuele effect bereiken:
- Het geeft vorm aan de echte tekst door je te laten spelen met kleur, grootte, lettertype, locatie en regelafstand.
- Het laat je toe om echte tekst te plaatsen op een banner, een animatie,...
Let op bij het gebruik van CSS:
- Gebruik de CSS-programmeerprocedure om afbeeldingen met tekst te plaatsen en de echte tekst zichtbaar te houden voor de tekst-naar-spraaksoftware.
- De bezoeker moet kunnen overschakelen naar een tekstuele versie van de webpagina zonder informatie te verliezen die in afbeeldingen zou worden opgenomen.
Uitzonderingen: wanneer kun je tekst als beeld gebruiken?
In de volgende gevallen kun je kiezen voor tekst als afbeelding:
- Als geen van de voor de website gebruikte technologieën (zoals CSS) het mogelijk maakt om dezelfde visuele weergave te verkrijgen als bij een tekst als een afbeelding
- Als de afbeelding met de tekst niet stabiel blijft met de huidige browsers
- Als de over te dragen informatie essentieel is in de vorm van een afbeelding (bijvoorbeeld een logo)
- Als de echte tekst niet overeenkomt met andere toegankelijkheidscriteria (de tekst kan bijvoorbeeld worden aangepast tot 200%)
- Als de bezoeker de mogelijkheid heeft om zelf het lettertype, de lettergrootte, de kleur en de achtergrond van de tekst als afbeelding te wijzigen.
Zorg ervoor dat je een goed tekstequivalent hebt voor de hierboven genoemde uitzonderingen.
Voor de ontwikkelaars
Met CSS echte tekst vervangen door een afbeelding van een tekst
De volgende titel wordt als echte tekst op de pagina geplaatst. In het voorbeeld gaat het om een <h1> koptekst. Het <span> element is toegevoegd om de tekst buiten beeld te kunnen plaatsen.
<h1><span>Het is feest!</span></h1>
De volgende CSS-code is gebruikt om deze titel op te maken. Het <span> element wordt met absolute positionering buiten beeld geplaatst. Het <h1> element krijgt een afbeelding als achtergrond (dit is dus de afbeelding van de tekst in het <h1> element.
h1 {
background-image: url (het-is-feest.png) ;
height: 195px;
width: 290px;
background-repeat: no-repeat;
position: absolute;
}
h1 span {
position: absolute;
left: -999em;
}
Bij het vertalen van het project naar code moet de ontwikkelaar ervoor zorgen dat zoveel mogelijk gebruik wordt gemaakt van echte tekst en dat het mogelijk is om deze tekst in het CMS in te voeren.
Voor redacteurs
De redacteur moet bij het plaatsen van afbeeldingen van tekst kritisch kijken naar de mogelijkheden die er zijn om de tekst op een andere wijze vorm te geven (bijvoorbeeld met CSS).