Naar de inhoud
Mera News

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, aside en footer zoals ze bedoeld zijn. Als een pagina meer dan één nav heeft, 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 h1 voor de kop en houd de niveaus op volgorde. Een h4 direct na een h2 is 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- en table-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 figure en figcaption voor onderschriften en bronvermeldingen bij foto's.

Op elk scherm

De WCAG 2.2 AA-eisen die het meest tellen voor een nieuwssjabloon:

EisDoelCriterium
Tekstcontrast4,5:1, of 3:1 voor grote tekst1.4.3
Tekst vergrotenTot 200% zonder dat iets verloren gaat1.4.4
Reflow320 CSS-pixels breed zonder zijwaarts scrollen1.4.10
Focus zichtbaarEen zichtbare toetsenbordfocusindicator2.4.7
Focus niet bedektDe focus is nooit geheel verborgen2.4.11
DoelgrootteMinimaal 24 bij 24 CSS-pixels2.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, link en description nodig.
  • Geef elk item een stabiele guid en gebruik waar mogelijk de permalink.
  • Schrijf pubDate in het RFC 822-formaat dat hier staat.
  • Gebruik canonieke artikel-URL's.
  • Houd description kort 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 lang toe aan het html-element in elke locale.
  • Voeg een skiplink en één main-oriëntatiepunt toe aan elk sjabloon.
  • Geef elke nav en aside een 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 ETag of Last-Modified verstuurt.

Bronnen