2

http://validator.w3.org/nu/を使用して、ドキュメントでHTML5検証を実行しています。次のコードで検証エラーが発生する理由がわかりません。http://www.w3.org/TR/wai-aria/roles#treeitemを確認し、role="group"の要素ul内にrole="treeitem"のli要素を配置しても問題ないと思いました。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

0

13行目と19行目では、role=groupではなくrole=treeが必要です。

<!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 に答える
0

興味深い質問です。バリデーターの動作は少し奇妙に思えます。WAI-ARIA 仕様では、グループをツリー項目のコンテナーとして許可しているようです。

一方、HTML5 仕様<ul>では、「グループ」を要素の役割にすることはできません。「ディレクトリ」、「リスト」、「リストボックス」、「メニュー」、「メニューバー」、「タブリスト」、「ツールバー」、「ツリー」、または「プレゼンテーション」のいずれかでなければなりません。それでも、バリデーターはそれについて文句を言いません。

いずれにせよ、「グループ」ではなく「ツリー」を使用する必要があるようです。

于 2013-01-31T09:26:39.990 に答える