WCAG 2.0 達成方法集

Skip to Content (Press Enter)

ARIAの達成方法

このウェブページは、「WCAG 2.0達成方法集 : WCAG 2.0の達成方法と失敗例」におけるARIAの達成方法を掲載している。ウェブコンテンツ技術特有の達成方法は、「一般(General)」の達成方法に取って代わるものではない。コンテンツ制作者は適合に向けて作業する際には、「一般(General)」の達成方法とウェブコンテンツ技術特有の達成方法の双方を考慮に入れる必要がある。

ウェブコンテンツ技術特有の達成方法は、あらゆる状況で WCAG 2.0 の達成基準と適合要件を満たすコンテンツを作るために使うことができる技術を指しているわけではない。 コンテンツ制作者はその技術の限界に注意を払い、障害のある人にアクセシブルな方法でコンテンツを提供す必要がある。

達成方法についての情報は、WCAG 2.0 達成方法集のイントロダクションを参照のこと。他のウェブコンテンツ技術の達成方法一覧については、目次を参照のこと。



WAI-ARIA技術ノート

WAI-ARIAは、アクセシビリティを向上させるために、ウェブページやリッチインターネットウィジェットに次のセマンティック情報を追加するオプションをウェブ開発者に提供する。その結果、そのセマンティック情報はブラウザに公開される。

  • "menu"、"treeitem"、"slider"、"progressbar"のような、提示されたウィジェットの種類を記述するためのロール。

  • 見出し、領域、検索領域及びナビゲーション領域のような、ウェブページの構造を記述するためのロール。

  • チェックボックスのための"checked"、サブメニューやその他のポップアップを描画するメニューのための"haspopup"、及びツリーノードのための"expanded/collapsed"のような、ステート・ウィジェットを記述するためのプロパティ。

  • (たとえば株価情報のように)情報が更新される予定があるページのライブ領域を定義するとともに、更新時の割込みポリシーを定義するためのプロパティ。支援技術は、重要な更新情報がレンダリングされたならすぐに提示してもよい。しかし、付随的な更新情報は、現在のタスクを完了した後のみに提示される。たとえば、スクリーンリーダーは、現在の段落を読み終えた後にのみ付随的な更新情報を利用者に通知する。

  • ドラッグソース及びドロップターゲットを記述するドラッグアンドドロップのプロパティ。

  • リッチインターネットウィジェットにキーボードナビゲーションを提供するための方法。

これらの機能とDOM構造によって伝えられる構造情報の組み合わせは、著者が支援技術に相互運用可能な解決策を作り出すことを可能にする。(出典: WAI-ARIA Overview)

WAI-ARIAに対するユーザエージェントのサポート

WAI-ARIAに対するユーザエージェントのサポートは変化するが、全般的なWAI-ARIAのサポートは改善している。WAI-ARIAをサポートするブラウザは、プラットフォームのアクセシビリティAPIにWAI-ARIAロール及びプロパティを対応づける。

  • Firefox 1.5とFirefox 2.0は部分的にWAI-ARIAをサポートするが、名前空間を使用する必要があり、ライブ領域の使用をサポートしない。

  • Firefox 3以降はライブ領域を含む、WAI-ARIAに対するより良いサポートを含む。

  • IE8は、部分的にWAI-ARIAをサポートする。

  • JAWS 8及びWindow-Eyes 5.5以降は、部分的にWAI-ARIAをサポートする。

  • Jaws 10以降はWAI-ARIAをサポートする。

  • Firefoxの音声拡張であるFireVoxはまた、直接のDOMアクセスを経由してWAI-ARIAをサポートする。

  • NVDAは、部分的にWAI-ARIAをサポートする。

WAI-ARIAに対するアクセシビリティサポート

アクセシビリティ サポーテッドな方法で技術を使用することは、適合性要求のために必要である。詳細はアクセシビリティサポートについてを読むこと。WCAGワーキンググループは、Accessible Rich Internet Application仕様がW3C勧告の状態に到達する際に、WAI-ARIA達成方法が十分であるかどうかの見直しをする予定である。WAI-ARIAのステータスに関する最新情報については、WAI-ARIA Overviewを参照のこと。


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

適用(対象)

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つまたは複数)が、ユーザインタフェースコントロールに関する追加情報を提供することをチェックする。

判定基準

  • 1.及び2.を満たしている。

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


ARIA2: aria-requiredプロパティによって必須項目を特定する

適用(対象)

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

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

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

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

解説

この達成方法の目的は、(プレゼンテーションを通して必須であることが示されている)フォームフィールドが、フォームの正常送信のために必須であることを、プログラムによって解釈できる指標として提供することである。

要素が必須であるという事実は多くの場合、(テキスト又は非テキストのシンボル、又は入力が必須であることを示すテキスト、又は色/スタイルを介して)視覚的に提示されるが、これは、フィールド名の一部としてプログラムによって解釈することができない。

WAI-ARIA aria-requiredプロパティは、送信前に利用者の入力が必須であることを示す。aria-requiredプロパティは、"true"又は"false"の値を持つことができる。たとえば、利用者が住所のフィールドに入力しなければならない場合、aria-requiredは"true"に設定される。

注記 1: aria-required="true"の使用は、アスタリスクや他のテキストシンボルがプログラム的にフィールドに関連付けられている場合であっても、一部の支援技術の利用者に対してrequiredプロパティによって補強できるので、有益であるかもしれない。

注記 2: 多くの場合、要素が必須であるという事実は、(コントロールの後の符号や記号のように)視覚的に提示される。視覚的なプレゼンテーションに加えてaria-requiredプロパティを使用することは、ユーザエージェントが、この重要な情報をユーザエージェント固有の方法で利用者に伝えることを、はるかに簡単にする。XHTMLやHTMLとともにWAI-ARIAステート及びプロパティを提供する方法については、Supporting ARIA in XHTML and HTML 4.01を参照のこと。なお、WAI-ARIAステート及びプロパティは他の言語とも互換性がある。詳しくはその言語における文書の活用を参照のこと。

事例

事例 1:

requiredプロパティがlabel要素の後に置かれるアスタリスクによって示されている:


<form action="#" method="post"  id="login1" onsubmit="return errorCheck1()">
  <p>Note: [*]denotes mandatory field</p>
  <p>
    <label for="usrname">Login name: </label>
    <input type="text" name="usrname" id="usrname" aria-required="true"/>[*]
  </p>
  <p>
    <label for="pwd">Password</label>
    <input type="password" name="pwd" id="pwd" size="12" aria-required="true" />[*]
  </p>
  <p>
    <input type="submit" value="Login" id="next_btn" name="next_btn"/>
  </p>

</form>		

事例 2:

requiredプロパティがlabel要素の後に置かれる単語"required"によって示されている:

<head>
<form action="#" method="post" id="step1" onsubmit="return errorCheck2()">
  <p>
    <label for="fname">First name: </label>
    <input type="text" id="fname" aria-required="true" />
    [required]
  </p>
  <p>
    <label for="mname">Middle name: </label>
    <input type="text" id="mname" />
  </p>
  <p>
    <label for="lname">Last name: </label>
    <input type="text" id="lname" aria-required="true" />
    [required]
  </p>
  <p>
    <label for="email">Email address: </label>
    <input type="text" id="email" aria-required="true" />
    [required]
  </p>
  <p>
    <label for="zip_post">Zip / Postal code: </label>
    <input type="text" id="zip_post" size="6" aria-required="true" />
    [required]
  </p>
  <p>
    <input type="submit" value="Next Step" id="step_btn" name="step_btn" />
  </p>
</form> 

事例 3:

必須フィールドは、フィールドの周りの赤いボーダーとcontent:beforeを使用するCSSによってレンダリングされる星のアイコンで示される。この例はまた、role=radioをもつカスタムラジオボタンを使用するが、spanを実際にラジオボタンのように動作させるためのスクリプトは、この例に含まれていない。CSSプロパティはフォームの下にある。


<form action="#" method="post" id="alerts1">
  <label for="acctnum" data-required="true">Account Number</label>
  <input size="12" type="text" id="acctnum"
      aria-required="true" name="acctnum" />

 <p id="radio_label" data-required="true">Please send an alert when balance exceeds $3,000.</p>

 <ul  id="rg" role="radiogroup" aria-required="true" aria-labelledby="radio_label">
    <li id="rb1" role="radio">Yes</li>
    <li id="rb2" role="radio">No</li>
 </ul>
</form>
 

この例に対する関連するCSSスタイル定義:


[aria-required=true] {
  border: red thin solid;
}
[data-required=true]:after {
  content: url('/iconStar.gif');
}
 

事例 4: XHTMLにおける必須のテキスト入力フィールド

次の例は、フォームフィールドが送信されなければならないことを示すためにaria-requiredプロパティを使用するXHTML文書を示す。フィールドの必須の性質は、WAI-ARIAをサポートしないユーザエージェントのための予備として、ラベルでも表示される。

コード例:


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1
    For Accessible Adaptable Applications//EN"
  "http://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
          xml:lang="en">
  <head>
    <title>Required Input</title>
  </head>
  <body>
    <h1>Required Input</h1>
    <p>The following form input field must be completed by the user
    before the form can be submitted.</p>
    <form action="http://example.com/submit">
      <p>
        <label for="test">Test (required)</label>
        <input name="ariaexample" id="example" aria-required="true" aria-label="Test"/>
      </p>
      <p>
        <input type="submit" value="Submit" />
      </p>
    </form>
  </body>
</html>
		

事例 5: スクリプト経由でaria-requiredプロパティを追加する

この例は、フォーム要素にaria-requiredプロパティを追加するためにスクリプトを使用する。必須プロパティは、setAttribute() APIを使用して割り当てられる。

配列変数requiredIdsは、必須としてマークされる必要がある要素のIDとともに作成される。setRequired()関数は、windowオブジェクトのonloadイベントから呼び出される。

