WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

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

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

これらの達成方法(参考)の使用法及び、それらがWCAG 2.0 達成基準(規定)とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用(対象)セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用(対象)

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

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

ユーザエージェント及び支援技術によるサポート

ARIA1 に関するユーザエージェントサポートノート (英語)を参照のこと。WAI-ARIA技術ノートも参照。

解説

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

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

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

事例

事例 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: 例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"
"http://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>

参考リソース

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

検証

チェックポイント

  1. 一意なIDを経由して1つ以上の要素を参照するaria-describedby属性を持つユーザインタフェースコントロールがあることをチェックする。

  2. 参照される要素(1つまたは複数)が、ユーザインタフェースコントロールに関する追加情報を提供することをチェックする。

判定基準

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。