Daten für Screenreader und Maschinen

Zuletzt geprüft im November 2026

Ein Screenreader, eine Suchmaschine und ein Feedreader hängen alle davon ab, wie Ihre Website aufgebaut ist. Klares HTML, strukturierte Daten und ein sauberer Feed geben jedem von ihnen, was er braucht.

Mit dem HTML beginnen

Diese Elemente geben einer Seite ihre Landmarks, damit ein Nutzer eines Screenreaders direkt zum Artikel springen kann.

<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>

• Landmarks: Verwenden Sie header, nav, main, aside und footer so, wie sie gedacht sind. Wenn eine Seite mehr als ein nav hat, beschriften Sie jedes.
• Skip-Link: Er lässt Tastaturnutzer die wiederkehrende Navigation überspringen und hilft, das WCAG-Erfolgskriterium 2.4.1 zu erfüllen. Machen Sie ihn bei Fokus sichtbar.
• Überschriften: Verwenden Sie ein h1 für die Schlagzeile und halten Sie die Ebenen in Reihenfolge. Ein h4 direkt nach einem h2 ist die Art von Sprung, die Sie vermeiden sollten. Wählen Sie eine Überschrift nach ihrer Stelle in der Gliederung, nie nach ihrer Größe.
• Listen und Tabellen: Verwenden Sie echte ul-, ol- und table-Elemente, damit Software ihre Struktur lesen kann (Erfolgskriterium 1.3.1).

Sprache

Setzen Sie lang auf dem html-Element in jeder Sprachversion (Erfolgskriterium 3.1.1). Ohne es liest ein Screenreader Ihren Artikel möglicherweise mit der falschen Stimme vor. Kennzeichnen Sie auch Passagen in einer anderen Sprache (Erfolgskriterium 3.1.2).

<p>The minister called it <span lang="fr">une erreur historique</span>.</p>

Bilder

• Schreiben Sie alt-Text, der dem Leser gibt, was das Bild zur Geschichte beiträgt.
• Verwenden Sie alt="" für rein dekorative Bilder. Lassen Sie das Attribut nicht weg, denn manche Screenreader lesen dann den Dateinamen vor.
• Verwenden Sie für reine Dekoration nach Möglichkeit CSS-Hintergründe.
• Verwenden Sie figure und figcaption für Bildunterschriften und Bildnachweise.

Auf dem jeweiligen Bildschirm

Die WCAG-2.2-AA-Anforderungen, die für eine Nachrichtenvorlage am wichtigsten sind:

Testen Sie auf Mobilgeräten mit VoiceOver oder TalkBack und mit der größten Texteinstellung. Gehen Sie auf dem Desktop die Seite nur mit den Tasten Tab, Eingabe und Escape durch.

Veröffentlichen Sie eine Erklärung zur Barrierefreiheit, die sagt, was Sie erfüllen, was noch nicht und wie man ein Problem meldet.

Der European Accessibility Act

Die Richtlinie (EU) 2019/882 gilt für bestimmte Dienstleistungen, die Verbrauchern nach dem 28. Juni 2025 erbracht werden. Zu der Liste gehören E-Commerce-Dienste, E-Books und Dienste, die Zugang zu audiovisuellen Medien bieten. E-Commerce-Dienste sind als Dienste definiert, die im Fernabsatz über Websites und auf Mobilgeräten basierende Dienste auf Anfrage eines Verbrauchers zum Abschluss eines Vertrags erbracht werden. Kleinstunternehmen, die Dienstleistungen erbringen, sind ausgenommen.

Der Act nennt Nachrichtenseiten als solche nicht. Eine Website, die online Abonnements verkauft oder E-Books oder Videozugang anbietet, kann dennoch darunter fallen, und nationale Gesetze ergänzen Einzelheiten. Lassen Sie Ihre eigene Lage rechtlich prüfen.

Strukturierte Daten für Artikel

NewsArticle-Auszeichnung hilft Google, die Seite zu verstehen. Googles Leitfaden sagt, es gebe keine Pflichtangaben, fügen Sie also die hinzu, die zutreffen.

<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>

• Verwenden Sie ISO-8601-Datumsangaben mit Zeitzone.
• Halten Sie die Daten in der Auszeichnung identisch mit den Daten auf der Seite und zeigen Sie sie mit einer Beschriftung wie „Veröffentlicht“ oder „Zuletzt aktualisiert“.
• Liefern Sie Bilder in 16x9, 4x3 und 1x1, jeweils mit mindestens 50.000 Pixeln, wenn Breite mal Höhe gerechnet wird.
• Verwenden Sie redaktionelle Bilder, nie Ihr Logo.
• Halten Sie die Auszeichnung auf Mobilgeräten und Desktop gleich.

Ein sauberer RSS-Feed

Ihr Feed ist die einfachste maschinenlesbare Version Ihrer Website, und Sie entscheiden genau, was er enthält.

<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>

• Jeder Kanal braucht title, link und description.
• Geben Sie jedem Eintrag eine stabile guid und verwenden Sie nach Möglichkeit den Permalink.
• Schreiben Sie pubDate im hier gezeigten RFC-822-Format.
• Verwenden Sie kanonische Artikel-URLs.
• Halten Sie description kurz und lassen Sie bezahlten Text weg.
• Fügen Sie im head jeder Seite einen Discovery-Link hinzu.

<link rel="alternate" type="application/rss+xml" title="Latest news" href="https://example.com/feed.xml">

Senden Sie ETag- oder Last-Modified-Header und antworten Sie mit 304 Not Modified, wenn If-None-Match oder If-Modified-Since eines Feedreaders zeigt, dass sich nichts geändert hat. So bleiben häufige Abrufe für Ihren Server günstig.

Checkliste

• Fügen Sie lang zum html-Element in jeder Sprachversion hinzu.
• Fügen Sie jeder Vorlage einen Skip-Link und ein main-Landmark hinzu.
• Beschriften Sie jedes nav und aside.
• Prüfen Sie die Überschriftengliederung Ihrer Artikelvorlage.
• Prüfen Sie den alt-Text in Ihrem CMS und machen Sie ihn bei redaktionellen Bildern zum Pflichtfeld.
• Prüfen Sie den Kontrast bei Links, Bildunterschriften und Autorenzeilen.
• Testen Sie mit einer Tastatur und mit VoiceOver oder TalkBack.
• Veröffentlichen Sie eine Erklärung zur Barrierefreiheit mit einer Kontaktadresse.
• Lassen Sie rechtlich klären, ob der European Accessibility Act für Ihre Dienste gilt.
• Fügen Sie NewsArticle-JSON-LD mit Daten hinzu, die zur Seite passen.
• Validieren Sie Ihren Feed und bestätigen Sie, dass er ETag oder Last-Modified sendet.

Quellen

• 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, Amtsblatt der EU, Amt für Veröffentlichungen
• 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