可以说我有一个角色=“树”的元素。在此之下,我有一个元素 role="group",其中包含用于多级树的 role="treeitem" 或 role="group" 元素。
<... role="tree">
<... role="group">
<... role="treeitem">
<... role="treeitem">
<... role="group">
<... role="treeitem">
<... role="treeitem">
这里的问题是可访问性测试工具抱怨角色=“树”的元素必须包含角色=“树项目”的子元素。
查了一下规范,上面写着
Required Owned Elements:
group → treeitem
treeitem
我如何解释这个?树是否应该直接包含树项?树是否可以有一个包含树项的组,但树没有角色“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>
这里的问题是
具有角色“树”的元素是否必须包含一个或多个“树项”?它可以包含一个包含“treeitems”的“组”吗?
在第一棵树
- 树有一个组,没有角色 treeitem 的直接子级
- 该组具有树项目和一个具有其他树项目的组 这被报告为错误 WCAG 1.3.1。但是,屏幕阅读器似乎工作正常
在第二棵树
- 树有一个树项目和一个有其他树项目的组
在规范中,我无法找到明确的声明,即树必须包含 1 个或多个具有角色树项的 DIRECT 子项。所以我不确定第一棵树是否存在实际的可访问性问题,以及第一棵树是否违反规范。
FWIW,有一个名为 JSTree 的控件使用第一棵树中所示的样式,我正在争论这是否是一个真正的问题。谢谢。