Toegankelijkheid van je publicatie

Wij vinden het belangrijk dat online publicaties die met Magzmaker worden gemaakt toegankelijk zijn voor iedereen. De techniek van het Magzmaker-platform ondersteunt verschillende toegankelijkheidsaspecten en we verbeteren die waar dat nodig is. De inhoud van de publicatie wordt echter door jou als gebruiker aangeleverd en ingericht.

Daarom is het goed om ook bij het plaatsen en vormgeven van je content rekening te houden met toegankelijkheid.

Checklist

Zijn afbeeldingen voorzien van goede alt-teksten?
Is de kopstructuur logisch?
Zijn links en buttons duidelijk omschreven?
Is er voldoende kleurcontrast?
Zijn PDF's als zodanig herkenbaar?
Zijn video's voorzien van ondertiteling?
Zijn tabellen correct opgebouwd?

Afbeeldingen

Gebruik goede alt-teksten
Geef afbeeldingen een korte en duidelijke alt-tekst. Beschrijf wat er op de afbeelding te zien is en wat relevant is voor de lezer.

Een goede alt-tekst beschrijft niet alleen wat er letterlijk op de afbeelding staat, maar geeft vooral de informatie die de afbeelding toevoegt aan de inhoud.

Voorbeeld

Niet: Foto 1

Beter: Drie medewerkers bekijken samen de resultaten op een laptop.

Drie medewerkers bekijken de resultaten op een laptop

Alt-tekst toevoegen in Magzmaker
Bij het uploaden van een afbeelding in Magzmaker ben je verplicht een alternatieve tekst in te vullen. Deze tekst wordt gebruikt door ondersteunende technologie zoals screenreaders.

Koppen en tekststructuur

Gebruik koppen om je content logisch te structureren.

Begin met één H1 als hoofdtitel van de pagina en gebruik vervolgens H2, H3 enzovoort voor onderliggende onderdelen.

Gebruik koppen niet alleen om tekst groter of opvallender te maken. Een kop vertelt gebruikers van ondersteunende technologie ook hoe de informatie op de pagina is opgebouwd.

Goed:

H1
→ H2
→ H2
→ H3
→ H2

Vermijd een structuur waarbij bijvoorbeeld een H3 direct onder een H1 staat zonder duidelijke reden.
Wil je een subkop kleiner maken kies dan toch de H2 en verklein deze met een class (bijv 80%) uit de dropdownlijst "Stijl".
Voor een chapeau boven een kop kun je beter alleen een class met een vergroting gebruiken (bijv 120%).

Koppen toevoegen in Magzmaker
In de teksteditor selecteer je het deel van de tekst dat je als kop wilt opmaken. Kies uit de dropdown “Opmaak” voor de juiste kop.
Verkleinen of vergroten van een stukje tekst onder of boven de kop kun je doen met een class uit de dropdown "Stijl"; selecteer het stuk tekst en kies een van de vooringestelde classes met een vergroting of verkleining.
Zit het gewenste formaat er niet bij, voeg dan zelf classes toe met gewenste formaten (alleen met Professional publisher abonnement) of vraag ons om dit voor je toe te voegen.

Links en buttons

Gebruik duidelijke en betekenisvolle teksten voor links en buttons.

De gebruiker moet kunnen begrijpen waar een link naartoe gaat of wat een button doet.

Voorbeeld

Minder duidelijk: Klik hier

Duidelijker: Bekijk het jaarverslag 2025

Gebruik ook geen linktekst die alleen uit een URL bestaat wanneer een duidelijke omschrijving mogelijk is.

Links die in een nieuw tabblad openen
Maak duidelijk wanneer een link in een nieuw tabblad wordt geopend. Dit kan bijvoorbeeld met een icoon en een tekstuele aanduiding die ook beschikbaar is voor gebruikers van een screenreader.

Links naar PDF-bestanden
Geef aan wanneer een link naar een PDF verwijst. Bijvoorbeeld: Download het jaarverslag 2025 (PDF)

Icoon voor externe link in Magzmaker instellen
In de editie-instellingen kun je aanvinken of je het icoon bij een externe link wilt tonen. Het icoon komt dan automatisch achter elke externe link. Lees op de pagina Edities hoe je het icoon kunt instellen.

Kleur en contrast

Zorg voor voldoende contrast tussen tekst en achtergrond.

Voor normale tekst geldt binnen WCAG 2.2 AA een minimale contrastverhouding van 4,5:1. Voor grote tekst gelden andere contrastvereisten.

Let niet alleen op de kleur van tekst, maar ook op tekst op afbeeldingen en buttons.

Gebruik kleur bovendien niet als enige manier om informatie over te brengen.

