aria-selectedは使い方を間違えやすい

Webアクセシビリティで、選択状態を伝えるaria-selected。ナビゲーションのaタグに、現在選択しているページとして設定したくなりますが、その使い方は誤りです。

間違ったaria-selectedの使い方

例えば企業サイトで「商品情報｜企業情報｜お問合せ」というナビゲーションがあったとします。

現在、表示されているページが企業情報のとき、下記のようなaria-selectedの使い方は誤りです。

企業情報ページが選択されているという解釈で、aria-selected=”true”を使いたくなるかもしれません。私は誤って使っていました。

aria-selectedを使えるタグは？

aria-selectedを使えるタグが気になって調べました。

使えるかどうかはタグではなく、ロールで決まるようです。

WAI-ARIAの解説では、４つロールが記載されています。

gridcell、option、row、tab。

思った以上に限られていますね。optionは普通のselected属性を使うため、一般的なWebサイトだと、tabぐらいしかaria-selectedを使う機会はないかもしれません。

ページナビゲーションのaタグ（linkロール）に、aria-selectedを使うのは誤りでした。

aria-selectedは間違いやすい

私と同じような誤りをしている人はいるようです。

海外のサイトで、aria-selectedの誤用を指摘している「aria-selected – when (not) to use it」という記事がありました。

詳しくは書かれているので、参考になります。

ページナビゲーションの現在位置に使うのは、aria-currentが適切です。