treeitem はtree 内のアイテムです。

説明

tree は、展開および折りたたみ可能な親ノードと子ノードを持つ階層リストです。treeitem はtree 内のノードです。ツリーのルートはtree ですが、すべてのツリーノードは、それ自体がネストされたtreeitem ノードを持つ場合でも、treeitem 要素です。

tree の例は、ファイルシステム選択ユーザーインターフェイスです。フォルダーとファイルを表示するツリービューです。各フォルダーとファイルはtreeitem です。フォルダーアイテムはtreeitem 要素で、展開してフォルダーのコンテンツ（ファイル、フォルダー、またはその両方で、すべてtreeitems です）を表示し、折りたたんでそのコンテンツを隠すことができます。

ツリー階層では、ルートノード はtree ロールを持ちます。ルートノード以外のすべての他のノードは、子を持つかどうかに関係なく、treeitem のロールを持ちます。親であるtreeitem は親ノード です。親でないtreeitem は終端ノード です。

子を持つツリーアイテムは展開または折りたたみできて、その子を表示または非表示にします。子ノードが表示されるように展開された親ノードは開いたノード です。子ノードが表示されないように折りたたまれた親ノードは閉じたノード です。

各親ノードには、group ロールを持つ要素が含まれているか、またはそれによって所有されています。親ノードはtreeitem 要素の展開可能なコレクションです。これらの子ノードは親ノードの直接の子孫ではありません。むしろ、group ロールを持つ要素に囲まれている必要があります。

各親ノードにはaria-expanded 属性を含める必要があります。これは閉じている場合はfalse に、開いている場合はtrue に設定されます。終端ノードにはaria-expanded 属性を含めるべきではありません。この属性の存在は、ノードが親であることを支援技術に示すためです。

treeitem ロールを持つ要素は、tree ロールを持つ要素内にネストされているか、またはそれによって所有されている必要があります。ツリーアイテムは、tree、treeitem、またはtree もしくはtreeitem ロールを持つ要素に含まれているか所有されているgroup ロールを持つ要素の子にすることができます。treeitem がtree 内にネストされていない場合、またはtree によって所有されているgroup 内にネストされていない場合は、所有するtree、treeitem またはgroup 要素のaria-owns 属性値にtreeitem のid を含めてください。

ツリーは「単一選択」にして、ユーザーがアクションのために 1 つのtreeitem のみを選択できるようにしたり、「複数選択」にして、ユーザーがアクションのために複数のtreeitem ノードを選択できるようにしたりできます。どちらの場合でも、キーボードアクセシブルにするために、すべてのツリーの子孫に対してフォーカスを管理する必要があります。

単一選択ツリーでは、1 つの treeitem のみがaria-selected （またはaria-checked）をtrue に設定できます。単一選択ツリーがフォーカスを受け取る際、ツリーがフォーカスを受け取る前にtreeitem が選択されていない場合、フォーカスは最初のtreeitem に設定されます。ツリーがフォーカスを受け取る前にtreeitem が選択されている場合、フォーカスはaria-selected="true" が設定されている単一のtreeitem に設定されます。

選択可能だが選択されていないすべてのノードは、aria-selected またはaria-checked がfalse に設定されています。ツリーに選択できないノードが含まれている場合は、aria-selected またはaria-checked のいずれも含めないでください。これらの属性のいずれかが存在することは、ノードが選択可能であることを支援技術に示すためです。

tree ノードにaria-multiselectable="true" が設定されていない限り、一度に選択できるノードは 1 つだけです。

複数選択ツリーがフォーカスを受け取る際、ツリーがフォーカスを受け取る前にツリーアイテムが選択されていない場合、フォーカスは最初のtreeitem に設定されます。ツリーがフォーカスを受け取る前に 1 つ以上のツリーアイテムが選択されている場合、フォーカスは最初に選択されているtreeitem に設定されます。

複数選択ツリーでは、選択されたすべてのツリーアイテムにaria-selected="true"（またはaria-checked="true"）が設定されています。選択可能だが現在選択されていないすべてのツリーアイテムノードには、aria-selected="false"（またはaria-checked="false"）が設定されている必要があります。

aria-selected またはaria-checked のいずれかを使用して、treeitem 要素の選択を示すことができます。一部のユーザーインターフェイスでは、単一選択ツリーではaria-selected で選択を示し、複数選択ツリーではaria-checked で選択を示します。

