2

我正在使用http://validator.w3.org/nu/对我的文档执行 HTML5 验证。我不明白为什么我在以下代码中收到验证错误。我检查了http://www.w3.org/TR/wai-aria/roles#treeitem并认为可以将具有 role="treeitem" 的 li 元素放置在具有 role="group" 的元素 ul 中。nu 验证器告诉我这是不允许的。我想知道 nu 验证器在他的判决中是否正确，如果是，我们在哪里可以找到有关规定 ARIA 树模式的信息。谢谢你。

不验证的示例代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>Trees</title>
  </head>
  <body>
    <h1 id="label_1">Fruits and vegetables</h1>
    <ul id="tree" role="tree" tabindex="0" aria-labelledby="label_1">
      <li role="treeitem" aria-expanded="true">
        <a href="#">Fruits</a>
        <ul id="tree1_1" role="group">
          <li role="treeitem"><a href="#">Oranges</a></li>
          <li role="treeitem"><a href="#">Apples</a></li>
        </ul>
      </li>
      <li role="treeitem">
        <a href="#">Vegetables</a>
        <ul id="tree1_2" role="group">
          <li role="treeitem"><a href="#">Carrots</a></li>
        </ul>
      </li>
    </ul>
  </body>
</html>
4

4 回答 4

1

role="group"绝对允许在ul元素上使用。HTML5规范目前也反映了这一点。Validator.w3.org/nu/ 和http://validator.w3.org/都正确地将其视为有效。Validator.nu 似乎仍然将其标记为无效。

不管验证如何，在这里使用嵌套树都不是正确的选择。它可能会通过验证器，但这很可能只是因为它允许嵌套小部件（就像您可以将滑块或文本字段嵌套在树项中一样）。但是它们仍然被视为单独的小部件，而不是树应该是的单个复合小部件。内部树不会是外部树结构的一部分，它只是一个单独的小部件，恰好嵌套在它的一个树项中。

于 2013-10-21T02:06:05.680 回答
0

有趣的问题。验证器的行为似乎有点奇怪。WAI-ARIA 规范似乎允许组作为树项的容器。

另一方面，HTML5 规范不允许“组”作为<ul>元素的角色。它必须是“directory”、“list”、“listbox”、“menu”、“menubar”、“tablist”、“toolbar”、“tree”或“presentation”；然而验证者并没有抱怨这一点。

无论哪种方式，您似乎都应该使用“树”而不是“组”。

于 2013-01-31T09:26:39.990 回答
0

在您的第 13 行和第 19 行，您需要有 role = tree 而不是 role=group

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta charset="utf-8" />
<title>Trees</title>
 </head>
 <body>
   <h1 id="label_1">Fruits and vegetables</h1>
    <ul id="tree" role="tree" tabindex="0" aria-labelledby="label_1">
  <li role="treeitem" aria-expanded="true">
    <a href="#">Fruits</a>
    <ul id="tree1_1" role="tree">
      <li role="treeitem"><a href="#">Oranges</a></li>
      <li role="treeitem"><a href="#">Apples</a></li>
    </ul>
  </li>
  <li role="treeitem">
    <a href="#">Vegetables</a>
    <ul id="tree1_2" role="tree">
      <li role="treeitem"><a href="#">Carrots</a></li>
    </ul>
  </li>
</ul>

由于 组定义，验证器确实阻塞了 role=group，如果您在两行之间阅读，则列表项不在其中。您的列表中有treeitem，因此角色将是树而不是组。

于 2013-01-31T00:54:37.860 回答
0 
<div role="application"> 

<h2 id="label_1">Foods</h2> 
<ul id="tree1" class="tree" role="tree" aria-labelledby="label_1"> 
  <li id="fruits" role="treeitem" tabindex="0" aria-expanded="true">Fruits 
    <ul role="group"> 
      <li id="oranges" role="treeitem" tabindex="-1">Oranges</li> 
      <li id="pinapples" role="treeitem" tabindex="-1">Pineapples</li> 
      <li id="apples" role="treeitem" tabindex="-1" aria-expanded="false">Apples 
        <ul role="group"> 
          <li id="macintosh" role="treeitem" tabindex="-1">Macintosh</li> 
          <li id="granny_smith" role="treeitem" tabindex="-1" aria-expanded="false">Granny Smith 
            <ul role="group"> 
              <li id="Washington" role="treeitem" tabindex="-1">Washington State</li> 
              <li id="Michigan" role="treeitem" tabindex="-1">Michigan</li> 
              <li id="New_York" role="treeitem" tabindex="-1">New York</li> 
            </ul> 
          </li> 
          <li id="fuji" role="treeitem" tabindex="-1">Fuji</li> 
        </ul> 
      </li> 
      <li id="bananas" role="treeitem" tabindex="-1">Bananas</li>     
      <li id="pears" role="treeitem" tabindex="-1">Pears</li>     
    </ul> 
  </li> 
  <li id="vegetables" role="treeitem" tabindex="-1" aria-expanded="true">Vegetables 
    <ul role="group"> 
      <li id="broccoli" role="treeitem" tabindex="-1">Broccoli</li> 
      <li id="carrots" role="treeitem" tabindex="-1">Carrots</li> 
      <li id="lettuce" role="treeitem" tabindex="-1" aria-expanded="false">Lettuce 
      <ul role="group"> 
          <li id="romaine" role="treeitem" tabindex="-1">Romaine</li> 
          <li id="iceberg" role="treeitem" tabindex="-1">Iceberg</li> 
          <li id="butterhead" role="treeitem" tabindex="-1">Butterhead</li> 
      </ul> 
      </li> 
      <li id="spinach" role="treeitem" tabindex="-1">Spinach</li>     
      <li id="squash" role="treeitem" tabindex="-1" aria-expanded="true">Squash 
        <ul role="group" > 
          <li id="acorn" role="treeitem" tabindex="-1">Acorn</li> 
          <li id="ambercup" role="treeitem" tabindex="-1">Ambercup</li> 
          <li id="autumn_cup" role="treeitem" tabindex="-1">Autumn Cup</li> 
          <li id="hubbard" role="treeitem" tabindex="-1">Hubbard</li> 
          <li id="kobacha" role="treeitem" tabindex="-1">Kabocha</li> 
          <li id="butternut" role="treeitem" tabindex="-1">Butternut</li> 
          <li id="spaghetti" role="treeitem" tabindex="-1">Spaghetti</li> 
          <li id="sweet_dumpling" role="treeitem" tabindex="-1">Sweet Dumpling</li> 
          <li id="turban" role="treeitem" tabindex="-1">Turban</li> 
        </ul> 
      </li> 
    </ul> 
  </li> 
</ul> 

</div>
于 2014-10-23T08:14:39.820 回答