status、alert、logロール

一部のARIA roleは要素をライブリージョンに変え、適切な通知優先度を自動的に設定します。そのため、記述するマークアップを減らせます。

status roleは、politeに更新されるリージョンを示します。保存完了やコピー完了のメッセージなど、控えめな確認に最適です。📋

role statusを使うことは、aria-liveにpoliteを設定する省略記法です。より明確で意味のある意図を示しながら、同じ動作を得られます。

alert roleは、内容が表示された瞬間にassertiveで通知します。今すぐ注意が必要な場合に使ってください。⚠️

alertは、aria-live assertiveにaria-atomic trueを加えたように動作します。割り込みを行い、テキスト全体を1つのメッセージとして読み上げます。

log roleは、チャットスレッドやアクティビティフィードのように、新しい項目が順番に追加されるコンテンツに適しています。politeで読み上げられます。

logは、古いメッセージも重要で順序に意味があることを示します。そのため、支援技術は追加された内容を到着した順に読み上げます。

穏やかな確認にはstatusを、問題の通知にはalertを選びます。保存済みバッジはstatusで、フォームの送信を妨げるエラーはalertです。

alertロールを使いすぎると、何もかもが割り込みになり、騒がしく感じられます。本当のエラーや緊急性の高い警告に限定して使ってください。

生のライブリージョンと同様に、role statusを持つ要素はテキストを挿入する前に存在させておく必要があります。そうすれば、スクリーンリーダーがあらかじめ監視できます。

丁寧さを示すだけでなく、これらのrolesはそのリージョンが何であるかを説明します。この意味の明確さは、スクリーンリーダーにも、次に開発を担当する人にも役立ちます。

statusは控えめに、alertは強く通知し、logは順序付けられたストリームを保つことを学びました。更新の重要度に合ったロールを選んでください。✅