1.
ACCESSIBLE SVG
CHARTS
USING ARIA
CSUN 2016 EDU-047 Thurs Mar 24, 2016
Øystein Moseng
oystein@highsoft.com
Core Developer
Highsoft AS
Ted Gies
ted.gies@elsevier.com
@tedgies1
Principal User Experience Specialist
Elsevier

2.
Overview
• Nature of Collaboration
• Problem Statement
• Overview of Accessible SVG Resources
• Accessible Chart Concept
• User Study Feedback
• Screen Reader Demo
• Nonvisual Chart Design Considerations
• Closing Remarks
• Q&A

3.
About Highcharts
Highsoft, based in Norway, is the creator of
Highcharts, the leading enterprise-grade charting
library.
Written completely in Javascript with charts
rendered in SVG, Highcharts maximizes the
potential of existing standards when building
accessible data-visualization solutions.
Learn more at www.highcharts.com

4.
About Elsevier
• Mission is to lead the way in advancing science, technology and health
• Largest publisher of books and journals in Science
• Prolific publisher in disability research and accessibility
• Ted works in Elsevier labs (@elsevierlabs)
• Accessibility has been deemed “strategic” by our Chief Strategy Officer
• We love Accessibility collaborations!

5.
Nature of Collaboration
• Elsevier licenses web chart components from HighSoft
• Elsevier customers demand fully compliant products
• Ted pesters HighSoft from 4000 miles away to help with accessibility
• Øystein and Ted form friendship and collaborate on approach
• We challenge ourselves to create a superior non visual experience
• Together we explore current and future solutions for accessible SVG
Norwegian Keyboard

6.
Problem Space
• “Make your data come alive”
• Is a datatable an acceptable substitute for a chart?
• Some best practices, but no code level guide or examples.
• Need an Accessibility Supported solution today

7.
Survey of Existing Resources
SVG W3C Specs, Notes, and Wikis
• W3C A11y Features of SVG Note (2000)
• SVG 1.2 Accessibility Support (2008)
• SVG 2 Working Draft Accessibility Support (2015)
• Proposed SVG ARIA Chart Roles (2015 Fred Esch)
• 8 Tips for Creating Accessible SVG (Léonie Watson) (2014)
Chart Guidelines and Notable Talks
• SAS Institute Paper on Tactile and Auditory Interaction
• NCAM Description of Science Content within Talking Books
• DIAGRAM Center Graph Guidelines
• Ed Summers (SAS) Many talks on iPad and sonification of Charts
• Last Year CSUN: Accessible Charts for the Blind IBM

8.
Notable Gaps of Existing SVG Resources
CHART STANDARDS
• How to describe the nature of chart types (pie, line, bar, box) to NVP?
• How to describe a data points in a non-visual way? (slice vs. data point)
SVG - How do you?
• make a focusable element with an accessible name?
• create semantic structures, e.g. ordered and unordered lists?
• apply ARIA to SVG structures (not single elements)?
• create chart roles (note Fred Esch proposal)
Browsers and AT
• No exposure of related SVG items (e.g. <g> group)
• iOs no exposure of SVG elements with ARIA region roles

9.
3 Approaches to Conveying Charts
using ARIA
ARIA – A set of markup to help progressively enhance digital content for AT users.
1) Live Regions – visually hidden alert of current focus
• Yahoo User Interface Library
• Progressive Accessibility Solutions - Chemical Diagrams
2) Shadow DOM – visually hidden ARIA Tree
• IBM RAVE
3) Apply ARIA roles and labels to SVG Itself
• Highcharts/Elsevier approach

10.
Our Design Approach
• Chart SVG navigable by screen reader
• Hidden information region
• Entry to table version
• Each point is ARIA-labelled
• Each series is an ARIA region with label
• Aid visualization by assigning a familiar
structure to the data

11.
Demo Time - Using Charts with JAWS 17
Links to Demos on http://www.highcharts.com/a11y.html
Before Accessibility and After

12.
Small Study with 6 Users who rely on
Screen Readers
User Feedback

