E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 13 (In chronological order)

From: Alexander Karelas
Date: Fri, May 11 2018 2:53PM
Subject: Problems with role="tree"
No previous message | Next message →

Hi,

Pardon me if this is not the right forum to ask technical questions. If
it is indeed not the place for such questions, please tell me which
mailing list is better suited for such activity, and I'll go there.

My problems are with the tree on this page, when reading it with NVDA:
https://forums.baza.gr/readmsg/101

I coded all of the tree, keyboard navigation works fine (arrow keys,
home, end, Enter (clicks the link), etc)

But when I navigate to the section containing the tree, I get the
announcement "blabla section tree view"

What I'm not getting is a reading of the treeitem I immediately land on.

I press Enter (or NVDA+Space) to switch NVDA to focus mode, and I do
change, but NVDA will only play a click sound then, no words.

When I move the focus to other treeitems (with the arrow keys) I get the
treeitem label read to me, which is great.

That means that when I land on a tree, I need to press Down and Up again
to hear the label of the current treeitem.

Why is this happening? Is there someone who can help me solve this problem?

This is a problem, because (a) the user doesn't get enough feedback to
know for sure what's going on, (b) it wastes the user's time, and (c) if
they land on a tree with only item they can't click "down and up again".

The structure I have is:

<div id="app" role="region" label="τίτλοι θέματος">
    <div id="js-tree" role="tree" tabindex="0" before treeitem gets
focused, and "-1" afterwards>
        <div role="treeitem" tabindex="0" (on the correct treeitem) and
"-1" otherwise>

Actually there are more levels of nesting with other divs, but I have
aria-owns="..." at the right places, so Accessibility-wies it's the same.

Am I doing it right?

Any help appreciated.

From: Alexander Karelas
Date: Fri, May 11 2018 8:44PM
Subject: Re: Problems with role="tree"
← Previous message | Next message →

I forgot to say that I've setup an onfocus event handler on tree, that
moves focus to the treeitem.


On 11/05/2018 11:53 μμ, Alexander Karelas wrote:
> Hi,
>
> Pardon me if this is not the right forum to ask technical questions. If
> it is indeed not the place for such questions, please tell me which
> mailing list is better suited for such activity, and I'll go there.
>
> My problems are with the tree on this page, when reading it with NVDA:
> https://forums.baza.gr/readmsg/101
>
> I coded all of the tree, keyboard navigation works fine (arrow keys,
> home, end, Enter (clicks the link), etc)
>
> But when I navigate to the section containing the tree, I get the
> announcement "blabla section tree view"
>
> What I'm not getting is a reading of the treeitem I immediately land on.
>
> I press Enter (or NVDA+Space) to switch NVDA to focus mode, and I do
> change, but NVDA will only play a click sound then, no words.
>
> When I move the focus to other treeitems (with the arrow keys) I get the
> treeitem label read to me, which is great.
>
> That means that when I land on a tree, I need to press Down and Up again
> to hear the label of the current treeitem.
>
> Why is this happening? Is there someone who can help me solve this problem?
>
> This is a problem, because (a) the user doesn't get enough feedback to
> know for sure what's going on, (b) it wastes the user's time, and (c) if
> they land on a tree with only item they can't click "down and up again".
>
> The structure I have is:
>
> <div id="app" role="region" label="τίτλοι θέματος">
>     <div id="js-tree" role="tree" tabindex="0" before treeitem gets
> focused, and "-1" afterwards>
>         <div role="treeitem" tabindex="0" (on the correct treeitem) and
> "-1" otherwise>
>
> Actually there are more levels of nesting with other divs, but I have
> aria-owns="..." at the right places, so Accessibility-wies it's the same.
>
> Am I doing it right?
>
> Any help appreciated.
>
>

From: Alexander Karelas
Date: Fri, May 11 2018 11:27PM
Subject: Re: Problems with role="tree" (minimal example)
← Previous message | Next message →

I'm sorry for my previous email, where I showed you my entire website.
It was unnecessarily complicated.

