3.1.2 Spaties en andere tekens worden niet gebruikt voor vormgeving

Gebruik spaties en andere karakters op een correcte manier en niet om een visueel effect te creëren. Dit is belangrijk zodat screenreaders het op de juiste wijze kunnen voorlezen. De software kan afwijkend gebruik van karakters niet juist voorlezen.

Icon fonts

Een icon font is een font (of lettertype) dat uitsluitend bestaat uit afbeeldingen. Aan elk karakter binnen het lettertype wordt een afbeelding gekoppeld. Als het decoratief is, moet u er enkel voor zorgen dat het karakter niet wordt gelezen door een screenreader. Als het karakter informatie overbrengt, dan moet u die op een andere manier aan screenreadergebruikers doorgeven. Toegankelijkheid van icon fonts bespreken we uitgebreider in een apart artikel.

Pijltjes

Wilt u naar een volgende pagina linken, gebruik dan een knop, tekstlink of image link met correcte alt-tekst, in plaats van een pijltje dat samengesteld is uit een liggend streepje (-) of isgelijkteken (=) en groter- (>) of kleiner-dan-teken (<). Zo kunt u zorgen voor een betekenisvolle linktekst.

Voorbeeld (niet goed)

<a title="vorige pagina" href="#"><</a>
<a href="#">2</a>
<a href="#">3</a> 
<a href="#">4</a> 
<a href="#">5</a> 
<a title="volgende pagina" href="#">></a>

Voorbeeld (goed)

<a href="#">vorige pagina</a> 
<a href="#">2</a> 
<a href="#">3</a> 
<a href="#">4</a> 
<a href="#">5</a> 
<a href="#">volgende pagina</a>

of

<a href="#"><img src="kleinerdan.jpg" alt="Vorige pagina" border="0" /></a> 
<a href="#">2</a> 
<a href="#">3</a> 
<a href="#">4</a> 
<a href="#">5</a> 
<a href="#"><img src="groterdan.jpg" alt="Volgende pagina" border="0" /></a>

Spatiëring

Spaties zijn uitsluitend bedoeld om de witruimte van één karakter tussen twee woorden te creëren.

Wilt u woorden laten opvallen door de letterafstand te vergroten, gebruik dan geen spaties tussen de letters. Screenreaders zullen de tekst dan niet meer als één woord zien en de tekst spellen. Dit is zeer moeilijk te begrijpen. Het levert ook problemen op voor zoekmachines en mensen die spraakherkenning gebruiken. Met de CSS-eigenschap letter-spacing kunt u de afstand overigens ook nauwkeuriger bepalen.

Niet goed

<h1>W I N  E E N  W E R E L D R E I S !</h1>

Voorbeeld (goed)

<h1>Win een wereldreis!</h1>

h1 {
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

Zelf testen

Is er tekst op de website met een afwijkende spatiëring (witruimte tussen de letters)? Is dit gedaan met leestekens zoals spaties of met CSS?

  • CSS; dan is aan dit ijkpunt voldaan.
  • Leestekens of letters; pas uw website aan.

Zijn er karakters en of leestekens gebruikt om een visueel effect te bereiken? En is de boodschap ook in tekst beschikbaar?

  • Ja; dan is aan dit ijkpunt voldaan.
  • Nee; pas uw website aan.