Ik heb een webstandards checklist vertaald en uitgebreid met SEO-specifieke informatie. Het origineel komt van maxdesign.com. De checklist is behoorlijk uitgebreid en bevat veel relevante referenties naar achtergrondinformatie. Ik heb er lang aan gewerkt en ben van plan om de lijst de komende tijd blijvend te onderhouden. Laat het me dus weten als er iets niet klopt of ontbreekt!

De checklist

1. Kwaliteit van code
   1. Correcte Doctype?
   2. Character set?
   3. Valide (X)HTML?
   4. Valide CSS?
   5. CSS hacks?
   6. Onnodige classes of id's?
   7. Goed gestructureerd?
   8. Broken links?
   9. Snelheid/grootte in kb's?
   10. JavaScript errors?
2. Scheiding content en presentatie
   1. CSS voor alle presentatie aspecten (fonts, color, padding, borders etc)?
   2. Decoratieve afbeeldingen in de CSS of in de (X)HTML?
3. Toegankelijkheid / accessibility
   1. "Alt" attributes consequent en goed toegepast?
   2. Relatieve font-groottes?
   3. Breekt de lay-out als de font-size aangepast wordt?
   4. Zichtbare skip menus?
   5. Accessible forms?
   6. Accessible tables?
   7. Voldoende kleur helderheid/contrast?
   8. Wordt kleur gebruikt voor kritieke informatie?
   9. Delayed drop-down menu's voor mensen met verminderde motorische vaardigheden?
   10. Zijn alle links descriptief? (voor blinden)?
4. Accessibility voor devices, werkt goed als...:
   1. alle moderne en oude(re) browsers?
   2. CSS geblokkeerd?
   3. alle afbeeldingen geblokkeerd?
   4. Lynx?
   5. printen?
   6. Hand Held devices?
   7. Gedetailleerde metadata?
   8. Schermresuluties en venstergroottes?
5. Algemene Usability
   1. Duidelijke visuele hiërarchie
   2. Heading levels duidelijk herkenbaar?
   3. Navigatie makkelijk te begrijpen?
   4. Navigatie consistent?
   5. Consisten and relevant taalgebruik?
   6. Sitemap en contactpagina? Makkelijk te vinden?
   7. Voor grote sites: zoekmachine?
   8. Homepage vanaf elke pagina bereikbaar?
   9. Links onderstreept?
   10. Visited links duidelijk herkenbaar?
6. Site management
   1. Betekensivolle, behulpzame en vanaf iedere locatie in de site goed werkende 404-pagina?
   2. Friendly urls?
   3. Werkt je site ook zonder "www"?
   4. Favicon?

1. Kwaliteit van code

1.1 Gebruikt de site een correcte Doctype?

Een doctype ('document type declaration' of 'DTD') geeft aan welke versie van (X)HTML je gebruikt. Als je je (X)HTML wil valideren, moet je deze bovenaan je document zetten (zie de broncode van textdesign.nl als voorbeeld).

Web developers moeten met name opletten vanaf Internet Explorer 6: deze browser maakt een onderscheid tussen de zogenaamde 'Quirks mode' en de 'Standards compliance mode'. Zie daarvoor de derde link hieronder.

Meer informatie over doctypes

Meer informatie:

• http://www.w3.org/QA/2002/04/valid-dtd-list.html
• http://css.maxdesign.com.au/listamatic/about-boxmodel.htm
• http://gutfeldt.ch/matthias/articles/doctypeswitch.html
• http://www.htmldog.com/guides/htmladvanced/declarations/

1.2 Gebruikt de site een character set?

Als een user-agent (bijvoorbeeld een browser) geen character-set kan herkennen, is het mogelijk dat de lezer opgescheept wordt met een onleesbare tekst. Met name diegene die een meertalige website onderhoudt moet hier rekening mee houden, maar het is belangrijk genoeg dat iedereen dit doet.

Tutorial: Character sets & encodings in XHTML, HTML en CSS

Meer informatie:

• Character encodings
• Gebruik UTF-8: http://annevankesteren.nl/2004/06/utf-8

