aria-currentの値はいくつかあるけれど、それぞれどのUIで使うとよいのか整理してみた

Last updated at 2024-06-02Posted at 2024-05-31

これは何？

ARIA属性には現在選択されている項目を示すものがあります。
タブ（role="tab"）なら、 aria-selectedがあります。
aria-current も選択されている項目を示すものです。

こういった選択されている項目を示すARIA属性は、結構使っても良い role が限られているなと感じました。
正確には role と言ったほうが正しいと思いますが、ざっくり理解するためにこの記事では「UI」と表現したいと思います。

aria-current には7つ値があり、それぞれ適したUIがあります。
いざ使ってみようと思ったときに、どのUIで使うべきか迷ったので、記事として残しておこうと思います。

この記事が誰かのお役に立てれば幸いです。

Indicates the element that represents the current item within a container or set of related elements

とありました。

コンテナーや関連する要素の集合の中で現在の項目を表すときに使います。
<a href="/" aria-current="page">Page<a> のような書き方をします。

aria-current には7つの値があります。

値	説明
`page`	設定するには、一連のページ内での現在のページを表します。
`step`	プロセス内の現在のステップを表します
`location`	現在の位置、例えばパンくず階層内の現在のページを表します。
`date`	日付の集合の中における現在の日付を表します。
`time`	時刻の集合内の現在時刻を表します。
`true`	集合内の現在の項目を表します。
`false`	集合内の現在の項目を表しません。

正直、私はlocation がパンくずリストで使うことしか、初見では把握できませんでした。

値	主なUI	補足
`page`	グローバルナビゲーション	ナビゲーションで使用する。1ページに1つが良さそう
`step`	ステップを表現するUIがある申込みフォームやアンケート、プログレスバー
`location`	パンくずリスト
`date`	カレンダー
`time`	時刻表
`true`	上記以外	タブ（`role="tab"`）なら、 `aria-selected`のほうが適切
`false`	all	[デフォルト値] 選択されていないことを表す。空（`null`）または `undefined` だと`false`と認識されます。

この記事を書いた時点では、ざっくりですがこのようなUIで使うと良いと思います。