WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

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

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

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

適用(対象)

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ステートであるかどうかをチェックする。

判定基準

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