1.3 Gebruikt de site valide (X)HTML?

Valide code laadt sneller. Valide code wordt beter begrepen door (fatsoenlijke) browsers.

Wat is valide code

Meer informatie:

• W3C Markup Validation Service. Met deze tool kun je je HTML controleren op fouten.
• HTMLtidy plugin for Firefox. HTMLtidy is een andere validator. Deze kun je integreren binnen Mozilla Firefox.

1.4 Gebruikt de site valide CSS?

Je CSS moet foutloos zijn. Zo zorg je ervoor dat de presentatie van je (X)HTML ook eruitziet zoals je het bedoelde.

Help! My CSS Isn't Working!

Meer informatie:

• W3C CSS Validation Service. Met deze tool kun je je CSS controleren op fouten.
• CSStidy PHP. Een online tool voor optimalisatie van (inmiddels foutloze, zie boven) CSS. Gebaseerd op CSStidy.

1.5 Gebruikt de site CSS hacks?

Je moet het zelf weten of je hacks gebruikt, maar realiseer je wel dat bij browser-updates je mogelijk ook je CSS moet herzien.

Standard Hacks?

Meer informatie:

• CSS Hacks
• To hack or not to hack
• CSS filters

1.6 Gebruikt de site onnodige classes of id's?

Houd je (X)HTML zo simpel mogelijk. Bekijk bijvoorbeeld de broncode van MONLOG.nl of textdesign.nl. Dit geldt ook als je gebruik maakt van AJAX technieken: maak deze unobtrusive. Zie bijvoorbeeld dit artikel over AJAX, JavaScript en zoekmachine-optimalisatie.

Markup tactieken

1.7 Is de code goed gestructureerd?

Goed gestructureerde (X)HTML heeft semantische waarde voor een grote hoeveelheid user-agents (browsers zonder style sheets, text browsers, PDAs, search engines etc.)

Semantically correct markup

Meer informatie:

• Semantic data extractor

1.8 Bevat de site broken links?

Broken links frustreren. Ook zoekmachines houden er niet van.

Meer informatie:

• W3C Link checker

1.9 Hoe snel/groot (in kb) is de site?

Snelheid is één van de belangrijkste criteria die een bezoeker aan je site stelt!

Speed Up Your Site: Web Site Optimization

1.10 Heeft de site Javascript errors?

Sommige browsers en/of extensies geven foutmeldingen als je javascript niet goed is. Buiten dat dat irritant is, kan het ook zo zijn dat je je javascript na moet kijken :p

2. Scheiding tussen markup en presentatie

2.1 Wordt CSS gebruikt voor alle presentatie-aspecten? (fonts, color, padding, borders etc)?

Gebruik style sheets voor lay-out en presentatie

Web Content Accessibility Guidelines 1.0 - checkpoint 3.3

2.2 Zitten alle decoratieve afbeeldingen in de CSS, of ingebed in de markup (HTML)?

Alle presentatie moet uit de HTML gesloopt worden.

Why use CSS to separate content from presentation?

3. Accessibility voor users

3.1 Worden "alt" attributes gebruikt voor alle afbeeldingen?

Zorg voor een tekstueel equivalent in al je afbeeldingen

Web Content Accessibility Guidelines - checkpoint 1.1

3.2 Biedt de site relatieve of absolute waarden voor je fontgroottes?

Gebruik relatieve waardes in je CSS voor fontgroottes en als het even kan voor alles.

Web Content Accessibility Guidelines - checkpoint 3.4

Meer informatie:

• Web Content Accessibility Guidelines - checkpoint 3.4
• How to size text using ems

3.3 Gaat de lay-out van je site stuk als fonts geresized worden?

Er zijn verscheidene browsers waarmee je dit uit kunt proberen. Doe dat.

3.4 Bevat de site zichtbare 'skip menu's'?

Repetitieve navigatielinks moeten overgeslagen kunnen worden ('skip to content')

Section 508

Groepeer gerelateerde links en voorzie in mogelijkheden om hier gemakkelijk doorheen te navigeren.

