Question

我正在使用http://validator.w3.org/nu/对我的文档执行HTML5验证。我不明白为什么我在以下代码上得到验证错误。我检查了http://www.w3.org/TR/wai-aria/roles#treeitem并认为可以在一个元素ul中放置一个带有role =“treeitem”的li元素，其中role =“group”。 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>

Answer 1

在第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>

由于Group Definition，验证程序确实阻塞了role = group，如果你在行之间读取列表项不在那里。你的列表中有treeitem，所以角色是树而不是组。

Answer 2

role="group"元素绝对允许

ul。 The HTML5规范目前也反映了这一点。 Validator.w3.org/nu/和http://validator.w3.org/都认为这是有效的。 Validator.nu似乎仍将其标记为无效。

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

Answer 3

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

另一方面，the HTML5 spec不允许“group”成为<ul>元素的角色。它必须是“目录”，“列表”，“列表框”，“菜单”，“菜单栏”，“选项卡”，“工具栏”，“树”或“演示文稿”;然而验证者并没有抱怨这一点。

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

Answer 4

<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>

ARIA树上的HTML5验证

4 个答案: