Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#17705 closed defect (fixed)

Tree: Multiple elements having a WAI-ARIA group role must have unique labels specified with aria-label or aria-labelledby

Reported by: brrodrick Owned by: bill
Priority: undecided Milestone: 1.8.7
Component: Dijit Version: 1.9.2
Keywords: Cc:
Blocked By: Blocking:

Description

When testing with Rational Policy Tester, the violation "Multiple elements having a WAI-ARIA group role must have unique labels specified with aria-label or aria-labelledby" is reported on dijit.Tree.

This is reported for all nodes with class "dijitTreeNodeContainer" and ARIA role "group", e.g.:

<div style="height: auto;" role="group" class="dijitTreeNodeContainer" data-dojo-attach-point="containerNode">

This seems to cause noncompliance with WCAG 2.0 Level A Success Criterion 2.4.1 (http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html)

I'm not sure if the problem is incorrect use of the ARIA role "group", or if an aria-label(ledby) is needed.

Change History (25)

comment:1 Changed 6 years ago by bill

Owner: set to brrodrick
Status: newpending

Hmm, well http://test.cita.illinois.edu/aria/tree/tree1.php has role=group without any aria-label. Does Rational Policy Tester flag that example too?

The dijitTreeNodeContainer holds the children of a [non leaf] tree node, so not sure what the aria-label would be. For example if the TreeNode?'s label was "Africa" would the .dijitTreeNodeContainer's aria-label by "Children of Africa"?

comment:2 Changed 6 years ago by trac-o-bot

Resolution: invalid
Status: pendingclosed

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!

comment:3 Changed 6 years ago by echacons

Hello, I will like to know about this issue. I'm facing the same RPT Violation for the dijitTreeNodeContainer component.

I scanned the page that Bill posted before ​http://test.cita.illinois.edu/aria/tree/tree1.php and it has the same Violation.

I will like to know if there is a way to solve this issue.

Thanks in advance.

E.Ch.S.

comment:4 Changed 6 years ago by bill

Summary: Accessibility A11y issue in dijit.Tree: Multiple elements having a WAI-ARIA group role must have unique labels specified with aria-label or aria-labelledbyTree: Multiple elements having a WAI-ARIA group role must have unique labels specified with aria-label or aria-labelledby

Well, I'll fix it if you answer my question from above, or point to documentation / an example which answers it. The question is: The dijitTreeNodeContainer holds the children of a [non leaf] tree node, so not sure what the aria-label would be. For example if the TreeNode?'s label was "Africa" would the .dijitTreeNodeContainer's aria-label by "Children of Africa"?

comment:5 Changed 6 years ago by echacons

Hi Bill,

Yeah the .dijitTreeNodeContainer holds the children of a non-leaf tree node as a group of children. I don't know if understood your question, but if you're asking me for a suggestion of the aria-label name of the component, I would say something like "Content of Africa" or "Content of Africa node" would be clear and suitable for any information that the Tree holds.

Last edited 6 years ago by echacons (previous) (diff)

comment:6 Changed 6 years ago by bill

OK, yes, thanks, that's what I was asking.

comment:7 Changed 6 years ago by echacons

Thank you Bill for your help, just one question, you will fix it and it will be available for download in the official link?

comment:8 Changed 6 years ago by bill

Milestone: tbd1.10
Resolution: invalid
Status: closedreopened

Well, try testing http://bill.dojotoolkit.org/git/dijit/tests/tree/test_Tree.html. If it looks OK I'll check in for 1.10. As for backports, it's tricky because it requires translation.

comment:9 Changed 6 years ago by echacons

Hi Bill,

Thank you, for your fast fix. I tested and it works great, I'm only getting one Violation but it is because in the link you provided me there are two separate tress with the [no-leaf] node: "Continents", but if I rename one of their ARIA-LABEL="Content of Continents node" for example, to "Content of Continents node 1" the Violation is gone. So, I think it is fixed but only when you don't have two or more [no-leaf] nodes with the same label name in the same or separate Trees.

I'm not sure if there is an easy way to fix this issue. I'm thinking in some logic to detect equals [no-leaf] nodes names and add a consecutive to their respective node contents, for example "Content of Continents node #1", "Content of Continents node #2" and so on..

Mmmm another way that could solve it, is to add the name of all the parents nodes in the ARIA-LABEL, at least it with solve the duplicates with deeper trees. But it won't solve the cases when you have more than one tree in same page with same structure..

Please let me know what do you think about it. If this requires more time and if you think it won't be able to be delivered in the 1.10, please deliver the solution you already did and maybe in the next version another fix could be made.

comment:10 Changed 6 years ago by bill

