10 tips voor een betere website

Een screenreader kan een afbeelding niet beschrijven zonder alt-tekst, en zoekmachines kunnen 'm niet indexeren.

<!-- fout -->
<img src="team.jpg">

<!-- goed -->
<img src="team.jpg"
     alt="Het team van WebNorm voor kantoor in Assen">

Lichtgrijze tekst op een witte achtergrond oogt modern, maar is voor veel bezoekers slecht leesbaar. WCAG AA eist minimaal 4,5:1 voor gewone tekst.

/* onvoldoende: 2,8:1 */
color: #999; background: #fff;

/* voldoende: 7,1:1 */
color: #595959; background: #fff;

Een placeholder is geen label — hij verdwijnt zodra iemand gaat typen en wordt niet door elke screenreader voorgelezen.

<!-- fout -->
<input type="email" placeholder="E-mailadres">

<!-- goed -->
<label for="email">E-mailadres</label>
<input type="email" id="email" name="email">

Vaak per ongeluk: outline:none om een "lelijke" browserrand te verbergen. Gevolg: toetsenbordgebruikers zien niet meer waar ze zijn.

/* fout */
a:focus, button:focus { outline: none; }

/* goed */
a:focus-visible, button:focus-visible {
  outline: 2px solid #1f5fbf;
  outline-offset: 2px;
}

Een foto van 8MB rechtstreeks van de camera vertraagt elke pagina waar hij op staat, vooral op mobiel.

<img src="team.webp" width="1920" height="1080"
     loading="lazy" alt="Het team van WebNorm">

Zonder geldig SSL-certificaat waarschuwt de browser bezoekers actief — dat kost vertrouwen én zoekmachine-ranking.

Trackingcookies (analytics, advertenties) mogen pas ná expliciete, actieve toestemming worden geplaatst — niet zodra iemand simpelweg doorklikt.

<!-- fout: laadt altijd, ongeacht toestemming -->
<script src="analytics.js"></script>

<!-- goed: pas na toestemming -->
<script>
if (localStorage.getItem('consent') === 'ja') {
  var s = document.createElement('script');
  s.src = 'analytics.js';
  document.head.appendChild(s);
}
</script>

Zonder de juiste viewport-instelling toont een telefoon de volledige desktop-layout piepklein.

<meta name="viewport"
      content="width=device-width, initial-scale=1">

Zonder unieke titel per pagina worden zoekresultaten onduidelijk, en oogt een gedeelde link op social media rommelig.

<title>Contact — Bakkerij Jansen</title>
<meta name="description"
      content="Bel, mail of loop langs bij Bakkerij
      Jansen in Assen — adres en openingstijden.">

De meeste gehackte sites vallen niet door een geavanceerde aanval, maar door een bekend lek in een maandenlang niet-bijgewerkte plugin.