aria-labelledby
aria-labelledby
属性は、適用される要素のラベル付けを行う要素(複数可)を識別します。
解説
aria-labelledby
プロパティによって、アクセシブル名を定義するためにページ上の他の要素を参照することができます。これは、アクセシブル名を提供する要素の関連付けにネイティブ対応していない要素を使用する場合に有益です。
要素によっては、そのアクセシブル名を内部コンテンツから取得するものがあります。例えば、 操作可能な要素はすべて、アクセシブル名がなければなりません。 アクセシブル名を作成するために参照できるコンテンツがない場合は、代わりに メモ:
アメリカ英語では、この属性は "labeledby" と綴られるとみなされますが、 "labelledby" という綴りが確立されており、アクセシビリティ API で使用されています。 次の例では この状況では 幸いなことに、 この例では、アクセシブル名は "Yellow "です。
There are over 50 ARIA states and properties, but 13 of them stand out…
read more
この例では、アクセシブル名は "read more 13 ARIA attributes you need to know" です。 警告: 現在の要素をラベル付けする要素を参照する、 1 つ以上の ID 値を空白で区切ったリスト。、
、
のアクセシブル名は開始タグと終了タグの間のテキストから決まります。他にも、フォームの 、
、
などの要素は、関連する要素のコンテンツからアクセシブル名を取得します。これらの要素では、アクセシブル名はそれぞれ
for
属性を持つ 、
、
から取得します。
aria-labelledby
は、要素のアクセシブル名を定義するために別の要素を参照するために使用することができます。aria-label
属性を使用してください。aria-labelledby
の目的は aria-label
と同じです。これはユーザーに対して、インタラクティブ要素に対して認識可能でアクセシブル名を提供します。要素に両方の属性が設定されている場合、 aria-labelledby
が使用されます。 aria-labelledby
は aria-label
や 、要素の内部テキストなど、アクセシブル名を提供する他のすべてのメソッドよりも優先されます。
aria-labelledby
および aria-describedby
属性は、どちらも代替テキストを計算するために他の要素を参照します。 aria-labelledby
は要素にアクセシブル名を提供する短いテキストを参照します。 aria-describedby
は説明を提供する詳しいコンテンツを参照するために使用します。インタラクティブ要素のアクセシブル名に適切な短いラベル付けを提供する要素が DOM にない場合、 aria-label
を使用してインタラクティブ要素のアクセシブル名を定義します。aria-labelledby
を用いて、兄弟要素のテキストコンテンツを使用してチェックボックス入力にアクセシブル名を提供しています。
利用規約に同意します。
aria-labelledby
を使用することは、 HTML の 要素を
for
属性で使用することに似ていますが、大きく異なる点があることに注意してください。 aria-labelledby
属性はアクセシブル名を定義するだけです。この属性は の他の機能、例えばラベル付け要素をクリックすると関連付けられた入力が有効になるといった機能を提供しません。これは JavaScript で追加する必要があります。
type="checkbox"
のHTML はネイティブの
で動作します。使用する場合は以下を使用してください。
利点(と欠点)
aria-labelledby
プロパティは、ブラウザーがアクセシブル名を計算する際に最も優先されるプロパティです。このプロパティは、 aria-label
や他の名前付け属性、要素のコンテンツなど、要素に名前を付ける他のメソッドよりも優先されることに注意してください。
Yellow
aria-labelledby
プロパティは、値としてスペース区切りの id 参照リストを取ります。これは、複数の要素を単一のアクセシブル名にまとめることができることを示しています。自分自身で要素を参照するために、要素自身の id
を含めることができます。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
プロパティは入力要素の値を取り込みます。値が を参照している場合、あるフォームコントロールの現在の値が計算された名前文字列に含まれ、値が更新されると変更されます。
aria-labelledby
プロパティを連鎖させることはできません。 aria-labelledby
を持つ要素が、これも aria-labelledby
を持つ他の要素を参照している場合、参照されている要素の aria-labelledby
属性は無視されます。aria-labelledby
で要素の名前を計算するのは複雑で、隠されたコンテンツを参照することがあるため、確実に期待する名前をユーザーに表示していることを支援技術でテストすることはとても重要です。値
関連付けられたロール
仕様書
Specification Accessible Rich Internet Applications (WAI-ARIA)
# aria-labelledby関連情報
要素
要素
要素aria-label
aria-describedby