【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集
この達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。
Accessible Rich Internet Applications (WAI-ARIA)をサポートするウェブコンテンツ技術。
これは、次の達成基準に関連する達成方法である:
ARIA1 に関するユーザエージェントサポートノートを参照のこと。WAI-ARIA 技術ノートも参照。
この達成方法の目的は、プログラムによる解釈がされる、ユーザインタフェース要素に関する説明的な情報を提供するために、どのように 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 は廃止された勧告であることに注意されたい。
ダイアログ上の「閉じる」ボタンとして機能するボタンが、文書中の他の場所で説明されている。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
フォームフィールドに対してフォームラベルを用意するとともに、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>
<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>
次のコードスニペットは、フォーカスが要素に置かれたときに、ツールチップを表示するために、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>
この例は、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>
この例は、ページ上のボタンに 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. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。