Voorbeeld van kleurcontrast van tekst op verschillende gekleurde ondergrond

Kleurcontrast checken?
Er zijn verschillende websites waar je kunt checken of het kleurcontrast van tekst en ondergrond voldoende is. Bijvoorbeeld contrast checker.

Lettertype en tekst

Kies een goed leesbaar lettertype en zorg voor voldoende tekstgrootte en regelafstand.

Gebruik verschillende lettertypes en stijlen met mate. Een duidelijke typografische hiërarchie helpt gebruikers om de inhoud snel te begrijpen.

Zorg er ook voor dat informatie niet uitsluitend door bijvoorbeeld kleur, vetgedrukte tekst of een groter lettertype wordt aangegeven.

Schrijf teksten zo duidelijk en eenvoudig mogelijk.

Gebruik:

korte alinea's
duidelijke tussenkoppen
opsommingen wanneer dat de leesbaarheid verbetert

Gebruik tekst als tekst
Plaats tekst bij voorkeur als echte tekst en niet als onderdeel van een afbeelding. Tekst in een afbeelding kan voor gebruikers van een screenreader minder toegankelijk zijn en kan bij het vergroten van de pagina minder goed leesbaar worden.

Wil je tekst over een afbeelding plaatsen? Gebruik dan waar mogelijk een tekstblok bovenop de afbeelding in plaats van de tekst onderdeel te maken van de afbeelding.

Tabellen

Gebruik een tabel alleen wanneer de informatie daadwerkelijk een tabelstructuur heeft.

Gebruik duidelijke kolomkoppen en, wanneer dat nodig is, rijkoppen. Zorg ervoor dat de relatie tussen de gegevens duidelijk blijft.

Gebruik een tabel dus niet alleen om tekst of afbeeldingen op de pagina uit te lijnen.

Voor een correcte basis voor een toegankelijke tabel zijn dit de belangrijkste elementen:

<caption> voor de titel/beschrijving van de tabel
De weergave zou je via css kunnen verbergen
<thead> voor de kolomkoppen
<th scope="col"> om aan te geven dat het om kolomkoppen gaat
<tbody> voor de gegevens
<td> voor de gegevenscellen

Gebruik duidelijke tabelkoppen
Als de bovenste rij een kolomkop is gebruik je scope="col".
Wanneer de eerste cel van de linker rij als rijhoofd fungeert, gebruik je scope="row".

Geef een tabel indien nodig een <caption> met een korte beschrijving van het onderwerp van de tabel.
Als er al een titel aanwezig is kun je de caption visueel verbergen via css.

De tabel ziet er dan zo uit:

Naam van de table
Datum	Onderwerp	Gereed
10-04-2027	Project A	juli 2027
15-05-2027	Project B	Eind 2027

Onderstaande voorbeeld code kun je gebruiken in een tekstblok. Klik in de tekst-editor op "Broncode" en plak de code erin. Klik weer op broncode voor de visuele weergave.

<table class="table-container">
<caption class="visually-hidden">Planning 2027</caption>
<thead>
<tr>
<th scope="col">Datum</th>
<th scope="col">Onderwerp</th>
<th scope="col">Gereed</th>
</tr>
</thead>
<tbody>
<tr>
<td>10-04-2027</td>
<td>Project A</td>
<td>juli 2027</td>
</tr>
<tr>
<td>15-05-2027</td>
<td>Project B</td>
<td>Eind 2027</td>
</tr>
</tbody>
</table>

Video en audio

Zorg ervoor dat belangrijke informatie uit video en audio ook toegankelijk is voor gebruikers die deze niet kunnen horen of zien.

Denk bijvoorbeeld aan:

ondertiteling bij video's;
een transcript of tekstuele weergave van gesproken informatie;
audiodescriptie wanneer belangrijke visuele informatie niet uit de gesproken tekst blijkt.

Animaties en beweging

Gebruik animaties en bewegende elementen met mate.

Beweging mag de inhoud niet onnodig moeilijk maken om te lezen of te gebruiken. Houd ook rekening met gebruikers die gevoelig zijn voor beweging.

Gebruik geen snel flitsende elementen.

Heb je een vraag over de toegankelijkheid van je publicatie of heb je advies nodig bij het maken van je publicatie, neem dan gerust contact met ons op.

Najaar 2026 wordt een systeem-audit uitgevoerd door een extern bureau gespecialiseerd in digitale toegankelijkheid. De resultaten hiervan worden vastgelegd in een toegankelijkheidsverklaring, waarin wordt beschreven aan welke criteria Magzmaker voldoet en welke punten eventueel nog verbetering nodig hebben. De resultaten zullen op magzmaker.com worden gepubliceerd.