Accessible svg charts using aria 2016

Ted Gies
Ted GiesPrincipal User Experience Specialist at Elsevier
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
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
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
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!
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
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
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
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
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
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
Demo Time - Using Charts with JAWS 17
Links to Demos on http://www.highcharts.com/a11y.html
Before Accessibility and After
Small Study with 6 Users who rely on
Screen Readers
User Feedback
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
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
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”
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”.
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
Summary and Closing Remarks
Conclusion
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)
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
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.
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
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.)
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
1 of 24

Recommended

SVG Accessibility by
SVG AccessibilitySVG Accessibility
SVG AccessibilityAnna Khabibullina
2.4K views22 slides
Web performance 101 by
Web performance 101Web performance 101
Web performance 101Stephen Thair
4.5K views40 slides
Accessibility Testing Tools for Developers - Gerard K. Cohen - CSUN 2016 by
Accessibility Testing Tools for Developers - Gerard K. Cohen - CSUN 2016Accessibility Testing Tools for Developers - Gerard K. Cohen - CSUN 2016
Accessibility Testing Tools for Developers - Gerard K. Cohen - CSUN 2016gerardkcohen
3.9K views35 slides
AD CC and Me: Lessons Learned in Video Accessibility by
AD CC and Me: Lessons Learned in Video AccessibilityAD CC and Me: Lessons Learned in Video Accessibility
AD CC and Me: Lessons Learned in Video AccessibilityBilly Gregory
1.9K views51 slides
Fringe Accessibility: London Web Standards by
Fringe Accessibility: London Web StandardsFringe Accessibility: London Web Standards
Fringe Accessibility: London Web StandardsAdrian Roselli
2.4K views71 slides
Breaking silos - all bad things must come to an end by
Breaking silos - all bad things must come to an endBreaking silos - all bad things must come to an end
Breaking silos - all bad things must come to an endHenny Swan
3K views35 slides

More Related Content

Viewers also liked

2017 CSUN Color Contrast by
2017 CSUN Color Contrast2017 CSUN Color Contrast
2017 CSUN Color ContrastCrystal Baker
1.2K views26 slides
CSUN 2017 Success Criteria: Dependencies and Prioritization by
CSUN 2017 Success Criteria: Dependencies and PrioritizationCSUN 2017 Success Criteria: Dependencies and Prioritization
CSUN 2017 Success Criteria: Dependencies and PrioritizationSean Kelly
1.8K views43 slides
2017 CSUN The Art of Language in Accessibility by
2017 CSUN The Art of Language in Accessibility2017 CSUN The Art of Language in Accessibility
2017 CSUN The Art of Language in AccessibilityCrystal Baker
649 views46 slides
Mystery Meat 2.0 – Making hidden mobile interactions accessible by
Mystery Meat 2.0 – Making hidden mobile interactions accessibleMystery Meat 2.0 – Making hidden mobile interactions accessible
Mystery Meat 2.0 – Making hidden mobile interactions accessibleTed Drake
2K views23 slides
Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes... by
Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...
Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...Ted Drake
3.7K views36 slides
CSUN 2017 VPATs For Business or Measure by
CSUN 2017 VPATs For Business or MeasureCSUN 2017 VPATs For Business or Measure
CSUN 2017 VPATs For Business or MeasureTed Gies
1.4K views24 slides

Viewers also liked(14)

