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

適用 (対象)

Accessible Rich Internet Applications (WAI-ARIA) をサポートするウェブコンテンツ技術。

これは、次の達成基準に関連する達成方法である:

達成基準 1.3.1: 情報及び関係性 (参考)
達成基準 3.3.2: ラベル又は説明 (G131: 説明的なラベルを提供するを満たす方法として十分)

解説

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

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

注記

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

訳注 1

本文のリンク「Supporting ARIA in XHTML and HTML 4.01」は WAI-ARIA 1.0 Primer を参照しているが、この文書は作成が破棄されている。代わりに、WAI-ARIA 1.1 §A.6 HTML 4.01 plus WAI-ARIA DTD を参照できる。

訳注 2

XHTML 及び HTML 4.01 は廃止された勧告であることに注意されたい。

事例

例 1: 「閉じる」ボタンの動作を記述するために aria-describedby プロパティを使用する

ダイアログ上の「閉じる」ボタンとして機能するボタンが、文書中の他の場所で説明されている。aria-describedby プロパティは、ボタンと説明を関連付けるために使用される。

<button aria-label="Close" aria-describedby="descriptionClose"
    onclick="myDialog.close()">X</button>

...

<div id="descriptionClose">Closing this window will discard any information entered and
return you back to the main page</div>

動作例: 例 1

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

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

<form>
<label for="fname">First name</label>
<input name="" type="text" id="fname" aria-describedby="int2">
<p id="int2">A bit of instructions for this field linked with aria-describedby. </p>
</form>

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

<p><span id="fontDesc">Select the font faces and sizes to be used on this page</span>
 <button id="fontB" onclick="doAction('Fonts');" aria-describedby="fontDesc">Fonts</button>
</p>
<p><span id="colorDesc">Select the colors to be used on this page</span>
 <button id="colorB" onclick="doAction('Colors');" aria-describedby="colorDesc">Colors</button>
</p>
<p><span id="customDesc">Customize the layout and styles used on this page</span>
 <button id="customB" onclick="doAction('Customize');" aria-describedby="customDesc">Customize</button>
</p>

例 4: フォームフィールドとツールチップを関連付けるために aria-describedby を使用する

次のコードスニペットは、フォーカスが要素に置かれたときに、ツールチップを表示するために、aria-describedby と onfocus="tooltipShow()" 関数を使用する方法を示す。

<html lang="en-us">
<head>
   <title>inline: Tooltip Example 1</title>
   <link rel="stylesheet" href="css/tooltip1_inline.css" type="text/css">
   <script type="text/javascript" src="js/tooltip1_inline.js"></script>
   <script type="text/javascript" src="../js/widgets_inline.js"></script>
   <script type="text/javascript" src="../js/globals.js"></script>
   <link rel="icon" href="http://www.cites.uiuc.edu/favicon.ico" type="image/x-icon">
   <link rel="shortcut icon" href="http://www.cites.uiuc.edu/favicon.ico" type="image/x-icon">
</head>
   ...

<body onload="initApp()">

<div id="container">

<h1>Tooltip Example 1</h1>
<h2>Create Account</h2>
<div class="text">
<label for="first">First Name:</label>

<input type="text" id="first" name="first" size="20"
      onmouseover="tooltipShow(event, this, 'tp1');"
      onfocus="tooltipShow(event, this, 'tp1');"
      aria-describedby="tp1"
      aria-required="false"/>

<div id="tp1" role="tooltip" aria-hidden="true">Your first name is optional. </div>
</div>

例 5: XHTML

