WebAIM - Web Accessibility In Mind

E-mail List Archives

Problems with role="tree"

for

From: Alexander Karelas
Date: May 11, 2018 2:53PM

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.