E-mail List Archives
Thread: Tree
Number of posts in this thread: 2 (In chronological order)
From: Kakarla Meharoon
Date: Thu, Aug 30 2018 9:24AM
Subject: Tree
No previous message | Next message →
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.*
From: Mohith BP
Date: Fri, Aug 31 2018 4:49AM
Subject: Re: Tree
← Previous message | No next message
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 ADDRESS 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.*
> > > > >