4

I'm working on making this sunburst chart accessible/508 compliant. Does anyone have any idea on how I can make say, the center circle carry a default focus using the .focus() call? That way, whenever the chart is interacted with by the user limited to keyboard navigation, the starting point is always highlighting the center circle?

I'm fairly new to Accessibility Standards. But what i'm trying to accomplish is a bilateral keyboard navigation. Any suggestions would be greatly appreciated!

Kode_12
  • 4,506
  • 11
  • 47
  • 97

1 Answers1

4

In principle, the easiest way to achieve this is to set an ID on the root element and select it (e.g. using document.getElementById()) and then call .focus() on it.

When you're using a library like NVD3, it doesn't really give you that flexibility, but for the root element specifically it's still easy to make it work. The sunburst is composed of the set of path elements and the first one represents the root. So all you need to do is select the first path child element of the container, get the DOM node and call .focus():

d3.select(".nv-sunburst").select("path").node().focus();
Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204
  • 1
    I'm not familiar with NVD3 but html elements, in general, won't accept a focus() call unless they're form elements or links or if you set tabindex to -1 or 0. For example,
    won't let you have foo.focus() unless you change your
    to
    – slugolicious Feb 02 '16 at 21:35