Here's a minimal example with my question:

http://s3.karjala.org/tree.html

In this example, we have a <header> and a <role="region"> containing a
tree with two items.

My question is: how does somebody navigate this page (using NVDA)?

If they choose to click 'd' and 'shift+d' to browse through <header> and
role="region", and they end up on region, how do they then switch to the
tree in focus mode?

If they press Enter while on the region, or NVDA+Space, they hear the
clicking sound, but the current tree item doesn't get read out.

The only way I managed to have the active treeitem read, is by pressing
the Tab key, but I think that might not be an optimal way to surf to the
tree, as it will first cycle through all of the links of the page, which
could be many.

So what am I doing wrong on my page? How do I solve it? Is it possible
that this could be an imperfection of NVDA?

Removing the region that wraps the tree doesn't seem right, because then
the 'd' key cannot be used to surf to the tree, only the Tab key will
do, which has the problem I mentioned above

What do I do? How does someone use this page?

Any help will be greatly appreciated. Thanks.

From: Jonathan Pool
Date: Sat, May 12 2018 1:36PM
Subject: Re: Problems with role="tree"
← Previous message | Next message →

Thanks for describing this problem and providing a minimal example. Not having worked on this issue, I cannot offer any advice yet. Jason Kiss has produced some good information at:

http://accessibleculture.org/articles/2013/02/not-so-simple-aria-tree-views-and-screen-readers/#screenreaders

> From: Alexander Karelas < = EMAIL ADDRESS REMOVED = >
> Subject: [WebAIM] Problems with role="tree" (minimal example)
> Date: 11 May, 2018 at 22:27:34 PDT
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>
>
> I'm sorry for my previous email, where I showed you my entire website.
> It was unnecessarily complicated.
>
> Here's a minimal example with my question:
>
> http://s3.karjala.org/tree.html
>
> In this example, we have a <header> and a <role="region"> containing a
> tree with two items.
>
> My question is: how does somebody navigate this page (using NVDA)?
>
> If they choose to click 'd' and 'shift+d' to browse through <header> and
> role="region", and they end up on region, how do they then switch to the
> tree in focus mode?
>
> If they press Enter while on the region, or NVDA+Space, they hear the
> clicking sound, but the current tree item doesn't get read out.
>
> The only way I managed to have the active treeitem read, is by pressing
> the Tab key, but I think that might not be an optimal way to surf to the
> tree, as it will first cycle through all of the links of the page, which
> could be many.
>
> So what am I doing wrong on my page? How do I solve it? Is it possible
> that this could be an imperfection of NVDA?
>
> Removing the region that wraps the tree doesn't seem right, because then
> the 'd' key cannot be used to surf to the tree, only the Tab key will
> do, which has the problem I mentioned above
>
> What do I do? How does someone use this page?
>
> Any help will be greatly appreciated. Thanks.

From: Alexander Karelas
Date: Sat, May 12 2018 2:26PM
Subject: Re: Problems with role="tree"
← Previous message | Next message →

Should I file an issue on NVDA's github repo?


On 12/05/2018 10:36 μμ, Jonathan Pool wrote:
>> If they press Enter while on the region, or NVDA+Space, they hear the
>> clicking sound, but the current tree item doesn't get read out.
>>
>> The only way I managed to have the active treeitem read, is by pressing
>> the Tab key, but I think that might not be an optimal way to surf to the
>> tree, as it will first cycle through all of the links of the page, which
>> could be many.
>>
>> So what am I doing wrong on my page? How do I solve it? Is it possible
>> that this could be an imperfection of NVDA?
>>
>> Removing the region that wraps the tree doesn't seem right, because then
>> the 'd' key cannot be used to surf to the tree, only the Tab key will
>> do, which has the problem I mentioned above
>>
>> What do I do? How does someone use this page?
>>
>> Any help will be greatly appreciated. Thanks.

From: Jonathan Cohn
Date: Sat, May 12 2018 3:28PM
Subject: Re: Problems with role="tree"
← Previous message | Next message →

