diff --git a/files/ja/web/accessibility/aria/attributes/aria-labelledby/index.md b/files/ja/web/accessibility/aria/attributes/aria-labelledby/index.md new file mode 100644 index 00000000000000..2de7baff6847b7 --- /dev/null +++ b/files/ja/web/accessibility/aria/attributes/aria-labelledby/index.md @@ -0,0 +1,126 @@ +--- +title: aria-labelledby +slug: Web/Accessibility/ARIA/Attributes/aria-labelledby +l10n: + sourceCommit: 570a1b34461e2a95f0bc943b3fc15aba241813a7 +--- + +`aria-labelledby` 属性は、適用される要素のラベル付けを行う要素(複数可)を識別します。 + +## 解説 + +aria-labelledby` プロパティによって、アクセシブル名を定義するためにページ上の他の要素を参照することができます。これは、アクセシブル名を提供する要素の関連付けにネイティブ対応していない要素を使用する場合に有益です。 + +要素によっては、その[アクセシブル名](https://w3c.github.io/accname/#dfn-accessible-name)を内部コンテンツから取得するものがあります。例えば、{{HTMLElement('button')}}、{{HTMLElement('a')}}、{{HTMLElement('td')}} のアクセシブル名は開始タグと終了タグの間のテキストから決まります。他にも、フォームの {{HTMLElement('textarea')}}、{{HTMLElement('fieldset')}}、{{HTMLElement('table')}} などの要素は、関連する要素のコンテンツからアクセシブル名を取得します。これらの要素では、アクセシブル名はそれぞれ `for` 属性を持つ {{HTMLElement('label')}}、{{HTMLElement('legend')}}、{{HTMLElement('caption')}} から取得します。 + +操作可能な要素はすべて、アクセシブル名がなければなりません。 `aria-labelledby` は、要素のアクセシブル名を定義するために別の要素を参照するために使用することができます。 + +アクセシブル名を作成するために参照できるコンテンツがない場合は、代わりに [`aria-label`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-label) 属性を使用してください。 + +`aria-labelledby` の目的は `aria-label` と同じです。これはユーザーに対して、インタラクティブ要素に対して認識可能でアクセシブル名を提供します。要素に両方の属性が設定されている場合、 `aria-labelledby` が使用されます。 `aria-labelledby` は `aria-label` や {{HTMLElement('label')}}、要素の内部テキストなど、アクセシブル名を提供する他のすべてのメソッドよりも優先されます。 + +`aria-labelledby` および [`aria-describedby`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) 属性は、どちらも代替テキストを計算するために他の要素を参照します。 `aria-labelledby` は要素にアクセシブル名を提供する短いテキストを参照します。 `aria-describedby` は説明を提供する詳しいコンテンツを参照するために使用します。インタラクティブ要素のアクセシブル名に適切な短いラベル付けを提供する要素が DOM にない場合、 `aria-label` を使用してインタラクティブ要素のアクセシブル名を定義します。 + +> **メモ:** アメリカ英語では、この属性は "labeledby" と綴られるとみなされますが、 "labelledby" という綴りが確立されており、アクセシビリティ API で使用されています。 + +次の例では `aria-labelledby` を用いて、兄弟要素のテキストコンテンツを使用してチェックボックス入力にアクセシブル名を提供しています。 + +```html + +利用規約に同意します。 +``` + +この状況では `aria-labelledby` を使用することは、 HTML の {{HTMLElement('label')}} 要素を `for` 属性で使用することに似ていますが、大きく異なる点があることに注意してください。 `aria-labelledby` 属性はアクセシブル名を定義するだけです。この属性は `