跳至內容
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 背景。
  • 照片說明與來源標示請使用 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 x 24 CSS 像素2.5.8

在行動裝置上，請用 VoiceOver 或 TalkBack，並搭配最大的文字設定來測試。在桌機上，請只用 Tab、Enter 與 Escape 鍵走過整個頁面。

請發布一份無障礙聲明，說明您已符合什麼、尚未符合什麼，以及如何回報問題。

歐洲無障礙法案

指令 (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。
  • 使用正規的文章網址。
  • 讓 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。

來源