オンかオフかが伝わらないトグルスイッチ

Tabで到達でき、EnterとSpaceで押せますが、状態は is-on クラスにしかありません。オンでもオフでも「メール通知、ボタン」と読み上げられ、変化しても何も伝わりません。

状態はブラウザーが持ち、チェックの有無として伝え、Spaceやラベルのクリックで切り替わります。見た目は :checked から描くので、読み上げとずれません。スクリプトなしで、フォームと一緒に送信もされます。

三つとも適合します。特別な理由がなければ、HTML標準のチェックボックスを使います。状態をブラウザーが持つため、スクリプトのせいでずれることがなく、フォームの中でも追加のコードなしで動きます。ほぼすべての設定スイッチでこれを勧める理由はここにあります。すでに独自のボタンで作られている部品や、チェックボックスではなくスイッチとして読み上げたい場合は role="switch" を選び、変化のたびにスクリプトで aria-checked を更新します。オンとオフの位置を持つ設定ではなく、ツールバーのトグルボタンなら aria-pressed を選びます。

チェックボックスは「オン」「オフ」ではなく「チェックあり」「チェックなし」と読み上げられます。多くの人には通じますが、スイッチとして読み上げたい場合は、チェックボックス自体に role="switch" を付けられます。キーボード操作とフォームの動作はそのままで、オンとオフとして読み上げられます。チェックボックスに付けるSafariの switch 属性も同じ効果がありますが、Safariだけなので、それだけに頼らないでください。

どのマークアップでも、次の点に注意します。

• 名前は変えません。「メール通知」と状態「オン」なら明確ですが、ラベルを「メール通知をオンにする」から「オフにする」に変えながら状態も伝えると、矛盾します。
• 状態を色だけで示しません。つまみの位置が変わる、または aria-hidden を付けた「オン」「オフ」の文字を枠の横に描けば、強制配色でも、緑と灰色を見分けにくい人にも伝わります。
• 変更がいつ反映されるかを決めます。スイッチは通常すぐ反映されます。サーバーに保存する場合、失敗したらステータス領域で知らせて状態を元に戻し、保存されていない値を表示し続けないようにします。

コンポーネントライブラリのスイッチは、状態を外側の div に持たせていることがあります。読み上げられるのはフォーカスを受ける要素の状態なので、その要素を確認してください。