search

d3 / d3-shape

Graphical primitives for visualization, such as lines and areas.
https://d3js.org/d3-shape
ISC License
2.47k stars 305 forks source link

Regarding accessibility in d3 js #116

Closed tavishiChat closed 4 years ago

tavishiChat commented 6 years ago

Hi I am using d3 js for plotting a network topology to show the connected devices. The information of the devices is currently displayed as a tooltip on mouse hover.

Can this be accessible using keyboard. Can user hover over the device using keyboard and view the information?

danburzo commented 6 years ago

Unfortunately, to my knowledge it's impossible to focus individual elements in a SVG with the tabIndex attribute, so I don't think there's an out-of-the-box solution for this.

However, you can add the tabIndex=0 attribute on your SVG to have it capture keyboard events once the graphic is focused, and from there keep your graphics' state (i.e. the currently selected object) yourself: whenever the user presses the Tab key, cycle through all your elements in order.

afeld commented 5 years ago

See also:

danburzo commented 5 years ago

Thanks for the bump, it gave me the chance to review my comment from a year ago — and I have no idea what the circumstances were for me to say that: had I tried a demo and it didn't work? possibly tripped over by OS-level / browser-level settings for which kinds of elements to Tab-cycle?

In any case, tabindex should work inside SVGs and can be the basis of enabling keyboard navigation.

mbostock commented 4 years ago

Closing this as I have no idea how (or if) it’s possible for D3 to improve accessibility automatically. If there are things I can do to help, please teach me how.

sidnc86 commented 4 years ago

To improve Accessibility, if you can get to know that a D3 API consumer is placing a click event on an svg element, you can default to assigning role="button" and tabindex="0" to that element out-of-the-box.

sidnc86 commented 4 years ago

Also there has to be way to provide a textual label to these clickable elements. I'm not D3 user. But with my client already having implemented D3.js, from Accessibility standpoint, I would certainly look forward to have such aspects in D3.