🕌

Feed, Article role - スクロールできる一覧のアレ

2023/10/24に公開

feed Role

feedとは何ぞや?

articleは意味合いはわかるけれど、feedはイマイチはっきりとこれだとは言い切れないのでちゃんと見る

A feed is a section of a page that automatically loads new sections of content as the user scrolls. The sections of content in a feed are presented in article elements. So, a feed can be thought of as a dynamic list of articles that often appears to scroll infinitely.

feedはユーザーのスクロールに連れて新しいコンテントを自動的に読み込むページのセクションです

とのこと

スクショ

まぁこれだ
大別すれば、ブログなどの記事一覧や、Twitterのタイムラインのような、コンテンツをスクロールして一覧で見せるようなスクローラブルなエリアの役割をfeedというらしい

feed の属性

feed attributes

  • aria-labelledby="ID_REF" ... feed用のタイトル要素を指定
  • aria-busy="true" ... コンテンツを読み込み中にセットして、終わったら(idle状態なら)falseにして

feed その他

その他のARIAのパターンと違ってfeedは明示的なユーザーインタラクションがない(スクロールによって追加読み込みをしたりするので)ページングのような、ボタンを配置するのであれば、スクリーンリーダーで閲覧した時には明示的に次のコンテンツを読み込むことを期待できるけれど、そのトリガーがスクロールになるfeedはわかりにくい。

この辺りからfeedの策定自体も怪しい感じになっているっぽい

NOTE: The feed role is a new WAI-ARIA feature, introduced by WAI-ARIA 1.1. This page provides a proposed implementation of a feed component. This proposal does not yet have ARIA Practices Task Force consensus. Feedback is welcome in issue 565.

article Role

概要としては、feedに含まれるコンテンツのこと
特にarticle Roleについての言及はWAI-ARIAのページには書かれてない
(要追加調査)

article の属性

article attributes

tabindex="0" は feed 側の要求する feed の要素は focus ができること を満たすために必要になる感じか
tabindexの値も0じゃないと怒られたりなんだかんだあるのでどこか他のroleで包括的に調べが必要そう

  • Each article element has aria-labelledby referring to elements inside the article that can serve as a distinguishing label.
  • It is optional but strongly recommended for each article element to have aria-describedby referring to one or more elements inside the article that serve as the primary content of the article.
  • Each article element has aria-posinset set to a value that represents its position in the feed.
  • Each article element has aria-setsize set to a value that represents either the total number of articles that have been loaded or the total number in the feed, depending on which value is deemed more helpful to users. If the total number in the feed is undetermined, it can be represented by a aria-setsize value of -1.
  • When article elements are being added to or removed from the feed container, and if the operation requires multiple DOM operations, the feed element has aria-busy set to true during the update operation. Note that it is extremely important that aria-busy is set to false when the operation is complete or the changes may not become visible to some assistive technology users.
  • タイトルは aria-labelledby で指定してね
  • 概要は aria-describedby で指定してね
  • feed内のポジション(index番号とかかな?)は aria-posinset で指定してね
  • feedの内容の総量を aria-setsize で指定してね
    • 総量は読み込み済みな表示数、読み込み前のものも含めた総件数のどちらかユーザーに有益な方を使ってくれとのこと
    • 無限スクロールみたいな総数がよくわからんものに関しては-1を設定してね
  • aritleの要素を消す際は、含有してるfeedに aria-busy="true" 設定してね。終わったら aria-busy="false" に戻すのを忘れないでね

その他・気になるもの・語句メモ

  • assistive technologiesって何よ?
  • そもARIAって何の略?
    => 初回の記事でさらっておきなさいよ
  • 属性って必須なの?オプションなの?

Discussion