button

aria/roleなし

aria-pressed


role="switch" + aria-checked


input button

aria/roleなし

aria-pressed


role="switch" + aria-checked


checkbox + label

aria/roleなし



aria-pressed (+ role="button")


role="switch"


label > checkbox

aria/roleなし


aria-pressed (+ role="button")


role="switch"


特殊なケースの挙動確認

inputに複数のラベルからforしている場合

ダミー ダミー

button に aria-checked と aria-pressedを両方指定している場合


switch に aria-checked と aria-pressedを両方指定している場合


switch に chekced と aria-checkedを両方指定している場合


labelが空の場合

読み上げ順の確認

label + checkboxの場合

label + 要素 + checkboxの場合

ラベルとチェックボックスの間

checkbox + 要素 + labelの場合

ラベルとチェックボックスの間