Demo: https://radiocontrolled.github.io/d3-aria-table-chart/public/index.html
D3 builds charts with SVG, and scalability is an intrinsic accessibility feature of SVG. In addition, SVG has built-in elements (title and desc) that can be enhanced with ARIA. The accessibility of D3 charts need not be limited to scalability, descriptions and core content messages. In 2017, Leonie Watson demonstrated how ARIA table semantics could be applied to an SVG line graph. This repo demonstrates how the ARIA table semantics technique can be implemented in a line chart built with D3.
npm install
Requires Node v8.
cd d3-aria-table-chart
npm run start:dev
Visit http://localhost:8080/public/index.html
npm run sass
npm run build
npm run test
The chart in this demo depicts the monthly change in house prices in across the UK in 2017. Data for the demo chart were downloaded from the HM Land Registry Website in March 2018.
| Feature | Purpose |
|---|---|
SVG <title> |
SVGs should have a <title> as their first child and it should be meaningful. Some user agents (e.g. Chrome and Firefox) will display it as a tooltip. (In the demo chart, the <title> of the SVG is aria-hidden: true so that JAWS will not read the title of the SVG - an accessible description this is left to an aria-label on the chart itself) |
SVG <desc> |
Associates a more complex description with the SVG. The <desc> should also be meaningful - if your SVG drawing is built from meaningful parts, those parts should be described. As with the <title>, in this particular example, the <desc> is aria-hidden: true due to an accessible description residing on the chart itself |
chart with aria-hidden y axis |
The axes on this chart are built by a combination of D3 features: d3-scale, d3-axis and d3-time-format. The axes are grouped compositions of <line> and <text> elements. JAWS will recognise and read <text> elements, therefore, the y-axis is aria-hidden so that it will not be announced by this AT. |
chart with aria-hidden y axis label |
As above, this is aria-hidden so that it will not be announced by this AT. |
chart using role="table" and associated table semantics |
As it is not possible to use the native HTML table within SVG, an ARIA role="table" is used. An ARIA table is "a static tabular structure containing one or more rows that each contain one or more cells". d3's x axis is given role="row" and its inner <text> months given role="columnheader". A columnheader is the structural equivalent to an HTML th with a column scope; and a columnheader needs to be nested within a row. |
ARIA main landmark role |
Each page should have one main landmark |
| Progressively enhanced CSS | Line / circle styles are inline so that when CSS is turned off, the chart still displays properly |
Visual guide to the above features:
Tested with VoiceOver (Mac) and JAWS 17 (Windows) on IE. Both AT can control this chart using table commands.