SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
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
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