I can try to look at this later, but did you use a aria-activedescendent
attribute on the tree item? Generally it seems that ARIA wants tab inex=0
on exactly one child of the complex widgets or tabindex=0 on the parent
element with the active item indicated with the active descendent.



On Sat, May 12, 2018 at 4:27 PM Alexander Karelas < = EMAIL ADDRESS REMOVED = >
wrote:

> Should I file an issue on NVDA's github repo?
>
>
> On 12/05/2018 10:36 μμ, Jonathan Pool wrote:
> >> If they press Enter while on the region, or NVDA+Space, they hear the
> >> clicking sound, but the current tree item doesn't get read out.
> >>
> >> The only way I managed to have the active treeitem read, is by pressing
> >> the Tab key, but I think that might not be an optimal way to surf to the
> >> tree, as it will first cycle through all of the links of the page, which
> >> could be many.
> >>
> >> So what am I doing wrong on my page? How do I solve it? Is it possible
> >> that this could be an imperfection of NVDA?
> >>
> >> Removing the region that wraps the tree doesn't seem right, because then
> >> the 'd' key cannot be used to surf to the tree, only the Tab key will
> >> do, which has the problem I mentioned above
> >>
> >> What do I do? How does someone use this page?
> >>
> >> Any help will be greatly appreciated. Thanks.
>
> > > > >

From: Alexander Karelas
Date: Sat, May 12 2018 5:25PM
Subject: Re: Problems with role="tree"
← Previous message | Next message →

Are you a core developer of NVDA, by the way?


On 13/05/2018 12:28 πμ, Jonathan Cohn wrote:
> I can try to look at this later, but did you use a aria-activedescendent
> attribute on the tree item? Generally it seems that ARIA wants tab inex=0
> on exactly one child of the complex widgets or tabindex=0 on the parent
> element with the active item indicated with the active descendent.
>
>
>
> On Sat, May 12, 2018 at 4:27 PM Alexander Karelas < = EMAIL ADDRESS REMOVED = >
> wrote:
>
>> Should I file an issue on NVDA's github repo?
>>
>>
>> On 12/05/2018 10:36 μμ, Jonathan Pool wrote:
>>>> If they press Enter while on the region, or NVDA+Space, they hear the
>>>> clicking sound, but the current tree item doesn't get read out.
>>>>
>>>> The only way I managed to have the active treeitem read, is by pressing
>>>> the Tab key, but I think that might not be an optimal way to surf to the
>>>> tree, as it will first cycle through all of the links of the page, which
>>>> could be many.
>>>>
>>>> So what am I doing wrong on my page? How do I solve it? Is it possible
>>>> that this could be an imperfection of NVDA?
>>>>
>>>> Removing the region that wraps the tree doesn't seem right, because then
>>>> the 'd' key cannot be used to surf to the tree, only the Tab key will
>>>> do, which has the problem I mentioned above
>>>>
>>>> What do I do? How does someone use this page?
>>>>
>>>> Any help will be greatly appreciated. Thanks.
>> >> >> >> >>
> > > >

From: Birkir R. Gunnarsson
Date: Sun, May 13 2018 4:38AM
Subject: Re: Problems with role="tree"
← Previous message | Next message →

Without having looked at your code, it looks like the problem is that
you don't set focus to a treeitem when user navigates to the tree, ,
just to the tree itself.

See this explanation of a tree widget from ARIA authoring Practices
https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView

(also check out the examples, both source code and test them with NvDA).
The tre itself has no accessible name, so there is no text for the
screen reader to read wen it receiveds focus.
You could give it a name with aria-label, but I still don't think it
solves the fundamental issue.
The issue is that you can't set focus to the tree itself, you must set
focus to an item inside the tree, either the selected item (if user
has selected one) or the first item in the tree (if user has not
selected one).
so
<div role="tree" aria-label="foo">
Div role="treitem" tabindex="0">I get focus first</div>
...
</div>


