A D3 line chart enhanced with ARIA table semantics
D3 builds charts with SVG, and scalability is an intrinsic accessibility feature of SVG. In addition, SVG has built-in elements (
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.
Requires Node v8.
npm run start:dev
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.
Demo accessibility features
||SVGs should have a
||Associates a more complex description with the SVG. The
||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
||As above, this is
||As it is not possible to use the native HTML
||Each page should have one
|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.