"Content of Continents node #1" doesn't seem useful to users; it would just be to squelch the warning message without solving the real issue. Albeit, I don't understand what the real issue is. In other words, I'm surprised the container aria-label needs to be unique across the entire page, but its OK to have two tree nodes (in separate trees) both named "Continents".

Anyway, if the label needs to be unique across the page, then how about adding the label of the tree itself, assuming one is specified via aria-label or aria-labelledby. Your idea to add all the parent node names seems tricky because then moving a node (drag and drop) would require changing the labels. Also, updating a node's name requires resetting all the descendant aria-labels. If we add the tree label, the TreeNode?.containerNode aria-labels would become "Content of mytree Africa node", or something like that.

comment:11 Changed 6 years ago by echacons

Yeah that's true, for an user using a tool like JAWS "Content of Continent node #1" won't say much, in fact it could be confusing. I got your point, of moving the nodes, the ARIA-LABEL should be updated in that case..

I think that solution you're proposing will fix the problem with multiple Trees.. But I think it won't solve this scenario in the same tree, for example..

-myTree

-Books

-Global History

-Continents --> ARIA-LABEL = "Content of myTree Continent node"

-Africa

-Global Geography

-Continents --> ARIA-LABEL = "Content of myTree Continent node"

-Africa

We'll get duplicate ARIA-LABELs for group roles of both Continents nodes.

comment:12 Changed 6 years ago by bill

Agreed... well, how about using aria-labelledby instead, so the TreeNode?.containerNode points to the node that says "Continents"?

comment:14 Changed 6 years ago by echacons

Oh yeah, please do the fixes and I will scan the page, I'm not sure if by doing that we'll get another Violation, because at the end it will be the same text but they will point to different components.. And the problem is, when the page is rendered it will have the same text. But let's try it.

comment:15 Changed 6 years ago by echacons

Oh sorry I didn't see your last post. It worked, now there are no Violations :)

I have to go for now, but tomorrow I will test it with JAWS and I will let you know.

Thank you!

Last edited 6 years ago by echacons (previous) (diff)

comment:16 Changed 6 years ago by bill

OK thanks.

FWIW I think the IBM tool is producing a spurious error message (about duplicate labels) because it doesn't realize the groups are nested, but it's probably still a good idea to add a label for each group.

comment:17 Changed 6 years ago by echacons

Hi Bill.

This is weird, I just did the scan and I'm getting the same one Violation: 'group' role must have unique labels specified.

I think it is happening what I thought before, if you use the "aria-labelledby" and if you have two or more nodes with the same label at the end it will resolve the same text.

I changed in the html code one of the "Continents" node name with "Continents 1" and I did the scan and there was no Violations.

So I think this approach won't work because at the end it will resolve what the "arial-labelledby" is pointing.

comment:18 Changed 6 years ago by bill

OK. Well, I'm doubtful this is a real violation, so lets look into that before doing anything drastic. Can you site some spec where it specifies this rule? As I mentioned earlier the aria tree examples on the web (for example, http://oaa-accessibility.org/examples/role/113/) don't have any label at all for these nodes.

Last edited 6 years ago by bill (previous) (diff)

comment:19 Changed 6 years ago by bill

Owner: changed from brrodrick to bill
Status: reopenedassigned

Assigning to me but I'm not going to check in anything for "unique" labels unless we can find some justification in the aria spec. I'm skeptical that we need labels at all, but I guess it doesn't hurt, so I'll probably check that in.

comment:20 Changed 6 years ago by Bill Keese <bill@…>

Resolution: fixed
Status: assignedclosed

In ea5017a68c0eea6bce72749407a07a9ead10c711/dijit:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 

comment:21 Changed 6 years ago by Bill Keese <bill@…>

In 83fe4d57981a409bf69e21f9fa0da3342d62c47d/dijit:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 

comment:22 Changed 6 years ago by Bill Keese <bill@…>

In 593ee11928843cc426fee7a476525a1547261dd2/dijit:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 

comment:23 Changed 6 years ago by bill

Milestone: 1.101.8.7

comment:24 Changed 6 years ago by echacons@…

Hi Bill,

Sorry I have been extremely busy these days. Good to know you found a way to fix this issue.

May I ask you how it will be manage, I mean, the fix will be available in the next Dojo release? or is there a way I can update my .js files?

Thank you.

Regards,

Emanuel Ch. S.

comment:25 Changed 6 years ago by bill

Yes, since I marked the milestone as 1.8.7 that means that it will be in the 1.8.7 release. Also 1.9.4 and 1.10. You can also just download the new TreeNode?.html template.

PS: But if you are using a built version of dojo then TreeNode?.html has been rolled into Tree.js, so you will need to rebuild. If you're not comfortable w/doing that you should wait for the next release.

Last edited 6 years ago by bill (previous) (diff)
Note: See TracTickets for help on using tickets.