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

• 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
• http://www.w3.org/TR/wai-aria-practices/
• 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

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.

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