以下のような複数選択肢の中で一度に１つを選択するという機能をもった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属性のようなフォーカスの順番を制御するものがアクセシビリティツリーに掲載されなくなってしまう場合がある
対話型要素を使用して意味的に記述し、アクセシビリティにきちんとステータスを伝えるべき
