> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.laposta.org/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.laposta.org/_mcp/server.

# Aan welke eisen voldoet toegankelijke HTML-code?

> Richtlijnen voor onder andere koppen, tabellen, alt-teksten en schermlezers bij een geïmporteerde nieuwsbrief of eigen sjabloon.

De opbouw van je HTML-code bepaalt hoe goed een schermlezer je nieuwsbrief kan voorlezen. Dit speelt bij een geïmporteerde nieuwsbrief of een zelfgemaakt sjabloon. In de drag & drop-editor [bepaal je de HTML niet zelf](/kan-ik-zelf-html-code-aan-mijn-nieuwsbrief-toevoegen).

## Gebruik simpele, semantische code

De HTML voor nieuwsbrieven is vaak complex, omdat die in veel verschillende e-mailprogramma's moet werken. Houd de code toch zo eenvoudig mogelijk, vooral voor schermlezers. Ook met simpelere code kun je een mooie en moderne nieuwsbrief maken.

Kies tags die passen bij de inhoud. Zet een kop in een `<h>`-tag, zodat een schermlezer direct herkent dat het om een kop gaat:

```html
<h1>Titel van de nieuwsbrief</h1>
<h2>Kop van een artikel</h2>
<p>Een paragraaf tekst.</p>
<ul>
  <li>Een item in een opsomming</li>
</ul>
```

Gebruik aflopende kop-tags (begin met `<h1>`, daarbinnen `<h2>`, enzovoort), een `<p>` voor een paragraaf en `<ol>`, `<ul>` of `<dl>` voor lijsten, met daarbinnen `<li>`-tags.

Let ook op de volgorde in de code. In HTML hoeft de volgorde van de tags niet overeen te komen met de zichtbare volgorde van de inhoud, maar een schermlezer houdt wel de volgorde in de code aan. Let er vooral bij meerdere kolommen op dat deze leesvolgorde logisch blijft.

## Beperk tabellen en gebruik role="presentation"

Tabellen worden in nieuwsbrieven vaak gebruikt voor de opmaak, hoewel ze daar niet voor bedoeld zijn. Gebruik ze zo weinig mogelijk. Zijn tabellen toch nodig, wat meestal zo is zolang Outlook bestaat, voeg dan het attribuut `role="presentation"` toe aan elke tabel waarin een deel van de inhoud staat:

```html
<table role="presentation">
  <tr>
    <td>Een stuk inhoud van de nieuwsbrief</td>
  </tr>
</table>
```

Een schermlezer leest dan niet alle losse cellen (`<td>`'s) voor, maar alleen de relevante tekst.

## Rekening houden met toetsenbordgebruik en inzoomen

Niet iedereen gebruikt een muis. Alle inhoud moet daarom ook via het toetsenbord bereikbaar zijn, zodat bijvoorbeeld links klikbaar zijn. Dit kun je testen door met de Tab-toets door de e-mail te gaan: alle belangrijke elementen moeten in een logische volgorde te selecteren zijn. Is de volgorde in je HTML logisch, dan gaat dit meestal vanzelf goed.

Sommige lezers vergroten de tekst om de nieuwsbrief beter te kunnen lezen. Op een desktop doen ze dat met Ctrl en + of Command en +, en op een telefoon of tablet met een knijpbeweging ('pinchen'). Als vuistregel moet de nieuwsbrief tot 200% vergroting goed leesbaar blijven.

## Gebruik het alt-attribuut goed

Veel e-mailprogramma's tonen standaard geen afbeeldingen. De tekst in het alt-attribuut verschijnt dan op de plek van de afbeelding. Voor de toegankelijkheid is de alt-tekst meer dan een alternatief voor het beeld: het is een wezenlijk onderdeel van de inhoud.

Maak daarom onderscheid tussen twee soorten afbeeldingen:

* Geef een puur illustratieve afbeelding een leeg alt-attribuut (`alt=""`).
* Geef een afbeelding die onderdeel is van de inhoud een alt-tekst die het beeld zo goed mogelijk vervangt. Wat je precies in zo'n tekst zet, lees je bij [de inhoud van je nieuwsbrief](/inhoud-van-jouw-nieuwsbrief-in-het-kader-van-toegankelijkheid). Werk je in de editor, dan kun je [de alt-tekst invullen bij het blok zelf](/kan-ik-een-alt-tekst-plaatsen-bij-de-afbeelding-in-mijn-nieuwsbrief).

## Controleer je nieuwsbrief

Je kunt de toegankelijkheid op verschillende manieren controleren:

* Gebruik [WAVE](https://wave.webaim.org/). Laposta gebruikt deze tool zelf om de sjablonen te controleren die het maakt.
* Gebruik de [hulpmiddelen voor toegankelijkheid](https://developers.google.com/web/tools/chrome-devtools/accessibility/reference) in de developer tools van Chrome. Gebruik hiervoor de webversie van je e-mail.
* Test zelf: bekijk de e-mail zonder afbeeldingen te laden, laat de nieuwsbrief voorlezen met een schermlezer zoals Apple's [VoiceOver](https://www.apple.com/accessibility/iphone/vision/), navigeer met het toetsenbord door alle inhoud en probeer te zoomen.

Bouw je liever niet zelf, dan kan Laposta [een toegankelijk sjabloon voor je ontwerpen en bouwen](/kan-laposta-helpen-een-toegankelijke-nieuwsbrief-te-maken).

## Gerelateerde artikelen

#### [Waar let je op voor een toegankelijke vormgeving?](/vormgeving-in-het-kader-van-toegankelijkheid)

Maak het ontwerp van je nieuwsbrief toegankelijk voor iedere lezer met een leesbaar…

#### [Toegankelijke inhoud schrijven voor je nieuwsbrief](/inhoud-van-jouw-nieuwsbrief-in-het-kader-van-toegankelijkheid)

Maak je nieuwsbrief makkelijker leesbaar voor iedere ontvanger en geschikt voor…

#### [Wat is de ideale breedte bij het importeren van een nieuwsbrief?](/wat-is-bij-import-de-ideale-breedte-van-mijn-nieuwsbrief)

Maak je een nieuwsbrief buiten Laposta? Zorg dan voor een breedte van 600 tot 620…

#### [Werken met de verouderde Joe-editor](/hoe-werkt-de-editor-bij-een-joe-verouderd)

Plaats, vul en verschuif blokken in je maatwerksjabloon van het type Joe en lees wat je…