-
-
Notifications
You must be signed in to change notification settings - Fork 601
SpecAria
Martin Wendt edited this page Mar 23, 2017
·
15 revisions
Fancytree should be WAI-ARIA compliant.
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
- A tree should be controllable using a screen reader
- If the performance hit is reasonable, ´aria´ should be enabled by default.
- 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
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
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>
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>
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>
- 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).
(TODO)
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>
Documentation Home - Project Page - Copyright (c) 2008-2022, Martin Wendt (https://wwWendt.de)