AnySurfer Checklist 2.0

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.

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.

Niet goed

< 2 3 4 5 >

Goed

of

vorige pagina 2 3 4 5 volgende pagina

Als u pijltjes wilt gebruiken als opsommingsteken kunt u met CSS het standaard opsommingsteken door een afbeelding vervangen. Zie ook: Pagina's zijn semantisch gestructureerd.

Niet goed

<p>
-> lijst item 1<br />
-> lijst item 2<br />
-> lijst item 3<br />
</p>

Goed

<style>
div.example ul li {
  background: url(http://images.anysurfer.be/examples/pijltje.jpeg) center left no-repeat;
  list-style: none;
  padding: 0 0 0 1.25em;
}
</style>
<ul>
  <li>lijst item 1</li>
  <li>lijst item 2</li>
  <li>lijst item 3</li>
</ul>

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.

Wilt u een kolomlayout maken, dan kunt u daar CSS voor gebruiken. Als u gegevens boven en of naast elkaar wilt plaatsen gebruikt u best een tabel.

Niet goed

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

Goed

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

<h1>Win een wereldreis!</h1>

Win een wereldreis!

ASCII-art

Als u gebruik wilt maken van ASCII-art moet er ook een tekstueel alternatief voorzien worden, net als bij afbeeldingen of andere visuele elementen. De tekens in ASCII-art vormen een afbeelding door de manier waarop ze gerangschikt zijn maar zijn als tekst betekenisloos. De beschrijving kunt u aanbieden op een aparte pagina via een link boven, onder of naast de ASCII-art, of door een beschrijving op dezelfde pagina, bij voorkeur voorafgaand aan de ASCII-art.

Als u ASCII-art wilt gebruiken verdient het de voorkeur om er een afbeelding van te maken en die te voorzien van een betekenisvolle alt tekst, zoals in het volgende voorbeeld is gedaan. Dit zorgt er voor dat de gebruiker de ascii art gemakkelijk kan overslaan en dat er geen verwarring ontstaat tussen tekst en ASCII-art.

AnySurfer logo in ASCII-art

Alfabet

Wanneer men letters uit een ander alfabet gebruikt zonder dat het taal-attribuut wordt aangepast, kan dit ook problemen opleveren met screenreaders en spraakherkenningstechnologie. Bijvoorbeeld een woord kan er correct uitzien op het eerste zicht maar als de letters uit het Griekse alfabet zijn gebruikt, kan het niet juist worden voorgelezen of herkend.

Testmethode

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.

Meer informatie

Overeenkomstige richtlijnen

WCAG 2.0

Aanvullende informatie over dit ijkpunt

Prioriteit

  • Level A

Doelgroepen

  • Blinden
  • Slechtzienden
  • Mensen met een motorische beperking
  • Zoekrobots

Webwerkers

  • Redacteur