Hoe CSS de lees- en tabvolgorde kan verknoeien

Je wil een menu uitlijnen tegen de rechterzijde van je website. Hiervoor gebruik je natuurlijk een lijstje (ul-element). Als we de CSS property float op een verkeerde manier gebruiken, kunnen we een toegankelijkheidsprobleem creëren.

Fout

Eerst en vooral heb ik een foute voorbeeldpagina gemaakt met een lijstje dat als menu wordt gebruikt. Er staan cijfertjes bij de li-elementen om het probleem extra duidelijk te maken. Hieronder vind je de belangrijkste HTML en CSS code:

<ul id="menu"> 
 <li><a href="#">4 Contact</a></li> 
 <li><a href="#">3 Blog</a></li> 
 <li><a href="#">2 About us</a></li> 
 <li><a href="#">1 Home</a></li> 
</ul> 

#menu li { 
float: right; 
list-style: none; 
} 

We zien dat de li-elementen rechts uitgelijnd worden met de CSS-property float: right;. Het probleem is echter dat de elementen in de broncode in omgekeerde volgorde moeten staan om zo visueel de juiste volgorde te verkrijgen. In principe is dit een logische redenering. CSS werkt volgens een hiërarchische structuur.

Eerst komt element 4 Contact tegen de rechterzijde en de elementen die volgen, komen er links naast te staan. Een screenreader zal in dit voorbeeld eerst 4 Contact voorlezen en eindigen met 1 Home. Dat kan je ook zien door te tabben in het menu. De focus komt eerst op 4 Contact en schuift zo op naar links tot 1 Home.

Goed

Je kan dit probleem oplossen door eerst het ul-element rechts uit te lijnen en de li-elementen links uit te lijnen. Op deze manier staan visueel de li-elementen identiek zoals in het foute voorbeeld én de volgorde in de broncode is correct. Deze correcte manier kan je vinden op de goede voorbeeldpagina. Hier zal de screenreader en het tabben beginnen bij 1 Home en eindigen bij 4 Contact. De aangepaste HTML en CSS:

<ul id="menu">
 <li><a href="#">1 Home</a></li> 
 <li><a href="#">2 About us</a></li> 
 <li><a href="#">3 Blog</a></li> 
 <li><a href="#">4 Contact</a></li> 
</ul> 

#menu{ 
 float: right; 
} 

#menu li{ 
float: left; 
list-style: none; 
}</p>