この文書は、「Techniques for WCAG 2.0(W3C Working Group Note 2016-10-07)」における、ARIA Techniques for WCAG 2.0部分の日本語訳です。日本語訳は参考情報であって、公式な文書ではありません。また、翻訳に誤りがありえます。

また、この文書は、WCAG 2.0 実装方法集(Techniques for WCAG 2.0 日本語訳)|WCAG 2.0 実装方法集の補完を意図する部分訳です。訳者の持つ二次著作権に関してはパブリックドメイン扱いとします。訳者に断ることなく、訳の補完、再利用その他を行って構いません。

訳者への連絡先、他の仕様の翻訳等については、Wikiを参照ください。

Techniques for WCAG 2.0

Skip to Content (Press Enter)

ARIA Techniques for WCAG 2.0

このウェブページは、Techniques and Failures for Web Content Accessibility Guidelines 2.0からARIAテクニックを記載したものです。技術特有のテクニックは、一般的なテクニックを置き換えません:テクニックは適合に向けて作業中なので、コンテンツ開発者は、一般的なテクニックと技術特有のテクニックの両方を考慮すべきです。

特定の技術に対するテクニックの公開は、技術がWCAG2.0の達成基準と適合性要件を満たすコンテンツを作成するためにすべての状況で使用できることを意味するものではありません。開発者は、特定の技術の限界を認識し、障害をもつ人にアクセシブルな方法でコンテンツを提供する必要があります。

テクニックに関する情報については、Introduction to Techniques for 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ワーキンググループは、ARIA仕様がW3C勧告の状態に到達する際に、WAI-ARIAテクニックが十分であるかどうかの見直しをする予定です。【訳注:WAI-ARIA 1.0仕様は勧告になりました。】WAI-ARIAのステータスに関する最新情報については、WAI-ARIA Overviewを参照してください。


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

適用範囲

このテクニックが関連するもの:

ユーザーエージェントおよび支援技術サポートノート

User Agent Support Notes for 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:ボタンに関するより詳細な情報を提供するために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

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

コード例:


<!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と#2がtrueになる。

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


ARIA2:aria-requiredプロパティとともに要求されるフィールドを識別する

適用範囲

このテクニックが関連するもの:

ユーザーエージェントおよび支援技術サポートノート

User Agent Support Notes for 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"によって示されます:


<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をもつカスタムラジオボタンを使用しますが、スパンをラジオボタンのように実際に動作させるためのスクリプトは、この例に含まれていません。フォームの下にある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をサポートしないユーザーエージェントのためにフォールバックとしてラベルで表示されます。

コード例:



<!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()関数を使用してtrueのaria-requiredプロパティを割り当てます。

このページが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がtrueになる。

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


ARIA4:ユーザーインターフェイスコンポーネントのロールを公開するWAI-ARIAロールを使用する

適用範囲

このテクニックが関連するもの:

ユーザーエージェントおよび支援技術サポートノート

User Agent Support Notes for ARIA4を参照のこと。WAI-ARIA技術ノートも参照のこと。

解説

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

事例

例1:単純なツールバー

WAI-ARIAオーサリングプラクティス文書は、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>
    代わりに<c0><a1>ul</a1></c0>を使用する。
  </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>
        代わりに<c0><a1>ul</a1></c0>を使用する。
      </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>
        代わりに<c0><a1>ul</a1></c0>を使用する。
      </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>
        代わりに<c0><a1>ul</a1></c0>を使用する。
      </li>
    代わりに<c0><a1>ul</a1></c0>を使用する。
  </li>
</ul>

Authoring Practicesのツリービューパターンは、ツリーの作業例を提供します

リソース

(現在挙げられるものはありません)

検証

手順

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

  1. role属性の値が、WAI-ARIA仕様で定義された値から非抽象ロールのいずれかであることをチェックしてください。

  2. ユーザーインターフェイスコンポーネントの特性がロールで記述されていることをチェックしてください。

判定基準

  • #1と#2がtrueになる。

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


ARIA5:ユーザーインターフェイスコンポーネントのステートを公開するためにWAI-ARIAステートおよびプロパティ属性を使用する

適用範囲

このテクニックが関連するもの:

ユーザーエージェントおよび支援技術サポートノート

User Agent Support Notes for ARIA5を参照のこと。WAI-ARIA技術ノートも参照のこと。

解説

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

事例

例1:トグルボタン

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

