WCAG2.1 AA 準拠

4.1.3 ステータスメッセージ

適合レベル:AA

概要

ステータスメッセージ(通知や状態の変化)が、スクリーンリーダーでも伝わるようする。

対応方法

フォーム
・フォームエラーメッセージ表示箇所に、role="alert" aria-live="assertive"のついた要素を用意しておく(要素自体をJSで追加するのはNG)
フォーム以外の通知メッセージ
・aria-live="polite"でユーザーの操作が終了した後に、支援技術にステータス変更を伝える
(例:フォームが正常に送信されたことを通知するメッセージなど)
・aria-live="assertive"で重要な変更が発生した際に、即座に通知する。ユーザーの操作中であっても割り込んで伝える必要がある場合に使用
(例:エラーメッセージや、重要な警告)

エラーが表示されるかについては3.3.1
エラーの文言がわかりやすいかについては3.3.3
エラー(に限らず通知全般)をARIAなどで補助することについては4.1.3

各ページの検査結果

ページ名 検査結果 達成基準チェックリスト
フロントエンド, UI/UX, アクセシビリティのリベロジック株式会社
https://www.liberogic.jp/
該当なし 達成基準チェックリストを見る
サービス | リベロジック株式会社
https://www.liberogic.jp/service/
該当なし 達成基準チェックリストを見る
フロントエンド実装 | サービス | リベロジック株式会社
https://www.liberogic.jp/service/frontend/
該当なし 達成基準チェックリストを見る
ヘッドレスCMS構築 | サービス | リベロジック株式会社
https://www.liberogic.jp/service/headless_cms/
該当なし 達成基準チェックリストを見る
UIデザイン | サービス | リベロジック株式会社
https://www.liberogic.jp/service/design/
該当なし 達成基準チェックリストを見る
アクセシビリティ対応 | サービス | リベロジック株式会社
https://www.liberogic.jp/service/accessibility/
該当なし 達成基準チェックリストを見る
様々なソリューション | サービス | リベロジック株式会社
https://www.liberogic.jp/service/other_services/
該当なし 達成基準チェックリストを見る
私たちについて | リベロジック株式会社
https://www.liberogic.jp/about/
該当なし 達成基準チェックリストを見る
実績紹介 | リベロジック株式会社
https://www.liberogic.jp/works/
該当なし 達成基準チェックリストを見る
トピックス | リベロジック株式会社
https://www.liberogic.jp/topics/
該当なし 達成基準チェックリストを見る
お問い合わせ | リベロジック株式会社
https://www.liberogic.jp/contact/
適合 達成基準チェックリストを見る