a role="group"在a role="tree"下是否有效

Is a role="group" valid under a role="tree"

假设我有一个 role="tree" 的元素。在它下面我有一个元素 role="group"，其中包含用于多级树的 role="treeitem" 或 role="group" 的元素。

<... role="tree">
    <... role="group">
        <... role="treeitem">
        <... role="treeitem">
        <... role="group">
            <... role="treeitem">
            <... role="treeitem">

这里的问题是可访问性测试工具抱怨 role="tree" 的元素必须包含 role="treeitem" 的子元素。

查找了 spec，上面写着

Required Owned Elements:    
        group → treeitem
        treeitem

我该如何解释？树应该直接包含树项吗？ tree 可以有一个包含 tree items 的组，但 tree 没有角色为“treeitem”的直接子代吗？

-- 编辑--

这里是完整的html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Test Tree A11y</title>
    </head>
    <body>
        <div role="main">
            <!-- tree contains a group which contains treeitems/group -> treeitems -->
            <ul role="tree">
                <ul role="group">
                    <li role="treeitem">Banana</li>
                    <li role="treeitem">Mango</li>
                    <ul role="group">
                        <li role="treeitem">Banana-2</li>
                        <li role="treeitem">Mango-2</li>
                        <li role="treeitem">Orange-2</li>                    
                    </ul>
                </ul>
            </ul>

            <!-- tree contains a treeitems or groups which contains treeitem -->            
            <ul role="tree">
                <li role="treeitem">Banana</li>
                <li role="treeitem">Mango</li>
                <ul role="group">
                    <li role="treeitem">Banana-2</li>
                    <li role="treeitem">Mango-2</li>
                    <li role="treeitem">Orange-2</li>                    
                </ul>
            </ul>
        </div>
    </body>
</html>

这里的问题是

具有“tree”角色的元素必须包含一个或多个“treeitems”？ 它可以包含一个包含“treeitems”的“组”吗？

在第一棵树中

在第二棵树中

在规范中，我找不到明确的声明，即树必须包含 1 个或多个具有角色树项的 DIRECT 子项。所以我不确定第一棵树是否存在实际可访问性问题以及第一棵树是否违反规范。

FWIW，有一个名为 JSTree 的控件使用第一棵树中所示的样式，我正在讨论这是否是一个真正的问题。谢谢。

Required Owned Elements:    
        group → treeitem
        treeitem

treeitem 的文档将帮助您理解这个主题

Authors MUST ensure elements with role treeitem are contained in, or owned by, an element with the role group or tree.

这意味着 tree 项的叶子必须全部是 treeitem。

那些 treeitem 可以直接在 tree 项下或任何级别的 group 项下。

treeitem 下不能有 treeitem

简答

虽然 HTML 和 WAI-ARIA 将 group 作为 tree 的直接后代是有效的，但如果它与一个对应的treeitem.

由于 tree 的构造方式不同，它是 role="tree" 的允许子项。

长答案

首先，role="group" 作为 role="tree".

的唯一后代是完全“有效的”（它是有效的标记）

然而，尽管有效，但这并不是推荐的处理方式，并且可能会导致意外行为，具体取决于所使用的屏幕 reader 和浏览器组合。

关键点是在WAI-ARIA best practices document中指出：

Each root node is contained in the element with role tree or referenced by an aria-owns property set on the tree element.

所以当你将顶级节点放入 role="group" 时，你就违反了这条规则，除非你给你组中的每个 treeitems 一个 id，然后使用 aria-owns role="tree"。在这一点上，group 无论如何都变得毫无意义，因为你已经绕过了它。

如果不推荐，为什么允许 role="group" 作为 role="tree" 的后代？

现在您可能会争辩说，如果将 group 作为 role="tree" 中的顶级项目是无效的，那么首先就不应该允许它。

但是，允许role="group"在顶层的原因是你可以设置一个treeitem来打开一个group并且这些可以在同一层（兄弟姐妹).

我想我可以用一个例子来最好地解释这个：-

代码示例 1 - 有效，因为 group 有一个父节点 treeitem，因此不充当根节点。

