ARIA: application ロール

{{ariaref}}application ロールは、要素とその全ての子要素をデスクトップアプリケーションと同様に扱うべきであり、伝統的な HTML 解釈テクニックを使用するべきでないと支援技術に指示します。 このロールは、とても動的でデスクトップ的なウェブアプリケーションを定義するためにのみ使用するべきです。

<div role="application">...</div>

これは、デスクトップアプリケーションの一部であるように、この <div> 要素とその全ての子孫を処理することを定義します。

説明

application ロールは、支援技術に対して、ウェブコンテンツのこの部分に、他の既知の HTML 要素や WAI-ARIA ウィジェットに適合しない要素が含まれていることを示します。 HTML 構造やウィジェットの特別な解釈は一切中止し、マウスやキーボード、タッチのインタラクションを扱うためには、コントロールをブラウザーやウェブアプリケーション(web application)に完全に渡すべきです。

このモードでは、ウェブ作成者は、キーボード入力、フォーカス管理、その他のインタラクションを全て処理する責任があり、支援技術が最終的に何らかの処理を行うとは想定できません。

application ロールに包まれるウェブアプリケーションに、通常のウェブコンテンツと同様に扱われるべき部分が含まれている場合は、document ロールや article ロールを使用するべきです。

背景

歴史的な理由で、特に Windows 上では、スクリーンリーダーやその他の支援技術(AT)は、従来、読み込みが完了した後に、ブラウザーからウェブコンテンツ全体を一度に取得していました。 AT は、視覚障害者がコンテンツを消費するのに最も合理的な表現を独自に構築します。 これは、仮想ドキュメント、ブラウズモード、または類似の用語で呼ばれることがよくあります。 ドキュメントは単一列のビューに合理化されます。 キーボードインタラクションモデルが生成され、これはワードプロセッサにとても似ていて、このモデルでは、行単位、文単位、段落単位で読むことができます。 AT は、リンク、見出し、フォームコントロール、テーブル、リスト、画像のような任意の意味論を読みます。

さらに、長年にわたり、いわゆるクイックナビゲーションキーのセットが確立されているため、視覚障害者は特定の要素タイプを介してページを見ることができます。 このような要素には、通常、見出し、フォームフィールド、リスト、テーブル、リンク、グラフィック、ランドマークリージョンが含まれます。

この全てがうまくいくためには、AT はほぼ全てのキーボード入力を遮り、それを消費し、ブラウザーや他のユーザエージェントに何も送られないようにします。 ウェブページとインタラクションできるように、特定のキー(通常は Enter キー)を押すと、このモードはオフになり、標準的なウィジェットのセットが認識されます。 フォームモードやフォーカスモードとも呼ばれるスクリーンリーダーモードでは、全てのキーボード入力がブラウザーに再び送られます。 Esc キーはブラウズモードに切り替える最も一般的な方法です。

application ロールは、ウェブコンテンツとインタラクションするためにブラウズモードとフォーカスモードの両方を使用する AT において、直接的なインタラクションでアクセス可能な標準的なセットの一部ではないウィジェットのための手段を提供するように設計されています。

関連する WAI-ARIA のロール、ステート、プロパティ

document, article
通常のウェブコンテンツとして扱われるべきアプリケーションの部分を示すために使用します。
aria-activedescendant
アプリケーション内でのフォーカスの管理に使用します。
aria-label
公開されているアプリケーションの名前やウィジェットの目的を提供するために使用します。
aria-describedby
この要素をナビゲートまたは操作するための追加の説明書を含む要素の id 参照を示すのに使用します。
aria-roledescription
スクリーンリーダーが話すために、アプリケーションにもっと説明的なロールのテキストを与えるために使用します。 これはローカライズするべきです。

キーボードインタラクション

キーボードインタラクションは、完全にウェブ制作者のコントロール下にあり、実装されている特定のウィジェットに関連するものでもかまいません。 例えば、スライドアプリケーションでは、矢印キーを使用してスライド上の要素を配置し、ARIA のライブリージョンを介して音声によるフィードバックを使用して位置や他のオブジェクトとのオーバーラップの状態を伝えるウィジェットを作成できます。 フォーカスは、aria-activedescendant によって管理します。

Tab キー、スペースキー、Enter キー、および Esc キーは、アプリケーションで処理する必要があります。 1つの例外は、フォーカスが、ブラウザーからのキーボードナビゲーションをサポートするアプリケーション内の標準ウィジェット(例えば <input> 要素)に設定されている場合です。

必要な JavaScript 機能

keyPress
キーボード入力の処理とフォーカスの制御に使用する。
Click, Touch
あなたのウィジェットにも適切に対処してください。
Changing attribute values
aria-activedescendant は、アプリケーションコンテナ内のフォーカスを管理するために使用されます。 フォーカスやインタラクションのポイントを変更するキーボードやその他のアプリケーションのイベントに応じて設定します。

application ロールには、関連する HTML ウィジェットがないため、完全に自由形式です。 アプリケーションの作成者は、ユーザーがフォーカスのリンボに拘束されたり、ユーザーが抜け出せないものの中にフォーカスを閉じ込められたりしないようにするために全面的な責任を負う必要があります。 ページの他の部分で通常のウェブコンテンツに戻ることを含む、インタラクションの全ての側面を処理する必要があります。 賢明に、そして慎重に使用してください!

application ロールを適切に使用するいくつかの有名なウェブアプリケーションは次のとおりです。

アクセシビリティに関する懸念

application ロールを不適切に使用すると、意図せずにウェブページの情報からのアクセスを奪う可能性があるので、使用には十分注意してください。 あなたが実際にそれを必要とし、他の既知のウィジェットのセットを使うことができない場合に、真剣に考えます。 使用する場合は、application ロールは、例えば <body> 要素ではなく、可能な最も低い共通コンテナに追加するべきです。

仕様

仕様 状態
Accessible Rich Internet Applications (WAI-ARIA) 1.1
application の定義
勧告

優先順位

application ロールを適用すると、この要素の全ての子孫要素がウェブコンテンツではなくアプリケーションコンテンツのように扱われます。 支援技術がウェブコンテンツに与えるであろう読み上げメカニズムは適用されません。

関連情報