ARIA: document ロール
複雑な複合ウィジェットやアプリケーションで一般的に使用される文書 (document) ロールは、コンテキストを読み取りモードに切り替えることを支援技術を知らせることができます。 文書 (document) ロールは、読み取りモードまたは閲覧モードを持つ支援技術に、この要素に含まれるコンテンツを文書モードを使用して読み取るように指示します。
<div role="dialog">
...
<div id="InfoText" role="document" tabindex="0">
<p>いくつかの情報テキストがここに入ります。</p>
</div>
...
<button>閉じる</button>
</div>
この例は、いくつかのコントロールと、支援技術のユーザーがタブ移動で読むことができる情報テキストを含むセクションを備えたダイアログウィジェットを示しています。
説明
デフォルトでは、ウェブページは文書 (document、ドキュメント) として扱われ、支援技術 (AT) は、新しいウェブページに入るとき閲覧モードまたは読み取りモードにします。 このモードは、ウィジェットロールやアプリケーション (application) ロールなど、さまざまなロールを通じて変更できます。 文書 (document) ロールは、AT を閲覧モードまたは読み取りモードに戻します。
一般的に、アプリケーションロールまたは他のインタラクティブなウィジェットロール内に配置される文書 (document) ロールは、利用可能な場合、支援技術のユーザーが閲覧モードまたは仮想読み取りモードを使用して読むべきである複雑な複合ウィジェットのセクションを示すために使用します。
読み取りモードを持つ AT は、ウィジェットロールまたはアプリケーションロールの設定を持つ要素を除くすべての要素に対して読み取りモードをデフォルトとしているため、文書ロールは、静的リッチテキストとして読むべきであるウィジェットまたはアプリケーション内のフォーカス可能な要素に対してのみ役立ちます。 ウィジェット内のテキストを含む要素に role="document" と tabindex="0" を追加すると、スクリーンリーダーのユーザーは Tab キーを押して文書要素にフォーカスを置き、スクリーンリーダーの読み取りカーソルでテキストを読むことができます。
支援技術は、コンテキストを文書モードに戻すべきであり、場合によっては、親の動的コンテキスト用に配線されたコントロールから横取りすることで、上矢印や下矢印のキーボードイベントなどの標準入力イベントを再度有効にして、読み取りカーソルを制御します。
記事 (article) ロールとは対照的に、文書 (document) ロールは、文書ロールを持つ他の要素との関係はなく、単にそれ含む複合ウィジェットとの関係があるだけです。 記事は関連記事を持つことができます。
関連する WAI-ARIA のロール、ステート、プロパティ
aria-expanded-
文書要素が折りたたみ可能である場合は、
trueまたはfalseの値を含み、文書が現在展開されているか折りたたまれているかを示します。 他の値には、文書が折りたたまれないことを意味するデフォルトのundefinedが含まれます。 tabindex="0"-
支援技術のユーザーがそれにタブ移動してすぐに読み始められるように、それをフォーカス可能にするために使用します。
キーボードインタラクション
tabindex="0" 属性/値のペアを設定することで、要素をフォーカス可能にするべきです。 これにより、ユーザーはそれにタブ移動でき、自動的に読み取りモードが起動し、内容をすぐに読むことができるようになります。
必要な JavaScript 機能
なし (任意の属性が必要とする場合を除く。 例えば、文書 (document) が折りたたみ可能である場合、aria-expanded のステートと値を維持する必要があります。)
例
例として、Gmail と 1 つの会話ビューがあります。 GMail はウェブアプリケーションです。 Gmail の場合、ユーザーエージェントとのやりとりのほとんどがアプリケーションによって奪われます。 ただし、会話の主題を含む 1 つの会話の開始見出しにキーボードフォーカスが設定されている場合、スクリーンリーダーのユーザーは読み取りモードのコマンドを使用してメッセージを読んだり、展開したり、折りたたんだり、操作したりできます。 [戻る] ボタンをアクティブ化するか、関連するキーを押すことによって、フォーカスがメッセージリストに戻ると、アプリケーションとの直接やりとりモードが再び起動し、矢印キーを使用してリスト内の別の会話に移動できます。
ベストプラクティス
tabindex 属性に値 0 を設定することにより、文書ロールを持つ項目がフォーカス可能であることを常に確認してください。 これにより、項目がタブ順序にも含まれるようになります。
追加の利点
文書ロールは、ユーザーがスクリーンリーダーの標準コマンドで読むべき内容であることを明確に示すことによって、支援技術の振る舞いを間接的に制御する簡単な方法です。
仕様書
| Specification |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # document |
スクリーンリーダーのサポート
関連情報
- WAI-ARIA ロール
alertdialog ロールの使用ARIA: alert ロールARIA: application ロールARIA: article ロールARIA: banner ロールARIA: button ロールARIA: cell ロールARIA: checkbox ロールARIA: columnheader ロールARIA: combobox ロールARIA: command ロールARIA: comment ロールARIA: complementary ロールARIA: composite ロールARIA: contentinfo ロールARIA: definition ロールARIA: dialog ロールARIA: directory ロール非推奨;ARIA: document ロールARIA: feed ロールARIA: figure ロールARIA: form ロールARIA: generic ロールARIA: grid ロールARIA: gridcell ロールARIA: heading ロールARIA: img ロールARIA: input ロールARIA: landmark ロールARIA: list ロールARIA: listbox ロールARIA: listitem ロールARIA: main ロールARIA: mark ロールARIA: marquee ロールARIA: math ロールARIA: menu ロールARIA: menubar ロールARIA: menuitem ロールARIA: menuitemcheckbox ロールARIA: menuitemradio ロールARIA: meter ロールARIA: navigation ロールARIA: none ロールARIA: option ロールARIA: radio ロールARIA: radiogroup ロールARIA: range ロールARIA: region ロールARIA: roletype ロールARIA: row ロールARIA: rowgroup ロールARIA: rowheader ロールARIA: scrollbar ロールARIA: search ロールARIA: searchbox ロールARIA: section ロールARIA: sectionhead ロールARIA: select ロールARIA: separator ロールARIA: spinbutton ロールARIA: structure ロールARIA: suggestion ロールARIA: switch ロールARIA: tab ロールARIA: table ロールARIA: tablist ロールARIA: tabpanel ロールARIA: term ロールARIA: textbox ロールARIA: timer ロールARIA: tooltip ロールARIA: tree ロールARIA: treegrid ロールARIA: treeitem ロールARIA: widget ロールARIA: window ロールARIA: 文書構造ロールgroup ロールの使用link ロールの使用log ロールの使用presentation ロールの使用progressbar ロールの使用slider ロールの使用status ロールの使用toolbar ロールの使用