setRequired()関数は、提供されたIDのすべてをループし、要素を取得し、setAttribute()関数を使用してaria-requiredプロパティをtrueにする。

このページがFirefox 3.0以降及びWAI-ARIAをサポートするスクリーンリーダーを使用してアクセスされる場合、入力フィールドのラベルを読む際にスクリーンリーダーは"required"と伝える。

コード例:

<head>
 <script type="text/javascript">
 //<![CDATA[

 // array or ids on the required fields on this page
 var requiredIds = new Array( "firstName", "lastName");

 // function that is run after the page has loaded to set the aria-required property on each of the
 //elements in requiredIds array of id values
 function setRequired(){
 	if (requiredIds){
 		var field;
 		for (var i = 0; i< requiredIds.length; i++){
 			field = document.getElementById(requiredIds[i]);
 			field.setAttribute("aria-required", "true");
 		}
 	}
 }
 window.onload=setRequired;
//]]>
 </script>
 </head>
 <body>
 <p>Please enter the following data.  Required fields have been programmatically identified
 as required and  marked with an asterisk (*) following the field label.</p>
 <form action="submit.php">
 <p>
 <label for="firstName">First Name *: </label><input type="text" name="firstName"
    id="firstName" value="" />
 <label for="lastName">Last Name *: </label><input type="text" name="lastName"
    id="lastName"  value="" />
 </p>
 </form>
 </body>

参考リソース

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

検証

チェックポイント

必須であることがプレゼンテーションを経由して示される各コントロールに対して。

  1. aria-required属性が存在するかどうかをチェックする:

  2. aria-required属性値が、そのユーザインタフェースコンポーネントに対する正しいrequiredステートであるかどうかをチェックする。

判定基準

  • 1. 及び 2. を満たしている。

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


ARIA4: ユーザインターフェース コンポーネントの役割(role)を明らかにするために、WAI-ARIA ロールを使用する

適用(対象)

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

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

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

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

解説

この達成方法の目的は、WAI-ARIA Definition of Rolesで定義されたいずれかの非抽象の値を持つrole属性を用いて要素のロールを定義することである。WAI-ARIA仕様は、各ロールについて、他のロールとどのように関係するか、どのようなステート及びプロパティがあるかといった、参考となる説明を提供している。リッチインターネットアプリケーションが新しいユーザインタフェースウィジェットを定義する際、ロールを公開することで、利用者がウィジェット及びウィジェットと対話する方法を理解できるようになる。

事例

事例 1: 単純なツールバー

WAI-ARIA Authoring Practicesには、3つのボタンを含むツールバーのデモがある。div要素は"toolbar"のロールを持ち、img要素は"button"のロールを持つ:


    <div role="toolbar"
      tabindex="0" 
      id="customToolbar" 
      onkeydown="return optionKeyEvent(event);"
      onkeypress="return optionKeyEvent(event);"
      onclick="return optionClickEvent(event);"
      onblur="hideFocus()"
      onfocus="showFocus()"
      > 
      <img src="img/btn1.gif" 
           role="button" 
           tabindex="-1" 
           alt="Home" 
           id="b1" 
           title="Home">
      <img src="img/btn2.gif" 
           role="button" 
           tabindex="-1" 
           alt="Refresh" 
           id="b2" 
           title="Refresh">
     <img src="img/btn3.gif" 
           role="button" 
           tabindex="-1" 
           alt="Help" 
           id="b3" 
           title="Help"> 
 </div>  
                        

Authoring Practicesのツールバーパターンは、ツールバーの実装例を提供している。

事例 2: ツリーウィジェット

WAI-ARIA Authoring Practicesには、ツリーウィジェットのデモがある。ツリーとその構造を識別するためのロール"tree"、"treeitem"、"group"に注意。コードを単純化して抜粋したものは以下のとおり:


<ul role="tree" tabindex="0">
  <li role="treeitem">Birds</li>
  <li role="treeitem">Cats
    <ul role="group">
      <li role="treeitem">Siamese</li>
      <li role="treeitem">Tabby</li>
    </ul>
  </li>
  <li role="treeitem">Dogs
    <ul role="group">
      <li role="treeitem">Small Breeds
        <ul role="group">
          <li role="treeitem">Chihuahua</li>
          <li role="treeitem">Italian Greyhound</li>
          <li role="treeitem">Japanese Chin</li>
        </ul>
      </li>
      <li role="treeitem">Medium Breeds
        <ul role="group">
          <li role="treeitem">Beagle</li>
          <li role="treeitem">Cocker Spaniel</li>
          <li role="treeitem">Pit Bull</li>
        </ul>
      </li>
      <li role="treeitem">Large Breeds
        <ul role="group">
          <li role="treeitem">Afghan</li>
          <li role="treeitem">Great Dane</li>
          <li role="treeitem">Mastiff</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Authoring Practicesのツリービューパターンは、ツリーの実装例を提供している。

参考リソース

(今のところ、なし。)

検証

チェックポイント

role属性を使用するユーザインタフェースコンポーネントの場合:

  1. role属性の値が、WAI-ARIA仕様で定義された値に由来する非抽象ロールのいずれかである。

  2. ユーザインタフェースコンポーネントの特性がロールで記述されている。

判定基準

  • 1. 及び 2. を満たしている。

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


ARIA5: ユーザインターフェース コンポーネントの状態(state)を明らかにするために、WAI-ARIA ステート及びプロパティ属性を使用する

適用(対象)

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

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

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

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

解説

この達成方法の目的は、ユーザインタフェースコンポーネントのステート、プロパティ及び値を公開するためにWAI-ARIAステート及びプロパティを使用することであり、その結果それらが支援技術によって読み込まれて設定できるようになり、また、支援技術はそれらの値の変更を通知される。WAI-ARIA仕様は、各属性の規範的記述、及びユーザインタフェース要素がサポートするロールを提供する。リッチインターネットアプリケーションが新しいユーザインタフェースウィジェットを定義する際、ステート及びプロパティ属性を公開することで、利用者がウィジェットを理解でき、そしてウィジェットと対話できるようになる。

事例

事例 1: トグルボタン

buttonロールを持つウィジェットがaria-pressed属性を実装する場合、トグルボタンとして動作する。aria-pressedがtrueである場合、ボタンは「押されている」状態になる。aria-pressedがfalseである場合、押されていないことになる。この属性が存在しない場合、ボタンは単純なコマンドボタンとなる。

以下のスニペットはOpen Ajax Accessibility Examplesの例38からの引用であり、太字のテキストを選択するトグルボタンに対するWAI-ARIAマークアップを示している:


  <li id="bold1"  
    class="toggleButton"
    role="button"
    tabindex="0"
    aria-pressed="false"
    aria-labelledby="bold_label"
    aria-controls="text1">
    <img src="http://www.oaa-accessibility.org/media/examples/images/button-bold.png" alt="bold text" align="middle">
</li>

このli要素は、"button"ロールと"aria-pressed"属性を持つ。以下は、この例において "aria-pressed"属性の値を更新するJavascriptの抜粋である:

                   
                             /**
   * togglePressed() toggles the aria-pressed atribute between true or false
   *
   * @param ( id object) button to be operated on
   *
   * @return N/A
   */
  function togglePressed(id) {
  
    // reverse the aria-pressed state
    if ($(id).attr('aria-pressed') == 'true') {
      $(id).attr('aria-pressed', 'false');
    }
    else {
      $(id).attr('aria-pressed', 'true');
    }
  }
                            

このボタンは、OpenAjaxアライアンスのサイトで、working example of Example 38 - Toolbar using inline images for visual state の実装例の一部として提供されている。

事例 2: スライダー

sliderロールをもつウィジェットは、利用者に指定した範囲内から値を選択させる。スライダーは、スライダーの大きさやつまみの位置によって、現在の値、及びとり得る値の範囲を表す。これらのスライダーのプロパティは、属性aria-valueminaria-valuemax、及びaria-valuenowで表される。

以下のスニペットはOpen Ajax Accessibility Examplesの例32からの引用であり、JavaScriptで作成されたスライダーに対するWAI-ARIAマークアップを示している。Javascriptが属性aria-valuemin、aria-valuemax、及びaria-valuenowを設定することに注意:

   var handle = '<img id="' + id + '" class="' + (this.vert == true ? 'v':'h') +'sliderHandle" ' +
    'src="http://www.oaa-accessibility.org/media/examples/images/slider_' + (this.vert == true ? 'v':'h') + '.png" ' + 'role="slider" ' +
    'aria-valuemin="' + this.min +
    '" aria-valuemax="' + this.max +
    '" aria-valuenow="' + (val == undefined ? this.min : val) +
           '" aria-labelledby="' + label +
           '" aria-controls="' + controls + '" tabindex="0"></img>';

以下はこの例のためのJavascriptの抜粋であり、スライダーのつまみの値が変更された場合に"aria-valuenow"属性値を更新する:

 slider.prototype.positionHandle = function($handle, val) {
    ...
   // Set the aria-valuenow position of the handle
  $handle.attr('aria-valuenow', val);
   ...
  }

このスライダーは、OpenAjaxアライアンスのサイトで、working example of Example 32 - Slider の実装例の一部として提供されている。

参考リソース

検証

チェックポイント

The WAI-ARIA specification, Section 5.3, Categorization of Rolesは、各ロールに対し、必須であったり、継承されたりするステート及びプロパティを定義している。

WAI-ARIA role属性を使用するユーザインタフェースコンポーネントの場合:

  1. ロールに対して必須とされるステート及びプロパティが存在する。

  2. 必須でなく、サポートもされず、継承もされないWAI-ARIAステート又はプロパティが存在しない。

  3. ユーザインタフェースコンポーネントが状態を変更する際に、ステート及びプロパティの値が現在の状態を反映するように更新されている。

判定基準

  • 1.、2. 及び 3. を満たしている。

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


ARIA6: オブジェクトのラベルを提供するために aria-label を使用する