2017 CSUN Color Contrast by Crystal Baker
2017 CSUN Color Contrast2017 CSUN Color Contrast
2017 CSUN Color Contrast
Crystal Baker1.2K views
CSUN 2017 Success Criteria: Dependencies and Prioritization by Sean Kelly
CSUN 2017 Success Criteria: Dependencies and PrioritizationCSUN 2017 Success Criteria: Dependencies and Prioritization
CSUN 2017 Success Criteria: Dependencies and Prioritization
Sean Kelly1.8K views
2017 CSUN The Art of Language in Accessibility by Crystal Baker
2017 CSUN The Art of Language in Accessibility2017 CSUN The Art of Language in Accessibility
2017 CSUN The Art of Language in Accessibility
Crystal Baker649 views
Mystery Meat 2.0 – Making hidden mobile interactions accessible by Ted Drake
Mystery Meat 2.0 – Making hidden mobile interactions accessibleMystery Meat 2.0 – Making hidden mobile interactions accessible
Mystery Meat 2.0 – Making hidden mobile interactions accessible
Ted Drake2K views
Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes... by Ted Drake
Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...
Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...
Ted Drake3.7K views
CSUN 2017 VPATs For Business or Measure by Ted Gies
CSUN 2017 VPATs For Business or MeasureCSUN 2017 VPATs For Business or Measure
CSUN 2017 VPATs For Business or Measure
Ted Gies1.4K views
Ten Usability Heuristics with Example -Sivaprasath Selvaraj by Sivaprasath Selvaraj
Ten Usability Heuristics with Example -Sivaprasath SelvarajTen Usability Heuristics with Example -Sivaprasath Selvaraj
Ten Usability Heuristics with Example -Sivaprasath Selvaraj
Sivaprasath Selvaraj63.1K views
CSUN 2017 - ACT Now: Accessibility Conformance Testing for WCAG by Mary Jo Mueller
CSUN 2017 - ACT Now: Accessibility Conformance Testing for WCAGCSUN 2017 - ACT Now: Accessibility Conformance Testing for WCAG
CSUN 2017 - ACT Now: Accessibility Conformance Testing for WCAG
Mary Jo Mueller900 views
Mind your lang (for role=drinks at CSUN 2017) by Adrian Roselli
Mind your lang (for role=drinks at CSUN 2017)Mind your lang (for role=drinks at CSUN 2017)
Mind your lang (for role=drinks at CSUN 2017)
Adrian Roselli1.9K views
Accessibility and Design: Where Productivity and Philosophy Meet by Joe Lonsky
Accessibility and Design:  Where Productivity and Philosophy MeetAccessibility and Design:  Where Productivity and Philosophy Meet
Accessibility and Design: Where Productivity and Philosophy Meet
Joe Lonsky1.6K views
Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017 by Bill Tyler
Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017
Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017
Bill Tyler3K views
Digital Accessibility Legal Update - CSUNATC 2017 (CSUN) by Lainey Feingold
Digital Accessibility Legal Update - CSUNATC 2017 (CSUN)Digital Accessibility Legal Update - CSUNATC 2017 (CSUN)
Digital Accessibility Legal Update - CSUNATC 2017 (CSUN)
Lainey Feingold2.4K views
Reusable acceptance criteria and test cases for accessibility by Intopia
Reusable acceptance criteria and test cases for accessibilityReusable acceptance criteria and test cases for accessibility
Reusable acceptance criteria and test cases for accessibility
Intopia4.9K views

Similar to Accessible svg charts using aria 2016

Learn svg by
Learn svgLearn svg
Learn svgFitBlar Mit
6.1K views422 slides
Large Scale Graph Analytics with JanusGraph by
Large Scale Graph Analytics with JanusGraphLarge Scale Graph Analytics with JanusGraph
Large Scale Graph Analytics with JanusGraphP. Taylor Goetz
19.1K views67 slides
Large Scale Graph Analytics with JanusGraph by
Large Scale Graph Analytics with JanusGraphLarge Scale Graph Analytics with JanusGraph
Large Scale Graph Analytics with JanusGraphDataWorks Summit
1.7K views67 slides
Highcharts- The Next Chapter CSUN 2019 by
Highcharts- The Next Chapter CSUN 2019Highcharts- The Next Chapter CSUN 2019
Highcharts- The Next Chapter CSUN 2019Ted Gies
175 views19 slides
Canvas based presentation by
Canvas based presentationCanvas based presentation
Canvas based presentationSrikrishnan Suresh
2.2K views16 slides
CSUN 2020 Accessible Visualizations: Maps, Annotations, and Spark lines by
CSUN 2020 Accessible Visualizations: Maps, Annotations, and Spark linesCSUN 2020 Accessible Visualizations: Maps, Annotations, and Spark lines
CSUN 2020 Accessible Visualizations: Maps, Annotations, and Spark linesTed Gies
480 views21 slides

Similar to Accessible svg charts using aria 2016(20)

