プロパティとステート
aria-*属性は大きく2つに分類される。1つはプロパティ（性質）、もう1つはステート（状態）である。プロパティはそのroleの性質を表し、様々な補足情報を加えるためのものである。プロパティは基本的に静的な情報なので、状況によって書き換えることができない。一方、ステートは「選択されている／いない」「展開されている／いない」「表示されている／いない」といった、そのroleの現在の状態を表すものである、ユーザの操作で動的に変化する状態を正確にスクリーンリーダーに伝達するため、ステートを利用するにはJavaScriptによる操作が必要である。
よく使うaria-*属性（プロパティ）
- aria-label：現在の要素にラベルをつける／要素に明示的なラベル（見出しなど）がない場合のみ使用する
- aria-labelledby：現在の要素にラベルをつける要素を識別する／離れた場所に記述された明示的なラベル（見出しなど）を関連付けるために使用する
- aria-describedby：現在の要素を説明している要素を識別する／離れた場所に記述された説明文などを関連付けるために使用する
- aria-controls：現在の要素が制御している対象の要素を識別する／その要素が開閉などの表示制御をする対象となる要素を明示するために使用する
よく使うaria-*属性（ステート）
- aria-expanded：要素が展開しているかどうか（true／false／undefined）
- aria-hidden：要素が非表示であるかどうか（true／false）
- aria-selected：（タブなどの）現在選択されているもの（true／false／undefined）
- aria-current：（ナビなどの）現在位置（page／step／location／date／time／true／false）
aria-*属性を使う場合の注意点
aria-属性は全てのHTML要素で自由に設定できるものもあるが、使用できるroleが限定されているものもある。例えばよく使うaria-属性であるaria-expandedとaria-selectedは使えるroleが限定されている。
WAI-ARIA仕様で「グローバル」と明記されているもの以外は、使用できるroleが限定されているので、利用する際には一度仕様書で確認したほうが良いだろう。
【使用できるroleが限定されているaria-*属性の例】
- aria-expanded：button／combobox／document／link／section／sectionhead／window
- aria-selected：gridcell／option／row／tab
- aria-modal：alertdialog／dialog
- aria-posinset：article／listitem／menuitem／option／radio／tab
- aria-setsize：article／listitem／menuitem／option／radio／tab
【WAI-ARIA1.1 グローバルなステートとプロパティ】
https://www.w3.org/TR/wai-aria-1.1/#global_states
