ARIA: feed ロール

フィード (feed) は動的にスクロール可能な記事 (article) のリスト (list) で、ユーザーがスクロールすると記事がリストのどちらかの端から追加または削除されます。フィード (feed) により、スクリーンリーダーは閲覧モードの読み取りカーソルを使用して、リッチコンテンツのストリームを読み込みながらスクロールすることを可能にし、ユーザーが読むにつれてコンテンツをさらにロードすることで無限にスクロールし続けることができます。

<section role="feed" aria-busy="false">
  ...
  <article aria-posinset="427" aria-setsize="-1">...</article>
  <article aria-posinset="428" aria-setsize="-1">...</article>
  <article aria-posinset="429" aria-setsize="-1">...</article>
  ...
</section>

説明

フィードは、スクロール可能な記事 (article) のリスト (list) のためのページ構造であり、スクロールすることで、リストの先頭または末尾に記事が追加される場合があります。このリストは、ウェブページと支援技術との間の相互運用契約を確立するもので、支援技術のユーザーが記事を読み、記事を前後にジャンプし、読み取りモードで新しい記事を確実にロードできるように、スクロールのインタラクションを管理します。例としては、RSS フィード、ニュースフィード、Facebook (フェイスブック) 、Instagram (インスタグラム) 、Twitter (ツイッター) などのソーシャルメディアフィード、さらには電子商取引ページ上の関連商品のリストなどがあります。これらのストリームは有限か無限であり、ユーザーがスクロールするにつれてコンテンツをさらにロードします。フィードパターンを実装することで、スクリーンリーダーは読み取りモードでフィードコンテンツを確実に読み取り、ロードをトリガーすることができます。

フィード (feed) は、コンテナ要素であり、その子は <article> であるか、記事 (article) ロールを持ちます。フィード内の各記事は、tabindex が 0 または -1 でフォーカス可能であるべきです。記事またはその子孫要素にフォーカスが移ったときに、記事をスクロールして表示するべきです。記事の追加がブラウザーのメインスレッドを占有する場合は、フィード自体に aria-busy="true" を設定し、処理が終了したら必ず false に戻すようにしてください。そうしないと、ユーザーに更新が表示されない場合があります。

優れたユーザーエクスペリエンスを確保するため、フィード (feed) の途中で記事を挿入または削除しないようにし、ユーザーがフィードの末端に到達する前に新しい記事をロードし、キーボードユーザーがフィード内をナビゲートできるように記事間でフォーカスを移動するためのキーボードコマンドを提供します。下記のキーボードインタラクションを参照してください。

記事の数がわかっている場合は、記事自体に aria-setsize を設定してください。ただし、総数が非常に大きい場合、不明確な場合、または頻繁に変わる場合は、aria-setsize="-1" を設定してフィードのサイズがわからないことを示します。

フィードパターンのもう 1 つの特徴は、斜め読みです。フィード内の記事には、aria-label によるアクセス可能な名前と aria-describeby による説明の両方を含めることで、記事をナビゲートするときに、ラベルの後にどの要素を話すべきかをスクリーンリーダーに提案することができます。タイトルと主要コンテンツを提供する記事内の要素を特定することで、支援技術は、ユーザが記事から記事へとジャンプし、読みたい記事を効率的に見分けることを可能にする機能を提供できます。

フィードパターンは、ウェブページと支援技術の間に次の相互運用性に関する合意を確立することによって、信頼できる支援技術の読み取りモードでのインタラクションを可能にします。

フィードのコンテキストでは、ウェブページのコードは次の責任を負います。
- どの記事に DOM フォーカスが含まれているかに基づいて、コンテンツを適切に視覚的にスクロールします。
- どの記事に DOM フォーカスが含まれているかに基づいて、フィード記事をロードまたは削除します。
フィードのコンテキストでは、読み取りモードを持つ支援技術は次の責任を負います。
- 記事要素またはその子孫の 1 つに DOM フォーカスがあることを保証することで、どの記事に読み取りカーソルがあるかを示します。
- DOM フォーカスを次の記事および前の記事に移動するための読み取りモードキーを提供します。
- 読み取りカーソルと DOM フォーカスをフィードの終わりより後ろとフィードの始まりより前に移動するための読み取りモードキーを提供します。

キーボードインタラクション

フォーカスがフィード内にある場合は、次のような、または同様のインターフェイスをサポートすることをお勧めします。

Page Down : 次の記事にフォーカスを移動します。
Page Up : 前の記事にフォーカスを移動します。
Control + End : フィードの後方で最初にフォーカス可能な要素にフォーカスを移動します。
Control + Home : フィードの前方で最初にフォーカス可能な要素にフォーカスを移動します。

ブログ投稿のフィード内のコメントフィードなど、フィードがフィード内にネストしている場合、慣例では、Tab キーでネストしているフィードにタブ移動で入り、「外側の」記事からその記事内にネストしているフィードの最初の項目にナビゲートするための Alt + Page Down などの別のキーを提供します。ネストしているフィードとメインフィードの間をナビゲートするには、Control + End で内側のフィードから外側のフィードの次の記事にフォーカスを移動します。

Specification
Accessible Rich Internet Applications (WAI-ARIA) # feed

スクリーンリーダーのサポート

Coming soon

ARIA: feed ロール

説明

キーボードインタラクション

関連する WAI-ARIA のロール、ステート、プロパティ

必要な JavaScript 機能

例

仕様

スクリーンリーダーのサポート

関連情報