2. WAI-ARIAを使用する

この章は参考情報である。

支援技術が、文書の一部の後ろにあるセマンティックスを決定できない場合、またはユーザーが効果的に使用可能な方法で文書のすべての部分に移動できない場合、複雑なウェブアプリケーションはアクセシブルでなくなる（WAI-ARIA Primer [ARIA-PRIMER]を参照）。WAI-ARIAは、セマンティックスをロール（ユーザーインターフェイス要素を定義する種類）と、ロールでサポートされるステートおよびプロパティに分割する。

著者は、要素がすでにステートおよびプロパティに適切な暗黙のWAI-ARIAセマンティックスを持たない限り、ライフサイクルの間に、WAI-ARIAロールおよび適切なステートおよびプロパティ（aria-*属性）に文書内の要素を関連付ける必要がある。ロール属性は、ホスト言語要素の暗黙的なロールよりも優先されると同時に、このような場合において同等のホスト言語のステートおよびプロパティは、競合を避けるために優先される。

2.1. WAI-ARIAロール

WAI-ARIAロールは、Role Attributeで定義されるrole属性と類似の、role属性を使用する要素上で設定される[ROLE]。

<li role="menuitem">Open file…</li>

この仕様で定義されるロールは、文書ランドマークおよびWAI-ARIAロールタクソノミーを含む。

このタクソノミーおよびその期待される動作におけるロールは、RDF/OWLを用いてモデル化される[OWL]。ロールタクソノミーの機能は、各ロールに対して以下の情報を提供する：

ロールの有益な説明
関連するロールに関する階層情報（たとえば、directoryはlistの一種である）
ロールのコンテキスト（たとえば、listitemはlistの内部に含まれる）
他の仕様で関連する概念の参照
（class階層構造に類似の）セマンティックの継承を可能にするタイプ階層構造を提供するためのOWLの使用
各ロールに対するサポートされるステートおよびプロパティ（たとえば、checkboxはaria-checked（ステート）によってチェックされるものをサポートする）

付随するロールは、支援技術に各要素を扱うための方法に関する情報を与える。

2.2. WAI-ARIAステートおよびプロパティ

WAI-ARIAは、さまざまなOSプラットフォーム上のプラットフォームのアクセシビリティーAPIをサポートするために使用されるステートおよびプロパティ一式を提供する。支援技術は、公開されたユーザーエージェントのDOMを通して、またはプラットフォームのアクセシビリティーAPIへのマッピングを通して、この情報にアクセスしてもよい。ロールと組み合わせる場合、ユーザーエージェントは、いつでもユーザーに伝えるためのユーザーインターフェイス情報を支援技術に提供することができる。ステートまたはプロパティの変化は、支援技術に通知をもたらす。これは、変更が発生したことをユーザーに通知するかもしれない。

以下の例において、リスト項目（html:li）がチェック可能なメニュー項目を作成するために使用されており、JavaScriptのイベントがaria-checkedの値を切り替えるためにマウスおよびキーボードのイベントを取り込む。ロールは、この単純なウィジェットの動作をユーザーエージェントに知らせるために使用される。ユーザーアクションとともに変化する属性（aria-checkedなど）は、ステートおよびプロパティの節で定義される。

<li role="menuitemcheckbox" aria-checked="true">Sort by Last Modified</li>

管理されたステートと呼ばれる一部のアクセシビリティーステートは、ユーザーエージェントによって制御される。管理されたステートの例は、キーボードフォーカスおよび選択を含む。管理されたステートは多くの場合、スタイルの変更を定義するために対応するCSS擬似クラス（:focusや::selectionなど）を持つ。対照的に、この仕様におけるステートは一般に著者によって制御され、管理されないステートと呼ばれる。aria-posinsetおよびaria-setsizeのような一部のステートは、ユーザーエージェントによって管理されるが、DOMが完全でなくかつユーザーエージェントの計算に誤りをもたらす場合、著者はステートを上書きすることができる。ユーザーエージェントは、管理されたステートと管理されないステートの両方をプラットフォームアクセシビリティーAPIにマッピングする。

ほとんどのモダンなユーザーエージェントは、CSS属性セレクター（[CSS]）をサポートし、同等の機能を実現するのに必要なスクリプトの量を減らす、WAI-ARIA属性情報に基づくUIの変更を著者に作成できるようにする。次の例において、CSSセレクターは、aria-checked属性値に基づき、テキストが太字でありかつチェックマークの画像が表示されるかどうかを決定するために使用される。

[aria-checked="true"] { font-weight: bold; }
[aria-checked="true"]:before { background-image: url(checked.gif); }

