ARIA: 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 は、コンテナ要素であり、その子は <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 フォーカスをフィードの終わりを超えてフィードの開始前に移動するための読み取りモードキーを提供します。

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

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

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

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

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

aria-label

フィードに目に見えるタイトルがない場合、feed 要素には aria-label で指定されたラベルがあります。 もしそうなら、aria-labelledby を見てください。

aria-labelledby

フィードに目に見えるタイトルがある場合、feed 要素はタイトルを含む要素を参照する aria-labelledby を持ちます。 そうでない場合は、aria-label を追加してください。

aria-busy

記事をフィードに追加または削除しているときなど、忙しい場合は、更新操作中に aria-busy="true" を設定します。 操作が完了するか、変更が見えなくなる可能性がある場合は、必ず false にリセットしてください。

article

フィード内のコンテンツの各セクションは、<article> または article ロールを持つ要素に含めるべきです。 各記事（article）は、その記事のタイトルまたは識別ラベルとして役立つその他の子を参照する aria-labelledby を持つべきです。 各記事は、好ましくは、その記事の主要なコンテンツとして役立つ記事内の１つまたは複数の要素を参照する aria-describedby を持つべきです。 各記事要素は、フィード内の位置を表す値に設定された aria-posinset と、ロードされた記事の総数またはフィード内の総数を表す値のどちらかに設定された aria-setsize を持ちます。 それは、どちらの値がユーザーにとってより役立つかによって異なります。 フィード内の総数がわからない場合は、aria-setsize="-1" を設定してください。