or (if you want to implement his using aria-activedescendant):
<div role="tree" tabindex="0" aria-label="foo" aria-activedescendant="act">
<div tabindex="-1" id="act" role="treeitem">I get focus first</div>
...
</div>
Then you can move id="act" between treeitems in response to how the
user navigates the tree.



On 5/12/18, Alexander Karelas < = EMAIL ADDRESS REMOVED = > wrote:
> Are you a core developer of NVDA, by the way?
>
>
> On 13/05/2018 12:28 πμ, Jonathan Cohn wrote:
>> I can try to look at this later, but did you use a aria-activedescendent
>> attribute on the tree item? Generally it seems that ARIA wants tab inex=0
>> on exactly one child of the complex widgets or tabindex=0 on the parent
>> element with the active item indicated with the active descendent.
>>
>>
>>
>> On Sat, May 12, 2018 at 4:27 PM Alexander Karelas < = EMAIL ADDRESS REMOVED = >
>> wrote:
>>
>>> Should I file an issue on NVDA's github repo?
>>>
>>>
>>> On 12/05/2018 10:36 μμ, Jonathan Pool wrote:
>>>>> If they press Enter while on the region, or NVDA+Space, they hear the
>>>>> clicking sound, but the current tree item doesn't get read out.
>>>>>
>>>>> The only way I managed to have the active treeitem read, is by pressing
>>>>> the Tab key, but I think that might not be an optimal way to surf to
>>>>> the
>>>>> tree, as it will first cycle through all of the links of the page,
>>>>> which
>>>>> could be many.
>>>>>
>>>>> So what am I doing wrong on my page? How do I solve it? Is it possible
>>>>> that this could be an imperfection of NVDA?
>>>>>
>>>>> Removing the region that wraps the tree doesn't seem right, because
>>>>> then
>>>>> the 'd' key cannot be used to surf to the tree, only the Tab key will
>>>>> do, which has the problem I mentioned above
>>>>>
>>>>> What do I do? How does someone use this page?
>>>>>
>>>>> Any help will be greatly appreciated. Thanks.
>>> >>> >>> >>> >>>
>> >> >> >> >
> > > > >


--
Work hard. Have fun. Make history.

From: Alexander Karelas
Date: Sun, May 13 2018 5:18AM
Subject: Re: Problems with role="tree"
← Previous message | Next message →

Hi,

Isn't the second exactly what I did?

You said I should do either "something", or use activedescendant. So,
haven't I used activedescendant correctly?



On 13/05/2018 01:38 μμ, Birkir R. Gunnarsson wrote:
> Without having looked at your code, it looks like the problem is that
> you don't set focus to a treeitem when user navigates to the tree, ,
> just to the tree itself.
>
> See this explanation of a tree widget from ARIA authoring Practices
> https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView
>
> (also check out the examples, both source code and test them with NvDA).
> The tre itself has no accessible name, so there is no text for the
> screen reader to read wen it receiveds focus.
> You could give it a name with aria-label, but I still don't think it
> solves the fundamental issue.
> The issue is that you can't set focus to the tree itself, you must set
> focus to an item inside the tree, either the selected item (if user
> has selected one) or the first item in the tree (if user has not
> selected one).
> so
> <div role="tree" aria-label="foo">
> Div role="treitem" tabindex="0">I get focus first</div>
> ...
> </div>
>
>
> or (if you want to implement his using aria-activedescendant):
> <div role="tree" tabindex="0" aria-label="foo" aria-activedescendant="act">
> <div tabindex="-1" id="act" role="treeitem">I get focus first</div>
> ...
> </div>
> Then you can move id="act" between treeitems in response to how the
> user navigates the tree.
>
>
>
> On 5/12/18, Alexander Karelas < = EMAIL ADDRESS REMOVED = > wrote:
>> Are you a core developer of NVDA, by the way?
>>
>>
>> On 13/05/2018 12:28 πμ, Jonathan Cohn wrote:
>>> I can try to look at this later, but did you use a aria-activedescendent
>>> attribute on the tree item? Generally it seems that ARIA wants tab inex=0
>>> on exactly one child of the complex widgets or tabindex=0 on the parent
>>> element with the active item indicated with the active descendent.
>>>
>>>
>>>
>>> On Sat, May 12, 2018 at 4:27 PM Alexander Karelas < = EMAIL ADDRESS REMOVED = >
>>> wrote:
>>>
>>>> Should I file an issue on NVDA's github repo?
>>>>
>>>>
>>>> On 12/05/2018 10:36 μμ, Jonathan Pool wrote:
>>>>>> If they press Enter while on the region, or NVDA+Space, they hear the
>>>>>> clicking sound, but the current tree item doesn't get read out.
>>>>>>
>>>>>> The only way I managed to have the active treeitem read, is by pressing
>>>>>> the Tab key, but I think that might not be an optimal way to surf to
>>>>>> the
>>>>>> tree, as it will first cycle through all of the links of the page,
>>>>>> which
>>>>>> could be many.
>>>>>>
>>>>>> So what am I doing wrong on my page? How do I solve it? Is it possible
>>>>>> that this could be an imperfection of NVDA?
>>>>>>
>>>>>> Removing the region that wraps the tree doesn't seem right, because
>>>>>> then
>>>>>> the 'd' key cannot be used to surf to the tree, only the Tab key will
>>>>>> do, which has the problem I mentioned above
>>>>>>
>>>>>> What do I do? How does someone use this page?
>>>>>>
>>>>>> Any help will be greatly appreciated. Thanks.
>>>> >>>> >>>> >>>> >>>>
>>> >>> >>> >>> >> >> >> >> >>
>

