2022.02.06

エラー通知を支援技術 (AT) に通知する方法【ValidationEngine例】|ウェブアクセシビリティ対応

こんにちは、webエンジニアのゾノ( @ozonosho )です。

今回は記事ではウェブアクセシビリティ対応の1つ「エラー通知を支援技術 (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

これらの記事にあるとおり、下記のような対応をおこないます。

ウェブアクセシビリティ対応例
  1. あらかじめエラーを表示させるための要素(divタグなど)を用意しておく
  2. エラーを表示させる要素のrole属性に「alert」を設定する
  3. フォームのバリデーションでエラーが発生した際、用意したエラー表示要素内にエラー内容を出力する

フォーム送信前にバリデーションをおこなっている場合はエラー発生後に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”>要素内にエラーを出力するようにします。

これでスクリーンリーダーの読み上げ機能を利用している方もエラー発生をキャッチできるようになります。

おわりに

以上、今回の記事ではウェブアクセシビリティ対応の1つ「エラー通知を支援技術 (AT) に通知する」方法を紹介させていただきました。