Terug naar Artikelen

Valide code en Webstandaarden

Valide code en het belang van Webstandaarden voor toegankelijkheid

Valide code en Webstandaarden

Valide code en webstandaarden dragen bij een een heldere structuur en een voorspelbare presentatie en gedrag.

Structuur, presentatie en gedrag

W3C Logo

Het W3C (World Wide Web Consortium) heeft webtalen ontwikkeld en vastgesteld, in samenspraak met zoveel mogelijk belanghebbenden. Er is daarbij zoveel mogelijk rekening gehouden met onder andere de toegankelijkheid en bruikbaarheid voor iedereen. De codetalen worden door het W3C 'Recommendations' of Aanbevelingen genoemd. Buiten het W3C worden ze vaak 'Webstandaarden' genoemd (in het Engels 'Web Standards' of kortweg 'Standards').

Webstandaarden kunnen in drie gebieden worden verdeeld: Structuur, presentatie en interactie (behavior).

Structuur

Webpagina's worden geschreven in de structuurtaal HTML (Hyper Text Markup Language). De laatste versie is HTML 5. Dit is de basis van iedere pagina en iedere site. Naast HTML zijn er nog andere structuurtalen, zoals MathML (taal voor wiskundige definities), SVG (schaalbare afbeeldingen), XML (opmaaktaal), SMIL (taal voor multimedia).

Presentatie

Naast structuurtalen bestaan er presentatietalen. Dit is bijvoorbeeld CSS (Cascading Style Sheets). Een andere presentatietaal is XSL, die voornamelijk bij XML-gerelateerde documenten worden gebruikt. Het doel van deze talen is de opmaak van een document te regelen, ofwel de zichtbare presentatie zoals kleurgebruik, lettertype en positionering.

Interactie (behavior)

Tenslotte zijn er op het gebied van interactie nog standaarden. Het DOM (Document Object Model) is een standaard voor het beschrijven van de hiërarchie van XML en HTML elementen. ECMA is een scriptingtaal die gebruik maakt van het DOM waarmee het elementen en attributen kan manipuleren.

Een webpagina bestaat altijd uit een structuurtaal. Maar hiernaast kunnen webstandaarden uit de andere gebieden gebruikt zijn.

Tag soup

HTML is dé taal voor het schrijven van webpagina's. De afkorting staat voor Hyper Text Markup Language. De eerste versies van HTML waren puur gericht op de structuur van de documenten. Maar al snel bestond de wens om pagina's er ook mooi uit te laten zien. Omdat er nog geen goede manier was ontworpen in HTML om dit te doen, deden de volgende ontwikkelingen zich voor:

  • Mensen die webpagina's maakten gingen structuurelementen gebruiken voor presentatiedoeleinden. De tabel die bedoeld was voor het presenteren van datagegevens werd gebruikt voor het positioneren van stukken tekst (opmaak). En bijvoorbeeld het element blockquote, bedoeld om langere citaten aan te geven, werd gebruikt voor het laten inspringen van een stuk tekst.
  • Browserfabrikanten zorgden ervoor dat er meer opmaakmogelijkheden kwamen voor hun nieuwe browserversies. Hiervoor brachten ze eigen elementen en attributen uit die wanneer opgenomen in de code een bepaald opmaakeffect bewerkstelligden. Deze 'browser-specifieke' elementen en attributen hadden alleen resultaat in die browser.
    Netscape kwam bijvoorbeeld met het element 'blink' dat tekst liet knipperen en het element 'layer' om te positioneren. En voor Internet Explorer was er bijvoorbeeld het element 'marquee', waarbij tekst door het beeld schuift.
    Voor het positioneren van de pagina moest bij Internet Explorer 'topmargin', 'leftmargin', 'rightmargin', 'bottommargin' aan het body-element worden toegevoegd en bij Netscape 'marginwidth'en 'marginheight'.
    Om dezelfde resultaten te bereiken in verschillende browsers werden veel verschillende browser-specifieke codes gebruikt.
  • Toen het presenteren van informatie op webpagina's nog in de kinderschoenen stond, werd gedacht dat het belangrijk was dat de informatie er, net zoals bij geprinte informatie, overal het zelfde uit ziet (Inmiddels is de nadruk aan het verschuiven naar bruikbaarheid). Webbouwers gebruikten veel extra code en trucs om in meerdere browsers hetzelfde visuele effect te krijgen.
  • Doordat browsers vaak soepel omgaan met fouten in code, werd er geen grote aandacht besteedt of alle elementen en attributen wel goed werden afgesloten of genest. Er werd in een aantal bekende browsers getest of er werd gemeld dat de site voor één browser met een bepaalde resolutie was ontworpen. Het resultaat in niet alledaagse browsers of met hulpapparatuur was van ondergeschikt belang en vaak niet bekend.

