aria-expanded 属性の動作検証

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

aria-expanded 属性の適用

aria-expanded 属性は、その要素が展開可能であるか、又は展開されている状態をスクリーンリーダーに伝えます。
aria-expanded の値が "false" の場合は「折りたたみ」、"true" の場合は「展開」といった様にスクリーンリーダーが読み上げます。

aria-expanded 属性を使う際は、展開の有無によって javascript 等で値を置き換える必要が有ります。

<button type="button" aria-expanded="false">開く</button>
<button type="button" aria-expanded="true">閉じる</button>

一般的に使われるテキストが「開く」や「表示」の時が aria-expanded="false"、「閉じる」や「非表示」の時が aria-expanded="true" と意味的に逆になるので注意が必要です。

aria-expanded 属性の対応状況

Microsoft Edge 89、Firefox 87 を利用し、スクリーンリーダー Windows ナレーター 20H2適用、NVDA Version 2020.4jp、PC-Talker 10 Version 1.42 で検証したところ、全てにおいて期待通りの動作をしました。
又、iOS 14 Safari と VoiceOver でも動作を確認しました。aria-expanded 属性は対応が進んでおり、実装すればスクリーンリーダーユーザーにとって有用な情報になりそうです。

aria-expanded の動作確認

スクリーンリーダーと任意のブラウザーでこのページを開き、以下のボタンにキー操作でフォーカスを当てると現在の状態を読み上げます。
ボタンを押す度に開閉が切り替わり、ボタンのテキストと aria-expanded の "false" と "true" の値が置き換わります。

開く