aria-live属性を使ってフォームのエラーをスクリーンリーダーに伝えよう

はじめに

ユーザの入力に問題があったときに、フォームにエラーを表示する場合、工夫して実装すると、スクリーンリーダー(画面の内容を読み上げるソフト. 全盲の方などが使用する)のユーザにも、エラーが起きたときにエラーの内容を即時に伝えることができます。その実装方法を紹介します。

例

以下のようなフォームを考えます。

<input type="text" class="input" placeholder="数値を入力してください" />
<button class="okbutton" type="button">OK</button>
<div class="error"></div>

input要素に数値でない値を入力してOKボタンを押すと
error要素に「数値を入力してください」というエラーが表示されるとします。

<input type="text" class="input" placeholder="数値を入力してください" />
<button class="okbutton" type="button">OK</button>
<div class="error">数値を入力してください</div>

問題点と解決策

この実装だと、OKボタンを押してエラーが表示されても、スクリーンリーダーはエラーの内容を読み上げません。
error要素にaria-live=assertiveをつけると、OKボタンをスクリーンリーダーにエラーの内容を即座に伝えることができます。

<input type="text" class="input" placeholder="数値を入力してください" />
<button class="okbutton" type="button">OK</button>
<div class="error" aria-live="assertive">数値を入力してください</div>

aria-live属性は、要素に変更があったときに、変更内容をスクリーンリーダーなどの支援技術に伝える属性です。
aria-live属性には、通知するタイミングによって3つの値を設定できます。エラーなど、即時に伝えるべき内容についてはassertiveを使います。

値	内容
off	内容が更新されてもユーザーに伝達しない(デフォルト)
polite	現在の読み上げの終了やユーザー入力時など適切なタイミングで、内容が更新されたときにユーザーに伝達する。
assertive	即座に伝達を行う。

スクリーンリーダーで試してみた

OKボタンを押したとき、以下のように読み上げられました。

NVDAの場合

aria-live=assertiveをつけないとき:
「OK、ボタン、押されました」
aria-live=assertiveをつけたとき:
「OK、ボタン、押されました、数値を入力してください」

VoiceOverの場合

aria-live=assertiveをつけないとき:
「OK」
aria-live=assertiveをつけたとき:
「OK、数値を入力してください」

サンプル(jsfiddle)