WAI-ARIA とは？

HTMLだけでは十分に表せない役割や状態を、支援技術へ伝えるための仕様だよ。たとえば独自のUIにroleを付けると、どんな部品なのか伝えられる。ただしroleだけでは動作は付かないので、必要なキーボード操作やフォーカスの扱いも実装するんだ。

roleは役割、aria-labelは名前、aria-expandedやaria-selectedは状態を表す例だよ。aria-expanded="false"は閉じている状態を伝えるけれど、自動で閉じる機能ではないんだ。開閉処理に合わせて値を更新し、使う役割に合う属性を選ぼう。

まずbuttonなど、必要な意味や操作を持つHTML要素を活用しよう。通常のbuttonへrole="button"を重ねる必要はないよ。一方、押された状態を伝えるトグルボタンにaria-pressedを追加する例もある。ネイティブHTMLにはARIAを一切使えない、という意味ではないんだ。

aria-hidden="true"は要素とその子孫を支援技術へ公開する情報から除くもので、画面を非表示にする機能ではないよ。重複した装飾などを除く用途があるけれど、必要な内容や操作できる部品を隠すと利用を妨げる。親に付けると子にも影響するので注意しよう。

aria-liveで更新情報を伝える優先度を示すよ。politeは今の作業を邪魔しにくいタイミング、assertiveは優先して知らせる指定。実際の通知は支援技術やユーザー設定にもよるので、必ず即座に同じ読み上げになるとは限らないよ。緊急でない更新を次々割り込ませず、実際の操作と読み上げで確かめよう。