The tabindex attribute makes SVG elements reachable with the Tab key and assigns their order in sequential keyboard navigation. Its integer value controls focus order; sorting data before creating circles also determines their DOM and focus order. section 10.2.4
Use tabindex when interactive visualization elements must work without a mouse:
- Sort cetacean data before binding it to scatterplot circles, then assign tabindex="0". section 10.2.4
- Pair the mouseenter and mouseleave tooltip handlers with focus and blur handlers. section 10.2.4
- Repeat the attributes and handlers when filters create new DOM elements. section 10.2.4
innerChart
.selectAll(".cetacean")
.data(data.sort((a, b) => a.global_population_estimate -
b.global_population_estimate))
.join("circle")
.attr("class", d => `cetacean cetacean-${d.status}`)
...
.attr("tabindex", 0)
.on("mouseenter focus", showTooltip)
.on("mouseleave blur", hideTooltip);
Inspect the combined tabindex, focus, blur, and pointer-event implementation for accessible scatterplot tooltips. section 10.2.4
Keyboard-accessible scatterplot
A cetacean scatterplot adds instructions telling users to pass over circles or access them with the Tab key. Focus reveals the same tooltip as mouse entry, while blur hides it. section 10.2.4
