aria-describedby 属性の動作検証

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

aria-describedby 属性の適用

aria-describedby 属性は他の要素の ID を指定し、その要素の関連付けと要素内の参照を行います。
aria-labelledby 属性と似ていますが、aria-labelledby は aria-label と同様、要素内のテキストをラベルで上書きする動作をよく取りますが、aria-describedby 属性はテキストに追加情報を与える形で動作する様です。
aria-labelledby で参照先の H タグのタイトルでラベル付けし、aria-describedby で P タグの内容を追加説明させるといった事が出来ます。ブラウザーとスクリーンリーダーが対応していればですが。

aria-describedby 属性の対応状況

Edge 81 と NVDA、PC-Talker 10
Firefox 75 と NVDA、PC-Talker 10
IE と PC-Talker 10
のそれぞれの組み合わせで動作を確認しました。
iOS Safari と VoiceOver
Windows ナレーターでは動作しませんでした。

OS 標準のナレーターも動作しないにも関わらず、PC-Talker は IE と相性が良い様ですね。
とは言っても IE は先の無いブラウザーなのが残念です。
Edge は Chronium ベースに置き換わり、それまで使えなかった NVDA、PC-Talker で動作する様になりました。

※ 実際の動作はスクリーンリーダーとブラウザーの種類やバージョン、組み合わせで異なります

aria-describedby の動作確認

スクリーンリーダーと任意のブラウザーでこのページを開き、以下の各要素の「テスト」の上にマウスカーソルを乗せる、またはキー操作でフォーカスを当てると、aria-describedby 属性が適用される場合「テスト」の読み上げに「説明」が付加されます。