同じtree でaria-selected とaria-checked の両方を使用することは強く推奨されません。aria-selected の意味と目的がaria-checked の意味と目的と異なり、各状態の意味と目的が明確で、ユーザーインターフェイスが各状態を制御する別々の方法を提供している場合を除き、単一のツリーのツリーアイテムでaria-selected とaria-checked の両方を使用しないでください。

複数選択ツリーでは、選択状態はフォーカスとは独立している必要があります。例えば、典型的なファイルシステムナビゲーターでは、ユーザーはフォーカスを移動して、コピーや移動などのアクションのために任意の数のファイルを選択できます。視覚的なデザインでは、どのアイテムが選択されているか、どのアイテムがフォーカスを持っているかを明確にする必要があります。

ユーザーがツリー内でフォーカスを移動したりツリーをスクロールしたりする際の動的読み込みのために、利用可能なツリーアイテムの完全なセットが DOM に存在しない場合、各treeitem にはaria-level、aria-setsize、およびaria-posinset を指定する必要があります。

treeitem にはアクセシブル名が必要です。一般的に、その名前はtreeitem のコンテンツから来ます。アクセシブル名はaria-label またはaria-labelledby を介して設定することもできます。

関連する WAI-ARIA ロール、状態、プロパティ

tree ロール

展開および折りたたみ可能な親と子treeitem ノードの階層リストのルートノードです

group ロール

treeitem 子ノードのセットを識別します。

aria-expanded

treeitem ノードの親である、ルートtree およびgroup ノードに設定され、ツリービューが展開されている（true）か折りたたまれている（false）かを示します。

aria-selected

true またはfalse に設定され、treeitem が選択可能であることと、現在選択されているかどうかを示します。

aria-checked

true またはfalse に設定され、treeitem がチェック可能であることと、現在チェックされているかどうかを示します。

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

デフォルトの向きである垂直方向のtree の場合：

* タイプアヘッドは、特に 7 つ以上のルートノードを持つツリーの場合、すべてのツリーに推奨されます

複数選択のキーボードインタラクション

複数選択ツリーには 2 つのインタラクションモデルがあります。選択状態を失わないようにリストをナビゲートする際にShift やControl などの修飾キーを押すことをユーザーに要求することもできますが、修飾キーを保持することをユーザーに要求しないモデルが推奨されます。

推奨される複数ユーザー選択モデル

例

以下は、ウェブ開発コースのディレクトリーリストをツリービューとしてマークアップする方法の例です：

<div>  <h3>Developer Learning Path</h3>  <ul role="tree" aria-labelledby="treeLabel">    <li role="treeitem" aria-expanded="true">      <span>Web</span>      <ul role="group">        <li role="treeitem" aria-expanded="false">          <span>Languages</span>          <ul role="group">            <li role="treeitem" aria-expanded="false">              <span>HTML</span>              <ul role="group">                <li role="treeitem">Document structure</li>                <li role="treeitem">Head elements</li>                <li role="treeitem">Semantic elements</li>                <li role="treeitem">Attributes</li>                <li role="treeitem">Web forms</li>              </ul>            </li>            <li role="treeitem">CSS</li>            <li role="treeitem">JavaScript</li>          </ul>        </li>        <li role="treeitem" aria-expanded="false">          <span>Accessibility</span>          <ul role="group">            <li role="treeitem" aria-label="accessibility object model">AOM</li>            <li role="treeitem">WCAG</li>            <li role="treeitem">ARIA</li>          </ul>        </li>        <li role="treeitem" aria-expanded="false">          <span>Web Performance</span>          <ul role="group">            <li role="treeitem">Load time</li>          </ul>        </li>        <li role="treeitem">APIs</li>      </ul>    </li>  </ul></div>

上記はツリービューのセマンティクスを提供しますが、インタラクティビティは提供しません。それは JavaScript で追加する必要があります。

ツリーアイテムがデフォルトでフォーカス可能でない場合、JavaScript を使用して、ユーザーがツリーにタブで移動する際にフォーカスを受け取るべきものにtabIndex="0" を設定する必要があり、それ以外のすべてのツリーアイテムにtabIndex="-1" を設定します。

キーボードインタラクションのすべてのキーボード機能とすべてのポインターイベントは、フォーカス管理、ツリーの上下移動、親ノードの展開と折りたたみ、選択管理を含めて、プログラムする必要があります。

ツリーに 7 つ以上のツリーアイテムがある場合、タイプアヘッド機能を含めることが推奨されます。

仕様書