U bent hier: Home » Usability Update » Toegankelijke HTML-nieuwsbrieven
« vorig artikel  | overzicht UsabilityUpdates |  volgend artikel »

Toegankelijke HTML-nieuwsbrieven (PDF-icoontje PDF-version)

Auteur: Bim Ega | Vertaald en bewerkt door: Jaap van de Putte, 2 use it | 16 augustus 2011

Dit artikel is een vertaling en bewerking van "HTML accessible emails" van Bim Egan, te vinden op: www.rnib.org.uk/professionals/webaccessibility/articles/Pages/html_emails.aspx .

Introductie

Hieronder vind je een aantal technieken die je kunt gebruiken om HTML-nieuwsbrieven toegankelijk te maken.

HTML-nieuwsbrieven zijn altijd minder toegankelijk dan tekstmailtjes. Dit komt in de eerste plaats omdat e-mailprogramma's oorspronkelijk gemaakt zijn om met tekst om te gaan. De HTML-functionaliteit is pas later aan deze programma's toegevoegd.

Daardoor is de ondersteuning door e-mailprogramma's voor spraak- en braille-uitvoer relatief mager. Ons advies is om - waar mogelijk - ook altijd een pure tekstvariant aan te bieden.

Ook de ondersteuning voor CSS is niet goed in e-mailprogramma's. Het kans dus zijn dat CSS ook niet goed wordt geïnterpreteerd. In het verleden werd mail die CSS bevatte nogal eens verwijderd door providers. We weten niet of dit probleem nu nog voorkomt.

De onderstaande richtlijnen zijn gebaseerd op de Web Content Accessibility Guidelines (WCAG), maar ze beschrijven de meest voorkomende problemen in HTML-nieuwsbrieven. De WCAG-richtlijnen zijn de internationele richtlijnen voor toegankelijke content. In Nederland zijn deze richtlijnen integraal verwerkt in de Webrichtlijnen.

Definitie HTML-nieuwsbrief

Een HTML-nieuwsbrief is een opgemaakt mailbericht met daarin een of meerdere onderwerpen. In veel gevallen bevat de nieuwsbrief slechts de titel, samenvatting en link naar het uitgebreider artikel dat op een website is te vinden.

Een HTML-nieuwsbrief is een tekstnieuwsbrief die voorzien is van opmaak, bijvoorbeeld foto's, uitlijning van teksten, logo en kleur. HTML-nieuwsbrieven zijn niet op voorhand toegankelijk. Juist doordat de afzender de nieuwsbrief kan opmaken kan de afzender de nieuwsbrief ook ontoegankelijk maken voor mensen die geen beeldscherm, maar spraak- en/of braille-uitvoer gebruiken.

Een HTML-nieuwsbrief is geen tekstmail of webpagina

Een HTML-nieuwsbrief heeft een aantal bijzondere kenmerken waardoor het afwijkt van enerzijds een gewone tekstmail en anderzijds een gewone webpagina:

  1. E-mailprogramma's verschillen veel meer dan browsers in hoe de HTML wordt geïnterpreteerd. Opmaak via CSS is in een e-mail veel minder betrouwbaar dan in een webpagina. Voor e-mailnieuwsbrieven staat de opmaak daarom vaak wel in de HTML, in tegenstelling tot webpagina's, waar de opmaak apart staat in CSS-bestanden. Verouderde HTML-tags, zoals <font> zijn hier toegestaan.
  2. Een HTML-nieuwsbrief is een mailbericht. Dit kan gelezen worden in een e-mailprogramma - zoals Outlook, Apple Mail of Mozilla Thunderbird - en als webmail in een webbrowser - zoals Microsoft Exchange en Gmail.

Headings

De titel van de nieuwsbrief heeft een h1-opmaakprofiel (heading 1). Voor elk onderwerp gebruik je een h2. Voor subkoppen binnen een onderwerp gebruik je een h3.

Meer niveaus zijn voor een nieuwsbrief niet nodig. Zie het voorbeeld hieronder.

voorbeeld gebruik van headings in HTML-nieuwsbrief

Opsommingen

Maak opsommingen op als opsommingen op. Gebruik de juiste HTML-code voor het maken van opsommingen:

Afbeeldingen

