Skip to content

テクニック ARIA1: ユーザインタフェース コントロールに対する説明ラベルを提供するために、aria-describedby プロパティを使用する

このテクニックについて

このテクニックは、次に関連する:

このテクニックは、Accessible Rich Internet Applications (WAI-ARIA) をサポートする技術に適用される。

解説

このテクニックの目的は、プログラムによる解釈がされる、ユーザインタフェース要素に関する説明的な情報を提供するために、どのように WAI-ARIA aria-describedby プロパティを使用するかを示すことにある。aria-describedby プロパティは、id 参照リストの使用を通して一つ以上の要素の説明的情報と結びつけるために使用してもよいものである。id 参照リストは、一つ以上のユニークな要素 id を含む。

HTML とともに WAI-ARIA ステート及びプロパティを提供する方法については、ARIA in HTML を参照。WAI-ARIA ステート及びプロパティは他の言語とも互換性がある。詳しくはそれらの言語の説明文書を参照。

注記

aria-describedby プロパティは、外部リソース上の説明を参照するように設計されていない――これは id なので、同一 DOM 文書内の要素を参照しなければならない。

事例

事例 1: フォームフィールドと指示を関連付けるために aria-describedby を使用する

フォームフィールドに対してフォームラベルを用意するとともに、aria-describedby で指示を関連付けているサンプルフォームフィールド。

<form>
  <label for="fname">First name</label>
  <input aria-describedby="int2" autocomplete="given-name" id="fname" type="text">
  <p id="int2">Your first name is sometimes called your "given name".</p>
</form>

事例 2: ボタンに関するより詳細な情報を提供するために aria-describedby プロパティを使用する

<div>
  <span id="fontDesc">Select the font faces and sizes to be used on this page</span>
  <button aria-describedby="fontDesc" id="fontB" type="button">Fonts</button>
</div>
<div>
  <span id="colorDesc">Select the colors to be used on this page</span>
  <button aria-describedby="colorDesc" id="colorB" type="button">Colors</button>
</div>
<div>
  <span id="customDesc">Customize the layout and styles used on this page</span>
  <button aria-describedby="customDesc" id="customB" type="button">Customize</button>
</div>

関連リソース

推奨を意味するものではない。

検証

手順

  1. 一意な id を経由して一つ以上の要素を参照する aria-describedby 属性を持つユーザインタフェース コントロールがあることを確認する。
  2. 参照される要素 (一つ又は複数) が、ユーザインタフェース コントロールに関する追加情報を提供することを確認する。

期待される結果

  • チェック 1 及び 2 の結果が真である。
Back to Top