Accessibility
Guidelines

4.1.3 コンテンツの変更をユーザーに知らせる

この項目の目的は、フォーカスが与えられてないコンテンツの変更をより多くのユーザーが認識できるようにすることである。 これは、スクリーンリーダーでの音声読み上げでコンテンツを閲覧しているユーザーに特に効果がある。視覚的にステータスメッセージを読めない場合、必要なステータスに気づけず操作できなくなることがあるからだ。 コンテンツに適切な役割を割り当てることで、スクリーンリーダーなどの支援技術が変更を伝えてくれる。

ステータスメッセージとは コンテンツへのアクションの成功や結果、処理の進行状況やエラー情報など。 なお、コンテキストの変化はステータスではない。

検索結果表示画面を例にした場合、

  • 検索結果が表示される

は、コンテキストの変化に関する情報になるため、ステータスメッセージには含まれない。

  • 検索実行のアクション後に表示される「検索中…」というテキスト
  • 検索実行エラー時の「検索キーワードに記号は含めません」というエラーテキスト

などステータスについて表示されるテキストはステータスメッセージに含まれる

レビュー・テスト方法

  • コードレビュー時、適切なライブリージョンが設定されていること
  • コンテンツが変更されたときに、支援技術が適切に読み上げること

実装方法

入力フォームでのエラー表示

良い実装例

<div id="error" role="alert" aria-live="assertive"></div>

悪い実装例

role="alert" のみ指定されている。 role属性をサポートしていないブラウザがあるので、WAI-ARIAの aria-live="assertive"も併用する。

<div id="error" role="alert"></div>

参考文献