跳到主要内容
Mera News

出版商指南，第 6 章

面向读屏软件和机器的数据

最近审查：2026 年 11 月

读屏软件、搜索引擎和 RSS 阅读器，都取决于你网站的结构。清晰的 HTML、结构化数据和干净的源，能给它们每一方所需要的东西。

从 HTML 开始

这些元素为页面提供地标，让读屏软件用户可以直接跳到文章。

<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>
  • 地标： 按其本来的用途使用 header、nav、main、aside 和 footer。当页面有多个 nav 时，为每一个加上标签。
  • 跳转链接： 它让键盘用户可以跳过重复的导航，有助于满足 WCAG 成功标准 2.4.1。让它在获得焦点时可见。
  • 标题： 标题只用一个 h1，并保持层级的顺序。在 h2 之后直接用 h4，就是应避免的那种跳级。选择标题要看它在大纲中的位置，而不是看它的大小。
  • 列表和表格： 使用真正的 ul、ol 和 table 元素，这样软件才能读懂它们的结构（成功标准 1.3.1）。

语言

在每个语言版本中，都为 html 元素设置 lang（成功标准 3.1.1）。没有它，读屏软件可能会用错误的声音朗读你的文章。也要标出使用其他语言的段落（成功标准 3.1.2）。

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

图片

  • 编写 alt 文本，告诉读者这张图为报道增添了什么。
  • 对纯装饰性的图片使用 alt=""。不要省略这个属性，因为有些读屏软件会把文件名读出来。
  • 能用 CSS 背景做纯装饰的地方就用 CSS 背景。
  • 照片说明和署名使用 figure 和 figcaption。

在每种屏幕上

对新闻模板最重要的 WCAG 2.2 AA 要求：

要求目标标准
文字对比度4.5:1，大号文字为 3:11.4.3
文字缩放放大到 200% 而不丢失内容1.4.4
重排320 CSS 像素宽，无横向滚动1.4.10
焦点可见可见的键盘焦点指示2.4.7
焦点不被遮挡焦点绝不会被完全隐藏2.4.11
目标尺寸至少 24 乘 24 CSS 像素2.5.8

在手机上，用 VoiceOver 或 TalkBack，并使用最大的文字设置来测试。在桌面端，只用 Tab、Enter 和 Esc 键走一遍页面。

发布一份无障碍声明，说明你已达到什么、尚未达到什么，以及如何报告问题。

《欧洲无障碍法案》

指令（EU）2019/882 适用于 2025 年 6 月 28 日之后向消费者提供的所列服务。这份清单包括电子商务服务、电子书，以及提供视听媒体访问的服务。电子商务服务被定义为通过网站和基于移动设备的服务，应消费者要求远程提供、以订立合同为目的的服务。提供服务的微型企业可以豁免。

该法案并未把新闻网站本身列入清单。在线销售订阅，或销售电子书或视频访问权限的网站，仍可能属于其适用范围，各国法律还会补充细节。请与法律顾问一起确认你自己的情况。

文章的结构化数据

NewsArticle 标记有助于 Google 理解页面。Google 的指南说没有必填属性，所以请添加适用的属性。

<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>
  • 使用带时区的 ISO 8601 日期。
  • 让标记中的日期与页面上的日期保持一致，并用“发布于”或“最后更新”之类的标签显示它们。
  • 提供 16x9、4x3 和 1x1 三种比例的图片，每张的宽乘高至少为 50,000 像素。
  • 使用新闻图片，绝不要用你的标志。
  • 让移动端和桌面端的标记保持一致。

干净的 RSS 源

你的源是网站最简单的机器可读版本，其中包含什么，由你完全决定。

<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>
  • 每个频道都需要 title、link 和 description。
  • 为每个条目提供稳定的 guid，能用永久链接的地方就用永久链接。
  • 按这里所示的 RFC 822 格式编写 pubDate。
  • 使用规范的文章 URL。
  • 保持 description 简短，不要放入付费文本。
  • 在每个页面的 head 中添加发现链接。
<link rel="alternate" type="application/rss+xml" title="Latest news" href="https://example.com/feed.xml">

发送 ETag 或 Last-Modified 头，当 RSS 阅读器的 If-None-Match 或 If-Modified-Since 表明内容没有变化时，回复 304 Not Modified。这能让频繁的抓取对你的服务器来说开销很小。

检查清单

  • 在每个语言版本的 html 元素上添加 lang。
  • 为每个模板添加跳转链接和一个 main 地标。
  • 为每个 nav 和 aside 加上标签。
  • 对你的文章模板做一次标题大纲检查。
  • 在你的 CMS 中审核 alt 文本，并把它设为新闻图片的必填字段。
  • 检查链接、图片说明和署名的对比度。
  • 用键盘测试，并用 VoiceOver 或 TalkBack 测试。
  • 发布一份附有联系地址的无障碍声明。
  • 询问法律顾问，《欧洲无障碍法案》是否适用于你的服务。
  • 添加 NewsArticle JSON-LD，并让其中的日期与页面一致。
  • 验证你的源，并确认它会发送 ETag 或 Last-Modified。

来源