適用(対象)

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

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

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

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

解説

この達成方法の目的は、支援技術によって読み取ることができるオブジェクトのラベルを提供することである。aria-label属性は、ボタンなど、オブジェクトのテキストラベルを提供する。スクリーンリーダーがオブジェクトに遭遇した際、aria-labelテキストが読み込まれ、利用者はそのオブジェクトがどのようなものかを知ることができる。

制作者は、aria-labelledbyが同じオブジェクトに使用される状況では、aria-labelが支援技術によって無視される場合があることに注意すべきである。名前付けの序列の詳細については、ARIA仕様及びHTML to Platform Accessibility APIs Implementation Guideにおけるaccessible name and description calculationを参照。制作者は、aria-labelの使用が画像のaltfor属性を用いてフォームフィールドに関係付けられたlabelなどのネイティブな名前付けを全て上書きすることに注意すべきである。

事例

事例 1: ナビゲーションランドマークを区別する

次の例は、同じページに同じ種類のランドマークが2個以上存在し、かつページ内にラベルとして参照できる既存のテキストが存在しない場合に、HTML4及びXHTML1.0文書内で2つのナビゲーションランドマークを識別するためにaria-labelをどのように使用するのかを示している。

<div role="navigation" aria-label="Primary">
<ul><li>...a list of links here ...</li></ul> </div>
<div role="navigation" aria-label="Secondary">
<ul><li>...a list of links here ...</li> </ul></div>

事例 2: 領域のランドマークを識別する

次の例は、気象ポートレットに一般的な"region"ランドマークがどのように追加されうるのかを示している。ラベルとして参照できる既存のテキストがページ内に存在しないため、aria-labelでラベル付けされている。

<div role="region" aria-label="weather portlet"> 
...
</div>

事例 3: 数学のラベルを提供する

以下はmathロール、適切なラベル、およびMathMLのレンダリングを使用する、MathMLの機能の例である。

<div role="math" aria-label="6 divided by 4 equals 1.5">
  <math xmlns="http://www.w3.org/1998/Math/MathML">
    <mfrac>
      <mn>6</mn>
      <mn>4</mn>
    </mfrac>
    <mo>=</mo>
    <mn>1.5</mn>
  </math>
</div>

参考リソース

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

検証

チェックポイント

aria-label属性が存在する各要素に対して。

  1. テキストの説明が正確にオブジェクトをラベル付けする、又はその目的の説明を提供する、又は同等の情報を提供するかどうかを検査する。

判定基準

  • 1.を満たしている。

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


ARIA7: リンクの目的を示すために aria-labelledby を使用する

適用(対象)

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

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

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

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

解説

aria-labelledby属性を用いることで、制作者は、ページ上の可視テキスト要素を、フォーカス可能な要素(フォームコントロール又はリンク)のラベルとして使用できる。たとえば、"read more..."【訳注:続きを読む】のリンクは、リンクの目的を明確にするために、先行するセクションの見出しテキストと関連付けることができるかもしれない(事例1を参照)。

aria-labelledbyの助けを借りてフォーカス可能な要素にテキストを関連付ける場合、ターゲットのテキスト要素は、フォーカス可能な要素のaria-labelledby属性値の中で参照されるIDによって与えられる。

フォーカス可能な要素のラベルとして、ページ上の複数のテキスト要素を使用することも可能である。使用されるそれぞれのテキスト要素は、aria-labelledby属性の値においてIDs(IDREF)の文字列として参照される一意なIDを与えられなければならない。そして、ラベルテキストはaria-labelledby属性の値におけるIDの順序に従って連結されるべきである。

リンクに適用する場合、aria-labelledbyは、目の見える利用者に対して直ちに明白かもしれないが、スクリーンリーダーの利用者にはあまり明らかではないリンクの目的を識別するために使用できる。

aria-labelledbyの指定された動作は、関連付けられたラベルテキストが(リンクテキストに加えられるのではなく)リンクテキストの代わりに告知されるものである。リンクテキスト自身がラベルテキストに含まれるべきである場合、aria-labelledby属性の値を構成するIDsの文字列の中で、リンクのIDも参照されるべきである。

名前付けの序列の詳細については、ARIA specification及びHTML to Platform Accessibility APIs Implementation Guideにおけるaccessible name and description calculation for linksを参照。

事例

事例 1: リンクに追加情報を提供する

この例は、画面に表示されるリンクテキストが、リンクに対するアクセシブルな名前の最初に使用されることを意図している。JAWSやNVDAのようなポピュラーなスクリーンリーダーは、これを "Read more ...Stormshit east coast" のように告知し、リンクだけを閲覧することがあるスクリーンリーダーの利用者にとって有益なリンク一覧にも同じテキストを表示する。

<h2 id="headline">Storms hit east coast</h2>

<p>Torrential rain and gale force winds have struck the east coast, causing flooding in many coastal towns.
<a id="p123" href="news.html" aria-labelledby="p123 headline">Read more...</a></p>

事例 2: 複数のソースからのリンクテキストを連結する

制作者は、参照したいコードのセクションを囲むタグを配置することもあるだろう。

注記: span要素上のtabindex="-1"の使用は、スクリプトによってフォーカスをサポートすることを意味するものではない――ここでは、単に一部のブラウザ(IE9、IE10)がアクセシビリティツリーにspan要素を含めることを保証するためのものであり、その結果、aria-labelledbyによる参照に利用できるようになる。詳細については、Accessible HTML Elementsを参照。

<p>Download <span id="report-title" tabindex="-1">2012 Sales Report</span>:
<a aria-labelledby="report-title pdf" href="#" id="pdf">PDF</a> |
<a aria-labelledby="report-title doc" href="#" id="doc">Word</a> |
<a aria-labelledby="report-title ppt" href="#" id="ppt">Powerpoint</a></p>

参考リソース

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

(今のところ、なし。)

検証

チェックポイント

aria-labelledby属性を持つ各リンクに対して:

  1. aria-labelledby属性の値に含まれる各IDが、リンクの目的の一部として使用されるテキスト要素のIDと一致する。

  2. aria-labelledby属性に含まれる1つ以上のIDによって参照されるテキストを合成した値が、link要素の目的を適切に説明している。

判定基準

  • 1.及び2.を満たしている。

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


ARIA8: リンクの目的を示すために aria-label を使用する

適用(対象)

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

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

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

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

解説

この達成方法の目的は、aria-label属性を使用して、リンクの目的を説明することである。オブジェクトを説明する可視要素がページ上に存在しない場合、aria-label属性は、リンクのようなオブジェクトに説明的なテキストラベルを配置する方法を提供する。説明的な要素がページ上で可視である場合、aria-labelではなく、aria-labelledby属性が使用されるべきである。説明的なテキストラベルを提供することで、利用者は、そのリンクと、ウェブページ内にあるリンク先の異なるリンクとを区別できるようになり、リンクをたどるかどうかを判断する助けとなる。一部の支援技術において、aria-labelの値は、実際のリンクテキストの代わりにリンクの一覧に表示される。

WAI-ARIA仕様及びHTML to Platform Accessibility APIs Implementation Guideにあるように、aria-labelテキストは、リンク内で与えられたテキストを上書きする。このように与えられたテキストは、支援技術によってリンクテキストの代わりに使用される。このため、aria-labelで使用されるテキストは、リンク内で使用されているテキストから始めることが推奨されている。これは、利用者間で一貫性のあるコミュニケーションを可能にする。

事例

事例 1: aria-labelを使用して、HTML内のリンクの目的を説明する

場合によっては、デザイナーが、ページ上のリンクの見た目をコンパクトにするために、"read more"【訳注: 続きを読む】のような短く、繰り返されるリンクテキストを選択することがある。こういった状況は、より単純で非説明的な"read more"というページ上のテキストを、より説明的なリンクのラベルで置き換えることができるという点で、aria-labelの望ましいユースケースとなる。単語"read more"は、利用者間の一貫性のあるコミュニケーションを可能にするために(元のアンカーテキスト"[Read more...]"を置き換える)aria-labelの中にも繰り返される。

 <h4>Neighborhood News</h4>
 <p>Seminole tax hike:  Seminole city managers are proposing a 75% increase in 
 property taxes for the coming fiscal year.
 <a href="taxhike.html" aria-label="Read more about Seminole tax hike">[Read more...]</a>
 </p> 

 <p>Baby Mayor:  Seminole voters elect the city's youngest mayor ever by voting in 3 year
 old Willy "Dusty" Williams in yesterday's mayoral election.
 <a href="babymayor.html" aria-label="Read more about Seminole's new baby mayor">[Read more...]</a>
 </p>

参考リソース

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

検証

チェックポイント

aria-label属性を使用するリンク要素に対して:

  1. aria-label属性の値がlink要素の目的を正確に説明している。

判定基準

  • 1.を満たしている。

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


ARIA9: 複数の語句をつなげて一つのラベルにするために、aria-labelledby を使用する

適用(対象)

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

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

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

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

解説

aria-labelledbyプロパティは、すべての視覚的オブジェクトをラベル付けするために使用できる。 入力に適用する場合、aria-labelledbyプロパティは、div contenteditable="true"によって構築されるカスタムテキスト入力のような非ネイティブ要素だけでなく、ネイティブの入力に対するラベル付けにも利用することができる。

aria-labelledbyの特有の用途のひとつは、意味のあるラベルが複数のラベル文字列から構成される状況における、テキスト入力のためのものである。

制作者は、input要素のラベルとして連結されるために、ラベル文字列に一意のidを割り当てる。aria-labelledby属性の値は、参照されたラベル文字列がスクリーンリーダーで読みあげられるべき順序に並べられた、全idのスペース区切りのリストである。サポートするユーザエージェントは、参照されたラベル文字列を連結して、入力欄の1つの連続したラベルとして読みあげる。

