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

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

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

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: 注記 2 にあるリンク「Supporting ARIA in XHTML and HTML 4.01」は WAI-ARIA 1.0 Primer を参照しているが、この文書は作成が破棄されている。代わりに、WAI-ARIA 1.1 §A.6 HTML 4.01 plus WAI-ARIA DTD を参照できる。

訳注 2: XHTML 及び HTML 4.01 は廃止された勧告であることに注意されたい。

事例

事例 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');
}

訳注: 説明に「content:before を使用する CSS によって」とあるが、コード例は :after となっており、説明とコードが矛盾している。

訳注: MDN の疑似要素 (Pseudo-elements) に示されているように、:after 疑似要素について、コロンを 1 個のみ用いるのは古い、互換性のための構文である。コロンを 2 個置くのが現在の正式な構文であることに注意されたい。

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

参考リソース

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

検証

手順

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

aria-required 属性が存在するかどうかを確認する:
aria-required 属性値が、そのユーザインタフェースコンポーネントに対する正しい required ステートであるかどうかを確認する。

期待される結果

1. 及び 2. の結果が真である。

この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。