Accessibility

D3plus is a collection of tools built on top of the low-level helper functions made available by D3 to help aid in the generation of charts. While D3 itself can be considered accessible out of the box, as it doesn't actively add any elements to a webpage (see this discussion), D3plus makes sure that the SVG elements that get added to the page include accessibility features automatically.

Automatic Features

Optional Features

While the above accessibility features are derived automatically for each visualization from the provided data, the following exceptions need to be explicitly set by the user:

Example SVG Attributes

<svg role="img" aria-labelledby="title desc" aria-hidden="false">

  <title id="title">
    Bar Chart of Income Over Time
  </title>

  <desc id="desc">
    The income in Texas has been rising steadily over the past 10 years.
  </desc>

  ...

</svg>

Example Inline Data Table

<g role="table">
  <text role="row">
    <tspan role="columnheader" dy="-1000px">Year</tspan>
    <tspan role="columnheader" dy="-1000px">State</tspan>
    <tspan role="columnheader" dy="-1000px">Income</tspan>
  </text>
  <text role="row">
    <tspan role="cell" dy="-1000px">2010</tspan>
    <tspan role="cell" dy="-1000px">Texas</tspan>
    <tspan role="cell" dy="-1000px">43218</tspan>
  </text>
  ...
</g>

Example Shape Attributes

<rect
  aria-label="2. alpha, 29."
  role="presentation"
  width="300"
  height="371"
  x="-150"
  y="-185.5"
  fill="#b22200">
</rect>