Re: ARIA Dataviz Vocabulary Strawman

Thanks Doug,

It is valuable to think about how assistive technology will present and a
user will consume SVG accessibility.  I've attached a HTML page that shows
the approach one charting widget uses to make charts accessible for
assistive technology. It will be interesting to compare how describler and
the widget present a chart to assistive technology. It is great that you
brought this up.

(See attached file: airline.html)

                                                              
                                                              
                    Regards,                     Fred         
                                                              
                   Fred Esch                                  
       Accessibility, Watson Innovations                      
    AARB Complex Visualization Working Group                  
                     Chair                                    
            W3C SVG A11y Task Force                           
                IBM Watson Group                              
                                                              
                                                              






From: Doug Schepers <schepers@w3.org>
To: public-svg-a11y@w3.org
Date: 01/16/2015 09:15 AM
Subject: 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>