このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
status ロールの使用
説明
このテクニックは、status ロールを使用する方法を示し、ブラウザーと支援技術に及ぼす影響について説明します。
status ロールは、ライブリージョンの一種であり、内容はalert を正当化するほど重要ではないユーザーのためのアドバイザリ情報であり、多くの場合ステータスバーとして表示されます。 ロールが要素に追加されると、ブラウザーは、支援技術製品にアクセス可能なステータスイベントを送信し、ユーザーに通知することができます。
ステータス情報のコンテンツは、ステータスオブジェクト内に提供されなければならず、このオブジェクトがフォーカスを受け取らないようにするべきです。 ページの別の部分がステータスに表示されるものを制御する場合、関係はaria-controls 属性を介して明示的に指定するべきです。
支援技術は、ステータスをレンダリングするために点字ディスプレイのいくつかのセルを予約することができます。
ユーザーエージェントと支援技術への影響
status ロールが要素に追加されるか、またはそのような要素が可視になると、ユーザーエージェントは以下を行うべきです。
- オペレーティングシステムのアクセシビリティ API で
statusロールを持つものとして要素を公開します。 - オペレーティングシステムのアクセシビリティ API がサポートされている場合は、アクセシビリティ API を使用してアクセス可能なステータスイベントを発生させます。
支援技術製品は、そのようなイベントをリスンし、それに応じてユーザーに以下を通知するべきです。
- スクリーンリーダーは、現在のステータスをアナウンスするための特別なキーを提供することがあり、これはステータスのライブリージョンの内容を提示するべきです。
aria-live="assertive"が設定されている場合を除いて、ユーザーがアイドル状態になったときにアナウンスするべきです。 - スクリーン拡大鏡でステータスが拡大されることがあります。
メモ:支援技術がどのようにこの技術を扱うべきかについての意見は異なる場合があります。 上記の情報は、これらの意見の 1 つで、したがって規範的ではありません。
例
例 1: HTML で status ロールを追加する
以下のスニペットは、status ロールが html ソースコードに直接追加される仕組みを示しています。
html
<p role="status">変更は自動的に保存されました。</p>動作する例
注
使用された ARIA 属性
関連する ARIA 技術
互換性
- Paciello Group は、2014 年のブログ記事を通じて互換性に関するいくつかのデータを発表しました。ARIA ライブリージョンのスクリーンリーダーのサポート
- TBD: 一般的な UA と AT 製品の組み合わせに関するサポート情報を追加する
その他のリソース
- status ロールのWAI-ARIA 1.0（2014 年）よりの以前の勧告