From: Jonathan Cohn
Date: Sun, May 13 2018 4:38PM
Subject: Re: Problems with role="tree"
← Previous message | Next message →

I probably missed something, but the only role attribute I noticed was role=heading

I did see a "tree" word in the simplified version, but my screen reader when looking at that did not seem to recognize the item as a widget.

And not sure if the question was for me, but I am attempting to learn how to develop NVDA code.

Jonathan Cohn



> On May 11, 2018, at 4:53 PM, Alexander Karelas < = EMAIL ADDRESS REMOVED = > wrote:
>
> Hi,
>
> Pardon me if this is not the right forum to ask technical questions. If
> it is indeed not the place for such questions, please tell me which
> mailing list is better suited for such activity, and I'll go there.
>
> My problems are with the tree on this page, when reading it with NVDA:
> https://forums.baza.gr/readmsg/101
>
> I coded all of the tree, keyboard navigation works fine (arrow keys,
> home, end, Enter (clicks the link), etc)
>
> But when I navigate to the section containing the tree, I get the
> announcement "blabla section tree view"
>
> What I'm not getting is a reading of the treeitem I immediately land on.
>
> I press Enter (or NVDA+Space) to switch NVDA to focus mode, and I do
> change, but NVDA will only play a click sound then, no words.
>
> When I move the focus to other treeitems (with the arrow keys) I get the
> treeitem label read to me, which is great.
>
> That means that when I land on a tree, I need to press Down and Up again
> to hear the label of the current treeitem.
>
> Why is this happening? Is there someone who can help me solve this problem?
>
> This is a problem, because (a) the user doesn't get enough feedback to
> know for sure what's going on, (b) it wastes the user's time, and (c) if
> they land on a tree with only item they can't click "down and up again".
>
> The structure I have is:
>
> <div id="app" role="region" label="τίτλοι θέματος">
> <div id="js-tree" role="tree" tabindex="0" before treeitem gets
> focused, and "-1" afterwards>
> <div role="treeitem" tabindex="0" (on the correct treeitem) and
> "-1" otherwise>
>
> Actually there are more levels of nesting with other divs, but I have
> aria-owns="..." at the right places, so Accessibility-wies it's the same.
>
> Am I doing it right?
>
> Any help appreciated.
>
>
> > > >

From: Alexander Karelas
Date: Sun, May 13 2018 9:53PM
Subject: Re: Problems with role="tree"
← Previous message | Next message →

There are lots of role attributes on that page. Tree is one of them. My
NVDA recognizes it as a tree.

