以下のような複数選択肢の中で一度に1つを選択するという機能をもったGUIを作ったときの調査メモ
機能はラジオボタンと同じだが<input type="radio">
は使わずに作った
この場合の注意点などをメモしておく
role="radio"
まず<input type="radio">
を使わなかった場合、UIとしてradio
機能である意味づけが損なわれてしまうためrole="radio"
属性をつけるべきである
https://www.w3.org/TR/wai-aria/#radio
role="radio"
は同じ役割を持つ要素のグループ内で一度に 1 つのみをチェックできる要素を意味する
このとき、同一グループであると認識させるためには、radio
要素をrole="radiogroup"
を持つ要素で囲むか、それができない場合はarea-owns
で所有を明らかにする必要がある
area-owns
は複雑なレイヤーでDOM的に離れた箇所にある場合に使ったりする
今回はrole="radiogroup"
をつけてグループ化する
aria-checked
次に、チェック状態を伝えるためにaria-checked
属性をつける
https://www.w3.org/TR/wai-aria/#aria-checked
button要素を使う
onClick
で状態を変更するという対話を行うため、div
要素ではなくbutton
要素を使う
対話型コンテンツであるにも関わらずdiv
要素を使ってしまうと、たとえばtabindex
属性のようなフォーカスの順番を制御するものがアクセシビリティツリーに掲載されなくなってしまう場合がある
対話型要素を使用して意味的に記述し、アクセシビリティにきちんとステータスを伝えるべき