aria-labelledby

aria-labelledby 属性は、適用される要素のラベル付けを行う要素（複数可）を識別します。

解説

aria-labelledby プロパティによって、アクセシブル名を定義するためにページ上の他の要素を参照することができます。これは、アクセシブル名を提供する要素の関連付けにネイティブ対応していない要素を使用する場合に有益です。

要素によっては、そのアクセシブル名を内部コンテンツから取得するものがあります。例えば、<button>、<a>、<td> のアクセシブル名は開始タグと終了タグの間のテキストから決まります。他にも、フォームの<textarea>、<fieldset>、<table> などの要素は、関連する要素のコンテンツからアクセシブル名を取得します。これらの要素では、アクセシブル名はそれぞれfor 属性を持つ<label>、<legend>、<caption> から取得します。

操作可能な要素はすべて、アクセシブル名がなければなりません。aria-labelledby は、要素のアクセシブル名を定義するために別の要素を参照するために使用することができます。

アクセシブル名を作成するために参照できるコンテンツがない場合は、代わりにaria-label 属性を使用してください。

aria-labelledby の目的はaria-label と同じです。これはユーザーに対して、インタラクティブ要素に対して認識可能でアクセシブル名を提供します。要素に両方の属性が設定されている場合、aria-labelledby が使用されます。aria-labelledby はaria-label や<label>、要素の内部テキストなど、アクセシブル名を提供する他のすべてのメソッドよりも優先されます。

aria-labelledby およびaria-describedby 属性は、どちらも代替テキストを計算するために他の要素を参照します。aria-labelledby は要素にアクセシブル名を提供する短いテキストを参照します。aria-describedby は説明を提供する詳しいコンテンツを参照するために使用します。インタラクティブ要素のアクセシブル名に適切な短いラベル付けを提供する要素が DOM にない場合、aria-label を使用してインタラクティブ要素のアクセシブル名を定義します。

メモ:アメリカ英語では、この属性は "labeledby" と綴られるとみなされますが、 "labelledby" という綴りが確立されており、アクセシビリティ API で使用されています。

次の例ではaria-labelledby を用いて、兄弟要素のテキストコンテンツを使用してチェックボックス入力にアクセシブル名を提供しています。

html

<span  role="checkbox"  aria-checked="false"  tabindex="0"  aria-labelledby="tac"></span><span>利用規約に同意します。</span>

この状況ではaria-labelledby を使用することは、 HTML の<label> 要素をfor 属性で使用することに似ていますが、大きく異なる点があることに注意してください。aria-labelledby 属性はアクセシブル名を定義するだけです。この属性は<label> の他の機能、例えばラベル付け要素をクリックすると関連付けられた入力が有効になるといった機能を提供しません。これは JavaScript で追加する必要があります。

幸いなことに、type="checkbox"のHTML<input> はネイティブの<label> で動作します。使用する場合は以下を使用してください。

html

<label for="tac">  <input type="checkbox" name="terms-and-conditions" />  利用規約に同意します。</label><p><a href="tac.html">利用規約をお読みください</a>。</p>

利点（と欠点）

aria-labelledby プロパティは、ブラウザーがアクセシブル名を計算する際に最も優先されるプロパティです。このプロパティは、aria-label や他の名前付け属性、要素のコンテンツなど、要素に名前を付ける他のメソッドよりも優先されることに注意してください。
html
```
<button aria-label="Blue" aria-labelledby="color">Red</button><span>Yellow</span>
```
この例では、アクセシブル名は "Yellow "です。
aria-labelledby プロパティは、値としてスペース区切りの id 参照リストを取ります。これは、複数の要素を単一のアクセシブル名にまとめることができることを示しています。自分自身で要素を参照するために、要素自身のid を含めることができます。
html
```
<h2>13 ARIA attributes you need to know</h2><p>  There are over 50 ARIA states and properties, but 13 of them stand out…  <a href="13.html" aria-labelledby="rm13 attr">read more</a></p>
```
この例では、アクセシブル名は "read more 13 ARIA attributes you need to know" です。
aria-labelledby プロパティの値の順番は重要です。複数の要素がaria-labelledby によって参照されている場合、参照されている各要素のコンテンツはaria-labelledby の値で参照されている順番に結合されます。もし、aria-labelledby="attr rm13">と記述していたら、アクセシブル名は "13 ARIA attributes you need to know read more" になっていたでしょう。
aria-labelledby プロパティはその値の中でid が繰り返されると無視します。要素が複数の時点で参照された場合、最初の参照のみが処理されます。aria-labelledby="attr attr rm13 rm13"> はaria-labelledby="attr rm13"> として扱われます。
aria-labelledby プロパティの値は、表示されていない要素のコンテンツを含めることができます。支援技術のユーザーには、他のすべてのユーザーと同じコンテンツを提供すべきですが、HTML のhidden 属性、CSS のdisplay: none 、CSS のvisibility: hidden を持つ要素のコンテンツを計算された名前の文字列に含めることができます。
aria-labelledby プロパティは入力要素の値を取り込みます。値が<input> を参照している場合、あるフォームコントロールの現在の値が計算された名前文字列に含まれ、値が更新されると変更されます。
aria-labelledby プロパティを連鎖させることはできません。aria-labelledby を持つ要素が、これもaria-labelledby を持つ他の要素を参照している場合、参照されている要素のaria-labelledby 属性は無視されます。