くまだどうも、くまだです。
WAI-ARIAのaria-labelledbyについてのメモ。
aria-labelledby属性
aria-○○属性は、WAI-ARIで定義される技術の一つです。
aria-○○属性を使うと、スクリーンリーダーによる音声読み上げ機能の精度を高めたり、付加的な情報を与えることができます。
aria-labelledby属性は、要素とラベルを関連づけることができます。以下のように、関連付けたい要素のid属性をaria-labelledby属性の値として指定します。(CSSは省略）
aタグにタブで選択すると、「記事のタイトル 既読リンク メインランドマーク」のように紐づけできます。なお、画像下部のパネル部分は、「PC-Talker Neo」を使用しています。
<h2 id="title">記事のタイトル</h2>
<a href="" aria-labelledby="title">ああああ</a>
aria-labelledby属性は複数のid属性と紐づけることもできます。この場合は、「記事のタイトル 記事の本文 既読リンク メインランドマーク」のように紐づけられます。
<h2 id="title">記事のタイトル</h2>
<p id="description">記事の本文</p>
<a href="" aria-labelledby="title description">ああああ</a>
aria-label属性との違いは、aria-label属性は要素に直接付与するもので、しかもユーザーには不可視の情報として提供されます。要するに、ラベル付けできるテキストが見えない場合に対して使用します。
aria-labelledby属性は、可視化されている要素とラベルを付けたい要素を関連付けます。
ここまで読んでくださりありがとうございました。