aria-haspopup 属性の動作検証

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

aria-haspopup 属性の適用

aria-haspopup 属性は、その要素がポップアップやサブメニューを持つ事をスクリーンリーダーに伝えます。
aria-haspopup が持つ値は"false"、"true"、"menu"、"listbox"、"tree"、"grid"、"dialog"です。

<button type="button" aria-haspopup="true">メニュー</button>

ブラウザとスクリーンリーダーが aria-haspopup 属性に対応している場合、ボタンの読み上げに加え「ポップアップがあります」「サブメニュー」といった情報が読み上げられます。

aria-haspopup 属性の対応状況

Microsoft Edge 95、Firefox 94 を利用し、スクリーンリーダー Windows ナレーター 21H1適用、NVDA Version 2021.2jp、PC-Talker 10 Version 1.43 で検証したところ、ナレーターは Edge では "false" 以外の全ての aria-haspopup の状態について「ポップアップがあります」とアナウンスし、"true"と"menu"については「畳まれています」と追加の読み上げが行われました。
これは aria-expanded を併用する等しないと却って正しく情報が伝わらない可能性が有ります。又、Firefox には対応していない様です。

NVDA は "false" 以外の値は Edge では「メニューボタン サブメニュー」と読み上げられ、Firefox は、"true" の場合のみ「メニューボタン サブメニュー」と読み上げられ、それ以外は「サブメニュー」と追加の読み上げが行われます。

PC-Talker は Edge、Firefox 共に対応しておらず、読み上げは行われません。

iOS 15.1 VoiceOver と Safari では aria-haspopup の値に応じて"menu" では「メニューポップアップ」 "tree" では「ツリーポップアップ」の様に情報が読み上げられます。

aria-haspopup の動作確認

スクリーンリーダーと任意のブラウザーでこのページを開き、以下のボタンにキー操作でフォーカスを当てると現在の状態を読み上げます。

falsetruemenulistboxtreegriddialog