Large Scale Graph Analytics with JanusGraph by P. Taylor Goetz
Large Scale Graph Analytics with JanusGraphLarge Scale Graph Analytics with JanusGraph
Large Scale Graph Analytics with JanusGraph
P. Taylor Goetz19.1K views
Large Scale Graph Analytics with JanusGraph by DataWorks Summit
Large Scale Graph Analytics with JanusGraphLarge Scale Graph Analytics with JanusGraph
Large Scale Graph Analytics with JanusGraph
DataWorks Summit1.7K views
Highcharts- The Next Chapter CSUN 2019 by Ted Gies
Highcharts- The Next Chapter CSUN 2019Highcharts- The Next Chapter CSUN 2019
Highcharts- The Next Chapter CSUN 2019
Ted Gies175 views
CSUN 2020 Accessible Visualizations: Maps, Annotations, and Spark lines by Ted Gies
CSUN 2020 Accessible Visualizations: Maps, Annotations, and Spark linesCSUN 2020 Accessible Visualizations: Maps, Annotations, and Spark lines
CSUN 2020 Accessible Visualizations: Maps, Annotations, and Spark lines
Ted Gies480 views
London Tableau User Group November 2017 Presentation - How To Build Tableau T... by Russell Spangler
London Tableau User Group November 2017 Presentation - How To Build Tableau T...London Tableau User Group November 2017 Presentation - How To Build Tableau T...
London Tableau User Group November 2017 Presentation - How To Build Tableau T...
Russell Spangler280 views
Arches Getty Brownbag Talk by benosteen
Arches Getty Brownbag TalkArches Getty Brownbag Talk
Arches Getty Brownbag Talk
benosteen156 views
Advanced sass/compass by Nick Cooley
Advanced sass/compassAdvanced sass/compass
Advanced sass/compass
Nick Cooley6.1K views
Openstack - Why IaaS will remain relevant by Charles Llewellyn
Openstack - Why IaaS will remain relevantOpenstack - Why IaaS will remain relevant
Openstack - Why IaaS will remain relevant
Charles Llewellyn115 views
What is-sass-by-lucas-castro by Lucas Castro
What is-sass-by-lucas-castroWhat is-sass-by-lucas-castro
What is-sass-by-lucas-castro
Lucas Castro526 views
SVG Icons and Screen Reader Accessibility by Dennis Lembree
SVG Icons and Screen Reader AccessibilitySVG Icons and Screen Reader Accessibility
SVG Icons and Screen Reader Accessibility
Dennis Lembree1.5K views
Introduction to VEDAViz by AKanudia
Introduction to VEDAVizIntroduction to VEDAViz
Introduction to VEDAViz
AKanudia296 views
A Future Friendly Workflow by Luke Brooker
A Future Friendly WorkflowA Future Friendly Workflow
A Future Friendly Workflow
Luke Brooker2.1K views

More from Ted Gies

CSUN 2023 Automated Descriptions 3 March 2023 TG.pptx by
CSUN 2023 Automated Descriptions 3 March 2023 TG.pptxCSUN 2023 Automated Descriptions 3 March 2023 TG.pptx
CSUN 2023 Automated Descriptions 3 March 2023 TG.pptxTed Gies
47 views41 slides
CSUN 2023 Analytics.pptx by
CSUN 2023 Analytics.pptxCSUN 2023 Analytics.pptx
CSUN 2023 Analytics.pptxTed Gies
143 views30 slides
Accessible Next Level Visualizations by
Accessible Next Level VisualizationsAccessible Next Level Visualizations
Accessible Next Level VisualizationsTed Gies
172 views35 slides
CSUN 2020 VPATs: For Business or Measure by
CSUN 2020 VPATs: For Business or MeasureCSUN 2020 VPATs: For Business or Measure
CSUN 2020 VPATs: For Business or MeasureTed Gies
305 views34 slides
Accessibility in the Engineering Village CSUN 2019 by
Accessibility in the Engineering Village CSUN 2019Accessibility in the Engineering Village CSUN 2019
Accessibility in the Engineering Village CSUN 2019Ted Gies
163 views29 slides
Elsevier Company Accessibility Policy by
Elsevier Company Accessibility PolicyElsevier Company Accessibility Policy
Elsevier Company Accessibility PolicyTed Gies
106 views32 slides

More from Ted Gies(9)

