SpecAria - mar10/fancytree GitHub Wiki

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.

Discussion

Resources

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.

https://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>