Bord soep waarin met vermicelliletters tag soup wordt  verbeeld.

Het gevolg van deze ontwikkelingen was dat er hoofdzakelijk pagina's op internet bestonden die uit een brei van niet officiële, ongeordende code bestonden, de zogeheten 'Tag Soup'.

Scheiding van opmaak en inhoud

Op dit moment begint de nadruk bij professionele webontwikkelaars steeds meer op scheiding tussen opmaak en inhoud te liggen. Dat wil zeggen dat alle structuur in een structuurtaal aangegeven wordt, en alle opmaak in een presentatietaal. Wanneer inhoud en presentatie gescheiden zijn is het voor zo veel mogelijk gebruikers mogelijk om pagina's zo optimaal mogelijk te gebruiken.

HTML wordt slechts gebruikt voor documentstructuur, waaronder:

  • koppen;
  • alinea's;
  • citaten;
  • links;
  • opsomminglijsten;
  • datatabellen.

En alle opmaak wordt vastgelegd in een presentatie (zoals CSS) waaronder:

  • lettertype;
  • kleurgebruik;
  • positionering;
  • keuze van opsommingtekens.

De scheiding tussen inhoud en presentatie was niet altijd duidelijk. In HTML 3.2 werden bijvoorbeeld expliciete mogelijkheden geïntroduceerd voor opmaak, zoals achtergrondkleur, tekst en linkkleuren en centreren. In HTML 4 werden veel van de opmaakmogelijkheden afgekeurd en werd de nadruk gelegd op volledige ondersteuning van Cascading Style Sheets. Voor de opmaak van webpagina's werden verschillende CSS-versies uitgebracht, die door alle browsers ondersteund worden. In eerste instantie was die style sheet-ondersteuning van browsers er niet, waardoor veel mensen toch HTML gebruikten.

Doctypes

Overzicht van doctypes: XHTML 1.1, XHTML 1.0 en 4.01 (strict en transitional) en doctypes voor framesetsLatere ontwikkelingen bestaan er dus uit dat HTML (en opvolger XHTML) alleen als een taal gezien moet worden voor het opmaken van de structuur van een document. Opmaakelementen en -attributen van de taal zijn uit de taal verwijderd (zie ook het artikel afgekeurde elementen en attributen).

In het begin van elke pagina dient u het doctype (DTD: doctype definition) aan te geven. De doctype informeert browsers en validators welke DTD u gebruikt en is van invloed op hoe een browser het document weergeeft. In de DTD staat de HTML-versie die u gebruikt en een verwijzing naar een document waarin staat aan welke grammatica het document voldoet en welke attributen en elementen hier binnen mogelijk zijn. Er zijn doctypes voor gewone pagina's en aparte doctypes voor pagina's die uit frames bestaan.

Valide code

