ARIA: feed ロール

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

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

優れたユーザーエクスペリエンスを確保するため、フィードの途中で記事を挿入または削除しないようにし、ユーザーがフィードの終わりに達する前に新しい記事をロードし、記事間でフォーカスを移動するためのキーボードコマンドを提供して、キーボードユーザーがフィード内をナビゲートできるようにします。 下記のキーボードインタラクションを参照してください。
記事の数がわかっている場合は、記事自体に aria-setsize を設定してください。 ただし、総数が非常に大きい場合、不明確な場合、または頻繁に変わる場合は、aria-setsize="-1" を設定してフィードのサイズがわからないことを示します。

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

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

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