Accessible Charts by Means of SVG and WAI-ARIA PDF Free Download
1 / 15
/15
100%
Christopher Kopel
– Accessible SVG Charts
Types of Data Visualisations
Which ones are we talking about ?
Ionly charts of tabular data
Iimportant term: each item of the data is called data point
bar charts : x-y-coordinate system,
data points shown by lengths of bars
line charts : x-y-coordinate system,
data points shown by positions of curve
. . . many other types, beyond the scope of this presentation
Slide 3/15
Christopher Kopel
– Accessible SVG Charts
Presenting Charts without Vision (2/2)
Numerous Solutions
Screen-Reader-Friendly Output
Itextual output of the chart
Ican be read by screen readers
Ican be navigated by keyboard
Ifor example, produced by certain Web software for charts
such as Highcharts and FusionCharts
IHow to do this ?
Slide 5/15
Christopher Kopel
– Accessible SVG Charts
Scalable Vector Graphics (SVG)
IXML-based language for storing graphics,
standardised by World Wide Web Consortium (W3C)
Idefines graphics by text elements and attributes,
for example: <circle>,<line>,<rect>(for rectangular
boxes), <path>(for irregular shapes), . . .
Iadvantages: less data, machine-readable, graphics
structured by objects
Imoreover: elements for including text:
<text>,<title >,<desc>
Slide 7/15
Christopher Kopel
– Accessible SVG Charts
Accessible Rich Internet Applications (1/2)
Itext attributes for annotating Web content
with data and semantics
Istandardised by Web Accessibility Initiative (WAI) of W3C,
therefore also called WAI-ARIA
Ioriginally intended for Web pages and apps
Ican also be used for graphics !
Slide 8/15
Christopher Kopel
– Accessible SVG Charts
Accessible Rich Internet Applications (2/2)
The Basics
Ispecial attributes assigned to HTML or SVG elements
Irole states meaning of element,
examples: role="button",role="checkbox",
role="article", . . .
Iproperties attach data and other information to element,
examples: aria-label="...",aria-describedby="...",
aria-haspopup="true", . . .
Idozens of roles and properties defined
for Web pages and apps
Slide 9/15
Christopher Kopel
– Accessible SVG Charts
ARIA Charts (1/2)
The Problem
Ino dedicated roles and properties
standardised for charts yet
Ihowever, various solutions proposed on the Web
Ipart of my thesis: discussion of these solutions and
derivation of a new proposal with as many standard
keywords as possible
Irole examples: role="chart",role="datapoint",
role="xaxis", . . .
Slide 10/15
Christopher Kopel
– Accessible SVG Charts
ARIA Charts (2/2)
Simplified Code Snippet of Sample Chart
<svg r o l e = ” c h a r t ” a r i a −c h a r t t y p e = ” bar ” . . . >
<t e x t r o l e = ” heading ”>F r u i t Consumption i n 2020</ t e x t>
<g r o l e = ” x a x i s ” a r i a −l a b e l = ” F r u i t ” . . . >. . . </ g>
. . .
<g r o l e = ” d at as et ”>
<r e c t r o l e = ” d a t a p o i n t ” a r ia −l a b e l = ” Apples ” . . . >
<t e x t r o l e = ” dat ava lue ” . . . >25 </ t e x t>
</ r e c t>
. . .
</ g>
</ svg>
Slide 11/15
Christopher Kopel
– Accessible SVG Charts
The AChart Software Project (1/3)
IAChart = Accessible Chart
Ipractical part of my thesis
Iconsists of 2 main components
AChart Creator : tool for producing SVG-ARIA charts
from tabular data (CSV files)
AChart Interpreter : Web app for exploring SVG-ARIA
charts by screen reader and keyboard
Slide 12/15
Christopher Kopel
– Accessible SVG Charts
The AChart Project (3/3)
Future Work
Isupport for more chart types and higher dimensions
Isonification of data
Iautomatic overall chart descriptions (using AI algorithms)
Imake it a browser extension
for use with arbitrary Web pages
Isupport for touch-sensitive tactile displays
7→ multimodal exploration !
Slide 14/15