Which screen reader are you using?


On 14/05/2018 01:38 πμ, Jonathan Cohn wrote:
> I probably missed something, but the only role attribute I noticed was role=heading
>
> I did see a "tree" word in the simplified version, but my screen reader when looking at that did not seem to recognize the item as a widget.
>
> And not sure if the question was for me, but I am attempting to learn how to develop NVDA code.
>
> Jonathan Cohn
>
>
>
>> On May 11, 2018, at 4:53 PM, Alexander Karelas < = EMAIL ADDRESS REMOVED = > wrote:
>>
>> Hi,
>>
>> Pardon me if this is not the right forum to ask technical questions. If
>> it is indeed not the place for such questions, please tell me which
>> mailing list is better suited for such activity, and I'll go there.
>>
>> My problems are with the tree on this page, when reading it with NVDA:
>> https://forums.baza.gr/readmsg/101
>>
>> I coded all of the tree, keyboard navigation works fine (arrow keys,
>> home, end, Enter (clicks the link), etc)
>>
>> But when I navigate to the section containing the tree, I get the
>> announcement "blabla section tree view"
>>
>> What I'm not getting is a reading of the treeitem I immediately land on.
>>
>> I press Enter (or NVDA+Space) to switch NVDA to focus mode, and I do
>> change, but NVDA will only play a click sound then, no words.
>>
>> When I move the focus to other treeitems (with the arrow keys) I get the
>> treeitem label read to me, which is great.
>>
>> That means that when I land on a tree, I need to press Down and Up again
>> to hear the label of the current treeitem.
>>
>> Why is this happening? Is there someone who can help me solve this problem?
>>
>> This is a problem, because (a) the user doesn't get enough feedback to
>> know for sure what's going on, (b) it wastes the user's time, and (c) if
>> they land on a tree with only item they can't click "down and up again".
>>
>> The structure I have is:
>>
>> <div id="app" role="region" label="τίτλοι θέματος">
>> <div id="js-tree" role="tree" tabindex="0" before treeitem gets
>> focused, and "-1" afterwards>
>> <div role="treeitem" tabindex="0" (on the correct treeitem) and
>> "-1" otherwise>
>>
>> Actually there are more levels of nesting with other divs, but I have
>> aria-owns="..." at the right places, so Accessibility-wies it's the same.
>>
>> Am I doing it right?
>>
>> Any help appreciated.
>>
>>
>> >> >> >> > > > >

From: Jonathan Cohn
Date: Mon, May 14 2018 6:29AM
Subject: Re: Problems with role="tree"
← Previous message | Next message →

source code. SO, probably grabbed the wrong link when using curl.


Best wishes,

Jonathan Cohn