ラベル文字列の連結は、さまざまな理由で便利である。事例1において、入力欄は完全な一文のコンテキスト内に含まれている。望ましいスクリーンリーダーの出力は、"Extend time-out to [ 20 ] minutes - edit with autocomplete, selected 20"である。テキスト入力のidはaria-labelledbyで参照されるidの文字列に含まれているので、入力の値は連結されたラベルの正しい位置に含まれる。

aria-labelledbyの別の応用は、入力欄の隣に視覚的なラベルを提供するためのスペースが存在しない場合、又はネイティブラベルの使用が不必要な冗長性を生む場合である。このとき、aria-labelledbyを使用すると、ページ上の可視要素をそのような入力のラベルとして関連付けることができる。この方法は事例2において示されており、テーブルの列及び行の見出しが連結されて、テーブル内部のテキスト入力要素のラベルとなっている。

注記: ARIA accessible name and description calculationは、aria-labelledbyで指定された文字列が、プロパティを有する要素のコンテンツに追加されるのではなく、置換するべきと規定している。よって、aria-labelledbyプロパティをネイティブラベルに追加する場合、ラベル自体がaria-labelledbyidのシーケンスの一部として参照されていない限り、そのラベル内のテキストコンテンツが置換されるべきである。

事例

事例 1: 連結されたラベルをもつタイムアウト入力フィールド

テキスト入力欄があり、タイムアウトが発生する前に、利用者がデフォルトの時間を延長することを可能にしている。

文字列"Extend time-out to"は、ネイティブのlabel要素に含まれており、id="timeout-duration"により入力に関連付けられる。このラベルは、ARIAをサポートしないユーザエージェント上においてのみ、for/id関連付けを使用してこの入力に関連付けられる。ARIAをサポートするユーザエージェント上では、for/id関連付けは無視され、入力用のラベルは、HTML to Platform Accessibility APIs Implementation Guideにおけるaccessible name and description calculationに従って、aria-labelledbyのみによって提供される。

テキスト入力上のaria-labelledby属性は、3つの要素を参照する: (1) ネイティブのラベルを含むspan、(2) デフォルトテキスト'20'を含むテキスト入力(この入力が、ラベルテキストに関連するfor/idでラベル付けされないことを思い起こすこと)、(3) spanに含まれる文字列'minutes'。これらの要素は、テキスト入力に対する完全なラベルを提供するために連結されるべきである。

注記: span要素上のtabindex="-1"の使用は、スクリプトによってフォーカスをサポートすることを意味するものではない――ここでは、単に一部のブラウザ(IE9、IE10)がアクセシビリティツリーにspan要素を含めることを保証するためのものであり、その結果、aria-labelledbyによる参照に利用できるようになる。詳細については、Accessible HTML Elementsを参照。

<form>
<p><span id="timeout-label" tabindex="-1"><label for="timeout-duration">Extend time-out to</label></span>
<input type="text" size="3" id="timeout-duration" value="20" 
    aria-labelledby="timeout-label timeout-duration timeout-unit">
<span id="timeout-unit" tabindex="-1"> minutes</span></p>
</form>

実装例 連結されたラベルをもつタイムアウト入力フィールド は、Marco Zeheによってまとめられた Easy ARIA tip #2:aria-labelledby and aria-describedby から翻案した。

事例 2: テキスト入力を含む単純なデータテーブル

テキスト入力を含む単純なデータテーブルがある。入力ラベルは、それぞれの列及び行のヘッダーを参照するaria-labelledbyを通して連結される。

<table>
	<tr>
		<td></td>
		<th id="tpayer">Taxpayer</th>
		<th id="sp">Spouse</th>
	</tr>

	<tr>
		<th id="gross">W2 Gross</th>
		<td><input type="text" size="20" aria-labelledby="tpayer gross" /></td>
		<td><input type="text" size="20" aria-labelledby="sp gross" /></td>
	</tr>
	
	<tr>
		<th id="div">Dividends</th>
		<td><input type="text" size="20" aria-labelledby="tpayer div" /></td>
		<td><input type="text" size="20" aria-labelledby="sp div" /></td>
	</tr>
</table>

実装例 テキスト入力をもつ単純なテーブルに対するaria-labelledbyを使用する は、Jim Thatcherによる例に基づく。

事例 3: 会議ワークショップ予約テーブル

2つの同時進行のトラックをもつ会議ワークショップ予約テーブルがあり、利用者が参加したいワークショップを選択することを可能にしている。テーブル内のチェックボックス入力の間をタブ移動するとき、トラック(1又は2)、タイトル、及び隣接するチェックボックスのラベル"Attend"に続くワークショップのスピーカーは、aria-labelledbyを介してチェックボックスに対する連結ラベルとして提供される。

一部のブラウザ/スクリーンリーダーの組み合わせ(たとえばMozilla FirefoxとNVDA)は、さらに関連するテーブルセルのヘッダーを伝える。

<h1>Dinosaur Conference workshops timetable Thursday, 14.  & Friday, 15. March 2013</h1>
<table>
<caption>Dinosaur Conference workshop booking table</caption>
<tbody><tr>
	<td rowspan="2"></td>
	<th colspan="2" scope="colgroup">Thursday</th>
	<th colspan="2" scope="colgroup">Friday</th>
</tr>

<tr>
	<th scope="col" id="am1">9 to 12 AM</th>
	<th scope="col" id="pm1">2 to 5 PM</th>
	<th scope="col" id="am2">9 to 12 AM</th>
	<th scope="col" id="pm2">2 to 5 PM</th>
</tr>

<tr>
	<th id="track1" scope="row">track 1</th>
	<td>
		<h2 id="title-TM1">The Paleozoic era </h2>
		<p>2 places left</p>
		<p><input type="checkbox" id="TM1" aria-labelledby="title-TM1 track1 am1 TM1-att">
                <label id="TM1-att" for="TM1">Attend</label></p>
	</td>
	
	<td>
		<h2 id="title-TA1">The Mesozoic era overview</h2>
		<p>2 places left</p>
		<p><input type="checkbox" id="TA1" aria-labelledby="title-TA1 track1 am2 TA1-att">
                <label id="TA1-att" for="TA1">Attend</label></p>
	</td>
	
	<td>
		<h2 id="title-FM1">The Triassic period, rise of the dinosaurs</h2>
		<p>1 place left</p>
		<p><input type="checkbox" id="FM1" aria-labelledby="title-FM1 track1 pm1 FM1-att">
                <label id="FM1-att" for="FM1">Attend</label></p>

	</td>
	
	<td>
		<h2 id="title-FA1">The Jurassic period</h2>
		<p>11 places left</p>
		<p><input type="checkbox" id="FA1" aria-labelledby="title-FA1 track1 pm2 FA1-att">
                <label id="FA1-att" for="FA1">Attend</label></p>
	</td>
</tr>


<tr>
	<th id="track2" scope="row">track 2</th>
	<td>
		<h2 id="title-TM2">The Cretaceous period</h2>
		<p>18 places left</p>
		<p><input type="checkbox" id="TM2" aria-labelledby="title-TM2 track2 am1 TM2-att">
                <label id="TM2-att" for="TM2">Attend</label></p>
	</td>
	
	<td>
		<h2 id="title-TA2">The end of the dinosaurs</h2>
		<p>2 places left</p>
		<p><input type="checkbox" id="TA2" aria-labelledby="title-TA2 track2 am2 TA2-att">
                <label id="TA2-att" for="TA2">Attend</label></p>
	</td>
	
	<td>
		<h2 id="title-FM2">First discoveries of dinosaurs</h2>
		<p>2 places left</p>
		<p><input type="checkbox" id="FM2" aria-labelledby="title-FM2 track2 pm1 FM2-att">
                <label id="FM2-att" for="FM2">Attend</label></p>
	</td>
	
	<td>
		<h2 id="title-FA2">Emerging scholarship</h2>
		<p>19 places left</p>
		<p><input type="checkbox" id="FA2" aria-labelledby="title-FA2 track2 pm2 FA2-att">
                <label id="FA2-att" for="FA2">Attend</label></p>
	</td>
</tr>
</tbody>
</table>

実装例: 会議ワークショップ予約時間表

参考リソース

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

検証

チェックポイント

aria-labelledbyを使用する入力に対して:

  1. aria-labelledbyで参照されるidが一意であり、かつ組み合わせてラベルを提供するテキストノードのidと一致する

  2. aria-labelledbyによって参照される要素を連結したコンテンツが、ラベル付けされた要素の目的又は機能に対する説明である

判定基準

  • 1.及び2.を満たしている。

    これが達成基準に対して十分な達成方法である場合、このテスト手順を失敗しても、この達成方法がうまく実装されず適合性を主張するために使用できないだけであり、達成基準が他の方法で満たされていないことを必ずしも意味するものではない。

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


ARIA10: 非テキストコンテンツに対して代替テキストを提供するために、aria-labelledby を使用する

適用(対象)

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

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

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

解説

この達成方法の目的は、aria-labelledby属性を使用することで支援技術(AT)によって読み取ることのできる要素に対する短い説明を提供することである。aria-labelledby属性は、ラベル付けする要素のID属性とマッチするID参照値を使用することで、ページ上のどこかで可視になっているテキストと要素とを関連づける。スクリーンリーダーのような支援技術は、aria-labelledby属性値によって特定される要素のテキストを、その属性をもつ要素に対する代替テキストとして使用する。

事例

事例 1: 複雑な図形に短い説明を提供する

この例は、図形が複数の画像要素から構成されている読み取り専用の星評価パターンに対して、どのようにaria-labelledby属性を用いて短いテキストの説明を提供するのかを示している。図形に対するテキストによる代替はラベルであり、ページ内の星パターンのすぐ下に見える形で置かれている。

<div role="img" aria-labelledby="star_id">
<img src="fullstar.png" alt=""/>
<img src="fullstar.png" alt=""/>
<img src="fullstar.png" alt=""/>
<img src="fullstar.png" alt=""/>
<img src="emptystar.png" alt=""/>
</div>

