フィード

フィード（feed）とは？

フィードは、記事や投稿を縦に並べ、下までスクロールすると自動で続きが読み込まれるタイプの一覧 UI です。 SNS のタイムライン、ニュース一覧、ブログの記事ストリームなどでよく使われます。

普通のリストと違うのは、件数が動的に増えていくこと。 だからこそ「いま何件中の何番目を読んでいるのか」「いま読み込み中なのか」を、 目で見えない人にも伝える工夫が必要になります。

なぜアクセシビリティが大事なの？

無限スクロールは、作り方を間違えると次の人たちが取り残されます。

• スクリーンリーダーを使う人。記事が <div> の羅列だと 「これは記事の一覧だ」「全○件の△番目だ」が伝わらず、現在地を見失います。 読み込み中かどうかも分からず、無音の待ち時間に不安になります。
• キーボードだけで操作する人。記事内のリンクを Tab で1つずつ辿るのは大変です。記事単位でジャンプできないと、長い一覧を読み進められません。

解決策は、コンテナを role="feed"、各記事を role="article" にして、aria-posinset / aria-setsize で位置と総数を、aria-busy で読み込み中を伝えること。 そして PageDown / PageUp で記事間を移動できるようにします。

ライブデモ（推奨実装）

下のフィードは APG に沿った実装です。記事にフォーカスを当て、マウスを使わずキーボードだけで記事を読み進めてみてください。

キーボード操作

必要な WAI-ARIA / ロール

実装：推奨パターン（Good）

マークアップ:

<div role="feed" aria-busy="false" aria-label="新着記事">
  <article
    role="article"
    tabindex="0"
    aria-labelledby="post-1-title"
    aria-posinset="1"
    aria-setsize="3">
    <h3 id="post-1-title">朝の散歩を習慣にした話</h3>
    <p>毎朝20分歩くだけで、頭がすっきりして……</p>
  </article>

  <article
    role="article"
    tabindex="0"
    aria-labelledby="post-2-title"
    aria-posinset="2"
    aria-setsize="3">
    <h3 id="post-2-title">小さなキッチンの収納術</h3>
    <p>限られたスペースでも、工夫しだいで……</p>
  </article>

  <!-- …以下、記事が続く -->
</div>

<button type="button" id="load-more">もっと読み込む</button>

記事間の移動と追加読み込み（位置・件数・aria-busy・フォーカスの管理がすべて）:

const feed = document.getElementById('feed-region');
const loadBtn = document.getElementById('feed-load');

// 記事と記事の間をキーボードで移動する（PageDown / PageUp）
function getArticles() {
  return Array.from(feed.querySelectorAll('[role="article"]'));
}

feed.addEventListener('keydown', (e) => {
  const articles = getArticles();
  const current = document.activeElement?.closest('[role="article"]');
  const index = articles.indexOf(current);
  if (index === -1) return;

  let target = null;
  if (e.key === 'PageDown') target = articles[index + 1];
  else if (e.key === 'PageUp') target = articles[index - 1];
  else if (e.key === 'Home') target = articles[0];
  else if (e.key === 'End') target = articles[articles.length - 1];

  if (target) {
    e.preventDefault();      // 既定のスクロールを止める
    target.focus();
  }
});

// 追加読み込み：件数(setsize)・位置(posinset)を更新し、
// 読み込み中は aria-busy="true"。フォーカスは最初の新着記事へ移す。
loadBtn.addEventListener('click', () => {
  feed.setAttribute('aria-busy', 'true');   // ← 読み込み中を支援技術へ通知
  setTimeout(() => {
    const total = getArticles().length + 2;
    // …新しい <article> を生成し posinset / setsize を付けて append…
    getArticles().forEach((a, i) => {
      a.setAttribute('aria-posinset', String(i + 1));
      a.setAttribute('aria-setsize', String(total));
    });
    feed.setAttribute('aria-busy', 'false');
    firstNewArticle.focus();   // ← フォーカスを失わせない
  }, 600);
});

アンチパターン（Bad）

下は <div> をただ積み重ねただけの「見た目だけ同じ」フィードです。マウスではスクロールできますが、記事間ジャンプはできず、 支援技術には一覧の構造も現在地も読み込み状態も伝わりません。

<!-- ❌ アンチパターン -->
<!-- ただの div の積み重ね。feed/article のロールも位置・件数も無い -->
<div class="list">
  <div class="card">
    <h3>朝の散歩を習慣にした話</h3>
    <p>毎朝20分歩くだけで……</p>
  </div>
  <div class="card">
    <h3>小さなキッチンの収納術</h3>
    <p>限られたスペースでも……</p>
  </div>
</div>

<div class="more" onclick="loadMore()">もっと読み込む</div>

実装チェックリスト

• コンテナが role="feed" で、aria-label 等で名前が付いている
• 各記事が role="article" + tabindex="0" でフォーカスできる
• 各記事に aria-labelledby で見出しが関連付いている
• aria-posinset / aria-setsize が現在の位置・総数と常に一致している
• 追加読み込み中は aria-busy="true"、完了後に false へ戻る
• PageDown / PageUp で記事間を移動できる（既定スクロールは preventDefault）
• 追加読み込み後もフォーカスを失わない（新着の先頭などへ移す）
• キーボードだけで読み進められ、フォーカスが見える（フォーカスリングを消していない）

原文（英語）:Feed Pattern — W3C APG（新しいタブで開きます）