> On May 13, 2018, at 11:53 PM, Alexander Karelas < = EMAIL ADDRESS REMOVED = > wrote:
>
> There are lots of role attributes on that page. Tree is one of them. My
> NVDA recognizes it as a tree.
>
> Which screen reader are you using?
>
>
> On 14/05/2018 01:38 πμ, Jonathan Cohn wrote:
>> I probably missed something, but the only role attribute I noticed was role=heading
>>
>> I did see a "tree" word in the simplified version, but my screen reader when looking at that did not seem to recognize the item as a widget.
>>
>> And not sure if the question was for me, but I am attempting to learn how to develop NVDA code.
>>
>> Jonathan Cohn
>>
>>
>>
>>> On May 11, 2018, at 4:53 PM, Alexander Karelas < = EMAIL ADDRESS REMOVED = > wrote:
>>>
>>> Hi,
>>>
>>> Pardon me if this is not the right forum to ask technical questions. If
>>> it is indeed not the place for such questions, please tell me which
>>> mailing list is better suited for such activity, and I'll go there.
>>>
>>> My problems are with the tree on this page, when reading it with NVDA:
>>> https://forums.baza.gr/readmsg/101
>>>
>>> I coded all of the tree, keyboard navigation works fine (arrow keys,
>>> home, end, Enter (clicks the link), etc)
>>>
>>> But when I navigate to the section containing the tree, I get the
>>> announcement "blabla section tree view"
>>>
>>> What I'm not getting is a reading of the treeitem I immediately land on.
>>>
>>> I press Enter (or NVDA+Space) to switch NVDA to focus mode, and I do
>>> change, but NVDA will only play a click sound then, no words.
>>>
>>> When I move the focus to other treeitems (with the arrow keys) I get the
>>> treeitem label read to me, which is great.
>>>
>>> That means that when I land on a tree, I need to press Down and Up again
>>> to hear the label of the current treeitem.
>>>
>>> Why is this happening? Is there someone who can help me solve this problem?
>>>
>>> This is a problem, because (a) the user doesn't get enough feedback to
>>> know for sure what's going on, (b) it wastes the user's time, and (c) if
>>> they land on a tree with only item they can't click "down and up again".
>>>
>>> The structure I have is:
>>>
>>> <div id="app" role="region" label="τίτλοι θέματος">
>>> <div id="js-tree" role="tree" tabindex="0" before treeitem gets
>>> focused, and "-1" afterwards>
>>> <div role="treeitem" tabindex="0" (on the correct treeitem) and
>>> "-1" otherwise>
>>>
>>> Actually there are more levels of nesting with other divs, but I have
>>> aria-owns="..." at the right places, so Accessibility-wies it's the same.
>>>
>>> Am I doing it right?
>>>
>>> Any help appreciated.
>>>
>>>
>>> >>> >>> >>> >> >> >> >> >
> > > >

From: Jonathan Avila
Date: Mon, May 14 2018 7:23AM
Subject: Re: Problems with role="tree"
← Previous message | No next message

We have a blog post and codepen on creating an accessible tree widget that you may find helpful.
https://www.levelaccess.com/creating-an-accessible-aria-tree-control/

Jonathan

Jonathan Avila
Chief Accessibility Officer
Level Access
= EMAIL ADDRESS REMOVED =
703.637.8957 office

Visit us online:
Website | Twitter | Facebook | LinkedIn | Blog

Looking to boost your accessibility knowledge? Check out our free webinars!

The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.



> On May 11, 2018, at 4:53 PM, Alexander Karelas < = EMAIL ADDRESS REMOVED = > wrote:
>
> Hi,
>
> Pardon me if this is not the right forum to ask technical questions. If
> it is indeed not the place for such questions, please tell me which
> mailing list is better suited for such activity, and I'll go there.
>
> My problems are with the tree on this page, when reading it with NVDA:
> https://forums.baza.gr/readmsg/101
>
> I coded all of the tree, keyboard navigation works fine (arrow keys,
> home, end, Enter (clicks the link), etc)
>
> But when I navigate to the section containing the tree, I get the
> announcement "blabla section tree view"
>
> What I'm not getting is a reading of the treeitem I immediately land on.
>
> I press Enter (or NVDA+Space) to switch NVDA to focus mode, and I do
> change, but NVDA will only play a click sound then, no words.
>
> When I move the focus to other treeitems (with the arrow keys) I get the
> treeitem label read to me, which is great.
>
> That means that when I land on a tree, I need to press Down and Up again
> to hear the label of the current treeitem.
>
> Why is this happening? Is there someone who can help me solve this problem?
>
> This is a problem, because (a) the user doesn't get enough feedback to
> know for sure what's going on, (b) it wastes the user's time, and (c) if
> they land on a tree with only item they can't click "down and up again".
>
> The structure I have is:
>
> <div id="app" role="region" label="τίτλοι θέματος">
> <div id="js-tree" role="tree" tabindex="0" before treeitem gets
> focused, and "-1" afterwards>
> <div role="treeitem" tabindex="0" (on the correct treeitem) and
> "-1" otherwise>
>
> Actually there are more levels of nesting with other divs, but I have
> aria-owns="..." at the right places, so Accessibility-wies it's the same.
>
> Am I doing it right?
>
> Any help appreciated.
>
>
> > > >