aria-labelledby 属性

aria-describedby 属性は、要素にアクセシブルなラベル（名前）を付与るため、そのラベルとなる要素（複数可）を指定します。

aria-describedby 属性は、属性値に、Web ページ上で可視化されている、ラベルとなる要素（複数可）の id 属性値を指定することで、aria-describedby 属性を付与した要素と、ラベルとなる要素とを関連付け、要素にアクセシブルなラベル（名前）を付与します。

aria-labelledby 属性は、aria-label 属性と同様の目的を果たしますが、aria-label 属性が、要素に対して直接付与され、かつユーザーには不可視の情報として提供されるのに対し、aria-labelledby 属性は、可視化されているラベルとなる要素と、ラベルを付けたい要素とを関連付けます。

ラベルとなる要素が、可視化されていない場合、aria-labelledby 属性は使用すべきではありません。その場合は、aria-label 属性を使用します。

なお、aria-label 属性と aria-labelledby 属性が、ある要素に対して同時に使用され場合、ユーザーエージェントは、aria-labelledby 属性の方を優先します。

<!-- 複数の id 属性値を参照することもできます -->
<h2 id="title01">記事のタイトル</h2>
<p>
 記事の要約...
  <a href="detail.html" id="link01" aria-labelledby="link01 title01">詳しくはこちら</a>
</p>