<div id="star_id">4 of 5</div>

実装例: 複雑な図形に短い説明を提供する

参考リソース

検証

チェックポイント

  1. aria-labelledby属性が存在してかつ要素がalt属性をサポートしない場合に各要素を検査する。

  2. aria-labelledby属性値がウェブページ上の要素のidである。

  3. aria-labelledby属性によって特定される要素のテキストが、正確に要素をラベル付けする、又はその目的の説明を提供する、又は同等の情報を提供する。

判定基準

  • 2.及び3.を満たしている。

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


ARIA11: ページの領域を特定するために ARIA ランドマークを使用する

適用(対象)

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

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

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

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

解説

この達成方法の目的は、ウェブページのセクションに対して、プログラムによるアクセスを提供することである。ランドマークロール(又はランドマーク)は、ページのセクションをプログラムによって識別できるようにする。ランドマークは、支援技術(AT)利用者がページに順応するのを支援し、様々なページのセクションにより簡単にナビゲートするのに役立つ。

ランドマークはまた、支援技術の利用者に、複数ページで繰り返されるコンテンツのブロックをスキップする容易な方法を提供するとともに、ページの構造をプログラムによって理解できるようにする。たとえば、すべてのページに見られる共通のナビゲーションメニューが存在する場合、ランドマークロール(又はランドマーク)は、ナビゲーションメニューをスキップし、セクションからセクションにナビゲートするために使用できる。これは、伝統的な「スキップリンク」メカニズムそっくりに、支援技術利用者とキーボード利用者が、実際に後続にあるものを見つけるために大量のコンテンツの中をタブ移動するための時間と手間を省く(支援技術サポートの詳細については上記のユーザエージェントノートを参照のこと)。ニュースサイトのメニューに精通しているだろう、トップニュースを得ることにのみ関心がある目の不自由な利用者は、より容易に"main"ランドマークにナビゲートして、多数のメニューリンクを無視できる。別の状況で、目の不自由な利用者は、すぐにナビゲーションメニューを検索したいかもしれず、ナビゲーションランドマークにジャンプすることでこれを実現できる。

ランドマークはまた、目の見えるキーボード利用者がブラウザプラグインを使用して、ページのセクションにナビゲートするのを支援することもできる。

ランドマークは、セクションをマークする要素上のrole属性を使用してページに挿入される。属性値は、ランドマークの名前である。ロールの値は次のとおりである:

  • banner: ページの主見出し又は内部タイトルを含む領域。

  • complementary: 主要コンテンツをサポートしているが、独立しかつ意味のある、文書の任意のセクション。

  • contentinfo: 著作権やプライバシーに関する声明へのリンクなど、親文書に関する情報を含む領域。

  • form: フォーム関連要素のコレクションを表す文書の領域であり、その一部は編集可能な、処理するためにサーバーに送信可能な値を表すことができる。

  • main: 文書における主要コンテンツ。ほとんどの場合において、1つのページは1つのみのrole="main"を持つ。

  • navigation: 文書内の、又は関連する文書へのナビゲートに適したリンクのコレクション。

  • search: ウェブ文書の検索ツール。

  • application: ウェブ文書とは対照的な、ウェブアプリケーションとして宣言された領域。(注記: applicationロールは、スクリーンリーダーに対して通常のウェブナビゲーションコントロールをオフにする信号を与えるため、注意して使用すべきである。一般に、単純なウィジェットには application ロールを与えるべきでなく、また、全くウェブページのように利用されておらず、かつ支援技術を用いた利用者のテストが十分に行われている場合を除き、ウェブページの全体に application ロールを与えるべきではない。)

特定のランドマークロールがページ上で複数回使用できる場合があり、主要及び補助のナビゲーションメニューのようなものを表すことができる。この場合、同一ロールは、領域にラベル付けを行うための有効な技術を用いて、互いに曖昧さをなくすべきである(下記の例を参照)。

ランドマークは、HTMLの見出し、リスト、及びその他の構造的マークアップのようなネイティブセマンティックマークアップの補足となるべきである。ランドマークは、WAI-ARIA対応の支援技術によって解釈可能であり、ブラウザによって利用者に直接公開されるものではない。

ページ上のすべてのコンテンツをランドマークに含めることがベストプラクティスであり、そうすればセクションからセクションへナビゲートするためにランドマークに依存するスクリーンリーダー利用者がコンテンツの経路を見失うことはなくなる。

事例

事例 1: 単純なランドマーク

次の例は、ランドマークがどのようにHTML4やXHTML 1.0文書に追加され得るのかを示している:

<div id="header" role="banner">A banner image and introductory title</div>
<div id="sitelookup" role="search">....</div>
<div id="nav" role="navigation">...a list of links here ... </div>
<div id="content" role="main"> ... Ottawa is the capital of Canada ...</div>
<div id="rightsideadvert" role="complementary">....an advertisement here...</div>
<div id="footer" role="contentinfo">(c)The Freedom Company, 123 Freedom Way, Helpville, USA</div>

事例 2: 同じ種類の複数のランドマークとaria-labelledby

次の例は、同じページで2つ以上の同じ種類のランドマークが存在する状況で、ランドマークがどのようにHTML4やXHTML1.0文書に追加されうるのかのベストプラクティスを示している。たとえば、navigationロールがウェブページ上で複数回使用される場合、各インスタンスはaria-labelledbyを使用して、指定された一意のラベルを持ってもよい:

<div id="leftnav" role="navigaton" aria-labelledby="leftnavheading">
<h2 id="leftnavheading">Institutional Links</h2>
<ul><li>...a list of links here ...</li> </ul></div>
<div id="rightnav" role="navigation" aria-labelledby="rightnavheading">
<h2 id="rightnavheading">Related topics</h2>
<ul><li>...a list of links here ...</li></ul></div>

事例 3: 同じ種類の複数のランドマークとaria-label

次の例は、同じページで2つ以上の同じ種類のランドマークが存在する状況で、ラベルとして参照できるページでテキストが存在しない場合、ランドマークがどのようにHTML4やXHTML1.0文書に追加されうるのかのベストプラクティスを示している。

<div id="leftnav" role="navigaton" aria-label="Primary">
<ul><li>...a list of links here ...</li></ul> </div>
<div id="rightnav" role="navigation" aria-label="Secondary">
<ul><li>...a list of links here ...</li> </ul></div>

事例 4: 検索フォーム

次の例は、"search"ランドマークをもつ検索フォームを示す。searchロールは一般的に、フォームフィールドや、検索フォームを囲むdivに適用する。

<form role="search">
<label for="s6">search</label><input id="s6" type="text" size="20">
...
</form> 

参考リソース

検証

チェックポイント

  1. ランドマークロールをもつ各要素を検査する。

  2. ランドマークロール属性が、そのロールに対応するページのセクションに適用されている(すなわち、"navigation"ロールはナビゲーションセクションで適用され、"main"ロールはメインコンテンツが始まる場所に適用される)。

判定基準

  • 1.及び2.を満たしている。

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


ARIA12: 見出しを特定するために role=heading を使用する

適用(対象)

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

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

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

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

解説

この達成方法の目的は、支援技術(AT)に見出しとしてひとまとまりのコンテンツを識別するための手段を提供することである。要素に role="heading" を適用することで、(スクリーンリーダーなどの)支援技術に、あたかもそれが見出しであったかのように扱わせることができる。

ページ上に複数の見出しがあり、かつ見出し階層が視覚的なプレゼンテーションを通して定義される場合、見出しの階層レベルを示すためにaria-level属性が使用されるべきである。

可能な場合、ネイティブな見出しマークアップを直接使用すること。たとえば、<div role="heading" aria-level="1">を使用するのではなく、h1を使用するのが好ましい。しかし、見出しマークアップの代わりに heading ロールを使用することが必要な場合がある。たとえば、スクリプトが既存の要素の階層構造に依存しているレガシーサイトを改装する場合などである。

headingロールとネスティングレベルの用途については、WAI-ARIA 1.0 Authoring Practicesで説明されている。

事例

事例 1: 単純な見出し

この例は、スクリプトが既存の要素の階層構造に依存する、又はレベルが不明であるレガシーなサイトを改装する際に、role="heading"を使用した簡単な見出しを実装する方法を示す。たとえば、さまざまなソースからシンジケートされたウェブコンテンツを、最終的なプレゼンテーションがどうなるかの知識なしで構築できるかもしれない。

<div role="heading">Global News items</div>
... a list of global news with editorial comment....

<div role="heading">Local News items</div>
... a list of local news, with editorial comment ...

事例 2: 追加の見出しレベル

この例は、role="heading"とaria-level属性を用いてレベル7見出しを実装する方法を示す。HTMLはレベル6までの見出しのみをサポートしているため、このセマンティックスを提供するためのネイティブ要素は存在しない。

...
<h5>Fruit Trees</h5>
...
<h6>Apples</h6>
<p>Apples grow on trees in areas known as orchards...</p>
...
<div role="heading" aria-level="7">Jonagold/div>
<p>Jonagold is a cross between the Golden Delicious and Jonathan varieties...</p>

参考リソース

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

検証

チェックポイント

  1. 属性role="heading"をもつ各要素を調べる。

  2. 要素の内容が見出しとして適切である。

  3. 要素がaria-level属性を持つ場合、値が適切な階層レベルである。

判定基準

  • 2.及び3.を満たしている。

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


ARIA13: 領域とランドマークに名前(name)を付けるために、aria-labelledby を使用する

適用(対象)

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

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

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

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

解説

この達成方法の目的は、支援技術によって読み取ることができるページの領域に対して名前を提供することである。aria-labelledby属性は、領域又はランドマークとしてマークアップされたページ内のセクションと、そのセクションを分類するページ内のテキストを関連付ける方法を提供する。

ランドマークロール(又はランドマーク)は、ページのセクションをプログラムで識別できるようにする。

