Gids voor uitgevers, hoofdstuk 6
Gegevens voor schermlezers en machines
Laatst beoordeeld in november 2026
Een schermlezer, een zoekmachine en een feedreader zijn allemaal afhankelijk van hoe uw site is opgebouwd. Heldere HTML, gestructureerde gegevens en een nette feed geven elk van hen wat ze nodig hebben.
Begin met de HTML
Deze elementen geven een pagina haar oriëntatiepunten, zodat een gebruiker van een schermlezer direct naar het artikel kan springen.
<html lang="en">
<body>
<a href="#main">Skip to the article</a>
<header>
<nav aria-label="Main">...</nav>
</header>
<main id="main">
<article>
<h1>Article headline</h1>
<p>By <a href="/authors/jane-doe">Jane Doe</a></p>
<p><time datetime="2026-11-05T08:00:00+01:00">Published 5 November 2026</time></p>
<h2>First section</h2>
<p>Article text.</p>
</article>
<aside aria-label="Related articles">...</aside>
</main>
<footer>...</footer>
</body>
</html>
- Oriëntatiepunten: Gebruik
header,nav,main,asideenfooterzoals ze bedoeld zijn. Als een pagina meer dan éénnavheeft, geef dan elke een label. - Skiplink: Hiermee kunnen toetsenbordgebruikers de herhaalde navigatie overslaan, wat helpt om te voldoen aan WCAG-succescriterium 2.4.1. Maak hem zichtbaar bij focus.
- Koppen: Gebruik één
h1voor de kop en houd de niveaus op volgorde. Eenh4direct na eenh2is het soort sprong dat u moet vermijden. Kies een kop op zijn plaats in de structuur, nooit op zijn grootte. - Lijsten en tabellen: Gebruik echte
ul-,ol- entable-elementen, zodat software hun structuur kan lezen (succescriterium 1.3.1).
Taal
Stel lang in op het html-element in elke locale (succescriterium 3.1.1). Zonder dat kan een schermlezer uw artikel met de verkeerde stem voorlezen. Markeer ook passages in een andere taal (succescriterium 3.1.2).
<p>The minister called it <span lang="fr">une erreur historique</span>.</p>
Afbeeldingen
- Schrijf
alt-tekst die de lezer geeft wat de afbeelding aan het verhaal toevoegt. - Gebruik
alt=""voor louter decoratieve afbeeldingen. Laat het attribuut niet weg, want sommige schermlezers lezen dan de bestandsnaam voor. - Gebruik CSS-achtergronden voor zuivere decoratie waar dat kan.
- Gebruik
figureenfigcaptionvoor onderschriften en bronvermeldingen bij foto's.
Op elk scherm
De WCAG 2.2 AA-eisen die het meest tellen voor een nieuwssjabloon:
| Eis | Doel | Criterium |
|---|---|---|
| Tekstcontrast | 4,5:1, of 3:1 voor grote tekst | 1.4.3 |
| Tekst vergroten | Tot 200% zonder dat iets verloren gaat | 1.4.4 |
| Reflow | 320 CSS-pixels breed zonder zijwaarts scrollen | 1.4.10 |
| Focus zichtbaar | Een zichtbare toetsenbordfocusindicator | 2.4.7 |
| Focus niet bedekt | De focus is nooit geheel verborgen | 2.4.11 |
| Doelgrootte | Minimaal 24 bij 24 CSS-pixels | 2.5.8 |
Test op mobiel met VoiceOver of TalkBack en met de grootste tekstinstelling. Loop op desktop de pagina door met alleen de toetsen Tab, Enter en Escape.
Publiceer een toegankelijkheidsverklaring waarin staat waaraan u voldoet, waaraan nog niet en hoe u een probleem meldt.
De Europese toegankelijkheidswet
Richtlijn (EU) 2019/882 is van toepassing op genoemde diensten die na 28 juni 2025 aan consumenten worden geleverd. De lijst omvat e-commercediensten, e-boeken en diensten die toegang geven tot audiovisuele media. E-commercediensten zijn gedefinieerd als diensten die op afstand worden geleverd, via websites en diensten op mobiele apparaten, op verzoek van een consument om een overeenkomst te sluiten. Micro-ondernemingen die diensten leveren, zijn uitgezonderd.
De wet noemt nieuwssites als zodanig niet. Een site die online abonnementen verkoopt, of e-boeken of toegang tot video, kan er toch onder vallen, en nationale wetten voegen details toe. Laat uw eigen positie door een jurist beoordelen.
Gestructureerde gegevens voor artikelen
NewsArticle-markup helpt Google de pagina te begrijpen. Volgens de gids van Google zijn er geen verplichte eigenschappen, dus voeg toe wat van toepassing is.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "NewsArticle",
"headline": "Article headline",
"image": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
],
"datePublished": "2026-11-05T08:00:00+01:00",
"dateModified": "2026-11-05T09:20:00+01:00",
"author": [{
"@type": "Person",
"name": "Jane Doe",
"url": "https://example.com/authors/jane-doe"
}]
}
</script>
- Gebruik ISO 8601-datums met een tijdzone.
- Houd de datums in de markup gelijk aan de datums op de pagina en toon ze met een label zoals "Gepubliceerd" of "Laatst bijgewerkt".
- Lever afbeeldingen in 16x9, 4x3 en 1x1, elk van minimaal 50.000 pixels wanneer breedte met hoogte wordt vermenigvuldigd.
- Gebruik redactionele afbeeldingen, nooit uw logo.
- Houd de markup op mobiel en desktop gelijk.
Een nette RSS-feed
Uw feed is de eenvoudigste machineleesbare versie van uw site, en u bepaalt precies wat erin staat.
<item>
<title>Article headline</title>
<link>https://example.com/news/article-headline</link>
<guid isPermaLink="true">https://example.com/news/article-headline</guid>
<pubDate>Thu, 05 Nov 2026 07:00:00 GMT</pubDate>
<description>One or two sentences that describe the article.</description>
<category>Politics</category>
</item>
- Elk kanaal heeft
title,linkendescriptionnodig. - Geef elk item een stabiele
guiden gebruik waar mogelijk de permalink. - Schrijf
pubDatein het RFC 822-formaat dat hier staat. - Gebruik canonieke artikel-URL's.
- Houd
descriptionkort en laat betaalde tekst weg. - Voeg op elke pagina een ontdekkingslink toe aan de
head.
<link rel="alternate" type="application/rss+xml" title="Latest news" href="https://example.com/feed.xml">
Stuur ETag- of Last-Modified-headers en antwoord met 304 Not Modified wanneer de If-None-Match of If-Modified-Since van een feedreader laat zien dat er niets is veranderd. Zo blijven frequente ophaalverzoeken goedkoop voor uw server.
Checklist
- Voeg
langtoe aan hethtml-element in elke locale. - Voeg een skiplink en één
main-oriëntatiepunt toe aan elk sjabloon. - Geef elke
navenasideeen label. - Voer een controle van de koppenstructuur uit op uw artikelsjabloon.
- Controleer de
alt-tekst in uw cms en maak er een verplicht veld van voor redactionele afbeeldingen. - Controleer het contrast van links, onderschriften en bylines.
- Test met een toetsenbord en met VoiceOver of TalkBack.
- Publiceer een toegankelijkheidsverklaring met een contactadres.
- Vraag een jurist of de Europese toegankelijkheidswet voor uw diensten geldt.
- Voeg
NewsArticle-JSON-LD toe met datums die bij de pagina passen. - Valideer uw feed en controleer dat die
ETagofLast-Modifiedverstuurt.
Bronnen
- Page Regions, W3C WAI
- Headings, W3C WAI
- Decorative Images, W3C WAI
- F65: Failure of Success Criterion 1.1.1 due to omitting the alt attribute, W3C WAI
- Web Content Accessibility Guidelines (WCAG) 2.2, W3C
- Directive (EU) 2019/882 on the accessibility requirements for products and services, Official Journal of the EU, Publications Office
- Learn About Article Schema Markup, Google Search Central
- Add a Byline Date to Google Search Results, Google Search Central
- RSS 2.0 specification, RSS Advisory Board
- RSS autodiscovery, RSS Advisory Board
- RFC 9110: HTTP Semantics, IETF