Het begrip 'valide code' wordt gebruikt wanneer webpagina's geschreven zijn volgens de officiële grammatica van de betreffende taal zoals vastgesteld door het W3C. In valide code worden geen browser-specifieke elementen en attributen gebruikt. Deze zijn verzonnen door browserfabrikanten en zijn geen geldige code. Bouwers van websites gebruiken zelden valide code. Vaak wordt alleen gekeken naar hoe 'gewone' browsers de website met informatie presenteren, of zelfs alleen hoe de bekendste browser een pagina laat zien.

Er kan niet altijd voorspeld worden hoe hulpsoftware en -apparatuur omgaan met fouten in de code. Onjuist gebruik van HTML kan ook leiden tot fouten bij het gebruik van bijvoorbeeld JavaScript en CSS. Valide code geeft meer zekerheid dat webpagina's lees- en bruikbaar zijn op verschillende platformen, met verschillende browsers en met verschillende hulpapparatuur.

Met een validator kan gecontroleerd worden of code valide is, bijvoorbeeld met de W3C Validator voor HTML en XHTML of de W3C CSS Validator. Voor HTML-validatie is een doctype vereist. De validator weet dan tegen welke HTML-versie, met bijbehorende grammatica en lijst van elementen en attributen, getoetst moet worden.

Screenshot: De validator geeft aan dat de betreffende pagina valideert

Het gebruik van valide code biedt onder andere de volgende voordelen:

  • Pagina's worden beter en sneller weergegeven;
  • Kosten en tijdsbesparing doordat geen browser-specifieke code nodig is;
  • De HTML van een pagina is eenduidig, waardoor het werk beter overdraagbaar is, fouten makkelijker te herstellen zijn en aanpassingen makkelijker gemaakt kunnen worden;
  • De pagina's zijn stabieler en de interactie met scripts en andere technieken zal beter verlopen;
  • Valideren is een eenvoudige en goedkope manier van foutopsporing, ook kleine typefouten of syntaxfouten kunnen grote gevolgen hebben en zijn zo makkelijk op te sporen.
  • Meer zekerheid dat webpagina's lees- en bruikbaar zijn op verschillende platformen, met verschillende browsers en met verschillende hulpapparatuur.

Webstandaarden

De term webstandaarden omvat meer dan het begrip 'valide code'. De gebruikte code is niet alleen valide, maar bovendien zijn elementen, attributen en talen gebruikt voor het doel waarvoor ze ontworpen zijn. Zo gebruik je voor opmaak geen tabellen (die gebruik je alleen voor datatabellen), maar CSS. Een document dat valide is kan bijvoorbeeld koppen bevatten die opgemaakt zijn met HTML waarmee alleen visueel informatie over de structuur wordt overgedragen. Bij een pagina die voldoet aan de webstandaarden bestaat de kop uit een header (een structuurelement), waarbij opmaak geregeld is in de style sheet. Bij een valide pagina zijn opmaak en content niet persé gescheiden, en het kan zo zijn dat er nauwelijks structuurelementen worden gebruikt, of dat ze voor andere doeleinden worden gebruikt dan bedoeld. Bijvoorbeeld een tabel voor opmaak, of een willekeurige header om tekst ergens vetter en groter te maken.

Het gebruik van webstandaarden biedt naast de voordelen van valide code, nog de volgende voordelen:

  • Een site conform webstandaarden is beter toegankelijk voor zoekmachines en beter te evalueren en te indexeren door zoekmachines omdat de structuur van de pagina goed in elkaar zit en duidelijk is wat titels, koppen en inhoud van de pagina zijn;
  • Een eigen zoekmachine op de site zal beter werken;
  • Zowel oudere als nieuwere browsers kunnen pagina's goed (of op zijn minst bruikbaar) weergeven;
  • Er is maar één site voor iedereen nodig. Een site conform webstandaarden is beter toegankelijk voor zowel een bezoeker die de website met een lage resolutie bekijkt, als een blinde met hulpapparatuur als iemand die de site met een mobiele telefoon bekijkt;
  • Meer bezoekers hebben toegang tot de site;
  • Door de scheiding van opmaak en presentatie kunnen bezoekers de site bijvoorbeeld bekijken met een ander style sheet, waardoor de site toch bruikbaar voor hen is;
  • Vermindering van bandbreedte (onder andere omdat alle opmaak in style sheets is vastgelegd) betekent lagere kosten.