ランドマークは、支援技術(AT)利用者がページに順応するのを支援し、様々なページのセクションにより簡単にナビゲートするのに役立つ。aria-describedbyのように、aria-labelledbyは、スペース区切りのリストを使用して、ページの他の領域を指すための複数のIDを受け入れることができる。また、この集合を定義するものはIDに限定されている。

事例

事例 1: ページ上のテキストをもつランドマークを識別する

以下は、complementaryランドマークにaria-labelledbyを使用した一例である。この文書内の見出しがついている領域は、見出しのid値を含むaria-labelledbyプロパティによってマークすることができる。

<p role="complementary" aria-labelledby="hdr1">
 <h1 id="hdr1">
    Top News Stories
 </h1>
</p>

事例 2: アプリケーションランドマークの識別

次のコード断片は、静的な文を含むapplicationランドマークである。タイプapplicationの領域ランドマークがあり、かつ静的な説明テキストが利用可能であるため、applicationランドマークには、そのアプリケーションと静的テキストを関連付けるためのaria-describedbyによる参照を含めている。

<div role="application" aria-labelledby="p123" aria-describedby="info">
<h1 id="p123">Calendar<h1>
<p id="info">
This calendar shows the game schedule for the Boston Red Sox.
</p>
<div role="grid">
....
</div>

参考リソース

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

検証

チェックポイント

  1. 属性 role=region 又はランドマークロールを持ち、aria-labelledby 属性も存在している各要素を調べる。

  2. aria-labelledby属性値が、ページ上の要素のidである。

  3. その id を持つ要素のテキストが、ページのセクションを正確にラベル付けしている。

判定基準

  • 2.及び3.を満たしている。

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


ARIA14: 可視ラベルが使用できない場合に不可視ラベルを提供するために、aria-label を使用する

適用(対象)

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

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

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

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

解説

目の見える利用者の場合、要素のコンテキスト及び外観は目的を決定するために十分な手がかりを提供できる。一例は、ポップアップのdiv(ライトボックス)を閉じるためのコントロールを示すために、このdivの右上隅でよく使用される'X'である。

設計手法やレイアウトによって、可視のラベルが存在しないが、コンテキストと視覚的な外観によってコントロールの目的が明確になっているような場合、要素には、アクセシブルな名前を提供するために、aria-label属性を与えられることがある。

この他、ネイティブHTMLラベル要素がコントロールでサポートされない場合、要素には、アクセシブルな名前を提供するために属性aria-labelが与えられることがある――たとえば、よりリッチなテキスト編集体験を提供するために、divcontentEditableに設定され、input type="text"textareaなどのネイティブフォーム要素の代わりに使用される場合である。

事例

事例 1: ポップアップボックスにおける閉じるボタン(X)

ページ上で、リンクは追加情報をもつポップアップボックス(div)を表示する。そのclose(閉じる)要素は、単に文字'x'を含むボタンとして実装される。プロパティaria-label="close"は、ボタンにアクセシブルな名前を提供するために使用される。

<div id="box">
   This is a pop-up box.
   <button aria-label="Close" onclick="document.getElementById('box').style.display='none';" class="close-button">X</button>				
</div>

実装例: 閉じるボタンの例

事例 2: 複数のフィールドを持つ電話番号

<div role="group" aria-labelledby="groupLabel">
  <span id="groupLabel>Work Phone</span>
  +<input type="number" aria-label="country code">
  <input type="number" aria-label="area code">
  <input type="number" aria-label="subscriber number">
</div>

参考リソース

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

検証

チェックポイント

aria-labelを使用する要素に対して:

  1. 利用者の入力が要求される場所でaria-label属性の値が適切に要素の目的を説明している

判定基準

  • 1.を満たしている。

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


ARIA15: 画像の説明を提供するために aria-describedby を使用する

適用(対象)

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

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

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

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

解説

この達成方法の目的は、簡潔な代替テキストがオブジェクトで提供される機能や情報を適切に伝達しない場合に、画像の説明を提供することである。

WAI-ARIAには、aria-describedbyプロパティを使用して、セクション、描画、フォーム要素、画像などと説明テキストを関連付けできる機能がある。これは、利用者が複雑な画像を理解するのを助ける追加情報を提供するのに両者が有用であるという点においてlongdesc属性に似ている。longdescのように、aria-describedbyを使用して提供される説明テキストは、HTMLでalt属性を使用して提供される短い名前とは別のものである。longdescと異なり、aria-describedbyは画像を含むページの外の記述を参照できない。画像と同じページのコンテンツを使用して長い説明を提供する利点は、支援技術を持たない、目の見える人を含め、その代替が誰でも利用できることである。執筆時点(2013年10月)で、一部の支援技術が利用者の操作なしに画像のalt属性情報の直後にaria-describedbyの内容を読みあげることは注目に値する――これは、longdesc属性のほとんどの実装が、追加の説明を読むために利用者の明示的な操作を必要とすることとは対照的である。

aria-labelledbyのように、aria-describedbyは、スペース区切りのリストを使用してページの他の領域を指すための複数のIDを受け入れることができる。この集合を定義するものはIDに限定されている。

事例

事例 1: 画像を説明する

次の例は、テキストの説明が画像と同じページ上にある場所で、長い説明を提供するためにどのようにaria-describedbyが画像に適用されるかを示す。

<img src="ladymacbeth.jpg" alt="Lady MacBeth" aria-describedby="p1">
<p id="p1">This painting dates back to 1730 and is oil on canvas. It was created by 
Jean-Guy Millome, and represents ...</p>

参考リソース

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

検証

チェックポイント

  1. aria-describedby属性が存在する各画像要素を調べる。

  2. そのaria-describedby属性が、その説明として用いられるテキストを含む要素のidを介して、要素とテキストの説明とをプログラム的に関連付けている。

  3. 結合された同等のテキスト及び関連付けられたテキストの説明が、オブジェクトに同等の目的を正確に説明する又は提供している。

判定基準

  • 1.、2. 及び 3. を満たしている

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


ARIA16: ユーザインターフェース コントロールの名前(name)を提供するために、aria-labelledby を使用する

適用(対象)

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

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

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

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

解説

この達成方法の目的は、支援技術によって読み取ることができるユーザインタフェースコントロールの名前を提供することである。WAI-ARIAは、aria-labelledbyプロパティを使用して、セクション、描画、フォーム要素、画像などとテキストを関連付けるための方法を提供する。この達成方法では、aria-labelledby属性を使用して、フォームフィールドなどのユーザインタフェースコントロールと、それをラベル付けするページ上のテキストとを関連付ける。

aria-describedbyのように、aria-labelledbyは、スペース区切りのリストを使用して、ページの他の要素を指すように複数のIDを受け入れることができる。この機能は、目の見える利用者がコントロールを識別するために周囲のコンテキストからの情報を使用する状況において、aria-labelledbyを特に有用にする。複数の語句をつなげて一つのラベルにするために、aria-labelledby を使用するでも、名前がページ上の他の複数のテキスト要素から構成される場合の事例を紹介している。

aria-labelledbyの機能はネイティブなHTMLのlabel要素と似ているように見えるが、いくつか違いがある:

  • aria-labelledbyは複数のテキスト要素を参照することができる。labelが参照できるのは1つだけである。

  • label要素がフォーム要素のみに使用できる一方で、aria-labelledbyはさまざまな要素に対して使用できる。

  • labelをクリックすると、関連付けられたフォームフィールドをフォーカスする。これはaria-labelledbyでは起こらない。この動作が必要な場合、labelを使用するか、スクリプトを使用してこの機能を実装する。

2013年12月の時点で、特に古いブラウザや支援技術で、labelのほうがaria-labelledbyよりもより良くサポートされていることに注意すること。

事例

事例 1: 単純なテキストフィールドをラベル付けする

以下は、ラベル専用のテキストがないものの、正確にコントロールをラベル付けするためにページ上の他のテキストが使用できる状況で、aria-labelledbyを使用して単純なテキストフィールドにラベルを提供している例である。

<input name="searchtxt" type="text" aria-labelledby="searchbtn">
<input name="searchbtn" id="searchbtn" type="submit" value="Search">

事例 2: スライダーをラベル付けする

以下は、スライダーコントロールにラベルを提供するためにaria-labelledbyを使用している例である。このケースでは、ラベルテキストが、より長い隣接するテキスト文字列の中から選択される。この例は、単にラベル付けの関係を示すために簡略化されていることに注意すること。カスタムコントロールを実装するコンテンツ制作者は、コントロールが他の達成基準を満たしていることも確認する必要がある。

<p>Please select the <span id="mysldr-lbl">number of days for your trip</span></p>
<div id="mysldr" role="slider" aria-labelledby="mysldr-lbl"></div>

事例 3: 例3: 複数のソースからのラベル

以下は、label要素を使用した複数の参照を伴うaria-labelledbyの例である。aria-labelledbyをもつラベルに複数のソースを連結する方法の詳細については、複数の語句をつなげて一つのラベルにするために、aria-labelledby を使用するを参照すること。

<label id="l1" for="f3">Notify me</label>
<select name="amt" id="f3" aria-labelledby="l1 f3 l2">
  <option value="1">1</option>
  <option value="2">2</option>
</select>
<span id="l2" tabindex="-1">days in advance</span>

注: label要素を使うことには多くの理由がある。利用者がlabel要素のテキストをクリックすれば、対応するフォームフィールドがフォーカスを受け取るため、器用さの問題を持つ人に対してクリックターゲットを大きくすることができる。また、label要素は常にアクセシビリティAPIを介して公開される。spanが使われるかもしれない(ただしその場合、spanがInternet ExplorerのすべてのバージョンでアクセシビリティAPIを介して公開されるように、spanはtabindex="-1"を与えるべきである)。しかし、spanでは、クリック可能な領域が大きくなるという利点が失われることになるだろう。

参考リソース

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

検証

チェックポイント

