Skip to content
Mera News

Publisher guide, chapter 6

Data for screen readers and machines

Last reviewed November 2026

A screen reader, a search engine and a feed reader all depend on how your site is structured. Clear HTML, structured data and a clean feed give each of them what it needs.

Start with the HTML

These elements give a page its landmarks, so a screen reader user can jump straight to the article.

<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: Use header, nav, main, aside and footer as they were meant. When a page has more than one nav, label each one.
  • Skip link: It lets keyboard users pass the repeated navigation, which helps meet WCAG success criterion 2.4.1. Make it visible on focus.
  • Headings: Use one h1 for the headline, and keep the ranks in order. An h4 directly after an h2 is the kind of skip to avoid. Choose a heading by its place in the outline, never by its size.
  • Lists and tables: Use real ul, ol and table elements, so their structure can be read by software (success criterion 1.3.1).

Language

Set lang on the html element in every locale (success criterion 3.1.1). Without it, a screen reader may read your article in the wrong voice. Mark passages in another language too (success criterion 3.1.2).

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

Images

  • Write alt text that gives the reader what the picture adds to the story.
  • Use alt="" for purely decorative images. Don't leave the attribute out, because some screen readers will read the file name aloud.
  • Use CSS backgrounds for pure decoration where you can.
  • Use figure and figcaption for photo captions and credits.

On each screen

The WCAG 2.2 AA requirements that matter most for a news template:

RequirementTargetCriterion
Text contrast4.5:1, or 3:1 for large text1.4.3
Text resizeUp to 200% with nothing lost1.4.4
Reflow320 CSS pixels wide with no sideways scrolling1.4.10
Focus visibleA visible keyboard focus indicator2.4.7
Focus not obscuredFocus is never entirely hidden2.4.11
Target sizeAt least 24 by 24 CSS pixels2.5.8

On mobile, test with VoiceOver or TalkBack, and with the largest text setting. On desktop, walk through the page using only the Tab, Enter and Escape keys.

Publish an accessibility statement that says what you meet, what you don't yet, and how to report a problem.

The European Accessibility Act

Directive (EU) 2019/882 applies to listed services provided to consumers after 28 June 2025. The list includes e-commerce services, e-books and services that provide access to audiovisual media. E-commerce services are defined as services provided at a distance, through websites and mobile device-based services, at a consumer's request to conclude a contract. Microenterprises providing services are exempt.

The Act doesn't list news sites as such. A site that sells subscriptions online, or sells e-books or video access, may still fall within it, and national laws add detail. Check your own position with counsel.

Structured data for articles

NewsArticle markup helps Google understand the page. Google's guide says there are no required properties, so add those that apply.

<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>
  • Use ISO 8601 dates with a time zone.
  • Keep the dates in the markup the same as the dates on the page, and show them with a label such as "Published" or "Last updated".
  • Provide images in 16x9, 4x3 and 1x1, each at least 50,000 pixels when width is multiplied by height.
  • Use editorial images, never your logo.
  • Keep the markup the same on mobile and desktop.

A clean RSS feed

Your feed is the simplest machine-readable version of your site, and you decide exactly what it carries.

<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>
  • Every channel needs title, link and description.
  • Give each item a stable guid, and use the permalink where you can.
  • Write pubDate in the RFC 822 format shown here.
  • Use canonical article URLs.
  • Keep description short, and leave paid text out.
  • Add a discovery link to every page's head.
<link rel="alternate" type="application/rss+xml" title="Latest news" href="https://example.com/feed.xml">

Send ETag or Last-Modified headers, and answer 304 Not Modified when a feed reader's If-None-Match or If-Modified-Since shows nothing has changed. This keeps frequent fetches cheap for your server.

Checklist

  • Add lang to the html element on every locale.
  • Add a skip link and one main landmark to each template.
  • Label each nav and aside.
  • Run a heading outline check on your article template.
  • Audit alt text in your CMS, and make it a required field for editorial images.
  • Check contrast on links, captions and bylines.
  • Test with a keyboard, and with VoiceOver or TalkBack.
  • Publish an accessibility statement with a contact address.
  • Ask counsel whether the European Accessibility Act applies to your services.
  • Add NewsArticle JSON-LD with dates that match the page.
  • Validate your feed, and confirm it sends ETag or Last-Modified.

Sources