Aan welke eisen voldoet toegankelijke HTML-code?

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.

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:

<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:

<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. Werk je in de editor, dan kun je de alt-tekst invullen bij het blok zelf.

Controleer je nieuwsbrief

Je kunt de toegankelijkheid op verschillende manieren controleren:

• Gebruik WAVE. Laposta gebruikt deze tool zelf om de sjablonen te controleren die het maakt.
• Gebruik de hulpmiddelen voor toegankelijkheid 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, 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.

Gerelateerde artikelen