Toegankelijkheid: codeer volgorde

Source order

Katinka Hesselink 2006

Er zijn mensen die webpagina's bekijken met een sprekende browser . Aan visuele grapjes hebben deze mensen uiteraard niets. Zo'n browser leest tekst voor die op de pagina staat. Beter gezegd: leest tekst voor die in de HTML-code van de webpagina staat. Een sprekende browser is dus te vergelijken met een tekst-browser.

De belangrijkste tekstbrowser is google. Google leest een website niet visueel, maar van begin tot eind als een verzameling code, met daarin links en trefwoorden (grofweg). Google interpreteert tekst die vooraan staat als belangrijk. Dat is logisch: tekst die bovenaan staat, interpreteren mensen die naar een webpagina kijken ook als belangrijk. In een pagina die gebaseerd is op een tabel, met links en misschien boven een menu en vervolgens de inhoud - staat die inhoud in de code na alle menu's. ( voorbeeld van mijn eigen site ). Kijk eens naar de code (inhoud er uit gehaald):

<!DOCTYPE doctype PUBLIC 
"-//w3c//dtd html 4.0 transitional//nl">
<html><head>
<meta content="text/html; charset=iso-8859-1" 
http-equiv="Content-Type">
<title></title>
</head>
<body dir="ltr">
<table summary="-" border="0" cellpadding="15" 
cellspacing="0" width="100%">
<tbody> <tr> 
<td rowspan="3" class="menu" width="20%"> 
<center><img src="LOGO.GIF" alt="" title="LOGO" 
height="125" width="110"></center>
<a class="skiplink" href="#startcontent" 
accesskey="2">Sla navigatie over</a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a></td> 
<td class="nav">
<a href=""></a>
<a href=""></a> </td>
<td class="nav">
<a href=""></a>
<a id="hier" href="hier.htm">hier</a>
<a href=""></a> </td>
<td class="nav">
<a href=""></a>
<a href=""></a>
<a href=""></a> </td>
<td class="nav">
<a href=""></a>
<a href=""></a> </td> </tr>
<tr><td>
<h1><a name="startcontent"></a>
KOP EINDELIJK DE EERSTE INHOUD</h1></td></tr> 
<tr><td>
<h3>NOG EEN KOP - TWEEDE STUK ECHTE INHOUD</h3>
<p><a href="">LINK NAAR ECHT ARTIKEL</a></p>

Al die a elementen die je ziet, zijn links van het menu. Technisch is er nog wel het een en ander aan te merken op deze pagina. 1 Het punt is dat zowel google als een sprekende browser een heleboel irrelevante links af moeten voordat de daadwerkelijke inhoud langs komt. Voor de menselijke lezers zit er een 'skip-to-to content' link in. 2 In het Nederlands heb ik die 'Sla navigatie over' genoemd. Voor google is dit geen ideale oplossing, omdat ik aan lijk te geven dat het menu belangrijker is dan de onderwerpen die er op de pagina besproken worden. Een betere oplossing is het om met CSS het menu naar boven te halen. Dit heb ik in diverse pagina's toegepast, en het is het makkelijkst voor zij-menu's. Dus menu's die links of rechts van de inhoud terecht komen.

CSS oplossing

Het voorbeeld komst van deze pagina.

<!DOCTYPE html PUBLIC 
"-//W3C//DTD HTML 4.01 Transitional//nl">
<html>
<head>
<title></title>
<meta name="author" content="auteur">
</head>
<body>

<div id="main">
<h1>KOP</h1>
<h3>Auteur</h3>
 
<p>inhoud bla, bla, bla</p>
....
</div>

<div id="menu">
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</div>

</body>
</html>

Iedereen die een beetje van coderen houdt, ziet dat dit er veel beter uit ziet in de code. Het menu komt pas helemaal onderaan, zodat google en sprekende browsers vanzelf eerst de inhoud tegen komen. Het menu is vervolgens met CSS naar boven gehaald, in dit geval met floats. Het artikel zelf heeft <div id="main">... </div>, terwijl het menu omsloten wordt met een <div id="menu">. Dit klopt met de inhoud, in tegenstelling tot de tabel die ik in het eerdere voorbeeld gebruikt heb. Uit het stylesheet:

#menu {width: 20%; 
	float: left ;
	padding: 4em 0 0 0; 
	margin:0;}
#main {width: 77%; 
	float: right ; 
	margin: 0; 
	padding:0 5px;
	border-left: solid #fff 1px; }

Mocht ik het menu rechts willen zetten, dan hoef ik alleen maar de float's om te draaien. Hier is het voordeel van CSS duidelijk: een tabel veranderen betekent dat elke pagina met zo'n table aangepast moet worden. Dat is ook de reden dat er op vrij veel plekken van mijn website nog tabellen te bewonderen zijn. Een CSS-pagina veranderen is alleen maar een kwestie van een document aanpassen: het stylesheet. In dit geval kan ik dus in een handomdraai honderden pagina's van uiterlijk veranderen, door deze ene pagina aan te passen. 3

Conclusie

In dit aspect van accessibility-design is er geen verschil tussen zo ontwerpen dat de pagina goed gevonden wordt door google en toegankelijk ontwerpen voor mensen die een sprekende browser gebruiken. Zoek-machine optimalisatie gaat dus samen met gebruiksvriendelijkheid voor een vaak genegeerde groep gebruikers. Dit komt onder andere door het gebruik van CSS Stylesheets en de bijbehorende scheiding van content en opmaak. Dit maakt het voorlezen van een stuk code een heel stuk eenvoudiger.

Voetnoten

1 Elders op deze site leg ik uit wat er allemaal fout gaat op deze pagina: De methode die ik hier heb gebruikt voor de menu's is niet ideaal. De doctype klopt niet en de alt-tekst methode die hier gebruikt is (in de code hierboven niet zichtbaar) is wat overdreven.

2 Recent onderzoek (13-Jan-2006) laat zien dat mensen die screenreaders gebruiken niet echt geinteresseerd zijn in de codeervolgorde. Zij gebruiken meestal de mogelijkheden van de screenreader om de structuur van de pagina duidelijk te maken. Hiervoor is het wel noodzakelijk dat de webpagina het type HTML-CSS gebruikt dat op deze website wordt uitgelegd: als kopjes niet in de code aangeduid worden met bijvoorbeel <h1> ... </h1>, kan een screenreader niet zien dat dit belangrijke tekst is: namelijk een kop (heading) met niveau 1.

3 De Width van #main is 77% en die van #menu is 20%. Dit telt niet op tot 100%, omdat browsers moeite hebben met de precieze breedte van zo'n element. Browsers interpreteren die breedte ook nog eens verschillend. In de praktijk probeer ik dan uit wat werkt in Firefox, IE6 en Opera en als het resultaat er in alle drie mee door kan, ben ik tevreden. In dit geval hoefden de kolommen niet heel precies tegen elkaar aan te staan en dan kan zo'n oplossing waarbij er 3% 'mist' best.

Zie ook Tips in toegankelijkheid: pagina-indeling en Absolute positionering in plaats van tabellen