Web Content Accessibility Guidelines - checkpoint 13.6

Met name blinden en slechtzienden zullen je hier dankbaar om zijn. Googlebot is overigens ook blind, dus hiermee optimaliseer je je code ook voor zoekmachines.

Keep them visible!

3.5 Gebruikt de site accessible forms?

Voor blinden en slechtzienden zijn formulieren erg lastig te navigeren.

Accessible forms Compacte formulieren

Meer informatie:

• Accessible html/xhtml forms
• Accessible form builder

3.6 Gebruikt de site accessible tables?

Benoem rij en kolom headers, zeker als er sprake is van grotere tabellen.

Web Content Accessiblity Guidelines - checkpoint 5.1

Meer informatie:

• How to create accessible tables
• Accessible table builder
• Creating accessible tables

3.7 Is er voldoende kleur lichtheid en contrast?

Voorgrond- en achtergrondkleur moeten goed van elkaar te onderscheiden zijn.

Web Content Accessibilty Guidelines - checkpoint 2.2

Meer informatie:

• Colour Contrast Analyser

3.8 Wordt alleen kleur gebruikt voor de belangrijkste informatie?

Zorg ervoor dat de belangrijkste informatie ook duidelijk onderscheidbaar is wanneer er geen kleuren gebruikt worden.

Web Content Accessibilty Guidelines - checkpoint 2.1

Het is namelijk mogelijk dat iemand kleurenblind is. Meestal kunnen kleurenblinden rood en groen niet goed van elkaar onderscheiden.

Meer informatie:

• Colourblind Webpage filter
• Vischeck

3.9 Zijn dropdownmenu's niet te snel?

Er zijn verschillende problemen met dropdownmenu's te noemen. Een heel belangrijk probleempunt betreft mensen met een motorische handicap: van artritis (soort reuma) tot volledige verlamming of zelfs mensen met weinig 'navigatie-ervaring' op websites. Zij ondervinden dat dropdownmenu's soms lastig te bedienen kunnen zijn.

CSS wordt soms ook gebruikt om dropdownmenu's vorm te geven, maar dit werkt usability niet altijd in de hand.

Eventueel kun je JavaScript gebruiken om het gedrag van dropdownmenu's te veranderen, bijvoorbeeld door 'delays' in te stellen. Het is overigens nog niet duidelijk hoe snel of langzaam dat dan zou moeten zijn :)

3.10 Zijn alle links descriptief?

Het uitgangspunt is dat de linktekst genoeg moet zeggen over een pagina, zelfs als de link buiten context geplaatst is.

Web Content Accessibility Guidelines 1.0 - checkpoint 13.1

4. Toegankelijkheid voor verschillende user-agents

4.1 Werkt de site goed onder verschillende (oudere en nieuwere) browsers?

Het kan geen kwaad om van tevoren te beslissen welke browsers je wil ondersteunen.

Colored boxes - one method of building full CSS layouts

4.2 Is de content bereikbaar als CSS niet beschikbaar is?

Dit kan een issue zijn. Daarom moet je zorgen voor een goede structuur van je markup.

4.3 Is de content bereikbaar als er geen afbeeldingen getoond worden?

Voor diegenen die bijvoorbeeld een langzame connectie hebben, is het een optie om afbeeldingen niet te laden.

4.4 Werkt de site in een browser als Lynx?

Dit is in feite een combinatie van de bovenstaande punten.

Meer informatie:

• Lynx Viewer

4.5 Werkt de site goed als deze wordt uitgeprint?

Dit gaat handiger als je een goed gestructureerde markup hebt. Zorg voor een goed werkende print-stylesheet.

Going to print

Meer informatie:

• Web Design References - Print

4.6 Werkt de site goed in hand held devices?

Dit hangt heel erg af van je doelgroep.

4.7 Bevat de site gedetailleerde metadata?

Zo communiceer je met machines, bijvoorbeeld Googlebot.

W3C - Metadata and Resource Description

4.8 Werkt de site goed op verschillende schermresoluties?

