Accessibility
Guidelines

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

適合レベル

AA

※各レベルについては適合レベルとはをご覧ください

概要

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

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

検索結果の画面を例にした場合、「検索結果が表示される」は、コンテキストの変化に関する情報になる。 そのため、ステータスメッセージには含まれない。 以下のように、ステータスについて表示されるテキストはステータスメッセージに含まれる。

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

テスト・チェック方法

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

実装方法

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

悪い実装例

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

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

良い実装例

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

参考文献