\{{ariaref}}
フィード（feed）は動的にスクロール可能な記事（article）のリスト（list）で、ユーザーがスクロールすると記事がリストの両端から追加または削除されます。 feed を使用すると、スクリーンリーダーはブラウズモードの読み取りカーソルを使用して、ユーザーが読むにつれてより多くのコンテンツをロードすることで無限にスクロールし続けることができるリッチコンテンツのストリームを読み、スクロールすることができます。
<section role="feed"aria-busy="false"> ... <tweet role="article" aria-posinset="427"aria-setsize="-1">...</tweet> <tweet role="article" aria-posinset="428"aria-setsize="-1">...</tweet> <tweet role="article" aria-posinset="429"aria-setsize="-1">...</tweet> ... </section>
フィード（feed）は、スクロール可能な記事（article）のリスト（list）のためのページ構造であり、スクロールすることで、リストの先頭または末尾に記事が追加され、ウェブページと、スクロールインタラクションを制御する支援技術との間の相互運用契約が確立され、ユーザーが記事を読み、記事を前後にジャンプし、読み取りモードで新しい記事を確実にロードするようにします。 例としては、RSS フィード、ニュースフィード、Facebook（フェイスブック）、Instagram（インスタグラム）、Twitter（ツイッター）などのソーシャルメディアフィード、さらには電子商取引ページ上の関連商品のリストなどがあります。 これらのストリームは有限か無限であり、ユーザーがスクロールするにつれてより多くのコンテンツをロードします。 フィードパターンを実装することで、スクリーンリーダーは読み取りモードを維持しながら、確実に読み取り、フィードコンテンツのロードをトリガーすることができます。
feed は、コンテナ要素であり、その子は {{htmlelement("article")}} であるか、article ロールを持ちます。 フィード内の各記事は、tabindex が 0 または -1 でフォーカス可能であるべきです。 記事またはその子孫要素にフォーカスが移ったときに、記事をスクロールして表示するべきです。 記事の追加がメインのブラウザースレッドを占有している場合は、フィード自体に aria-busy="true" を設定し、処理が終了したりユーザーに更新が表示されない場合は false に設定し直してください。
優れたユーザーエクスペリエンスを確保するため、フィードの途中で記事を挿入または削除しないようにし、ユーザーがフィードの終わりに達する前に新しい記事をロードし、記事間でフォーカスを移動するためのキーボードコマンドを提供して、キーボードユーザーがフィード内をナビゲートできるようにします。 下記のキーボードインタラクションを参照してください。
記事の数がわかっている場合は、記事自体に aria-setsize を設定してください。 ただし、総数が非常に大きい場合、不明確な場合、または頻繁に変わる場合は、aria-setsize="-1" を設定してフィードのサイズがわからないことを示します。
フィードパターンのもう1つの特徴は、斜め読みです。 フィード内の記事には、aria-label によるアクセス可能な名前と aria-describeby による説明の両方を含めることで、記事をナビゲートするときに、ラベルの後にどの要素を話すべきかをスクリーンリーダーに提案することができます。 タイトルと主要コンテンツを提供する記事内の要素を識別することによって、支援技術は、ユーザが記事から記事へとジャンプし、どの記事がより注目に値するかを効率的に見分けることを可能にする機能を提供できます。
フィードパターンは、ウェブページと支援技術の間に次の相互運用性に関する合意を確立することによって、信頼できる支援技術の読み取りモードでのインタラクションを可能にします。
フォーカスがフィード内にある場合は、次のような、または同様のインターフェースをサポートすることをお勧めします。
ブログ投稿のフィード内のコメントフィードなど、フィード内にネストしたフィードがある場合の慣例は、Tab キーでネストしたフィードにタブで移動し、「外側の」記事からその記事内にネストしたフィードの最初の項目に移動するための Alt + Page Down などの別のキーを提供することです。 メインフィードとネストしたフィードの間をナビゲートするには、Control + End で内側のフィードから外側のフィードの次の記事にフォーカスを移動します。
feed 要素には aria-label で指定されたラベルがあります。 もしそうなら、aria-labelledby を見てください。feed 要素はタイトルを含む要素を参照する aria-labelledby を持ちます。 そうでない場合は、aria-label を追加してください。aria-busy="true" を設定します。 操作が完了するか、変更が見えなくなる可能性がある場合は、必ず false にリセットしてください。article ロールを持つ要素に含めるべきです。 各記事（article）は、その記事のタイトルまたは識別ラベルとして役立つその他の子を参照する aria-labelledby を持つべきです。 各記事は、好ましくは、その記事の主要なコンテンツとして役立つ記事内の１つまたは複数の要素を参照する aria-describedby を持つべきです。 各記事要素は、フィード内の位置を表す値に設定された aria-posinset と、ロードされた記事の総数またはフィード内の総数を表す値のどちらかに設定された aria-setsize を持ちます。 それは、どちらの値がユーザーにとってより役立つかによって異なります。 フィード内の総数がわからない場合は、aria-setsize="-1" を設定してください。
なし（任意の属性が必要とする場合を除く。 例えば、必要に応じて更新操作中に aria-busy を true に設定し、完了したら false に設定します。）
フィードパターンの実装例（英語）
| 仕様 | 状態 |
|---|---|
| {{SpecName("ARIA","#feed","feed")}} | {{Spec2('ARIA')}} |
Coming soon