Icon fonts - test

1. Ontoegankelijk

De onderstaande iconen worden ingebracht via CSS. CSS (:before) wordt gebruikt om letters in te voegen in de inhoud. Het font dat werd gegenereerd door Icomoon koppelt aan elke letter een icoon. Een screenreader leest daarom enkel de letter in kwestie voor (p, q, r, s). De gebruiker weet dus niet dat het om bedieningsknoppen gaat.

HTML

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

CSS

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

Screenreader output

Voorbeeld 1 voorgelezen met NVDA in Firefox (MP3) : 'link p link q link r link s'.

2. Toegankelijker maar verwarrend

Om de iconen voor screenreaders begrijpelijk te maken, kunnen we tekstuele uitleg toevoegen (afspelen, 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, q, r, s) wordt nog steeds voorgelezen.

afspelen pauze stop maximaliseer schermgrootte

HTML

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

CSS


.icon:before { 
	font-family: 'icomoon'; 
	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

Voorbeeld 2 voorgelezen met NVDA in Firefox (MP3) : 'link pafspelen link qpauze link rstop link smaximaliseer schermgrootte'.

3. Toegankelijk - met aria-hidden

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 hebben verborgen. 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.

afspelen pauze stop maximaliseer schermgrootte

HTML

<a href="#">
 <span data-icon="p" class="icon" aria-hidden="true"> </span>
 <span class="visuallyhidden">afspelen</span>
</a>
<a href="#">
 <span data-icon="q" class="icon" aria-hidden="true"> </span>
 <span class="visuallyhidden">pauze</span>
</a>
<a href="#">
 <span data-icon="r" class="icon" aria-hidden="true"> </span>
 <span class="visuallyhidden">stop</span>
</a>
<a href="#">
 <span data-icon="s" 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

Voorbeeld 3 voorgelezen met NVDA in Firefox (MP3) : 'link afspelen link pauze link stop link maximaliseer schermgrootte'.

Contact