適用 (対象)
Accessible Rich Internet Applications (WAI-ARIA) をサポートするウェブコンテンツ技術。
これは、次の達成基準に関連する達成方法である:
- 達成基準 1.3.1: 情報及び関係性 (参考)
- 達成基準 3.3.3: エラー修正の提案 (十分)
解説
この達成方法の目的は、(提示を通して必須であることが示されている) フォームフィールドが、フォームの正常送信のために必須であることを、プログラムの指標として提供することである。
要素が必須であるという事実は多くの場合、(テキスト又は非テキストのシンボル、又は入力が必須であることを示すテキスト、又は色/スタイルを介して) 視覚的に提示されるが、これは、フィールド名の一部としてプログラムによる解釈が可能にはならない。
WAI-ARIA aria-required プロパティは、送信前に利用者の入力が必須であることを示す。aria-required プロパティは、true 又は false の値を持つことができる。たとえば、利用者が住所のフィールドに入力しなければならない場合、aria-required は true に設定される。
aria-required="true" の使用は、アスタリスクや他のテキストシンボルがプログラム的にフィールドに関連付けられている場合であっても、一部の支援技術の利用者に対して required プロパティによって補強できるので、有益であるかもしれない。
多くの場合、要素が必須であるという事実は、(コントロールの後の符号や記号のように) 視覚的に提示される。視覚的な提示に加えて aria-required プロパティを使用することは、ユーザエージェントが、この重要な情報をユーザエージェント固有の方法で利用者に伝えることを、はるかに簡単にする。XHTML や HTML とともに WAI-ARIA ステート及びプロパティを提供する方法については、Supporting ARIA in XHTML and HTML 4.01 を参照のこと。なお、WAI-ARIA ステート及びプロパティは他の言語とも互換性がある。詳しくはその言語における文書の活用を参照のこと。
注記 にあるリンク「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 を参照できる。
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" によって示されている:
<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"
"https://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 の結果が真である。