aria-labelledby属性が存在する場合に各ユーザインタフェースコントロール要素に対して:

  1. aria-labelledby属性の値は、ある要素のid、又はウェブページ上の複数idのスペース区切りのリストである。

  2. 参照される要素又は複数要素のテキストが正確にユーザインタフェースコントロールにラベル付けする。

判定基準

  • 1.及び2.を満たしている。

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


ARIA17: 関連するフォームコントロールを特定するために、グループ化するロールを使用する

適用(対象)

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

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

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

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

解説

この達成方法の目的は、グループのように、フォーム内部で関連するコントロールのセットをマークアップすることである。グループに関連付けられた任意のラベルは、グループ内の個別のコントロールに対する共通のラベル又は修飾子としても機能する。支援技術は、グループ内および外へのナビゲーションの際に、グループの開始と終了、およびグループのラベルを示すことができる。これは、ユーザインタフェースのデザインがfieldsetとlegendによる達成方法(H71)を採用することが困難である場合に、プログラム的にフォームコントロールをグループ化するために実行可能な代替手段である。

ラジオボタングループの場合、role="group"の代わりにrole="radiogroup"を使用できる。

グループはaria-labelledbyを使用してラベル付けできる。

この達成方法は、role="group"をもつ単一のコンテナ内にフォーム上のすべてのコントロールを包むためのものではない。

事例

事例 1: 社会保障番号

9桁の長さで、3つのセグメントに分割される社会保障番号フィールドは、role="group"を使用してグループ化できる。

<div role="group" aria-labelledby="ssn1">
   <span id="ssn1">Social Security#</span> 
   <span style="color: #D90D0D;"> * </span>
   <input size="3" type="text" aria-required="true" title="First 3 digits" />-
   <input size="2" type="text" aria-required="true" title="Next 2 digits" />-
   <input size="4" type="text" aria-required="true" title="Last 4 digits" />
</div>

実装例: 複数パートに分かれたフィールドのグループ化

事例 2: ラジオグループを識別する

この例は、role=radiogroupのデモである。ラジオボタンがrole=radioをもつカスタムコントロールであることにも注意。(しかしspanを実際にラジオボタンのように動作させるためのスクリプトは、この例には含まれていない。)必要に応じて、グループの関係を視覚的に強調するために、フィールドのようにグループの周りにボーダーを配置するためにCSSを使用してもよい。CSSプロパティはフォームの下にある。

<h3>Set Alerts for your Account</h3>
  <div role="radiogroup" aria-labelledby="alert1">
    <p id="alert1">Send an alert when balance exceeds $ 3,000</p>
    <div>
      <span role="radio" aria-labelledby="a1r1" name="a1radio"></span>
      <span id="a1r1">Yes</span>
    </div>
    <div>
      <span role="radio" aria-labelledby="a1r2" name="a1radio"></span>
      <span id="a1r2">No</span>
    </div>
  </div>
  <div role="radiogroup" aria-labelledby="alert2">
    <p id="alert2">Send an alert when a charge exceeds $ 250</p>
    <div>
      <span role="radio" aria-labelledby="a2r1" name="a2radio"></span>
      <span id="a2r1">Yes</span>
    </div>
    <div>
      <span role="radio" aria-labelledby="a2r2" name="a2radio"></span>
      <span id="a2r2">No</span>
    </div>
  </div>
  <p><input type="submit" value="Continue" id="continue_btn" name="continue_btn" /></p>

フィールドのグループの周りにボーダーを配置するための、関連するCSSスタイル定義:

div[role=radiogroup] {
  border: black thin solid;
} 

実装例: 関連するフォームコントロールを識別するためにグループ化ロールを使用する

参考リソース

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

検証

チェックポイント

各コントロールに対する個別のラベルが十分な説明を提供せず、かつ追加のグループレベルの説明が必要とされる場合、関連するコントロールグループに対して:

  1. 論理的に関連するinput又はselect要素のグループがrole=groupをもつ要素内に含まれている。

  2. このグループがaria-label又はaria-labelledbyを使用して定義されるアクセシブルな名前を持つことをチェックする。

判定基準

  • 1.及び2.を満たしている。

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


ARIA18: エラーを特定するために aria-alertdialog を使用する

適用(対象)

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

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

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

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

解説

この達成方法の目的は、入力エラーが発生していることを利用者に警告することにある。role="alertdialog"を使用することで、通知を作成することができる。この通知は、次のような特徴をもつモーダルであるべきである:

  • aria-label又はaria-labelledby属性で、アラートダイアログにアクセシブルな名前を与えている。

  • aria-describedbyで、アラートのテキストへの参照を提供している。

  • そのアラートダイアログは、少なくとも1つのフォーカス可能なコントロールを含んでおり、アラートダイアログが開く際にフォーカスがそのコントロールに移動すべきである。

  • タブ順序は、タブが開いている間アラートダイアログの内部に拘束される。

  • ダイアログが閉じられる場合、可能であれば、フォーカスはダイアログが開く前の位置に戻る。

アラートダイアログは、必要とされるまで、支援技術によってアクセスされる方法で存在すべきではないことに注意。これを行う1つの方法は、静的なHTMLに含めない代わりに、エラー状態がトリガーされた時にスクリプトを通してDOMに挿入することである。この挿入は、次のHTMLサンプルに対応する。

事例

事例 1: アラートダイアログ

この例は、role="alertdialog"を使用する通知が、無効な情報を入力した人に通知するためにどのように使用できるかを示す。

<div role="alertdialog" aria-labelledby="alertHeading" aria-describedby="alertText">
<h1 id="alertHeading">Error</h1>
<div id="alertText">Employee's Birth Date is after their hire date. Please verify the birth date and hire date.</div>
<button>Save and Continue</button>
<button>Return to page and correct error</button>
</div>

実装例: アラートダイアログ

参考リソース

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

(今のところ、なし。)

検証

チェックポイント

  1. アラートダイアログが表示される原因となるエラーをトリガーする。

  2. アラートダイアログは少なくとも1つのフォーカス可能なコントロールを含み、アラートダイアログが開いた際にフォーカスがそのコントロールに移動する。

  3. タブ順序は、タブが開いている間アラートダイアログ内に拘束され、ダイアログを閉じた際に、可能ならば、フォーカスはダイアログが開く前の位置に戻る。

  4. 適用されたrole="alertdialog"をもつ要素を調べる。

  5. aria-label又はaria-labelledby属性のいずれかが、適切にアラートダイアログにアクセシブルな名前を与えるために使用されている。

  6. アラートダイアログのコンテンツが入力エラーを識別している。

  7. アラートダイアログのコンテンツがエラーを修正する方法を提案している。

判定基準

  • 2.、3.、5.及び6.を満たしている。達成基準3.3.3を達成するためには、7も満たしている必要がある。

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


ARIA19: エラーを特定するために、ARIA role=alert 又はライブ領域(Live Regions)を使用する

適用(対象)

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

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

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

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

解説

この達成方法の目的は、入力エラーが発生した場合に支援技術(AT)に通知することである。aria-live属性は、エラーメッセージがライブ領域のコンテナに注入された際に、AT(スクリーンリーダーなど)による通知を可能にする。aria-live領域内部のコンテンツは、テキストが表示されている場所でATがフォーカスする必要なしに、ATによって自動的に読みあげられる。

ライブ領域のプロパティを直接適用する代わりに使用できる特殊ケースのライブ領域のロールも多数ある。

事例

事例 1: DOM内にすでに存在するrole=alertをもつコンテナの中にエラーメッセージを注入する

次の例は、aria-live=assertiveを使用しているのと同等のrole=alertを使用する。

例において、ページロード時にDOMに存在するaria-atomic=true及びaria-liveプロパティ又はalertロールをもつ空のエラーメッセージコンテナ要素が存在する。エラーコンテナは、ほとんどのスクリーンリーダーでエラーメッセージが読み上げられるために、ページロード時にDOMに存在しなければならない。aria-atomic=trueは、複数の無効な投稿をした後にエラーメッセージをiOSのVoiceoverに読み上げさせるために必要である。

jQueryは、送信時に入力が空であるかどうかをテストし、そうであれば、ライブ領域コンテナにエラーメッセージを注入するために使用される。新しい送信が試みられるたびに、前のエラーメッセージがコンテナから削除され、新しいエラーメッセージが挿入される。

<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(document).ready(function(e) {
	$('#signup').submit(function() {
		$('#errors').html('');
		if ($('#first').val() === '') {
			$('#errors').append('<p>Please enter your first name.</p>');
		}
		if ($('#last').val() === '') {
			$('#errors').append('<p>Please enter your last name.</p>');
		} 
		if ($('#email').val() === '') {
			$('#errors').append('<p>Please enter your email address.</p>');
		} 
		return false;
	});
});
</script>

<form name="signup" id="signup" method="post" action="">
  <p id="errors" role="alert" aria-atomic="true"></p>
  <p>
    <label for="first">First Name (required)</label><br>
    <input type="text" name="first" id="first">
  </p>
  <p>
    <label for="last">Last Name (required)</label><br>
    <input type="text" name="last" id="last">
  </p>
  <p>
    <label for="email">Email (required)</label><br>
    <input type="text" name="email" id="email">
  </p>
  <p>
    <input type="submit" name="button" id="button" value="Submit">
  </p>
</form>

実装例: エラーを識別するためにrole=alertを使用する

参考リソース

(今のところ、なし。)

検証

チェックポイント

  1. role=alert又はaria-live=assertive属性が指定された空のエラーコンテナが、ページの読み込み時のDOMに存在する。

  2. ライブ領域のコンテンツの表示又更新を引き起こすエラーをトリガーする。

  3. エラーメッセージが既に存在するエラーコンテナに挿入されたことをチェックする。

判定基準

  • 1. 及び 3. を満たしている。

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


ARIA20: ページの領域を特定するために region ロールを使用する

適用(対象)

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

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

解説

