SpecAria

Vision

Fancytree should be WAI-ARIA compliant.

Status

There is an experimental extension (see demo).

Yet there are still open questions, so this feature is open for discussion and the API is subject to change.

Please discuss here: https://github.com/mar10/fancytree/issues/14

Requirements

• A tree should be controllable using a screen reader
• If the performance hit is reasonable, ´aria´ should be enabled by default.

Diskussion

Resources

• https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView
• http://www.w3.org/TR/wai-aria-practices/
• Discussion on gitter: https://gitter.im/w3c/a11ySlackers
• http://wwwendt.de/tech/fancytree/demo/sample-aria.html
• http://wwwendt.de/tech/fancytree/demo/sample-aria-treegrid.html

Older

• Good analysis on different approaches:
  http://accessibleculture.org/articles/2013/02/not-so-simple-aria-tree-views-and-screen-readers/
• Sample implementation: http://longmatthewh.github.io/a11yTree/, https://github.com/longmatthewh/jquery-a11ytree
• Overview slides: http://de.slideshare.net/tedgies/world-usability-day-2012-aria
• News: http://www.paciellogroup.com/blog/archive/
• Discussion: https://groups.google.com/forum/#!topic/dynatree/bUvVMEWQltk
• Sample: http://access.aol.com/aegis/#goto_tree
• html5 support: http://www.html5accessibility.com
• http://test.cita.uiuc.edu/aria/tree/tree1.php
• http://jqueryui.com/menu/
• https://github.com/WilcoFiers/treevue

Research

Cancer Control (based on Dynatree)

https://popmodels.cancercontrol.cancer.gov/gsr/search/

• Uses <a> elemen for title
• Assigns role="checkbox" to title

<div id="tree">
  <ul class="dynatree-container" aria-labelledby="attribute-header" role="tree">
      <li id="dynatree-id-target" class="" role="treeitem" aria-expanded="false" aria-labelledby="target">
        <span class="dynatree-node dynatree-has-children dynatree-exp-c dynatree-ico-c dynatree-active">
          <span class="dynatree-expander"></span>
          <span class="dynatree-checkbox"></span>
          <a href="#" class="dynatree-title" 
            title="Target/: Type and content of data to be simulated" 
            role="checkbox" aria-checked="false" 
            id="target">Target</a>
        </span>

Parciello

http://files.paciellogroup.com/training/WWW2012/samples/Samples/aria/tree/index.html

