ARIA Dataviz Vocabulary Strawman

Hey, folks–

Here's a rough breakdown of what I'm doing in my experimental screenreader.

Regards–
–Doug

=============


Chart:

name: 'chart'
type: role
category: landmark
applies to: container elements
requires: aria-charttype
parent class: none

name: 'aria-charttype'
type: property
category:
applies to: container elements
requires: 'chart' role
parent class: none
values: 'bar', 'line', 'area', 'pie', 'scatterplot', 'graph', ?

name: 'chartarea'
type: role
category: document structure
applies to: graphical elements
requires: (dimensions)
parent class: chart


General:

name: 'heading'
type: role
category: document structure
applies to: textual elements ('title', 'desc', 'text', 'tspan', 'textpath')
requires: text value
optional: 'aria-labelledby'
parent class: 'chart', 'axis', 'legend'


Axis:

name: 'axis'
type: role
category: widget
applies to: container elements
requires: 'aria-axisdimension', 'heading'
optional: 'aria-axistype', 'aria-axisunits'
parent class: 'chart', 'axis', 'legend'

name: 'aria-axisdimension'
type: property
category:
applies to: container elements
requires: 'axis' role
parent class: 'axis'
values: 'x', 'y', 'z', ?

name: 'aria-axistype'
type: property
category:
applies to: container elements
requires: 'axis' role
parent class: 'axis'
values: 'numeric', 'category', ?

name: 'aria-axisunits'
type: property
category:
applies to: container elements
requires: 'axis' role
parent class: 'axis'
values: unit type

name: 'aria-valuemin'
type: property
category:
applies to: container elements
requires: 'axis' role
parent class: 'axis'
values: number

name: 'aria-valuemax'
type: property
category:
applies to: container elements
requires: 'axis' role
parent class: 'axis'
values: number

name: 'axislabel'
type: role
category:
applies to: textual elements ('title', 'desc', 'text', 'tspan', 'textpath')
requires: 'axis' role
parent class: 'axis'
values: text


Legend:

name: 'legend'
type: role
category: widget
applies to: container elements
requires: 'legenditem'
parent class: 'chart'

name: 'legenditem'
type: role
category:
applies to: container elements, textual elements ('title', 'desc', 
'text', 'tspan', 'textpath')
requires: 'axis' role
parent class: 'axis'
values: text


Data:

name: 'dataset'
type: role
category: widget
applies to: container elements
requires: 'datapoint'
parent class: 'chart'

name: 'datapoint'
type: role
category: widget
applies to: container elements, graphical elements
requires: 'datavalue'
parent class: 'dataset'

name: 'datavalue'
type: role
category: widget
applies to: textual elements ('title', 'desc', 'text', 'tspan', 'textpath')
requires:
optional: 'aria-labelledby'
parent class: 'datapoint'

name: 'aria-labelledby'
type: property
category:
applies to: textual elements ('title', 'desc', 'text', 'tspan', 'textpath')
requires:
parent class: 'datavalue'
values: ids of axis labels

===========

Example:

<svg role="chart" aria-charttype="bar">
   <title role="heading">(chart title)</title>
   <desc role="heading">(chart description or summary)</desc>
   <rect role="chartarea" x="65" y="35" width="445" height="335"/>

   <g role="axis" aria-axisdimension="x" aria-axistype="category">
     <title role="heading">(axis title)</title>
     <text role="axislabel">(axis tick label)</text>
     <!-- graphics -->
   </g>

   <g role="axis" aria-axisdimension="x" aria-valuemin="0" 
aria-valuemax="12">
      <text role="heading">(axis title)</text>
      <text role="axislabel">(axis tick label)</text>
     <!-- graphics -->
   </g>

   <g role="dataset">
     <g role="datapoint">
       <title role="datavalue" 
aria-labelledby="(axis-label-id)">value</title>
       <!-- graphics -->
     </g>
   </g>
</svg>

Received on Friday, 16 January 2015 14:14:46 UTC