スクリーンリーダーと機械向けのデータ

最終確認：2026年11月

スクリーンリーダー、検索エンジン、フィードリーダーは、いずれも、サイトの構造に頼っています。分かりやすい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 を、本来の使い方で使います。1つのページに nav が複数ある場合は、それぞれにラベルを付けます。
• スキップリンク： キーボードの利用者が、繰り返されるナビゲーションを飛ばせるようにするもので、WCAGの達成基準2.4.1を満たすのに役立ちます。フォーカスされたときに、見えるようにします。
• 見出し： 見出しの h1 は1つにして、見出しのレベルは順番どおりに保ちます。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の要件は、次のとおりです。

モバイルでは、VoiceOverかTalkBackで、そして最大の文字サイズの設定でテストします。デスクトップでは、Tab、Enter、Escapeのキーだけを使って、ページを通して操作してみます。

アクセシビリティ声明を公開し、満たしていること、まだ満たしていないこと、問題の報告方法を書いてください。

欧州アクセシビリティ法

指令（EU）2019/882は、2025年6月28日以降に消費者へ提供される、リストにあるサービスに適用されます。リストには、Eコマースサービス、電子書籍、視聴覚メディアへのアクセスを提供するサービスが含まれます。Eコマースサービスとは、消費者の求めに応じて、契約を結ぶために、ウェブサイトとモバイル端末ベースのサービスを通じて、遠隔で提供されるサービスと定義されています。サービスを提供する零細企業は、適用が免除されます。

この法は、ニュースサイトそのものをリストに挙げていません。購読をオンラインで販売するサイトや、電子書籍や動画へのアクセスを販売するサイトは、それでも対象に入る可能性があり、各国の法律が詳細を加えています。ご自身の立場は、弁護士に確認してください。

記事の構造化データ

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 を付け、可能な場合はパーマリンクを使います。
• pubDate は、ここに示したRFC 822の形式で書きます。
• 正規の記事URLを使います。
• description は短くし、有料のテキストは含めません。
• すべてのページの head に、フィードを見つけるためのリンクを追加します。

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

ETag か Last-Modified のヘッダーを送り、フィードリーダーの If-None-Match か If-Modified-Since から変更がないと分かったときは、304 Not Modified を返します。これで、頻繁な取得も、サーバーにとって軽く済みます。

チェックリスト

• すべてのロケールで、html 要素に lang を追加する。
• 各テンプレートに、スキップリンクと、1つの main ランドマークを追加する。
• 各 nav と aside にラベルを付ける。
• 記事テンプレートで、見出しのアウトラインを確認する。
• CMSの alt テキストを点検し、編集用の画像では必須項目にする。
• リンク、キャプション、署名のコントラストを確認する。
• キーボードと、VoiceOverかTalkBackでテストする。
• 連絡先を載せたアクセシビリティ声明を公開する。
• 欧州アクセシビリティ法が自社のサービスに適用されるか、弁護士に確認する。
• ページと一致する日付を付けた、NewsArticle のJSON-LDを追加する。
• フィードを検証し、ETag か Last-Modified を送っていることを確認する。

出典

• 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、Official Journal of the EU、Publications Office
• 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