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'.

Voorbeeld 1 voorgelezen met NVDA in IE (MP3) : 'link NL link NL link NL link NL'. De link wordt beschouwd als een lege link. NVDA leest een deel van de URL voor.

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 (behalve in IE).

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'.

In IE worden de links correct voorgelezen omdat de letters ingevoegd met :before niet worden voorgelezen.

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'.

4. Toegankelijk - gebruik van Private Use Area

Codes uit de Private Use Area van Unicode worden niet voorgelezen door een screenreader. Als we voor het icon font dergelijke tekens gebruiken in plaats van gewone letters moeten we de ingevoegde tekens ook niet verbergen met Aria-hidden. We moeten wel nog steeds een verborgen tekst als alternatief voorzien. In het voorbeeld hieronder hebben we een ander font aangemaakt met icomoon, met de default instelling die gebruik maakt van de Private Use Area.

afspelen pauze stop maximaliseer schermgrootte

HTML

<a href="#">
	<span class="icon-play"></span>
	<span class="visuallyhidden">afspelen</span>
</a>
<a href="#">
	<span class="icon-pause"></span>
	<span class="visuallyhidden">pauze</span>
</a>
<a href="#">
	<span class="icon-stop"></span>
	<span class="visuallyhidden">stop</span>
</a>
<a href="#">
	<span class="icon-resize-enlarge"></span>
	<span class="visuallyhidden">maximaliseer schermgrootte</span>
</a>

CSS

.icon-play:before {
	content: "\e600";
}
.icon-pause:before {
	content: "\e601";
}
.icon-stop:before {
	content: "\e602";
}
.icon-resize-enlarge:before {
	content: "\e603";
}

Screenreaderoutput

De screenreaderoutput is identiek als in het vorige voorbeeld: 'link afspelen link pauze link stop link maximaliseer schermgrootte'.