アクセシブルなエラーチェックを組み入れたいフォーム、例えば問い合わせフォームがあります。よくある問題点は電子メールアドレスが有効ではない、あるいは名前欄に姓も名も含まれていないことです。
始めに、aria-required の手法に関する記事を読んでいないのでしたら、まずはそちらをお読みください。ここでは、その手法を拡張します。
こちらがシンプルなフォームです:
<form method="post" action="post.php">
<fieldset>
<legend>Please enter your contact details</legend>
<label for="name">Your name (required):</label>
<input name="name" id="name" aria-required="true"/>
<br />
<label for="email">E-Mail address (required):</label>
<input name="email" id="email" aria-required="true"/>
<br />
<label for="website">Website (optional):</label>
<input name="website" id="website"/>
</fieldset>
<label for="message">Please enter your message (required):</label>
<br />
<textarea name="message" id="message" rows="5" cols="80"
aria-required="true"></textarea>
<br />
<input type="submit" name="submit" value="Send message"/>
<input type="reset" name="reset" value="Reset form"/>
</form>
ストレートでシンプルですが、この時点では美しさの賞は与えられないでしょう。:-)
有効性の確認とユーザへの通知は、いくつかのステップで構成されます:
aria-invalid 属性を設定して、値を “true” にします。alert’ 関数を使用した押しつけがましいダイアログボックスではなく、シンプルな WAI-ARIA のウィジェットを使用します。これはユーザに通知を行いますが、ユーザは割り込まれることなくフォームとの対話を続けられます。これらのすべては input がフォーカスを失ったとき、つまり “onblur” ハンドラの状況で発生します。
私が作成した JavaScript コードは以下のとおりであり、“head” の終了タグの前に挿入しました:
<script type="application/javascript">
function removeOldAlert()
{
var oldAlert = document.getElementById("alert");
if (oldAlert)
document.body.removeChild(oldAlert);
}
function addAlert(aMsg)
{
removeOldAlert();
var newAlert = document.createElement("div");
newAlert.setAttribute("role", "alert");
newAlert.setAttribute("id", "alert");
var msg = document.createTextNode(aMsg);
newAlert.appendChild(msg);
document.body.appendChild(newAlert);
}
function checkValidity(aID, aSearchTerm, aMsg)
{
var elem = document.getElementById(aID);
var invalid = (elem.value.indexOf(aSearchTerm) < 0);
if (invalid) {
elem.setAttribute("aria-invalid", "true");
addAlert(aMsg);
} else {
elem.setAttribute("aria-invalid", "false");
removeOldAlert();
}
}
</script>
checkValidity 関数中核をなすのが checkValidity 関数です。これは 3 つの引数をとります: 検証を行う input の ID、有効性を確かめるために検索する語句、alert に挿入するエラーメッセージです。
値が有効かを調べるため、この関数は input の値 indexOf が -1 より大きいかを確認します。検索語句が値の中で見つからないときに、-1 以下の値が返ります。
値が無効であるとき、この関数は 2 つのことを行います:
aria-invalid 属性を “true” に設定します。これは、そこに無効な内容物があることをスクリーンリーダーに示します。addAlert 関数を呼び出します。検索語句が見つかった場合は aria-invalid 属性を “false” にリセットします。加えて、まだ残っているかもしれない alert を削除します。
addAlert 関数この関数は始めに、古い alert を削除します。この機能はシンプルです: id が “alert” である要素を探して、発見した場合はその要素を Document Object Model から削除します。
次にこの関数は、alert のテキストを保持する div 要素を作成します。これは “alert” という ID を持ちます。また、“alert” が設定された role を持ちます。これは属性名に “aria” がついていませんが、実は ARIA から生まれたものです。その理由は role が、簡素化のため単純に HTML へ移植された、XHTML Role Attribute Module に基づいているためです。
テキストは div 要素に追加され、また div 要素はドキュメントに追加されます。
これが発生したとき、その div が現れるとすぐに Firefox は支援技術に対して “alert”イベントを発生させます。ほとんどのスクリーンリーダーは自動的にその div 要素を拾い上げて、読み上げるでしょう。これはパスワードを保存したいかを尋ねる、Firefox の通知バーに似ています。ここで作成した alert はボタンを持たず、何が誤っているかを伝えるのみです。
onblur” イベントのマジックを加えるあとはイベントハンドラの追加が残っています。以下のように電子メールアドレスと名前の入力欄の変更が必要です:
<input name="name" id="name" aria-required="true"
onblur="checkValidity('name', ' ', 'Invalid name entered!');"/>
<br />
<input name="email" id="email" aria-required="true"
onblur="checkValidity('email', '@', 'Invalid e-mail address');"/>
サンプルのテスト
Firefox 3 およびサポート済みのスクリーンリーダーを使用している場合は、以下を試してみましょう:
どちらのケースでも問題のフィールドへフォーカスを戻すと、スクリーンリーダーはそのフィールドのデータが無効であることを伝えるでしょう。JAWS 9 はこれをサポートしていますが JAWS 8 は未サポートであり、サポートしているスクリーンリーダーの前バージョンで動作するわけではありません。
(required)” と aria-required 属性の両方を置いている理由は?Web サイトのアクセシビリティは、クライアントサイドの検証向けにアクセシブルな alert を提供することで大きく向上します。ユーザにとっては、20 個ほどのフィールドを埋めて送信するとフィールド 3 のデータが無効であるとわかるだけで、すべてのフィールドで値が残っているかを見直さなければならなかったりいくつかの情報を余計に入力したりすることより失望させられることはありません。