WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Problems with role="tree"

for

From: Jonathan Avila
Date: May 14, 2018 7:23AM

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 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 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.
>
>
> > > >