Afbeeldingen worden vaak gebruikt om de nieuwsbrief visueel aantrekkelijker te maken en om de informatie te versterken. Screenreaders zien geen plaatjes, ze lezen enkel de alt-teksten van de afbeeldingen.

De regels zijn:

Soort afbeelding Alt-tekst
Gelinkte afbeelding informatie over de bestemming van de link
Plaatjes met tekst tekst die zichtbaar is in het plaatje
Plaatjes die informatie overbrengen tekst, die de betekenis omschrijft die het plaatje heeft
Niet-informatieve afbeeldingen
(ook decoratieve afbeeldingen)		 geen alt-tekst, wel alt-tag, dus alt="".
Lay-out-afbeeldingen zie niet-informatieve afbeeldingen

Let op:

Kleur

Gebruik bij voorkeur geen extra opmaak voor tekst en achtergrond. Tekst is dan zwart en de achtergrond wit. Wil je toch afwijken van deze kleuren, zorg dan dat tekst voldoende contrast heeft met de achtergrond. Voor dit contrast is een maat, het contrastratio. Zorg dat dit constrastratio boven 4.5 ligt.

Leg deze kleuren vast in de HTML en niet in de CSS, want e-mailprogramma's gaan verschillend en inconsequent om met CSS. Gebruik dus het COLOR-attribuut voor het FONT-element voor de tekst en het BGCOLOR-attribuut voor achtergrond van de nieuwsbrief.

Gebruik je afbeeldingen om tekst over te brengen, zorg dat het contrast van de tekst in de afbeelding ook voldoende is.

Tekstgrootte

Het beste kun je niets aanpassen aan de tekstgrootte, want dan zal het goed leesbaar zijn voor de ontvanger. Wil je de lettergrootte aanpassen gebruik dan:

Omdat CSS niet betrouwbaar is moet je niet CSS gebruiken voor het definiëren van de lettergrootte.

Tabellen voor vormgeving

Wees voorzichtig om tabellen te gebruiken voor de vormgeving, omdat de informatie op een niet-logische volgorde gepresenteerd kan worden als de tabel niet gebruikt wordt.

Nieuwsbrieven en promotie-mails hebben vaak een afwijkende vormgeving om een andere look&feel te bereiken dan bij gewone e-mails. Een tabel is daar een handig hulpmiddel voor.

De volgorde die wij zien op het scherm kan in de broncode heel anders zijn. En de broncode gebruiken screenreaders voor het oplezen of uitvoeren van de teksten. In de meeste screenreaders wordt de inhoud van een tabel gepresenteerd van cel naar cel, van links naar rechts, rij voor rij en van boven naar beneden. Dit is in de code de logische opbouw. Zonder tabel kan iemand met spraak/braille-uitvoer een onlogische volgorde krijgen, waardoor teksten onbegrijpelijk worden.

Deze opbouw heeft ook gevolgen bij het volgen van de links via de TAB-toets. De volgorde van de links kan daardoor ook onlogisch worden.

Als je toch een tabel gebruikt, kun je als vuistregel gebruiken dat gerelateerde content in één tabelcel moet staan, als de tabel meer dan één kolom heeft.

Links

Gebruik duidelijke en beschrijvende linkteksten. Gebruik geen betekenisarme verwijzingen, zoals "klik hier". Een goede linktekst geeft heldere informatie over de aard en de inhoud van de linkbestemming.

Zorg verder dat elke link opent in een nieuw venster. Dit kan door het target-attribuut toe te voegen met de waarde blank: "target="_blank". Dit zorgt er voor dat gebruikers niet hun inlogsessie van hun webmail kwijtraken. Je hoeft niet aan te geven dat links in een nieuw venster openen, want dat is het verwachte gedrag in e-mails.

Voorwaarden voor gebruik

Dit artikel mag je onbeperkt verspreiden onder de volgende voorwaarden:

  1. Er wordt geen vergoeding gevraagd voor het artikel.
  2. De oorsponkelijke bron wordt genoemd.
  3. Deze condities zijn opgenomen in het artikel.

Meer weten?

Dit artikel is een vertaling en bewerking van "HTML accessible emails" van Bim Egan, te vinden op: www.rnib.org.uk/professionals/webaccessibility/articles/Pages/html_emails.aspx .

Neem contact met ons op via het contactformulier.

Overzicht alle artikelen