Houd er rekening mee dat niet iedereen net zo'n groot scherm heeft als jij. 800x600 is een minimum. Denk eventueel ook aan mobieltjes.

5. Algemeen

5.1 Is er een duidelijke visuele hiërarchie?

Organsieer en prioriseer de inhoud van je pagina door gebruik te maken van grootte, belangrijkheid verbanden tussen stukken content.

Create a Clear Visual Hierarchy

5.2 Zijn heading levels duidelijk te onderscheiden?

Gebruik header elements om de documentstructuur te ordenen en gebruik ze volgens de specificatie

Web Content Accessibility Guidelines 1.0 - checkpoint 3.5

5.3 Is de navigatie van de site gemakkelijk te volgen?

De navigatiestructuur moet je een idee geven waar je je als bezoeker bevindt en waar je naartoe kunt.

Design Tutorial - navigatie

5.4 Is de navigatie van de site consistent?

Maakt het makkelijker om informatie te vinden....

Juicy studios - Navigation

5.5 Maakt de site gebruik van correct en relevant taalgebruik?

Schrijf voor je doelgroep.

Clear language Copyblogger - copywriting voor SEO's

5.6 Bevat de site een sitemap en contactpagina? Zijn ze makkelijk te vinden?

De meeste sitemaps zijn niet duidelijk beschikbaar. In usability tests blijkt vaak dat deze over het hoofd gezien worden. Complexiteit is ook vaak een probleem: een sitemap hoort een map, een kaart te zijn en geen navigationele uitdaging op zichzelf.

Sitemap usability

5.7 Is er een zoekmachine (voor grote sites)?

Zie een interne zoekmachine als een extra navigatie-optie. Vooral bij grotere sites zullen bezoekers dit vaker en vaker gebruiken.

5.8 Is er een link naar de homepage beschikbaar op elke pagina?

De homepage is een uitvalsbasis die vaak gebruikt wordt als startpunt voor een zoektocht naar nieuwe content op je site. Zorg dat het goed bereikbaar is!

5.9 Zijn links underlined?

Maximaaliseer de zogenaamde 'perceived affordance van clickability' en kleur en onderstreep je link teksten. Bezoekers zouden niet moeten raden wat een link is en wat niet.

Guidelines for Visualizing Links

5.10 Zijn 'visited links' duidelijk onderscheidbaar?

Maak een aparte kleur voor visited links. Zo weten bezoekers welke pagina's op je site ze al bezocht hebben.

Change the Color of Visited Links

6. Site management

6.1 Heeft de site een betekenisvolle en behulpzame 404-pagina die vanaf alle locaties beschikbaar is?

Een ruwe 70% van websitebezoekers klikt weg van je site bij een 404 error. Om nooit meer terug te komen. Doe alle mogelijke moeite om 404-pagina's te voorkomen en maak er verstandig gebruik van.

The perfect 404
404's voorkomen in 7 stappen

6.2 Vriendelijke urls?

Zoekmachines houden niet van ampersands en vraagtekens in een url. Gebruik ook geen session-id's.

Search Engine-Friendly URLs

How to make URLs user-friendly

Meer informatie:

• Creating Search Engine Friendly URLs
• How to make URLs user-friendly

6.3 Werkt de url ook zonder 'www'?

Dit is niet kritiek, maar wel gebruikersvriendelijk. Als je Google sitemaps ingesteld hebt, kun je aangeven welke vorm je voorkeur heeft ('preferred domain'). Deze variant zal dan telkens tevoorschijn komen in de zoekmchine-resultaten ('SERP's').

6.4 Heeft de site een favicon?

Een favicon is een multi-resolutie afbeelding die op bijna alle professionele websites te vinden is. Het stelt de webmaster in staat om een website verder te promoten.

Favicon.com

Favicons zijn zeker niet verplicht, maar hun afwezigheid kan wel 404-errors veroorzaken in je statistieken. Internet Explorer en Google sitemaps verwachten een favicon. De laatstgenoemde geeft in webmaster central een foutmelding als deze niet aanwezig is.