CSUN 2023 Automated Descriptions 3 March 2023 TG.pptx by Ted Gies
CSUN 2023 Automated Descriptions 3 March 2023 TG.pptxCSUN 2023 Automated Descriptions 3 March 2023 TG.pptx
CSUN 2023 Automated Descriptions 3 March 2023 TG.pptx
Ted Gies47 views
CSUN 2023 Analytics.pptx by Ted Gies
CSUN 2023 Analytics.pptxCSUN 2023 Analytics.pptx
CSUN 2023 Analytics.pptx
Ted Gies143 views
Accessible Next Level Visualizations by Ted Gies
Accessible Next Level VisualizationsAccessible Next Level Visualizations
Accessible Next Level Visualizations
Ted Gies172 views
CSUN 2020 VPATs: For Business or Measure by Ted Gies
CSUN 2020 VPATs: For Business or MeasureCSUN 2020 VPATs: For Business or Measure
CSUN 2020 VPATs: For Business or Measure
Ted Gies305 views
Accessibility in the Engineering Village CSUN 2019 by Ted Gies
Accessibility in the Engineering Village CSUN 2019Accessibility in the Engineering Village CSUN 2019
Accessibility in the Engineering Village CSUN 2019
Ted Gies163 views
Elsevier Company Accessibility Policy by Ted Gies
Elsevier Company Accessibility PolicyElsevier Company Accessibility Policy
Elsevier Company Accessibility Policy
Ted Gies106 views
CSUN 2018 Dont Play Me - 2 Games in Web Accessibility by Ted Gies
CSUN 2018 Dont Play Me - 2 Games in Web AccessibilityCSUN 2018 Dont Play Me - 2 Games in Web Accessibility
CSUN 2018 Dont Play Me - 2 Games in Web Accessibility
Ted Gies88 views
World Usability Day 2012 ARIA by Ted Gies
World Usability Day 2012 ARIA World Usability Day 2012 ARIA
World Usability Day 2012 ARIA
Ted Gies990 views
CSUN 2012: ScienceDirect Article Of The Future Collaboration by Ted Gies
CSUN 2012: ScienceDirect Article Of The Future CollaborationCSUN 2012: ScienceDirect Article Of The Future Collaboration
CSUN 2012: ScienceDirect Article Of The Future Collaboration
Ted Gies919 views

Recently uploaded

SAP FOR CONTRACT MANUFACTURING.pdf by
SAP FOR CONTRACT MANUFACTURING.pdfSAP FOR CONTRACT MANUFACTURING.pdf
SAP FOR CONTRACT MANUFACTURING.pdfVirendra Rai, PMP
11 views2 slides
Generic or specific? Making sensible software design decisions by
Generic or specific? Making sensible software design decisionsGeneric or specific? Making sensible software design decisions
Generic or specific? Making sensible software design decisionsBert Jan Schrijver
6 views60 slides
A first look at MariaDB 11.x features and ideas on how to use them by
A first look at MariaDB 11.x features and ideas on how to use themA first look at MariaDB 11.x features and ideas on how to use them
A first look at MariaDB 11.x features and ideas on how to use themFederico Razzoli
45 views36 slides
Citi TechTalk Session 2: Kafka Deep Dive by
Citi TechTalk Session 2: Kafka Deep DiveCiti TechTalk Session 2: Kafka Deep Dive
Citi TechTalk Session 2: Kafka Deep Diveconfluent
17 views60 slides
DSD-INT 2023 Modelling litter in the Yarra and Maribyrnong Rivers (Australia)... by
DSD-INT 2023 Modelling litter in the Yarra and Maribyrnong Rivers (Australia)...DSD-INT 2023 Modelling litter in the Yarra and Maribyrnong Rivers (Australia)...
DSD-INT 2023 Modelling litter in the Yarra and Maribyrnong Rivers (Australia)...Deltares
9 views34 slides
LAVADORA ROLO.docx by
LAVADORA ROLO.docxLAVADORA ROLO.docx
LAVADORA ROLO.docxSamuelRamirez83524
7 views1 slide

Recently uploaded(20)