この例は、XHTML でコーディングされ、application/xhtml+xml の MIME タイプで提供されている。このMIME タイプは、すべてのユーザエージェントでサポートされているわけではない。aria-describedby プロパティは、XHTML マークアップに直接追加され、追加のスクリプトを必要としない。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+ARIA 1.0//EN"
"https://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<title>Demonstration of aria-describedby property</title>
<style type="text/css">
div.form p { clear:left; margin: 0.3em 0;}
.left {
  float:left;
  width:400px;
}
.right {
  width:100px;
  text-align:right;
}
</style>
</head>
<body>
<p>The buttons on this page use the Accessible Rich Internet Applications aria-describedby property
to provide more detailed information about the button action</p>
<div class="form">
<p><span class="left" id="fontDesc" >Select the font faces and sizes to be used on this page</span>
<span class="right"><button id="fontB" onclick="doAction('Fonts');" aria-describedby="fontDesc">
Fonts </button></span></p>
<p><span class="left" id="colorDesc" >Select the colors to be used on this page</span>
<span class="right"><button id="colorB" onclick="doAction('Colors');" aria-describedby="colorDesc">
Colors </button></span></p>
<p><span class="left" id="customDesc" >Customize the layout and styles used on this page</span>
<span class="right"><button id="customB" onclick="doAction('Customize');" aria-describedby="customDesc">
Customize </button></span></p>
</div>
</body>
</html>

例 6: HTML

この例は、ページ上のボタンに aria-describedby プロパティを追加するためにスクリプトを使用している。この例は、説明テキストを含む要素の id を保持するために buttonIds 配列変数を作成する。setDescribedBy() 関数は、window オブジェクトの onload イベントから呼び出される。

setDescribedBy() 関数は、ボタン要素のすべてをループし、aria-describedby プロパティを設定するために各ボタン要素上で setAttribute() を呼び出す。各ボタンの aria-describedby プロパティは、その説明のテキストを含む要素の id に設定される。

WAI-ARIA をサポートするユーザエージェント及び／又は支援技術を使用すれば、ユーザインタフェースコントロールがフォーカスを受け取る際に説明が提供される。

<html lang="en-us">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Demonstration of aria-describedby property</title>
<style type="text/css">
div.form p { clear:left; margin: 0.3em 0;}
.left {
  float:left;
  width:400px;
}
.right {
  width:100px;
  text-align:right;
}
</style>
<script type="text/javascript">
//<![CDATA[

// array entries for each button on the page that associates the button id
// with the id of the element containing the text which describes the button
var buttonIds = new Array();
buttonIds["fontB"]= "fontDesc";
buttonIds["colorB"] = "colorDesc";
buttonIds["customB"] = "customDesc";

// function that is run after the page has loaded to set the aria-describedBy
// property on each of the elements referenced by the array of id values
function setDescribedBy(){
  if (buttonIds){
    var buttons = document.getElementsByTagName("button");
    if (buttons){
      var buttonId;
      for(var i=0; i<buttons.length; i++){
        buttonId = buttons[i].id;
        if (buttonId && buttonIds[buttonId]){
          buttons[i].setAttribute("aria-describedby", buttonIds[buttonId]);
        }
      }
    }
  }
}

// simulated action function - currently just displays an alert
function doAction(theAction){
  alert("Perform the " + theAction + " action");
}

window.onload=setDescribedBy;

//]]>
</script>
</head>
<body>
<p>The buttons on this page use the Accessible Rich Internet Applications
aria-describedby property to provide more detailed information
about the button action.
</p>
<div class="form">
<p><span class="left" id="fontDesc" >Select the font faces and sizes to be used on this page</span>
  <span class="right"><button id="fontB" onclick="doAction('Fonts');"> Fonts </button></span>
</p>
<p><span class="left" id="colorDesc" >Select the colors to be used on this page</span>
  <span class="right"><button id="colorB" onclick="doAction('Colors');"> Colors </button></span>
</p>
<p><span class="left" id="customDesc" >Customize the layout and styles used on this page</span>
  <span class="right"><button id="customB" onclick="doAction('Customize');"> Customize </button></span>
</p>
</div>
</body>

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

手順

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

期待される結果

#1 及び #2 の結果が真である。

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

達成方法に関する重要な情報