Web Fundamentals

Weergave

Valideren ​

Je website is altijd gevalideerd

Website niet geslaagd? Jij ook niet. Dit geldt voor elk labo en voor je portfolio, je hele carrière lang!

HTML valideren ​

De W3C Markup Validation Service controleert of je document klopt. Drie manieren om te gebruiken:

  • Validate by URI: geef het adres van je online pagina op. Dat is wat wij doen bij het nakijken.
  • Validate by File Upload: upload je .html-bestand.
  • Validate by Direct Input: plak je code. Handig terwijl je bezig bent.

Je mikt op zero errors. Warnings lees je, en meestal los je ze ook op.

Valideer elke pagina, niet enkel je startpagina

De validator kijkt naar één document tegelijk. Heb je drie pagina's, dan valideer je er drie.

Fouten die je deze week gaat tegenkomen
  • Element X not allowed as child of element Y: je hebt een block-level element in een inline element gezet, of een li buiten een ul of ol.
  • End tag for element X which is not open: je tags zitten door elkaar genest, bijvoorbeeld <p><strong>tekst</p></strong>.
  • Duplicate ID x: je hebt dezelfde id twee keer gebruikt.
  • An img element must have an alt attribute: precies wat er staat.
  • Consider using the h1 element as a top-level heading only: je hebt meer dan één h1.

Toegankelijkheid controleren ​

De validator zegt of je HTML geldig is, niet of ze goed is. Een pagina die volledig uit div's bestaat, valideert perfect.

Daarvoor gebruik je axe DevTools, een extensie voor Chrome en Firefox. Ze komt in je developer tools terecht als een extra tabblad. Eén klik op Scan all of my page en je krijgt een lijst.

Drie meldingen die je deze week moet kunnen oplossen:

  • All page content should be contained by landmarks
  • Images must have alternate text
  • Heading levels should only increase by one

Snap je een melding niet?

Zoek eerst de boodschap letterlijk op. Staat er nog altijd niets dat klikt, vraag dan aan een AI waarom die regel bestaat. Niet wat je moet typen: dan leer je er niets van, en dan zie je de volgende keer dezelfde fout opnieuw.

Een tool vervangt je hoofd niet

axe vindt ongeveer een derde van de toegankelijkheidsproblemen op een pagina. De rest vraagt dat je zelf nadenkt, of test met een schermlezer. Toegankelijkheid komt later in de opleiding uitgebreid terug.

Je werkwijze ​

Doe dit in deze volgorde, elke keer:

  1. Schrijf je HTML.
  2. Valideer met de W3C-validator en los alle errors op.
  3. Scan met axe DevTools en los de meldingen op.
  4. Controleer je heading map met de HeadingsMap add-on.
  5. Zet online en valideer opnieuw, nu via de URL.

Stap 5 is geen overbodige herhaling. Een pad dat lokaal werkt en op de server niet, zie je pas daar.