aria-pressed 属性の動作検証

WAI-ARIA で定義されている aria-pressed 属性。
スクリーンリーダーやブラウザーでどの様な挙動を取るのかの検証と、このページを使って動作の確認が出来ます。

aria-pressed 属性の適用

aria-pressed 属性は、"false"、"true"、"mixed"、"undefined"のプロパティを持ち、ボタンの状態をスクリーンリーダーに伝える事が出来ます。

“false"に設定すると、スクリーンリーダーでは「押されていません」、"true"では「押されています」等と読み上げられます。
“mixed"は部分的に押されている状態で、スクリーンリーダーでは「一部チェック」といった様に読み上げられます。

ネイティブな HTML を使わずに視覚に頼ったチェックボックス等を実装するとスクリーンリーダーではボタンが押されているかの判断がつきません。
その様なデザインを必要とする場合は、aria-pressed 属性や tabindex、role="button" といった情報を付加してアクセシビリティを確保する必要が有ります。

aria-pressed 属性の対応状況

Microsoft Edge 89、Firefox 87 を利用し、スクリーンリーダー Windows ナレーター 20H2適用、NVDA Version 2020.4jp、PC-Talker 10 Version 1.42 で検証したところ、動作をしたのは NVDA のみでした。

ナレーターや PC-Talker ではボタンの状態は通知されず、スクリーンリーダーが対応するのを待つか他の方法を考える必要が有りそうです。

iOS 14 Safari と VoiceOver では正しく動作し、iOS もアクセシビリティの対応は進んでいる様です。

aria-pressed の動作確認

スクリーンリーダーと任意のブラウザーでこのページを開き、以下のボタンにキー操作でフォーカスを当てると現在の状態を読み上げます。
又、ボタンを押す度に aria-pressed 属性が “false"→"true"→"false" と切り替わり、スクリーンリーダーが現在の状態を更新して通知します。