• Uses role="application"
• Adds role="treeitem", aria-level="2", aria-expanded="false", tabindex="-1", aria-selected="false" to the node's <span>
• Uses aria-level="2"
• Uses role="presentation" for <li>, expander image
• Sets tabindex="-1" on all nodes, except for active node (where it's "0")

<div role="application">
  <ul id="documentsTree" aria-labelledby="documentsTreeLbl" role="tree" aria-multiselectable="true">
    <li role="presentation">
      <img role="presentation" class="twisty" src="http://files.paciellogroup.com/training/WWW2012/samples/tpglib/JS/Controls/Tree/images/expanded_first.png" alt="expand Invoices branch">
      <span role="treeitem" aria-level="1" aria-expanded="true" tabindex="-1" aria-selected="false">
        <span>Invoices</span>
      </span>
      <ul role="group" aria-hidden="false">
        <li role="presentation">
          <img role="presentation" class="twisty" src="../../../tpglib/JS/Controls/Tree/images/collapsed_mid.png" alt="collapse January branch">
          <span role="treeitem" aria-level="2" aria-expanded="false" tabindex="-1" aria-selected="false">
            <span>January</span>
          </span>
          <ul class="collapsedGroup" role="group">
            <li class="leafMid" role="presentation">
              <span role="treeitem" aria-level="3" tabindex="-1" aria-selected="false">
                <span>Invoice A</span>
              </span>
            </li>
            <li role="presentation">
              <span class="treeItem leafLabel" role="treeitem" aria-level="3" tabindex="-1" aria-selected="false">
                <span>Invoice B</span>
              </span>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Open Ajax Alliance

http://oaa-accessibility.org/example/41/

• Uses role="application"
• Adds role="treeitem", aria-level="2", aria-expanded="false", tabindex="-1" to the <li>
• Does not use aria-selected="false"
• Does not use aria-level
• Does not use role="presentation"
• Sets tabindex="-1" on all nodes, except for active node (where it's "0")

<div id="application" role="application">

<h2 id="label_1">Foods</h2>
<ul id="tree1" class="tree root-level" role="tree" aria-labelledby="label_1">
   <li id="fruits" class="tree-parent" role="treeitem" tabindex="0" aria-expanded="true">
      <span>Fruits</span>
      <ul id="fruit-grp" role="group">
         <li id="oranges" role="treeitem" tabindex="-1">Oranges</li>
         <li id="pinapples" role="treeitem" tabindex="-1">Pineapples</li>
         <li id="apples" class="tree-parent" role="treeitem" tabindex="-1" aria-expanded="false"><span>Apples</span>
            <ul id="apple-grp" role="group">
               <li id="macintosh" role="treeitem" tabindex="-1">Macintosh</li>
               <li id="granny_smith" class="tree-parent" role="treeitem" tabindex="-1" aria-expanded="false"><span>Granny Smith</span>
                  <ul id="granny-grp" 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" class="tree-parent" role="treeitem" tabindex="-1" aria-expanded="true"><span>Vegetables</span>
      <ul id="veg-grp" role="group">
         <li id="broccoli" role="treeitem" tabindex="-1">Broccoli</li>
         <li id="carrots" role="treeitem" tabindex="-1">Carrots</li>
         <li id="lettuce" class="tree-parent" role="treeitem" tabindex="-1" aria-expanded="false"><span>Lettuce</span>
         <ul id="lettuce-grp" 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" class="tree-parent" role="treeitem" tabindex="-1" aria-expanded="true"><span>Squash</span>
            <ul id="squash-grp" 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>

Problems

• Testing with ChromeVox and VoiceOver:
  The reader does not work as expected (by me)
• How can 'compliant' be defined. Is there an authorative test suite?
  Different screen readers seem to behave differently. Which should we use as a reference?
• To which elements should we add role='tree item,' aria-selected, aria-activedescendant, etc.?
• The dynatree based sample (http://popmodels.cancercontrol.cancer.gov/gsr/search/) works better than the current Fancytree implementation.
  Seems that focus changes using the keyboard are not recognised reliably. Maybe because we dropped the <a> tags in the markup? (We now use aria-activedescendant='true' instead).

Proposal

(TODO)

Current Specification

The plain markup (SpecMarkup) is enriched by ARIA roles and attributes.

http://wwwendt.de/tech/fancytree/demo/sample-aria.html

<div id="tree">
  <ul class="fancytree-container" tabindex="0" role="tree" aria-multiselectable="true">
    <li role="treeitem" aria-labelledby="ftal_id1" aria-selected="false" class="">
      <span class="fancytree-node fancytree-exp-n fancytree-ico-c" aria-labelledby="ftal_id1">
        <span role="button" class="fancytree-expander"></span>
        <span role="img" class="fancytree-icon"></span>
        <span class="fancytree-title" id="ftal_id1" title="Look, a tool tip!">item1 with tooltip</span>
      </span>
      <ul>
        <li role="treeitem" aria-labelledby="ftal_id1.1" aria-selected="false" class="">
          <span class="fancytree-node fancytree-active fancytree-has-children focused fancytree-exp-c fancytree-ico-c" aria-labelledby="ftal_id1.1">
            <span role="button" class="fancytree-expander"></span>
            <span role="img" class="fancytree-icon"></span>
            <span class="fancytree-title" id="ftal_id1.1">Sub-item 1.1</span>
          </span>
        </li>
      </ul>
    </li>
  </ul>
</div>