13.
User Study with 6 Users of Screen
Readers – Study Goals
1) Better Understand Non-Visual Chart Design
• Discuss experiences with chart info on the web
• Is there an ideal way to experience charts in a NV way?
2) Compare the experience of a Table vs ARIA SVG
• Rate an ARIA SVG chart and adjacent table on understandability, usability, verbosity
3) Determine if an ARIA chart is even worth doing with current “Accessibility
Supported” technology

14.
User Study – Experience with Chart
information on the Web
• Charts are everywhere
• Tables work fine for simple charts, but lack the big picture.
• Best experience by tactile technology
• Sonification
• Tables best solution for screen readers

15.
User Study – Understandability
Users preferred the table for simpler (bar, line)
Users rated SVG equal to table for box plot
• SVG easier to absorb vs table for multi-heading data > 4
• Tables have to have the proper headers
• Chart types need to be described. “What is a box plot?”
“The SVG is quite nice!, I can see percentages, certainly usable”

16.
User Study – Usability
On Average, users rated chart with higher usability than the table for all 3 chart types.
Table
• Allows more flexibility than SVG in traversing data vertically and horizontally
• JAWS provides good table reading commands
SVG
• Users liked ability to just arrow through without using table reading commands
• Users liked the landmarks denoting how many points in the series and chart type.
• Ability to use R to jump between line series “big advantage”, “very handy”.

17.
User Study – Verbosity
• PIE SVG and Table were rated equally
• Line SVG rated as less verbose vs Table
• BOX SVG rated as more verbose vs Table
SVG
• Users though “graphic” was repetitive
• Users did not like the wordy description as part of a container (aria-label)
or table before the chart started
TABLE
• 4 headings was too much cognitive load

18.
Summary and Closing Remarks
Conclusion

19.
Best Practices when Using ARIA for SVG Charts
• Authors: Provide a description
• Provide an entry to an accessible table equivalent
• Provide an accessible way to export the SVG itself
• Describe data points using ARIA labels and role=“img”
• Describe series using ARIA label and role=“region”
• Provide a long description in a region that is easy to skip.
• How to navigate using a screen reader
• Clarify nature of the chart type (pie, line, candlestick)
• Axis information
• Author description
• Possible region with statistical insights (maximum, minimum, mode, variance)

20.
Best Practices when Using ARIA for
SVG Charts
DON’T:
• Be too verbose, especially in the ARIA-labels
• Expose nonsensical SVG elements (e.g. <text>)
• role=”presentation”
• aria-hidden

21.
Summary of Main Points
• SVG charts can be enhanced with ARIA to be understandable and
usable by AT users.
• Understandable experience involves accessible data points (table
and chart) with human created description.
• AT users may prefer the table, make one available.
• Tactile graphic is a more memorable experience with ability to
identify trends.
• We all look forward to the fruits of SVG 2 with semantics to relate
elements and more focusable elements.
• Encourage publishers, chart producers, and standards bodies to
work together on solutions.

22.
Contact Us
Øystein Moseng
Core Developer
oystein@highsoft.com
Ted Gies
Principal User Experience Specialist, Elsevier
Email: ted.gies@elsevier.com or accessibility@elsevier.com
TWITTER: @tedgies1

23.
SVG and Charts References
• W3C/Specs
• SVG 1.2 Accessibility Support (2008)
• SVG 2 Working Draft Accessibility Support (2015)
• W3C Notes/Wiki
• W3C A11y Features of SVG (2000)
• Proposed SVG ARIA Chart Roles (2015 Fred Esch)
• Tips for Creating Accessible SVG (Léonie Watson)
• Last Year CSUN: Accessible Charts for the Blind (IBM)
• DIAGRAM Center Graph Guidelines
• YUI SVG Chart Example
• SAS Institute Paper on Tactile and Auditory Interaction
• NCAM Description of Science Content within Talking Books
• Interactive SVG Chemistry Molecules (Progressive A11y Solutions Ltd.)

24.
Resources and Links
ScienceDirect
http://www.sciencedirect.com/
Scopus
http://www.scopus.com/
Elsevier Company Website
http://www.elsevier.com/
Elsevier Accessibility Policy
https://www.elsevier.com/about/company-information/policies/accessibility
Elsevier Accessibility/Usability Collaboration
http://collaborate.athenpro.org/group/elsevier/
Highsoft Company Website
http://www.highcharts.com/
Highchart Accessibility Demos
http://www.highcharts.com/a11y.html