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-labelledby 属性の対応状況

現状、ほぼ使えないと言って良いでしょう。
Firefox と NVDA、PC-Talker 10
IE と ナレーター、PC-Talker 10
Edge と ナレーター、NVDA
iOS Safari と VoiceOver
で検証したところ、動作したのは IE と PC-Talker 10 の組み合わせだけでした。

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

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

aria-describedby の動作確認

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

div 要素
テスト
a 要素
button 要素
i 要素
テスト