WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Tree

for

From: Mohith BP
Date: Aug 31, 2018 4:49AM

Hi Kakarla Meharoon,

First, thanks for the compiled list of examples for ARIA tree
implementation.
I dont think there is an option to expose other elements such as checkbox
in both role option and role treeitem. You may have to see treegrid
implementation, but I am not sure of the screen reader support.
However, ARIA authoring practice suggests to have aria-selected set to be
true and false on role treeitem for multiselect treeitem.
Please note: currently aria-selected has some issues with IE and JAWS as
well as NVDA and IE. The best approach is to use aria-checked along with
aria-selected.
Please find my brief observation with latest NVDA on Firefox and IE 11. I
could only test with JAWS 16. I feel the issue with aria-selected has been
sorted in new JAWS versions.

I found 'Fancytree - WAI-ARIA Tree View' is better. Of course needs
improvement to make it perfect.
All these tree implementations require much more work to make it accessible
and usable on iOS and Android platforms. I did test only on Android as of
now.


Keyboard Navigation - Treeview TreeView - Kendo UI for Angular

https://www.telerik.com/kendo-angular-ui/components/treeview/keyboard-navigation/


JAWS:

1. Reads checked and unchecked status on Firefox.

2. Does not read unchecked status, but reads checked status on IE 11.
NVDA:

1. Reads both selected / not selected and checked / unchecked on
Firefox and IE.

2. When an treeitem is selected NVDA reads checked not selected as
the aria-selected is false and aria-checked is true.


General:

1. Has both aria-selected and aria-checked properties.

a. I feel aria-checked property is stating the checked status.

2. The levels are not properly announced (need detailed testing).

3. The navigation is not logical (need detailed testing).

4. The child node need not to have aria-expanded property.

5. Partially checked state is read by the screen reader. However it
is bit inconsistent.


Fancytree - WAI-ARIA Tree View

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


JAWS

1. Not checked state is not read in Firefox. Selected state is read
properly in Firefox.

2. Both checked and not checked status is not read in IE. This is due
to aria-checked property is not present.
NVDA

1. Not selected state is read on both Firefox and IE 11.

2. Selected / checked state is not read on both Firefox and IE 11.

3. Adding aria-checked property reads both checked and not checked
properties properly on IE.


General

1. Only aria-selected property present on role treeitem.

2. The aria-checked property is needed to convey the not selected
state in FF and at least to inform the checked state in IE 11.

3. The navigation is logical.

4. The aria-setsize and aria-posinset properties will enhance the
user experience.

5. Partially checked state for a Parent Node is not read by both JAWS
and NVDA.



Thanks & Regards,

Mohith B. P.

On Thu, Aug 30, 2018 at 8:54 PM Kakarla Meharoon < <EMAIL REMOVED> >
wrote:

> I have one doubt related to Tree.
> I was going through the below tree structure but how can screen reader
> users knows about the checkbox functionality here. I tested using JAWS but
> screen reader is not giving any info about the checkboxes only visual users
> can able to identify and select the check boxes using space bar.
>
> https://sapui5.hana.ondemand.com/#/sample/sap.m.sample.TreeExpandMulti/preview
> .
> Please find the below examples also where screen reader will not identify
> the check boxes.
> *
> https://www.telerik.com/kendo-angular-ui/components/treeview/keyboard-navigation/
> <
> https://www.telerik.com/kendo-angular-ui/components/treeview/keyboard-navigation/
> >*
> *https://sapui5.hana.ondemand.com/#/entity/sap.m.Tree
> <https://sapui5.hana.ondemand.com/#/entity/sap.m.Tree>*
> *http://wwwendt.de/tech/fancytree/demo/sample-aria.html
> <http://wwwendt.de/tech/fancytree/demo/sample-aria.html>;*
> *https://demos.telerik.com/kendo-ui/treeview/checkboxes
> <https://demos.telerik.com/kendo-ui/treeview/checkboxes>*
> *How can screen reader users are able to understand the check boxes.*
> > > > >