この達成方法は、ユーザエージェント及び支援技術がプログラム的にページのセクションを識別できるように、そのページのセクションに一般的なregionロールを割り当てる方法を示す。regionロールは、より容易に発見可能かつナビゲート可能であるように、重要なコンテンツを含むページの区切りを定める。一般的な領域は、セクションが標準の文書ランドマークロールによってマークアップできない場合に使用されるべきである(ARIA11: ページの領域を特定するために ARIA ランドマークを使用する (ARIA) を参照)。

領域は一般的なグループ化された要素であり、かつ利用者がどの領域にいるのかを伝えるための手段が必要になるため、領域に名前を付けることは重要である。領域には、aria-labelledbyaria-label、その他の手法を使用して名前を付けることができる。そうすることで、ページ上のコンテンツと情報の関係をより良く公開する助けとなる。過剰に使用した場合、スクリーンリーダーの利用者に対してページを過度に冗長にすることがあるので、regionのロールは、慎重に使用するべきである。

事例

事例 1: ニュースサイト上の領域

毎週変更する世論調査を含むニュースサイトのホームページ上のセクションが、role="region"でマークアップされている。フォーム上部のh3テキストは、aria-labelledbyを使うことで領域の名前として参照されている。


<div role="region" aria-labelledby="pollhead">
<h3 id="pollhead">This week's Poll</h3>
<form method="post" action="#">
  <fieldset>
    <legend>Do you believe the tax code needs to be overhauled?</legend>
    <input type="radio" id="r1" name="poll" />
    <label for="r1">No, it's fine the way it is</label>
    <input type="radio" id="r2" name="poll" />
    <label for="r2">Yes, the wealthy need to pay more</label>
    <input type="radio" id="r3" name="poll" />
    <label for="r3">Yes, we need to close corporate loopholes</label>
    <input type="radio" id="r4" name="poll" />
    <label for="r4">Changes should be made across the board</label>
  </fieldset>
</form>
<a href="results.php">See Poll Results</a>
</div>			
            

事例 2: 銀行サイト上の領域を識別する

利用者は、銀行のウェブサイトにログインした後、リンクを展開することで定期預金口座の詳細を確認できるようになっている。詳細は、regionロールでマークアップされた範囲の中にある。その領域の見出しはrole=headingを持ち、その領域に名前を付けるaria-labelledbyの中に含まれている。


<ol>
	<li><a id="l1" href="#" aria-expanded="false" title="Show details" aria-controls="block1" >John Henry's Account</a><img src="images/panel_expand.gif" alt="" />
		 <div id="block1" class="nowHidden" tabindex="-1" aria-labelledby="l1 cd1" role="region"><span id="cd1" role="heading" aria-level="3">Certificate of  Deposit:</span>
		 <table>
			 <tr><th scope="row">Account:</th> <td>25163522</td></tr>
			 <tr><th scope="row">Start date:</th> <td>February 1, 2014</td></tr>
			 <tr><th scope="row">Maturity date:</th><td>February 1, 2016</td></tr>
			 <tr><th scope="row">Deposit Amount:</th> <td>$ 3,000.00</td></tr>
			 <tr><th scope="row">Maturity Amount:</th> <td>$ 3,072.43</td></tr>
		 </table>
		 </div>
	 </li>
 </ol>
            

事例 3: 一般的な領域とポートレットを同一視する

次の例は、気象ポートレットに一般的な"region"ランドマークがどのように追加されうるのかを示している。ラベルとして参照できる既存のテキストがページ内に存在しないため、aria-labelでラベル付けされている。

コード例:


<div role="region" aria-label="weather portlet"> 
	...
</div>            

参考リソース

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

検証

チェックポイント

role="region"でマークアップされる各セクションに対して:

  1. コンテンツが、独立したランドマークを持つのに十分なほど重要である。

  2. 標準のランドマークロールがこのコンテンツに適さない。

  3. 領域がプログラムによって解釈される名前を持つ。

判定基準

  • 1.から3.を満たしている。

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


ARIA21: エラー項目を示すために aria-invalid を使用する

適用(対象)

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

解説

この達成方法は、aria-invalidを使用して、検証に失敗しているフィールドを明確に識別する方法を示す。次の場合が最も使用に適している:

  • エラーの説明から、失敗したフィールドをプログラムによって識別できない。

  • 失敗したフィールドが、一部の利用者に利用できない方法で――たとえば、色に依存しない、ボーダーのような視覚的な手がかりなどの技術によって視覚的にレンダリングされるエラーアイコンの使用によって――識別される。

注記: 注: 上記2つの状況の1つは、データフォーマット、データ範囲、又はrequiredプロパティを伝えるラベル及び/又は命令とプログラムによって関連付けられているフィールドにも起こりうる。

失敗したフィールドと具体的なエラーの説明をプログラム的に関連付けることが常に望ましい一方で、ページのデザイン又は利用されているフレームワークは、コンテンツ制作者がプログラム的に関連付けるための能力を制約するかもしれない。このような場合、コンテンツ制作者は、検証に失敗したフィールド上でプログラムによって aria-invalid を "true" に設定してもよい。これは主に、目の不自由な利用者によって使用される(スクリーンリーダー/画面拡大のような)支援技術で解釈可能である。フィールドが "true" に設定されたaria-invalidを持つ場合、フィールドがフォーカスを取得する際に、SafariのVoiceOverは "invalid data" とアナウンスし、JAWSとNVDAは "invalid entry" としてエラーを通知する。

このARIA属性は、プログラムによって設定/オンにされる必要がある。入力の検証が行われる又はフォームが送信される前に、その属性を"true"に設定するべきではない。aria-invalidを "false" に設定することは、フォームコントロールにこの属性を全く指定しないことと同じである。当然ながら、この場合、支援技術は利用者に何も伝えない。

可視テキストが、失敗したフィールドをプログラムによって識別する及び/又はエラーを補正できる方法を伝えるために使用される場合、aria-invalidを"true"に設定することは、厳格な整合性の観点からは必要とされないが、それでも利用者のために役立つ情報を提供する可能性がある。

事例

事例 1: 必須フィールドにaria-invalidを使用する

何も入力されていない必須フィールドにaria-invalid属性が指定されている。フォーム上部のメッセージは、フォームの送信がこのせいで失敗したことを伝えている。

jQueryコード及びHTMLフォームマークアップの一部は次のとおりである:


<script>
...
...
		if ($('#first').val() === '') {
			$('#first').attr("aria-invalid", "true");
$("label[for='first']").addClass('failed');
		}
		if ($('#last').val() === '') {
			$('#last').attr("aria-invalid", "true");
$("label[for='last']").addClass('failed');
		} 
		if ($('#email').val() === '') {
			$('#email').attr("aria-invalid", "true");
$("label[for='email']").addClass('failed');
		} 
...
...
</script>
<style type="text/css">
label.failed {
	border: red thin solid;
}
</style>
<form name="signup" id="signup" method="post" action="#">
 <p>
    <label for="first">First Name (required)</label><br>
    <input type="text" name="first" id="first">
  </p>
  <p>
    <label for="last">Last Name (required)</label><br>
    <input type="text" name="last" id="last">
  </p>
  <p>
    <label for="email">Email (required)</label><br>
    <input type="text" name="email" id="email">
  </p>
  <p>
    <input type="submit" name="button" id="button" value="Submit">
  </p>
</form>
            

動作する例

事例 2: データフォーマットのエラーを識別する

Aria-invalid及びaria-describedbyが、個人識別番号(PIN)、電子メールアドレス、又は開始日が期待される形式でない場合に、エラーを示すために一緒に使用されている。エラーメッセージは、aria-describedbyを使うことでフィールドに関連付けられており、aria-invalidによって、エラーになっているフィールドをプログラムによって簡単に見つけられるようになっている。

以下は、事例1において電子メールアドレスフィールドにレンダリングされるHTMLコードである。(sam@example.comの代わりに)"samexample.com"のような不正な電子メールアドレスが利用者によって入力された場合、HTMLコードは次のようになる:


<div class="control">
<p><label for="email">Email address: [*]</label> 
<input type="text" name="email" id="email" class="error" aria-invalid="true" aria-describedBy="err_1" /></p> 
<span class="errtext" id="err_1">Error: Incorrect data</span></div>
            

そしてデータが電子メールフィールドに入力されなかった場合、HTML コードは次のようになる:


<div class="control">
<p><label for="email">Email address: [*]</label> 
<input type="text" name="email" id="email" class="error" aria-invalid="true" aria-describedBy="err_2" /></p>
<span class="errtext" id="err_2">
 Error: Input data missing</span>
</div>            

jQueryコード: jQueryは、class属性だけでなくaria-invalid又はaria-describedby属性をも追加し、かつエラーテキストを追加するために使用される。これは、aria-invalid及びclass="error"を挿入するコードであるが、プログラム的にコントロールとエラーテキスト"incorrect data"を関連付けないコードである。:


$(errFld).attr("aria-invalid", "true").attr("class", "error");
// Suffix error text: 
$(errFld).parent().append('<span class="errtext">Error: Incorrect data</span>');
            

CSS コード:


input.error {
   border: red thin solid;}
span.errtext {
	margin-bottom: 1em; 	padding: .25em 1.4em .25em .25em;
	border: red thin solid; 	background-color: #EEEEFF;
	background-image:url('images/iconError.gif');
	background-repeat:no-repeat; 	background-position:right;	
}
            

動作する例.

参考リソース

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

検証

チェックポイント

検証の失敗の伝達をaria-invalidに依存する各フォームコントロールに対して:

  1. 検証の失敗が存在しない場合にaria-invalidがtrueに設定されない。

  2. 検証の失敗が存在する場合にaria-invalidがtrueに設定される。

  3. プログラム的に関連付けられたラベル/プログラム的にフィールドに関連づけられた説明文がエラーを理解するのに十分な情報を提供している。

判定基準

  • 1.から3.を満たしている。

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