WCAG 2.2 ガイドライン「4.1.3 ステータスメッセージ」Level AA について
はじめに
WCAG 2.2の「4.1.3 ステータスメッセージ」は、支援技術を利用するユーザーに対して、ステータスメッセージ（操作の結果や状態の変化）を適切に通知することを求めています。この基準では、フォーカスを移動させずにステータスメッセージをプログラム的に認識可能にする必要があります。
1. 基準の概要
要件
マークアップ言語で実装されたコンテンツにおいて、以下を満たすこと：
- ステータスメッセージがプログラム的に決定可能であること。
- 支援技術が、フォーカスを受け取ることなくこれらのメッセージをユーザーに通知できること。
ステータスメッセージの例
- フォーム送信後の成功メッセージ。
- ユーザーの入力ミスに関するエラーメッセージ。
- プロセスの進行状況の通知。
2. 実装方法
a. 操作成功や結果を通知する場合
例1: role="status" を使用
role="status"を用いることで、支援技術に成功メッセージを伝えます。
<div role="status" aria-live="polite">データが正常に送信されました。</div>
b. 入力エラーや警告を通知する場合
例1: role="alert" を使用
エラーが発生した場合に即座に通知するため、role="alert"を使用します。
<div role="alert">メールアドレスの形式が正しくありません。</div>
例2: 必須フィールドの説明
未入力の必須フィールドを明示します。
<form>
<label for="email">メールアドレス:</label>
<input type="email" id="email" aria-required="true" required>
<div role="alert" id="error-message">このフィールドは必須です。</div>
</form>
c. プロセスの進行状況を通知する場合
例1: ログ更新を通知
リアルタイムのログ情報を提供するためにrole="log"を使用します。
<div role="log" aria-live="polite">
ダウンロード進行中: 50%
</div>
例2: プログレスバーを使用
進行状況を視覚的に示しつつ、role="progressbar"を用います。
<div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
ダウンロード進行中: 50%
</div>
3. アクセシビリティのメリット
a. 即時性のあるフィードバック
- フォーカスを移動させる必要がなく、ユーザーが操作中でもリアルタイムでメッセージを受け取れます。
b. 誤操作の防止
- エラーメッセージや入力補助の提供により、ユーザーが修正を迅速に行えます。
c. ユーザー体験の向上
- 状態や結果を明確に伝えることで、ユーザーが操作の進行状況を把握しやすくなります。
4. よくある失敗例とその改善策
a. メッセージがプログラム的に決定不可能
失敗例
- メッセージがただのテキストとして表示され、支援技術に通知されない。
改善策
role="status"やaria-liveを使用して通知をプログラム的に設定します。
b. フォーカスを移動させない通知がない
失敗例
- 入力エラーが発生しても、ユーザーがエラーを視覚的に確認する必要がある。
改善策
role="alert"を用いてエラーメッセージを即座に通知します。
5. テスト方法
a. 手動テスト
- スクリーンリーダーを使用して、ステータスメッセージが正しく通知されるか確認します。
b. 自動テストツール
- AxeやWAVEなどのアクセシビリティテストツールを使用し、
aria-liveやroleの適切な実装を確認します。
まとめ
WCAG 2.2の「4.1.3 ステータスメッセージ」は、ユーザーの操作結果や状態変化を迅速かつ正確に通知するための基準です。
実装ポイント
- 操作の成功やエラーを
role="status"やrole="alert"で通知する。 - プロセスの進行状況をリアルタイムで知らせる。
- 支援技術がメッセージを認識できるよう、プログラム的に設定する。
これにより、すべてのユーザーが操作状況を的確に把握しやすくなります。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。