CSSがチェックマークの視覚的表現を切り替えるために使用されない場合、著者はmenuitemcheckboxがチェックされてるかどうかを示す画像を管理するために追加のマークアップおよびスクリプトを含めるかもしれない。

<li role="menuitemcheckbox" aria-checked="true">
  <img src="checked.gif" role="presentation" alt="">
  <!-- note: additional scripts required to toggle image source -->
  Sort by Last Modified
</li>

2.3. フォーカスの管理

アプリケーションがユーザー入力を提供する場所をユーザーに要求するため、applicationは、使用時にフォーカスをともなう要素を常に持つべきである。著者は、ユーザー操作でない限り、フォーカスをもつ要素を破壊または画面外にスクロールしないことを勧める。すべてのインタラクティブオブジェクトはフォーカス可能になるべきである。複合インタラクティブコントロールあらゆる部分は、キーボードショートカットのような、フォーカス可能であるか、またはコントロールの機能を達成するための文書化された別の方法を持つ必要がある。任意のインタラクティブ要素にフォーカスを移動するためにキーボードのユーザーに対して、著者は、タブ移動または他の標準的なナビゲーション技術のいずれかを通して、明白な、検出可能な方法を維持することを勧める。User Agent Accessibility Guidelines、ガイドライン9（[UAAG]、ガイドライン9）を参照のこと。

標準的なHTMLおよび基本的なWAI-ARIAウィジェットを使用する場合、アプリケーション開発者は、単純にタブ順序を操作したり、文書における要素にキーボードショートカットを作成するためにスクリプトを使用したりすることができる。より複雑なウィジェットの使用は、開発者がそのウィジェット内でフォーカスを管理する必要がある。SVG Tinyは、デフォルトで文書の順序に従い、かつシステム依存入力機能（ほとんどのデスクトップコンピュータ上でTABキー）を使用して実装されるべき類似のナビゲーション"リング"メカニズムを提供する。SVGの著者は、フォーカス可能な属性を操作することでナビゲーション順序において要素を置いてもよく、著者が要素のナビゲーション属性を変更することで動的にナビゲーション順序を指定してもよい。

WAI-ARIAは、"コンポジット"ウィジェットとしても知られる、多数の"管理コンテナ"ウィジェットを含む。適切な場合、コンテナはアクティブであった最後の子孫を追跡する責任がある（デフォルトは通常コンテナにおける最初の項目である）。フォーカスがコンテナを残してかつ、後で再びフォーカスされる場合、コンテナが使用可能で一貫性のある戦略を維持することが不可欠である。例外が存在してもよい一方で、以前にフォーカスされたコンテナが再びフォーカスされる場合、コンテナが最後にフォーカスされた際にアクティブな子孫と同じ子孫をアクティブにすることが推奨される。例外は、コンテナウィジェットのコンテンツが変更されている場合、およびフォーカスがメニューバーに残る際に、ユーザーが常に最初の項目に戻ることを期待する場合にメニューバーのようなウィジェットを含む。たとえば、ユーザーがツリーグループから外へタブを使った際にツリーグループの2つ目の項目がアクティブであった場合、ツリーグループに再びフォーカスを持つ際にその2つ目の項目がアクティブな子孫となる。ユーザーはまた、コンテナ内のいずれかの子孫をクリックすることによってそのコンテナをアクティブにしてもよい。

コンテナまたはコンテナのアクティブな子孫がフォーカスを持つ場合、ユーザーは、現在のアクティブな子孫を変更するために矢印キーのような追加キーを押すことでコンテナをナビゲーションしてもよい。メインナビゲーションキー（一般にTabキー）をさらに押すと、コンテナから抜け出して次のウィジェットへ移動する。

たとえば、grid（全部が一度に文書で存在しなくてもよい）は、何千ものgridcell要素をもつスプレッドシートとして使用されてもよい。これは、フォーカスが、管理コンテナ要素上のaria-activedescendant属性を使用するコンテナによって管理される、またはその子要素のtabindexを管理しかつ適切な子にフォーカスを設定するコンテナによって管理される必要がある。詳細については、WAI-ARIA Authoring Practicesにおけるキーボードフォーカスの提供を参照のこと（ARIA-PRACTICES）。

コンテンツ著者は、次のコンテナのロールでフォーカスを管理するために要求される：

フォーカスの管理の詳細については、WAI-ARIA Authoring Practicesのウィジェット間のフォーカスを管理するためにtabindexを使用するのセクションを参照のこと[ARIA-PRACTICES]。