エラー通知を支援技術 (AT) に通知する方法【ValidationEngine例】｜ウェブアクセシビリティ対応
こんにちは、webエンジニアのゾノ( @ozonosho )です。
今回は記事ではウェブアクセシビリティ対応の１つ「エラー通知を支援技術 (AT) に通知する」方法をご紹介いたします。
フォームで入力エラー（例：必須項目の入力が漏れている）が発生した際、フォームを送信させず動的にエラーを表示してあげる挙動のサイトは多いと思います。
しかしながら、AT （スクリーンリーダーなど） を利用してサイトを閲覧している場合、エラーテキストを動的に表示するだけではエラーに気付くことができません。
エラー内容を自動的に読みあげられるようにする必要があります。
※詳細はこちら
『ARIA19: エラーを特定するために、ARIA role=alert 又はライブリージョン (Live Regions) を使用する』
※その他参考記事はこちら
https://www.w3.org/TR/wai-aria-1.2/#dfn-live-region
https://www.w3.org/TR/wai-aria-practices-1.1/examples/alert/alert.html
これらの記事にあるとおり、下記のような対応をおこないます。
- ウェブアクセシビリティ対応例
-
- あらかじめエラーを表示させるための要素（divタグなど）を用意しておく
- エラーを表示させる要素のrole属性に「alert」を設定する
- フォームのバリデーションでエラーが発生した際、用意したエラー表示要素内にエラー内容を出力する
フォーム送信前にバリデーションをおこなっている場合はエラー発生後にJS等で動的にエラーを追加し、フォーム送信後にバリデーションをおこなっている場合はページ再表示時にPHPやHTMLでエラーを追加します。
ValidationEngineを利用してエラー表示している場合
僕が制作したサイトでは「ValidationEngine」を利用して送信前のバリデーションをおこなっていたので、このライブラリを改修する必要がありました。
まずはフォーム内の各項目にエラー表示用の要素を追加する
エラー表示用の要素はあらかじめ出力しておく必要があるため、ページ読み込み時にValidationEngineを適用するフォーム内の各項目にエラー表示用の要素を追加します。
//ValidationEngineを適用するフォームのclass名を「form-validation」とした場合
$(function(){
//フォームの各項目前にエラー通知用divを追加
$('.form-validation input').before('<div role="alert"></div>');
$('.form-validation select').before('<div role="alert"></div>');
$('.form-validation textarea').before('<div role="alert"></div>');
}次に、エラー発生時のエラー内容を用意した要素内に出力させる
ValidationEngineをそのまま利用すると狙った位置にエラーを出力できないため、下記ファイルを書き換えます。
/js/jquery.validationEngine.js 1698行目（v3.1.0）
//field.before(prompt);
field.prev('div[role="alert"]').html(prompt);元々のコード「field.before(prompt);」をコメントアウトして、用意した<div role=”alert”>要素内にエラーを出力するようにします。
これでスクリーンリーダーの読み上げ機能を利用している方もエラー発生をキャッチできるようになります。
おわりに
以上、今回の記事ではウェブアクセシビリティ対応の１つ「エラー通知を支援技術 (AT) に通知する」方法を紹介させていただきました。
当サイトではWordPressのカスタマイズ依頼を請け負っています。実現したい機能・要望がある方はぜひ下記ページよりご相談ください。
