Hoe CSS de lees- en tabvolgorde kan verknoeien

Bart De Clercq op 12/04/2012 - 2 reacties

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.

Screenshot van het menu

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. Meer info over dit probleem in het ijkpunt 3.2.1 Pagina-inhoud heeft betekenisvolle volgorde. Een screenreader zal in dit voorbeeld namelijk 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>

Reacties

Michael schreef 8 maanden geleden

Voorbeeldpagina bestaat niet meer: http://bartdc.anysurfer.be/blogpost-menufloat/floatmenu_fout.html

Bart Simons schreef 8 maanden geleden

Bedankt voor de melding. Probleem is verholpen.

Reageer

De volgende HTML tags zijn toegestaan: <a> <b> <ul> <li>