Opbouw html code in het kader van toegankelijkheid

De weergave van een nieuwsbrief wordt vastgelegd in html-code. De opbouw van deze html is van belang voor de toegankelijkheid van de nieuwsbrief. Hieronder een aantal punten waarop gelet moet worden.

Hou het simpel

De html die bij nieuwsbrieven wordt gebruikt is noodgedwongen nogal complex. Dit heeft te maken met de ondersteuning van de grote hoeveelheid e-mailprogramma's die de ontvangers van de nieuwsbrieven gebruiken. Voor een toegankelijke nieuwsbrief is het echter van belang de code niet te ingewikkeld te maken. Dit is met name belangrijk voor het gebruik van een schermlezer.

Ook met simpeler code is het overigens mogelijk een mooie en moderne nieuwsbrief te maken!

Gebruik semantische html

Het is goed als de keuze van de html tags past bij de inhoud die volgt. Gebruik daarom bijvoorbeeld voor een kop een <h> tag, zodat bij het lezen van de nieuwsbrief met een schermlezer meteen duidelijk is dat het om een kop gaat.

  • Gebruik aflopende <h> tags voor de koppen (begin met <h1>, daarbinnen <h2>, etc.);
  • Gebruik een <p> voor een paragraaf;
  • Gebruik voor lijsten <ol>, <ul> of <dl>, met daarbinnen <li> tags.

De volgorde moet logisch zijn

Bij html is er niet noodzakelijk een relatie tussen de volgorde van de tags en de volgorde van de inhoud. Bij een toegankelijke nieuwsbrief is die volgorde wel van belang, voor het gebruik van een schermlezer. Vooral bij het gebruik van meerdere kolommen moet erop gelet worden dat de volgorde die een schermlezer aanhoudt logisch is.

Toegang via het toetsenbord

Niet iedereen die een nieuwsbrief leest gebruikt hierbij een muis. Daarom moet alle inhoud ook bereikbaar zijn via het toetsenbord, zodat bijvoorbeeld links klikbaar zijn. Dit is gemakkelijk te testen door met de tab-toets door de e-mail te wandelen. Alle elementen die van belang zijn moeten geselecteerd kunnen worden en ook in een logische volgorde (als de volgorde van de html logisch is dan zal dit meestal vanzelf in orde zijn).

Beperk tabellen/role=”presentation”

Tabellen worden in nieuwsbrieven vaak gebruikt om het ontwerp te realiseren, hoewel ze daar niet voor bedoeld zijn. Gebruik ze zo weinig mogelijk. Als tabellen toch nodig zijn (en dat zal meestal wel zo zijn, vooral zolang Outlook nog bestaat), voeg dan het attribuut  role=presentation toe aan elke tabel waarin een deel van de inhoud van de nieuwsbrief staat. Dit zorgt ervoor dat een schermlezer niet alle cellen (<td>'s) voor zal lezen, maar alleen de tekst die van belang is.

Maak correct gebruik van het alt-attribuut

Omdat veel e-mailprogramma's standaard geen afbeeldingen laten zien, is het gebruik van het alt-attribuut van oudsher een belangrijk onderdeel van nieuwsbrieven. De tekst van het alt-attribuut wordt namelijk getoond in de plaats van de afbeelding. Als een nieuwsbrief toegankelijk moet zijn is het gebruik van het alt-attribuut extra belangrijk, omdat het niet alleen om een alternatief voor de afbeelding gaat, maar om een wezenlijk onderdeel van de inhoud. In de alt-tekst kan namelijk worden beschreven wat er in een afbeelding te zien is. Hierbij is het belangrijk onderscheid te maken tussen afbeeldingen die alleen illustratief zijn; die kunnen een leeg alt-attribuut meekrijgen. Bij afbeeldingen die een onderdeel zijn van de inhoud moet de alt-tekst een zo goed mogelijke vervanging zijn voor het beeld.

Houd rekening met zoomen

Om een nieuwsbrief beter leesbaar te maken zullen sommige lezers de tekst groter willen maken. Op een desktop kan dit door met behulp van Ctrl/Command - plus te zoomen, op een mobiele telefoon of tablet door te 'pinchen' (knijpbeweging). Als vuistregel geldt dat de nieuwsbrief tot 200% vergroting in orde moet blijven.

Tools

Nog steeds hulp nodig? Neem contact met ons op Neem contact met ons op

Gerelateerde informatie