Accessible svg charts using aria 2016
Transcript of Accessible svg charts using aria 2016
![Page 1: Accessible svg charts using aria 2016](https://reader034.fdocuments.us/reader034/viewer/2022050614/58a5fe551a28abf6198b53f7/html5/thumbnails/1.jpg)
ACCESSIBLE SVG CHARTS USING ARIA
CSUN 2016 EDU-047 Thurs Mar 24, 2016
Øystein Moseng [email protected] DeveloperHighsoft AS
Ted Gies [email protected]@tedgies1Principal User Experience SpecialistElsevier
![Page 2: Accessible svg charts using aria 2016](https://reader034.fdocuments.us/reader034/viewer/2022050614/58a5fe551a28abf6198b53f7/html5/thumbnails/2.jpg)
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
![Page 3: Accessible svg charts using aria 2016](https://reader034.fdocuments.us/reader034/viewer/2022050614/58a5fe551a28abf6198b53f7/html5/thumbnails/3.jpg)
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
![Page 4: Accessible svg charts using aria 2016](https://reader034.fdocuments.us/reader034/viewer/2022050614/58a5fe551a28abf6198b53f7/html5/thumbnails/4.jpg)
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!
![Page 5: Accessible svg charts using aria 2016](https://reader034.fdocuments.us/reader034/viewer/2022050614/58a5fe551a28abf6198b53f7/html5/thumbnails/5.jpg)
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
![Page 6: Accessible svg charts using aria 2016](https://reader034.fdocuments.us/reader034/viewer/2022050614/58a5fe551a28abf6198b53f7/html5/thumbnails/6.jpg)
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
![Page 7: Accessible svg charts using aria 2016](https://reader034.fdocuments.us/reader034/viewer/2022050614/58a5fe551a28abf6198b53f7/html5/thumbnails/7.jpg)
Survey of Existing ResourcesSVG 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
![Page 8: Accessible svg charts using aria 2016](https://reader034.fdocuments.us/reader034/viewer/2022050614/58a5fe551a28abf6198b53f7/html5/thumbnails/8.jpg)
Notable Gaps of Existing SVG ResourcesCHART 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
![Page 9: Accessible svg charts using aria 2016](https://reader034.fdocuments.us/reader034/viewer/2022050614/58a5fe551a28abf6198b53f7/html5/thumbnails/9.jpg)
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
![Page 10: Accessible svg charts using aria 2016](https://reader034.fdocuments.us/reader034/viewer/2022050614/58a5fe551a28abf6198b53f7/html5/thumbnails/10.jpg)
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
![Page 11: Accessible svg charts using aria 2016](https://reader034.fdocuments.us/reader034/viewer/2022050614/58a5fe551a28abf6198b53f7/html5/thumbnails/11.jpg)
Demo Time - Using Charts with JAWS 17
Links to Demos on http://www.highcharts.com/a11y.html
Before Accessibility and After
![Page 12: Accessible svg charts using aria 2016](https://reader034.fdocuments.us/reader034/viewer/2022050614/58a5fe551a28abf6198b53f7/html5/thumbnails/12.jpg)
Small Study with 6 Users who rely on Screen Readers
User Feedback
![Page 13: Accessible svg charts using aria 2016](https://reader034.fdocuments.us/reader034/viewer/2022050614/58a5fe551a28abf6198b53f7/html5/thumbnails/13.jpg)
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
![Page 14: Accessible svg charts using aria 2016](https://reader034.fdocuments.us/reader034/viewer/2022050614/58a5fe551a28abf6198b53f7/html5/thumbnails/14.jpg)
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
![Page 15: Accessible svg charts using aria 2016](https://reader034.fdocuments.us/reader034/viewer/2022050614/58a5fe551a28abf6198b53f7/html5/thumbnails/15.jpg)
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”
![Page 16: Accessible svg charts using aria 2016](https://reader034.fdocuments.us/reader034/viewer/2022050614/58a5fe551a28abf6198b53f7/html5/thumbnails/16.jpg)
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”.
![Page 17: Accessible svg charts using aria 2016](https://reader034.fdocuments.us/reader034/viewer/2022050614/58a5fe551a28abf6198b53f7/html5/thumbnails/17.jpg)
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
![Page 18: Accessible svg charts using aria 2016](https://reader034.fdocuments.us/reader034/viewer/2022050614/58a5fe551a28abf6198b53f7/html5/thumbnails/18.jpg)
Summary and Closing Remarks
Conclusion
![Page 19: Accessible svg charts using aria 2016](https://reader034.fdocuments.us/reader034/viewer/2022050614/58a5fe551a28abf6198b53f7/html5/thumbnails/19.jpg)
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)
![Page 20: Accessible svg charts using aria 2016](https://reader034.fdocuments.us/reader034/viewer/2022050614/58a5fe551a28abf6198b53f7/html5/thumbnails/20.jpg)
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
![Page 21: Accessible svg charts using aria 2016](https://reader034.fdocuments.us/reader034/viewer/2022050614/58a5fe551a28abf6198b53f7/html5/thumbnails/21.jpg)
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.
![Page 22: Accessible svg charts using aria 2016](https://reader034.fdocuments.us/reader034/viewer/2022050614/58a5fe551a28abf6198b53f7/html5/thumbnails/22.jpg)
Contact Us
Øystein MosengCore Developer
Ted GiesPrincipal User Experience Specialist, Elsevier
Email: [email protected] or [email protected]
TWITTER: @tedgies1
![Page 23: Accessible svg charts using aria 2016](https://reader034.fdocuments.us/reader034/viewer/2022050614/58a5fe551a28abf6198b53f7/html5/thumbnails/23.jpg)
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.)
![Page 24: Accessible svg charts using aria 2016](https://reader034.fdocuments.us/reader034/viewer/2022050614/58a5fe551a28abf6198b53f7/html5/thumbnails/24.jpg)
Resources and LinksScienceDirect
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