フォームエラーにARIAを適用する方法
ほとんどのフォームは、目で見えるユーザーには問題なく動作しますが、支援技術を使用しているユーザーにとっては不十分な場合があります。目で見えるユーザーは赤い枠線やエラーメッセージを確認できますが、スクリーンリーダーを使用しているユーザーには何も聞こえないことがよくあります。
これは、2つのARIA属性と小さなライブリージョンを使用することで解決できます。この変更に必要なコードは50行未満です。
エラーと入力要素を紐付ける方法は以下の通りです。
1. aria-describedby を使用する
入力要素がエラー要素を指し示す必要があります。入力要素に aria-describedby を追加し、その値にエラー用 div の ID を設定します。
例:
- 入力 ID:
email-input - エラー ID:
email-error - コード:
aria-describedby="email-error"
これにより、ユーザーが入力要素にフォーカスした際に、スクリーンリーダーがエラーメッセージを読み上げるようになります。ヘルプテキストがある場合は、複数の ID を追加することも可能です。
2. aria-invalid を使用する
この属性は、入力内容が誤っていることをユーザーに伝えます。エラーが発生したときは aria-invalid を true に、エラーが解消されたときは false に設定します。
よくある間違いは、ラッパーとなる div を赤くスタイリングしながら、aria-invalid は入力要素にのみ設定してしまうことです。これでは不一致が生じます。視覚的なスタイルと ARIA 属性が同じ要素を対象としていることを確認してください。
3. ライブリージョンを追加する
ユーザーが入力している途中でエラーが表示された場合、それに気づかない可能性があります。エラー用の div に aria-live="polite" を使用してください。
aria-live="polite"は、自然な休止中にエラーをアナウンスするようスクリーンリーダーに指示します。- 緊急時でない限り
"assertive"は使用しないでください。フォームのエラーは緊急事態ではありません。
4. 非同期バリデーションを処理する
バックグラウンドでユーザー名や住所のチェックを行う場合、ユーザーはシステムが動作中であることを知る必要があります。
- パターン A: チェック実行中、入力要素に
aria-busy="true"を使用する。 - パターン B: 非表示のライブリージョンを使用して、「ユーザー名を検証中...」といったステータス更新をアナウンスする。
パターン B の方が、さまざまなスクリーンリーダーにおいて信頼性が高いです。
テストは必須です。自動化ツールは便利ですが、手動テストの代わりにはなりません。Windows では NVDA、macOS では VoiceOver を使用してください。
テスト用チェックリスト:
- フィールドに Tab キーで移動する。ラベルが読み上げられること。
- 無効な値を入力する。エラーが読み上げられること。
- 再度フィールドに Tab キーで移動する。ラベルとともにエラーが読み上げられること。
- エラーを修正する。エラーメッセージの読み上げが解消されること。