Generic or specific? Making sensible software design decisions by Bert Jan Schrijver
Generic or specific? Making sensible software design decisionsGeneric or specific? Making sensible software design decisions
Generic or specific? Making sensible software design decisions
A first look at MariaDB 11.x features and ideas on how to use them by Federico Razzoli
A first look at MariaDB 11.x features and ideas on how to use themA first look at MariaDB 11.x features and ideas on how to use them
A first look at MariaDB 11.x features and ideas on how to use them
Federico Razzoli45 views
Citi TechTalk Session 2: Kafka Deep Dive by confluent
Citi TechTalk Session 2: Kafka Deep DiveCiti TechTalk Session 2: Kafka Deep Dive
Citi TechTalk Session 2: Kafka Deep Dive
confluent17 views
DSD-INT 2023 Modelling litter in the Yarra and Maribyrnong Rivers (Australia)... by Deltares
DSD-INT 2023 Modelling litter in the Yarra and Maribyrnong Rivers (Australia)...DSD-INT 2023 Modelling litter in the Yarra and Maribyrnong Rivers (Australia)...
DSD-INT 2023 Modelling litter in the Yarra and Maribyrnong Rivers (Australia)...
Deltares9 views
DSD-INT 2023 Delft3D FM Suite 2024.01 1D2D - Beta testing programme - Geertsema by Deltares
DSD-INT 2023 Delft3D FM Suite 2024.01 1D2D - Beta testing programme - GeertsemaDSD-INT 2023 Delft3D FM Suite 2024.01 1D2D - Beta testing programme - Geertsema
DSD-INT 2023 Delft3D FM Suite 2024.01 1D2D - Beta testing programme - Geertsema
Deltares17 views
DSD-INT 2023 Wave-Current Interaction at Montrose Tidal Inlet System and Its ... by Deltares
DSD-INT 2023 Wave-Current Interaction at Montrose Tidal Inlet System and Its ...DSD-INT 2023 Wave-Current Interaction at Montrose Tidal Inlet System and Its ...
DSD-INT 2023 Wave-Current Interaction at Montrose Tidal Inlet System and Its ...
Deltares10 views
DSD-INT 2023 Machine learning in hydraulic engineering - Exploring unseen fut... by Deltares
DSD-INT 2023 Machine learning in hydraulic engineering - Exploring unseen fut...DSD-INT 2023 Machine learning in hydraulic engineering - Exploring unseen fut...
DSD-INT 2023 Machine learning in hydraulic engineering - Exploring unseen fut...
Deltares6 views
Elevate your SAP landscape's efficiency and performance with HCL Workload Aut... by HCLSoftware
Elevate your SAP landscape's efficiency and performance with HCL Workload Aut...Elevate your SAP landscape's efficiency and performance with HCL Workload Aut...
Elevate your SAP landscape's efficiency and performance with HCL Workload Aut...
HCLSoftware6 views
Navigating container technology for enhanced security by Niklas Saari by Metosin Oy
Navigating container technology for enhanced security by Niklas SaariNavigating container technology for enhanced security by Niklas Saari
Navigating container technology for enhanced security by Niklas Saari
Metosin Oy12 views
DSD-INT 2023 Next-Generation Flood Inundation Mapping for Taiwan - Delft3D FM... by Deltares
DSD-INT 2023 Next-Generation Flood Inundation Mapping for Taiwan - Delft3D FM...DSD-INT 2023 Next-Generation Flood Inundation Mapping for Taiwan - Delft3D FM...
DSD-INT 2023 Next-Generation Flood Inundation Mapping for Taiwan - Delft3D FM...
Deltares7 views
.NET Developer Conference 2023 - .NET Microservices mit Dapr – zu viel Abstra... by Marc Müller
.NET Developer Conference 2023 - .NET Microservices mit Dapr – zu viel Abstra....NET Developer Conference 2023 - .NET Microservices mit Dapr – zu viel Abstra...
.NET Developer Conference 2023 - .NET Microservices mit Dapr – zu viel Abstra...
Marc Müller38 views
Fleet Management Software in India by Fleetable
Fleet Management Software in India Fleet Management Software in India
Fleet Management Software in India
Fleetable11 views
Roadmap y Novedades de producto by Neo4j
Roadmap y Novedades de productoRoadmap y Novedades de producto
Roadmap y Novedades de producto
Neo4j50 views
Neo4j y GenAI by Neo4j
Neo4j y GenAI Neo4j y GenAI
Neo4j y GenAI
Neo4j45 views
Consulting for Data Monetization Maximizing the Profit Potential of Your Data... by Flexsin
Consulting for Data Monetization Maximizing the Profit Potential of Your Data...Consulting for Data Monetization Maximizing the Profit Potential of Your Data...
Consulting for Data Monetization Maximizing the Profit Potential of Your Data...
Flexsin 15 views

Accessible svg charts using aria 2016

  • 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