ARIA: application ロール

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

html

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

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

説明

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

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

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

背景

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

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

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

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

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

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

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

必要な JavaScript 機能

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

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

例

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

グーグルの Docs、Sheets、Slides
CKEditor と TinyMCE の WYSIWYG ウェブエディターは、Mozilla Developer Network で使用されているようなものです。
Gmail の一部 (訳注：グーグルから使っていないという情報あり)

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

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

仕様書

Specification
Accessible Rich Internet Applications (WAI-ARIA) # application

優先順位

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