ARIA: tree ロール

説明

tree ウィジェットは、展開および折りたたみ可能な親ノードと子ノードを持つ階層リストです。階層内の任意のアイテムは、role="treeitem" で設定された子ツリーアイテムを持つことができます。子を持つツリーアイテムは展開または折りたたみできて、その子を表示または非表示にします。

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

ARIA ツリービューは、Tab ではなく主にキーボードの矢印キーでナビゲートされます。この形式のナビゲーションは、ほとんどのブラウザーコンテンツでは一般的ではありませんが、ネイティブアプリケーションでは普通で期待されるものです。このため、ツリービューを作成する前に、必要な機能に対処する代替オプションを検討してください。

単一選択および複数選択のツリー

ツリーは「単一選択」にして、ユーザーがアクションのために 1 つのアイテムのみを選択できるようにしたり、「複数選択」にして、ユーザーがアクションのために複数のアイテムを選択できるようにしたりできます。複数選択ツリーでは、tree は aria-multiselectable が true に設定されています。それ以外の場合、aria-multiselectable は false に設定されているか、デフォルト値の false が暗示されます。どちらの場合でも、キーボードアクセシブルにするために、すべてのツリーの子孫に対してフォーカスを管理する必要があります。

単一選択ツリーの一部の実装では、フォーカスされたアイテムが選択状態も持ちます。これは「選択がフォーカスに従う」として知られています。単一選択ツリーがフォーカスを受け取る際、ツリーがフォーカスを受け取る前にツリーアイテムが選択されていない場合、フォーカスは最初のノードに設定されます。ツリーがフォーカスを受け取る前にツリーアイテムが選択されている場合、フォーカスは選択されたツリーアイテムに設定されます。単一選択ツリーでは、選択されたツリーアイテムに aria-selected が true に設定され、ツリー内の他のツリーアイテムには存在しません。

複数選択ツリーでは、選択されたすべてのツリーアイテムに aria-selected="true" が設定され、選択可能だが現在選択されていないすべてのツリーアイテムノードに aria-selected="false" が設定されています。選択できないツリーアイテムには aria-selected 属性を含めないでください。

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

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

ツリー階層

ツリービューでは、tree ノードがルートノードです。子、孫、およびさらなる子孫 treeitem ノードを持つことができます。

ツリーノードとして機能する各要素は、ルートツリーノード（tree のロールを持つ）を除いて、treeitem ロールを持ちます。tree は親 tree ノードを持ちません - それはルートノードです。ノードがツリーにネストされており、かつ子孫ツリーアイテムを持つ場合、それは treeitem ロールと aria-expanded 属性を持ちます。ノードが閉じた状態の場合は aria-expanded="false" が設定され、ノードが開いた状態の場合は aria-expanded="true" が設定されます。

treeitem ノードは、tree ルートノードの直接の子にしたり、treeitem ノード内にネストしたり、または group 要素内にオプションでネストしたりできます。tree 内にネストされた group は、treeitem 要素の展開可能なコレクションです。

終端ノード（ツリーアイテムの子を持たないもの）には aria-expanded を含めないでください。支援技術に対してノードが親ノードであると誤って説明することになるためです。

DOM 配置と存在

すべてのツリーアイテムは、tree ロールを持つ要素に含まれているか、またはそれによって所有されています。マークアップで tree の直接の子孫でないツリーアイテムがある場合は、コンテナーの DOM の子でない要素を含めるために、所有するツリーコンテナーに aria-owns を含めてください。これらの子でない所有要素は、参照される順序で読み取り順序に表示され、DOM の子であるツリーアイテムの後に表示されます。フォーカスを管理するスクリプトは、視覚的なフォーカス順序がこの支援技術の読み取り順序と一致することを確認する必要があります。

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

アクセシブル名

tree にはアクセシブル名を提供する必要があります。aria-labelledby で参照される可視ラベルを参照するか、aria-label でラベルを指定してください。

メニューの方向

tree ロールを持つ要素は、暗黙的な aria-orientation 値として vertical を持ちます。ツリー要素が水平方向の場合は、aria-orientation="horizontal" を含めてください。

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

role="treeitem"

ツリー内のアイテムです。

role="group"

ツリーアイテムの展開可能なコレクションです。

aria-labelledby

可視ラベルが存在する場合に必要なアクセシブル名を提供して、tree にラベルを付ける要素を識別します。それ以外の場合は aria-label を使用してください。

aria-label

可視ラベルが存在しない場合に tree にラベルを付ける文字列値を定義します。

aria-orientation

ツリーの方向が水平か垂直かを示します。省略した場合のデフォルトは vertical です。

aria-multiselectable

true に設定した場合、ユーザーがツリーの現在選択可能な子孫から複数のツリーアイテムを選択できることを示します。

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

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

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

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

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

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

代替の複数選択モデル

代替の複数選択モデルは修飾キーモデルで、Shift や Control などの修飾キーを保持せずにフォーカスを移動すると、フォーカスされたノード以外のすべての選択されたノードの選択が解除されます：

仕様書