Opened 10 years ago

Closed 10 years ago

#15055 closed defect (fixed)

a11y issues with dojox/TreeMap

Reported by: mikeb Owned by: cjolif
Priority: undecided Milestone: 1.8
Component: Accessibility Version:
Keywords: Cc: cjolif
Blocked By: Blocking:


There are a few a11y issues with TreeMap?:

  1. Missing ARIA attributes on the main widget container. By adding role="treemap", when a user tabs into the treemap it is announced by screen readers.
  1. Not enough contrast with the "selected" border. When using the keyboard to navigate, it is very difficult to tell which section of the treemap is selected because of the {1px solid red} border clashes with reds used in the default color scheme. I think we should change the selection to use a 2px white dashed border as well which shows up very well on all of the colors.
  1. When using keyboard, no way to tell which group is selected. After scrolling through all of the regions on a treemap, the selection jumps to the top of the group, however there is nothing to indicate that the selection is now on the group headings. This can be fixed by adding a border to the .dojoxTreeMapGroup.dojoxTreeMapSelected. When I tested it, the border makes the entire group "pop" out a bit when the group is selected, which might be undesirable.

All of these CSS changes could be put into a separate a11y stylesheet if needed, but I think the changes make the widget more useable for everyone. I'm not exactly sure about the colors/sizes but it looks pretty good to me.

Attachments (1)

TreeMapA11y.patch (1.2 KB) - added by mikeb 10 years ago.

Download all attachments as: .zip

Change History (6)

Changed 10 years ago by mikeb

Attachment: TreeMapA11y.patch added

comment:1 Changed 10 years ago by mikeb

Cc: cjolif added
Milestone: tbd1.7.3
Owner: changed from Becky Gibson to cjolif
Status: newassigned

comment:2 Changed 10 years ago by cjolif

Version: 1.7.2

comment:3 Changed 10 years ago by cjolif

Thanks Michael. Please specify in your patches comment that they are contributed under IBM CCLA.

Your description says we should put role="treemap" while the code puts role="presentation" aria-label="treemap". As role="treemap" does not exist I guess the latter is the right one but just wanted to double check before committing tihs.

Also about the color issue. The treemap can be customized with any color so whatever is the color we pick we might well end up with a problem anyway. As all examples are using green to red coloring that's why you are facing that but a user can perfectly set any color and face an issue with white. I will give a try and see what to do with it.

comment:4 Changed 10 years ago by mikeb

Yes, role="presentation", aria-label="treemap" is what it should be. Sorry about that.

I understand your concern that developers can possibly use custom colors. However, I think we could still implement the CSS change because it makes the default behavior of the TreeMap? accessible without requiring extra work on the part of the developer. We can document which CSS classes are responsible for the hover and mention that if developers use custom colors and are concerned about a11y, then they might need to adjust the hover border color.

comment:5 Changed 10 years ago by cjolif

Resolution: fixed
Status: assignedclosed

In [28221]:

fixes #15055. Fixing ay11 treemap issues. Thanks Michael Billau (IBM, CCLA).

Note: See TracTickets for help on using tickets.