WAI-ARIA support for Tree View

[mar10]

https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView

Keyboard Interaction:

• On first load of the tree component, the top level node is in the tab order.
• One and only one node of the tree component is in the tab order of the page at any time.
• The last visited node in the tree control is retained in the tab order when the user navigates away from the tree control.
• Arrowing to an item with the keyboard will focus and select the node. Any previous selections are cleared
• Up Arrow and Down arrow keys move between visible nodes.
• Left arrow key on an expanded node closes the node.
• Left arrow key on a closed or end node moves focus to the node's parent.
• Right arrow key expands a closed node, moves to the first child of an open node, or does nothing on an end node.
• Enter key performs the default action on end nodes.
• Typing a letter key moves focus to the next instance of a visible node whose title begins with that letter.
• Home key moves to the top node in the tree view.
• End key moves to the last visible node in the tree view.
• Control + Arrow to an item with the keyboard focuses the item (but does not select it). Previous selections are maintained, provided that the Control key is not released or that some other keyboard function is not performed.
• Control + Space with focus on an item toggles the selection of the item.
• Shift + Up Arrow extends selection up one node.
• Shift + Down Arrow extends selection down one node.
• Shift + Home extends selection up to the top-most node.
• Shift + End extends selection down to the last node.
• *(asterisk) - on numeric keypad (optional) expands all siblings at the current node's level.

WAI-ARIA Roles, States, and Properties:

• The tree view container has a role of tree.
• Each node in a tree has the role treeitem and should be a DOM child of tree.
• If is not a DOM child of tree, then it should be referenced by aria-owns from its logical parent node.
• If all nodes in the tree are not DOM children of the tree, then set their aria-level, aria-setsize and aria-posinset accordingly; otherwise, this information cannot be computed for context by the user agent.
• A collection of treeitems to be expanded and collapsed are enclosed in a group.
• Each tree node which can be expanded should have aria-expanded set to false
• Each tree node which is expanded should have aria-expanded set to true
• Leaf nodes should not have aria-expanded set
• If aria-multiselectable is set to true on the tree, then each selectable tree node should have aria-selected set to either true or false depending on the current selection.

[mar10]

Open questions:

• Should role='treeitem' be set to <li> or to <span class='fancytree-title'>?
  -> using <span>now
• aria-multiselectable is currently always true. Could be removed for selectMode: 1
  -> done

See also handling of treegrid / ext-table #655

[pmeijer]

Is it possible to disable the Set focus to first node on first tab-in part? From what it looks like right now, at tree-focus the root-node is put in focus.

[mar10]

No, I don't think so. What is your use case or concern, that would make this desirable?

[cksachdev]

Enter key performs the default action on end nodes.

Do I need to add event handler to handle this for now?

[mar10]

yes that should be possible

[cksachdev]

Here are few comments from a testing team:

• aria-selected attribute is not updated as per the state of the node changes (I am not using checkbox, aria-selected gets updated only with checkbox)
• aria-owns attribute is missing, the parent/child id association are not properly mapped.
• aria-setsize missing which communicates how many nodes are present
• aria-level missing, which communicates the depth of the node
• aria-posinset mssing, indicates the position of the node in the group

@mar10 Could you please provide your inputs and guide on the updates required.

I will make a fork and send PR based on your suggestions.

[mar10]

Thanks for the feedback!

aria-selected attribute is not updated as per the state of the node changes (I am not using checkbox, aria-selected gets updated only with checkbox)

How do you select the nodes if you have no checkboxes (and are you are aware that 'selected' and 'active' are independent statuses)?

The latest implementation is found here:

http://wwwendt.de/tech/fancytree/demo/sample-aria-treegrid.html
(see also #709 for some discussion)

Which tries to follow the current proposal for WAI Tree Drid 1.1:

w3c/aria-practices#132
https://rawgit.com/w3c/aria-practices/treegrid/examples/treegrid/treegrid-1.html

(As far as I know, this has not been accepted yet.)

[cksachdev]

Thanks for the links @mar10 You are right 'selected' and 'active' are independent statuses. Probably NVDA or JAWS interpret them and then the user gets a right message to understand the status of current element.

What will be your suggestion for aria-owns, setsize and other attributes? I checked that jquery.fancytree.js includes the login to add necessary attributes.
Is it supposed to be a plugin, or I need to update in jquery.fancytree.js?

[mar10]

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

The active item is marked by the aria-aria-activedescendant attribute. aria-selected is also maintained per node.

I checked that jquery.fancytree.js includes the login to add necessary attributes.

I don't understand what you mean by login. Did you mean logic?

The current implementation (see my link above) should give good results in different screen readers.
It seems not be so important to use all available attributes, but select the right ones. And it always seems to be a compromise in the end.
However if you have a concrete example, how attributes should be changed to improve the user experience (without breaking other screen readers) please let us know.

[cksachdev]

@mar10 Yes, that was a typo mistake. In the sample-aria example, aria-setsize, aria-level and aria-posinset is missing.

I looked into ariagrid.js extension and in the method name nodeRenderStatus, I could find those properties. Would you recommend to use these or in your opinion those are not required?

Below is the snippet from ariagrid.js extension.

nodeRenderStatus: function( ctx ) {
		// Set classes for current status
		var res,
			node = ctx.node,
			$tr = $( node.tr );

		res = this._super( ctx );

		if ( node.parent ) {
			$tr
				.attr( "aria-level", node.getLevel() )
				.attr( "aria-setsize", node.parent.children.length )
				.attr( "aria-posinset", node.getIndex() + 1 );

Edit: aria-owns is not implemented in ariagrid.js

Created this quick extension

$.ui.fancytree.registerExtension({
    name: "ariatree",
    version: "@VERSION",
    // Default options for this extension.
    options: {},
    nodeRenderStatus: function( ctx ) {
        // Set classes for current status
        var res,
            node = ctx.node,
            hasChildren = node.hasChildren();

        var $ariaElem = $(node.li);

        res = this._super( ctx );

        if ( node.parent ) {
            $ariaElem
                .attr( "aria-level", node.getLevel() )
                .attr( "aria-setsize", node.parent.children.length )
                .attr( "aria-posinset", node.getIndex() + 1 );
        }

        if( hasChildren === false ){
         // do nothing
        } else {
        // debugger;
            $ariaElem
                .attr( "aria-owns", node.title )
        }
        return res;
    }
});
})( jQuery, window, document );

Please comment on this approach or this should be part of jquery.fancytree.js

[mar10]

I think aria-level, -setsize, and -posinset may not be required, because screen readers can easily derive this from the UL/LI structure. (They cannot do this however from the flat TR structure of a tree grid)

My question is: why do you think it is required? Do you have a concrete(!) example where screen readers produce better results with additional attributes set?