aria-labelledby 属性の動作検証

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

aria-labelledby 属性の適用

aria-label 属性とよく似ていますが、aria-label は直接要素にラベルを指定するのに対し、aria-labelledby は他の要素の ID を指定し、その要素の関連付けと要素内の参照を行います。
参照する要素は ID を付け、HTML 内に記述する必要が有りますが、Webサイト上で視認出来る必要は無い様です。
span 要素に ID を付け、隠しテキストとして何処かに置いておく事も可能。おすすめはしませんが。

使いどころが良く分かりませんが、参照先の内容が変わる場合には有用なのでしょうか。
視認出来る範囲に関連する要素とテキストが有れば aria-label の様にテキストが隠される事も無いので良いのかもしれません。
ラベルを複数付加する場合には HTML ソースがスッキリしそうです。

aria-labelledby 属性の対応状況

NVDA、PC-Talker 10、iOS VoiceOver では、aria-labelledby が適用されると、テキストが ID を参照した要素内のテキストで上書きされます。
Windows ナレーターでは参照したラベルが付加される形でテキストと共に読み上げられます。
この辺は aria-label と挙動がよく似ています。
検証したスクリーンリーダーとブラウザーの組み合わせでは aria-label 属性を使用した時と動作は変わりませんでした。

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

aria-labelledby の動作確認

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