aria-checked 属性の動作検証
WAI-ARIA で定義されている aria-checked 属性。
スクリーンリーダーやブラウザーでどの様な挙動を取るのかの検証と、このページを使って動作の確認が出来ます。
aria-checked 属性の適用
ネイティブな HTML <input type="checkbox"> を使えないケースや、デザインを制御したい時等に、role="checkbox"を適用して、要素をチェックボックスとしてスクリーンリーダーに伝える事が出来ます。
role="checkbox"では、aria-checked 属性に"false"、"true"、"mixed"のプロパティを持たせる事が出来ます。
"false"に設定すると、スクリーンリーダーでは「チェックボックス チェックなし」、"true"では「チェックボックス チェック」等と読み上げられます。
"mixed"は部分的に押されている状態で、スクリーンリーダーでは「一部チェック」や「ハーフチェック」といった様に読み上げられます。
ネイティブな HTML を使わずに視覚に頼ったチェックボックス等を実装するとスクリーンリーダーではボタンが押されているかの判断がつきません。
その様なデザインを必要とする場合は、role="checkbox" aria-checked 属性の併用や tabindex といった情報を付加してアクセシビリティを確保する必要が有ります。
aria-checked 属性の対応状況
Microsoft Edge 95、Firefox 93 を利用し、スクリーンリーダー Windows ナレーター 21H1適用、NVDA Version 2021.2jp、PC-Talker 10 Version 1.43 で検証したところ、全てにおいて期待通りの動作をしました。
又、iOS 15.1 Voiceover と Safari においても動作が確認出来ます。
aria-checked の動作確認
スクリーンリーダーと任意のブラウザーでこのページを開き、以下のボタンにキー操作でフォーカスを当てると現在の状態を読み上げます。
又、ボタンを押す度に aria-checked 属性が "false"→"true"→"false" と切り替わり、スクリーンリーダーが現在の状態を更新して通知します。
上記ボタンは <button type="button"> に role="checkbox" aria-checked="false" を付加しており、見た目にはボタンのテキストが切り替わりますが、スクリーンリーダーにはチェックボックスとしてのオン/オフの状態が情報として伝えられます。