JavaScript en Flash

Bij het bespreken van de webstandaarden heeft u in dit artikel nog niets kunnen lezen over JavaScript en Flash, terwijl dit toch op heel veel pagina's voorkomt. Kunnen JavaScript en Flash wel gebruikt worden op valide pagina's of sites conform webstandaarden?

Valide code, Webstandaarden en webtoegankelijkheid

Valide websites en webtoegankelijkheid

Websites met louter valide pagina's zijn niet automatisch toegankelijk. Omgekeerd kunnen invalide pagina's wel toegankelijk zijn. Succescriterium 4.1.1 Parsen beschrijft aan welke 5 eisen broncode moet voldoen:

  • Elementen moeten correct geopend en gesloten zijn;
  • Elementen zijn niet verkeerd genest;
  • Elke ID is uniek;
  • Attributen zijn correct opgemaakt;
  • Attributen komen slechts 1 x per element voor.

Voor overheidswebsites beschrijft richtlijn U.1.2 dat je geen van de voor opmaak bedoelde elementen of attributen mag gebruiken. De volledig lijst afgekeurde en afgeraden elementen staat op versie2.webrichtlijnen.nl/documentatie/u.1.2/.

Ter illustratie van de relatie tussen validiteit en webtoegankelijkheid enkele (fictieve) voorbeelden:

Voorbeeld 1:

De website van de gemeente Klarendom is gebouwd met XHTML. Op deze site is elke afbeelding voorzien van een alt-attribuut. Een alt-attribuut is bedoeld om een tekstuele omschrijving te geven van een afbeelding, zodat de informatie die in de afbeelding gegeven wordt ook toegankelijk is voor mensen die de afbeelding niet kunnen zien. Op deze website is bij elke afbeelding het alt-attribuut 'illustratie'.
De website van de gemeente Klarendom valideert op alle punten. Wanneer er helemaal geen alt-attributen gebruikt zouden zijn zouden de pagina's niet valideren omdat het alt-attribuut verplicht is in XHTML 1.0 De website is echter niet toegankelijk omdat de informatie die in deze afbeeldingen gegeven wordt niet toegankelijk gemaakt is: De website voldoet daarmee niet aan IJkpunt 1.1 van prioriteit 1.

Voorbeeld 2:

Alle pagina's van de site van Tremethe Tractors en de gebruikte style sheet valideren, maar de alineakoppen zijn slechts visueel opgemaakt in CSS. Alhoewel zelfs inhoud en opmaak gescheiden zijn, voldoet deze pagina niet aan succescriterium 1.3.1 van WCAG 2.0

Conclusie

Valide code en webstandaarden vergroten de toegankelijkheid van een pagina. Sites die conform webstandaarden gebouwd zijn, zijn beter bruikbaar met verschillende browsers, op verschillende platformen en met verschillende hulpapparatuur. Sites die met Webstandaarden gebouwd zijn, hebben ook nog het grote voordeel dat opmaak en presentatie gescheiden zijn en de structuur van de pagina's aangegeven is.

De toegankelijkheid van een site is met valide code of webstandaarden echter nog niet gewaarborgd. Het verbetert de kwaliteit van een website enorm, maar ook andere toegankelijkheidsaspecten zullen nog nader bekeken dienen te worden.

Meer informatie:

Ontwikkelen met web standaarden
Vertaling van een uitgebreid artikel over het door Roger Johansson van 456 Berea Street over het gebruik en de voordelen van webstandaarden.

Op de website van het W3C zijn alle standaarden te vinden.

Doctypes: Lijst van DTD's.

Gerelateerd

Tags:
Categorie:
Kennisbank
  • Delen op Facebook
  • Delen op Twitter
  • Delen op LinkedIn