<div id="tree1" role="tree" tabindex="-1">
  <div role="treeitem" aria-owns="pizzaGroup" aria-expanded="false" tabindex="0">Pizza Toppings</div>
  <ul role="group" id="pizzaGroup">
      <li role="treeitem">Cheese</li>
      <li role="treeitem">Pepperoni</li>
      <li role="treeitem">Onion</li>
   </ul>
</div>

在上面的示例中，第一个 div 作为 treeitem 并且组由它控制。与 aria-owns.

建立关联

之所以说必须包含[=36​​=]是因为不允许有空组。

以上是 role="tree" 的有效示例，但是如果您可以避免使用 support for aria-owns is not great.

，我不会推荐该模式

公认的做法是将 group 嵌套在 treeitem 本身中，并在整个过程中使用 <ul> 和 <li>。大多数屏幕 reader 会自动将子节点与父节点相关联，而那些仍然无法让用户锻炼关系的子节点，因为嵌套 <ul> 和 <li> 很好支持。

示例 2 - 使用 <ul> 和 <li>

的推荐模式示例 
<ul role="tree">
    <li role="treeitem" aria-expanded="false" tabindex="0">
    <span>Pizza Toppings</span>
        <ul role="group">
            <li role="treeitem">Cheese</li>
            <li role="treeitem">Pepperoni</li>
            <li role="treeitem">Onion</li>
        </ul>
    </li>
</ul>

希望这能回答为什么无障碍工具抱怨没有 treeitem 以及为什么你 可以 有一个 group 作为 tree 但前提是它由关联的 treeitem.

控制

最后的想法

在您的示例中，您没有为树提供标签。不要忘记向主要元素添加标签 role="tree"，可以是可见标签和 aria-labelledby="yourLabelID"（最好），也可以是带有 aria-label="description of tree".

聊天讨论后更新

如果指导更明确就好了！

正如所指出的，我对“根节点”的支持信息仍然不清楚，可以公平地评论它仍然可以解释 group 可以是该定义的根节点。

然而在 definition of a treeview 的更上层，再加上另一条规则，有足够的清晰度来确认 group 实际上不可能被算作根节点全部！

这些是树中节点的定义：

Node An item in a tree.

Root Node Node at the base of the tree; it may have one or more child nodes but does not have a parent node.

Child Node Node that has a parent; any node that is not a root node is a child node.

Parent Node Node with one or more child nodes. It can be open (expanded) or closed (collapsed).

采用以下规则：

Each child node is contained in or owned by an element with role group that is contained in or owned by the node that serves as the parent of that child.

因此在任何情况下都不能将 group 算作根节点（或任何节点），它不能有父节点，因此违反了上述规则。

让我解释一下为什么会这样，以及为什么您永远不能将 group 视为根节点：

第二次将 treeitem 添加到 group 时，以下必须为真：

  • 它必须是子节点，因为它不是根节点。
  • 每个子节点必须由 role="group" 包含或拥有， 必须由充当新添加的 treeitem 的父节点包含或拥有。
  • 根项可以没有父节点，我们的 group 需要 parent 才有效。

示例 3 - 无效，因为 group 没有父节点并且必须充当根节点（它不能）。

<div role="tree">
     <!--this group is a root level node and does not have a parent node. -->
     <div role="group">
         <!--This treeitem must be within a "group" as it is a child node. -->
         <!--This means that the "group" above contains it and that means the group above must be owned or controlled by something.-->
         <!--This treeitem can never have a parent as root level nodes cannot have a parent node.-->
         <div role="treeitem">item</div>

     </div>
 </div>

此外，就我而言，以下内容消除了所有歧义：

Each element serving as a tree node has role treeitem.

所以我最初的前提是正确的，为什么 group 被允许作为 tree 中的顶级项目。

事实上，更清楚的是，一个组可以永远不会成为根节点（或者根本不是一个节点，因为你不能role="treeitem group"！）并且group 可以作为 tree 的直系后代出现的唯一原因是，如果它是具有 treeitem 控制它（它的父级）的兄弟姐妹，正如我最初所说的那样。