No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src
test
.babelrc
.editorconfig
.eslintrc
.gitignore
package-lock.json
package.json
readme.md
webpack.config.js

readme.md

A D3 line chart enhanced with ARIA table semantics

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.

Demo setup

Installation

npm install

Requires Node v8.

Run

cd d3-aria-table-chart
npm run start:dev

Visit http://localhost:8080/public/index.html

Build

npm run sass
npm run build

Test

npm run test

Data

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

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:

Visual guide to aria roles applied to demo chart - aria hidden y axis and label, circles as role table cell, x axis with role role and months with role columnheader

Testing notes

Tested with VoiceOver (Mac) and JAWS 17 (Windows) on IE. Both AT can control this chart using table commands.

Useful links