ステータスメッセージ

Silktide は、トースト、スナックバー、通知バナー、成功・エラーのフィードバックなどのステータスメッセージが、表示されたときにで読み上げられるよう設定されているか確認するよう促します。

これはです。どの要素がステータス表示なのかを自動化で確実に判定することはできません（クラス名、言語、ミニファイされたマークアップは無限に変化するため）。そのため、Silktide は各ページでこのプロンプトを表示し、人が確認します。

<!-- サイレント: 表示されてもスクリーンリーダーは読み上げません -->
<div class="toast">カートに商品を追加しました</div>

<!-- 読み上げ: role="status" によってライブリージョンになります -->
<div class="toast" role="status">カートに商品を追加しました</div>

重要な理由

ステータスメッセージは、ユーザーが直前に行った操作の結果を知らせます。「フォームを保存しました」「カートに商品を追加しました」「3件の結果が見つかりました」「問題が発生しました」などです。視覚に頼るユーザーはメッセージが表示されることに気付きますが、スクリーンリーダーは現在フォーカスがあるものを読み上げるため、ページ上の別の場所に表示されたメッセージは読み上げません。ユーザーがフォームを送信しても何も聞こえず、成功したのか、失敗したのか、まだ読み込み中なのか判断できません。

メッセージをとしてマークすると、フォーカスを移動せずに、表示された瞬間にが読み上げるようになります。

チェックする内容

ページ上のすべてのステータス表示（トースト、スナックバー、フラッシュメッセージ、インラインの成功・エラーバナー、結果件数の更新）を見つけます。
それぞれの要素、またはその要素に内容を書き込む永続的なコンテナに、role="status"、role="alert"、role="log"、または aria-live="polite" / aria-live="assertive" が付いていることを確認します。
ページの読み込み時から存在するライブリージョンコンテナを優先し、実行時にはメッセージのテキストだけを挿入します。メッセージと同時に作成されたライブリージョンは、読み上げられないことがよくあります。

ページにステータスメッセージがない場合、またはすべてが正しく読み上げられる場合は、この検出結果をします。

修正方法

メッセージコンテナにライブリージョンのロールを追加します。
- 確認や結果件数などの日常的な更新には role="status" を使用します。
- エラーなど、重要で時間的制約のあるメッセージには role="alert" を使用します。
または、属性を直接使用します。 aria-live="polite"（発話が一段落するまで待つ）または aria-live="assertive"（直ちに割り込む）を指定します。

Silktide によるこのチェックのテスト方法

Silktide はステータス表示を自動で確実に検出できません。クラス名から推測すると誤った安心感を生み、生成されたマークアップや英語以外のマークアップを見落とすためです。そのため、このチェックでは各ページにつき1件のレビュープロンプトを表示し、確認すべき内容を説明します。