test icon font

1. Ontoegankelijk

De onderstaande iconen worden ingebracht via CSS. Elk icoon is gekoppeld aan een letter uit het font dat werd gegenereerd door Pictos. Een screenreader leest daarom enkel de letter in kwestie voor (p, s, q, f). De gebruiker weet dus niet dat het om bedieningsknoppen gaat.

HTML

<a href="#" data-icon="p" class="icon"></a>
<a href="#" data-icon="s" class="icon"></a>
<a href="#" data-icon="q" class="icon"></a>
<a href="#" data-icon="f" class="icon"></a>

CSS

.icon:before {
	font-family: 'Pictos Custom';
	content: attr(data-icon);
	}

Screenreader output

VoiceOver fragment 1 (MP3)

2. Toegankelijker maar verwarrend

Om de iconen voor screenreaders begrijpelijk te maken, kunnen we tekstuele uitleg toevoegen (play, pauze, stop, maximaliseer schermgrootte). Omdat ze visueel overbodig zijn, verbergen we ze met behulp van CSS. Het resultaat is al iets duidelijker maar de letter (p, s, q, f) wordt nog steeds voorgelezen.

play pauze stop maximaliseer schermgrootte

HTML

<a href="#" data-icon="p" class="icon"><span class="visuallyhidden">play</span></a>
<a href="#" data-icon="s" class="icon"><span class="visuallyhidden">pauze</span></a>
<a href="#" data-icon="q" class="icon"><span class="visuallyhidden">stop</span></a>
<a href="#" data-icon="f" class="icon"><span class="visuallyhidden">maximaliseer schermgrootte</span></a> 

CSS

.icon:before {
	font-family: 'Pictos Custom';
	content: attr(data-icon);
	}
	
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

Screenreader output

VoiceOver fragment 2 (MP3)

Als je goed luistert, merk je dat de letter "p" bij de eerste play-knop niet wordt voorgelezen. Ik vermoed dat VoiceOver "p" gevolgd door "Pauze" automatisch samenvoegd tot "pauze" omdat er 2 p's elkaar opvolgen. Bij de andere knoppen doet zich dat niet voor.

3. Toegankelijk

Om ervoor te zorgen dat de letters niet worden voorgelezen, gebruiken we het attribuut aria hidden="true". Nu wordt enkel de tekst voorgelezen die we buiten scherm hebben gepositioneerd. Aria-hidden="true" kan ook uit de HTML gelaten worden door jQuery te gebruiken zoals Eric Eggert aantoont in de blogpost A better way to use icon fonts.

play pauze stop maximaliseer schermgrootte

HTML

<a href="#">
 <span data-icon="p" class="icon" aria-hidden="true"> </span>

  <span class="visuallyhidden">play</span>
</a>

<a href="#">
 <span data-icon="s" class="icon" aria-hidden="true"> </span>

  <span class="visuallyhidden">pauze</span>
</a>

<a href="#">
 <span data-icon="q" class="icon" aria-hidden="true"> </span>

  <span class="visuallyhidden">stop</span>
</a>

<a href="#">
 <span data-icon="f" class="icon" aria-hidden="true"> </span>

  <span class="visuallyhidden">maximaliseer schermgrootte</span>
</a>

CSS

De CSS is identiek als in het vorige voorbeeld. Enkel de HTML verschilt.

Screenreaderoutput

VoiceOver fragment 3 (MP3)