Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Accessible svg charts using aria 2016

1,712 views

Published on

Presentation from CSUN 2016. Elsevier and Highsoft AS recently collaborated to enhance the accessibility of a SVG chart library.

Published in: Software
  • Be the first to comment

Accessible svg charts using aria 2016

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 11. Demo Time - Using Charts with JAWS 17 Links to Demos on http://www.highcharts.com/a11y.html Before Accessibility and After
  12. 12. Small Study with 6 Users who rely on Screen Readers User Feedback
  13. 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. 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. 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. 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. 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. 18. Summary and Closing Remarks Conclusion
  19. 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. 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. 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. 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. 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. 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

×