オープンAjaxのアクセシビリティーの例から次の断片、例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"属性のロールを持ちます。この例のJavaScriptからの抜粋は、"aria-pressed"属性値を更新します:

                   
                             /**
   * 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アライアンスのサイトで、視覚的な状態のためにインライン画像を使用するツールバー―例38の実施例の一部として提供されています。

例2:スライダー

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

Open Ajaxアクセシビリティーの例から次の断片、例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アライアンスのサイトで、スライダー―例32の実施例の一部として提供されています。

リソース

検証

手順

WAI-ARIA仕様、5.3節、ロールの分類は、要求されかつ継承される各ロールに対するステートおよびプロパティを定義します。

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

  1. ロールに対する要求されるステートおよびプロパティが存在することをチェックしてください。

  2. 要求、サポート、継承のいずれも存在しないWAI-ARIAステートまたはプロパティをチェックしてください。

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

判定基準

  • #1、#2と#3がtrueになる。

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


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

適用範囲

このテクニックが関連するもの:

ユーザーエージェントおよび支援技術サポートノート

User Agent Support Notes for ARIA6を参照のこと。WAI-ARIA技術ノートも参照のこと。

解説

このテクニックの目的は、支援技術によって読み取りすることができるオブジェクトのラベルを提供することです。aria-label属性は、ボタンなど、オブジェクトのテキストラベルを提供します。スクリーンリーダーがオブジェクトに遭遇する場合、aria-labelテキストは読み込まれ、ユーザーがそのオブジェクトがどのようなものかを知ります。

著者は、aria-labelledbyが同じオブジェクトに使用される状況で支援技術によってaria-labelが無視されてもよいことに注意すべきです。名前階層の詳細については、ARIA仕様およびHTML to Platform Accessibility APIs Implementation Guideにおけるアクセシブルな名前と説明計算を参照してください。著者は、aria-labelの使用がfor属性を使用するフォームフィールドに関連する画像のaltまたはlabelとして任意のネイティヴな名前を上書きすることに注意すべきです。

事例

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

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

<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がtrueになる。

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


ARIA7:リンクの目的に対してaria-labelledbyを使用する

適用範囲

このテクニックが関連するもの:

ユーザーエージェントおよび支援技術サポートノート

User Agent Support Notes for ARIA7を参照のこと。WAI-ARIA技術ノートも参照のこと。

解説

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

aria-labelledbyの支援をフォーカス可能な要素にテキストを関連付ける場合、ターゲットのテキスト要素は、フォーカス可能な要素のaria-labelledby属性値で参照されるIDが与えられます。

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

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

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

名前階層の詳細については、ARIA仕様とHTML to Platform Accessibility APIs Implementation Guideでリンクに対するアクセシブルな名前と説明計算を参照してください。

事例

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

この例は、画面に表示されるリンクテキストがリンクに対するアクセシブルな名前の始まりとして使用されることを意味します。JAWSやNVDAのような人気のあるスクリーンリーダーは、これを"Read more ...Storms hit 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で参照できるようにタグを利用可能にします。詳細については、アクセシブルなHTML要素を参照してください。

<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がtrueになる。

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


ARIA8:リンクの目的に対してaria-labelを使用する

適用範囲

このテクニックが関連するもの:

ユーザーエージェントおよび支援技術サポートノート

User Agent Support Notes for ARIA8を参照のこと。WAI-ARIA技術ノートも参照のこと。

解説

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

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

事例

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

一部の状況において、デザイナーは、"read more"(続きを読む)のような短く、繰り返されるリンクテキストを使用することで、ページ上のリンクの外観を軽減させるように選択してもよいです。この状況は、より単純という点でaria-labelに対して役立つユースケースを提供し、ページ上の非記述的な"read more"テキストは、説明的なリンクのラベルで置き換えることができます。単語'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がtrueになる。

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


ARIA9:複数のテキストノードからラベルを連結するaria-labelledbyを使用する

適用範囲

このテクニックが関連するもの:

ユーザーエージェントおよび支援技術サポートノート

User Agent Support Notes for ARIA9を参照のこと。WAI-ARIA技術ノートも参照のこと。

解説

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

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

著者は、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-labelledbyidのシーケンスの一部として参照されない限り、ネイティヴラベルにaria-labelledbyプロパティの追加は、そのラベル内部のテキストコンテンツを置換すべきです。

事例

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

テキスト入力は、タイムアウトが発生する前に、ユーザーがデフォルトの時間を延長することを可能にします。

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

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

注:span要素上のtabindex="-1"の使用は、スクリプトによってフォーカスをサポートすることを意味するものではありません―ここでは、単に一部のブラウザー(IE9、IE10)がアクセシビリティーツリーでspan要素を含むことを確認するためのものであり、したがってaria-labelledbyで参照できるようにタグを利用可能にします。詳細については、アクセシブルなHTML要素を参照してください。

<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>

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

例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>

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

例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がtrueになる。

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

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


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

適用範囲

このテクニックは、Accessible Rich Internet Applications(WAI-ARIA)をもつHTMLに適用されます。

このテクニックが関連するもの:

ユーザーエージェントおよび支援技術サポートノート

User Agent Support Notes for 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>

作業例:Providing a short description for a complex graphic

リソース

検証

手順

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

  2. aria-labelledby 属性値がウェブページ上で要素のidであるかどうかをチェックします。

  3. 要素を正確に分類する aria-labelledby属性によって識別される要素のテキストを決定し、等価な情報を提供します。

判定基準

  • #2と#3がtrueになる。

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


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

適用範囲

このテクニックが関連するもの:

ユーザーエージェントおよび支援技術サポートノート

User Agent Support Notes for 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がtrueになる。

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


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

適用範囲

このテクニックが関連するもの:

ユーザーエージェントおよび支援技術サポートノート

User Agent Support Notes for ARIA12を参照のこと。WAI-ARIA技術ノートも参照のこと。

解説

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

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

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

headingロールとネスティングレベルの用途は、WAI-ARIA Authoring Practices 1.1で説明されます。

事例

例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がtrueになる。

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


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

適用範囲

このテクニックが関連するもの:

ユーザーエージェントおよび支援技術サポートノート

User Agent Support Notes for 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ランドマークで、アプリケーションと静的テキストを関連付けるための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がtrueになる。

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


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

適用範囲

このテクニックが関連するもの:

ユーザーエージェントおよび支援技術サポートノート

User Agent Support Notes for ARIA14を参照のこと。WAI-ARIA技術ノートも参照のこと。

解説

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

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

他の状況において、ネイティヴHTMLラベル要素がコントロールでサポートされない場合に、要素は、アクセシブルな名前を提供するために属性aria-labelを与えることができます―たとえば、contentEditableに設定されるdivは、よりリッチなテキスト編集体験を提供するために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がtrueになる。

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


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

適用範囲

このテクニックが関連するもの:

ユーザーエージェントおよび支援技術サポートノート

User Agent Support Notes for ARIA15を参照のこと。WAI-ARIA技術ノートも参照のこと。

解説

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

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

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. 記述として使用されるテキストが見つかった場所で要素のid属性を経由して、aria-describedby属性がテキスト記述を持つ要素をプログラム的に関連付けるかどうかを調べます。

  3. 結合される同等のテキストと関連するテキスト記述は、オブジェクトと同等の目的を正確に説明するまたは提供するかどうかを調べます。

判定基準

  • #1、#2と#3がtrueになる。

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


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

適用範囲

このテクニックが関連するもの:

ユーザーエージェントおよび支援技術サポートノート

User Agent Support Notes for ARIA16を参照のこと。WAI-ARIA技術ノートも参照のこと。

解説

このテクニックの目的は、支援技術によって読み取ることができるユーザーインターフェイスコントロールの名前を提供することです。WAI-ARIAは、aria-describedbyプロパティを使用して、セクション、描画、フォーム要素、画像などとテキストを関連付けるための方法を提供します。このテクニックは、コントロールを分類するページ上のテキストをもつ、フォームフィールドなどのユーザーインターフェイスコントロールを関連付ける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月の時点で、特に古いブラウザーや支援技術で、labelaria-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:複数のソースからのラベル

複数の参照をもつ以下のaria-labelledbyの例は、label要素を使用します。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がtrueになる。

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


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

適用範囲

このテクニックが関連するもの:

ユーザーエージェントおよび支援技術サポートノート

User Agent Support Notes for 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を実際にラジオボタンのように動作させるためのスクリプトは、この例に含まれません。)1つは、必要に応じて、グループの関係を視覚的に強化するためにフィールドのようにグループの周りにボーダーを配置するために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がtrueになる。

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


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

適用範囲

このテクニックが関連するもの:

ユーザーエージェントおよび支援技術サポートノート

User Agent Support Notes for 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がtrueになる。SC 3.3.3の場合は、チェック7も同様にtrueです。

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


ARIA19:エラーを識別するためにARIA role=alertまたはライブ領域を使用する

適用範囲

このテクニックが関連するもの:

ユーザーエージェントおよび支援技術サポートノート

User Agent Support Notes for 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がtrueになる。

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


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

適用範囲

Accessible Rich Internet Applicationsをサポートする技術。

このテクニックが関連するもの:

解説

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

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


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フォームマークアップの一部は次のとおりです:


<code>
<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>
</code>            

実演例

例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がtrueになる。

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