Accessible SVG Charts with AChart Creator and AChart Interpreter Christopher Alexander Kopel Accessible SVG Charts with AChart Creator and AChart Interpreter Christopher Alexander Kopel B.Sc. Master’s Thesis to achieve the university degree of Diplom-Ingenieur Master’s Degree Programme: Information and Computer Engineering submitted to Graz University of Technology Supervisor Ao.Univ.-Prof. Dr. Keith Andrews Institute of Interactive Systems and Data Science (ISDS) Graz, 16 May 2021 © Copyright 2021 by Christopher Alexander Kopel, except as otherwise noted. This work is placed under a Creative Commons Attribution 4.0 International (CC BY 4.0) licence. Zugängliche SVG-Charts mit AChart Creator und AChart Interpreter Christopher Alexander Kopel B.Sc. Masterarbeit für den akademischen Grad Diplom-Ingenieur Masterstudium: Information and Computer Engineering an der Technischen Universität Graz Begutachter Ao.Univ.-Prof. Dr. Keith Andrews Institute of Interactive Systems and Data Science (ISDS) Graz, 16 May 2021 Diese Arbeit ist in englischer Sprache verfasst. © Copyright 2021 Christopher Alexander Kopel, sofern nicht anders gekennzeichnet. Diese Arbeit steht unter der Creative Commons Attribution 4.0 International (CC BY 4.0) Lizenz. Statutory Declaration I declare that I have authored this thesis independently, that I have not used other than the declared sources / resources, and that I have explicitly indicated all material which has been quoted either literally or by content from the sources used. The document uploaded to TUGRAZonline is identical to the present thesis. Eidesstattliche Erklärung Ich erkläre an Eides statt, dass ich die vorliegende Arbeit selbstständig verfasst, andere als die angegebe- nen Quellen/Hilfsmittel nicht benutzt, und die den benutzten Quellen wörtlich und inhaltlich entnommenen Stellen als solche kenntlich gemacht habe. Das in TUGRAZonline hochgeladene Dokument ist mit der vorliegenden Arbeit identisch. Date/Datum Signature/Unterschrift Abstract Presenting visual information to blind users may be regarded as one of the most complex challenges in the field of accessibility. The confluence of data visualisations moving to the web and initiatives towards web accessibility have led to a particularly promising approach: enriching SVG-based charts with underlying data and semantic information in machine-readable form using ARIA roles and properties. This thesis first surveys current approaches to web accessibility, chart accessibility, and the semantic enrichment of SVG charts, concentrating on charts of tabular data, such as line, bar, and pie charts. A number of proposed taxonomies of ARIA roles and properties for accessible SVG charts are discussed and compared, leading to a new aggregate taxonomy, the AChart (Accessible Chart) taxonomy. The remainder of the thesis presents AChart, a suite of open-source software tools written in TypeScript with Node.js, which currently supports bar charts, line charts, and pie charts. AChart Creator is a command-line tool which generates accessible SVG charts from CSV files using the D3 framework and injecting ARIA roles and properties from the AChart taxonomy. AChart Interpreter is a client-side web application which interprets an accessible SVG chart, displays side-by-side graphical and textual versions of the chart, and can read out the chart using synthetic speech. Its user interface is screen reader compatible, so it can be used by blind users to gain an understanding of a chart, as well as by developers and chart authors to verify and validate the accessibility markup of an SVG chart. AChart Summariser is a command-line tool which interprets an accessible SVG chart and outputs a textual summary of the chart. Kurzfassung Die Darstellung visueller Informationen für die Zielgruppe blinder NutzerInnen kann als eine der kom- plexesten Herausforderungen auf dem Fachgebiet Accessibility betrachtet werden. Das Zusammenspiel zweier Faktoren, nämlich der steigenden Zahl an im Web veröffentlichten Datenvisualisierungen einerseits und der Initiativen für Barrierefreiheit andererseits, haben in einen besonders vielversprechenden Ansatz gemündet: die Anreicherung SVG-basierter Charts mit ihren zugrundeliegenden Daten und semantischen Informationen in maschinell auslesbarer Form mittels ARIA-Attributen (sog. roles und properties). Diese Arbeit untersucht zunächst aktuelle Ansätze der Web-Accessibility, der Erstellung zugänglicher Charts und der semantischen Anreicherung von SVG-Charts. Betrachtet werden hierbei auf tabellarischen Daten basierende Charts, wie zum Beispiel Linien-, Balken- und Kreisdiagramme. Mehrere vorgeschla- gene Taxonomien von ARIA-Attributen für zugängliche Charts werden diskutiert, verglichen und in ein neues System überführt, die AChart- (Accessible Chart) Taxonomie. In den verbleibenden Kapiteln dieser Arbeit wird AChart vorgestellt, eine Sammlung quelloffener Software-Werkzeuge, die in TypeScript und mit Node.js entwickelt wurde und in der aktuellen Version Linien-, Balken- und Kreisdiagramme unterstützt. AChart Creator ist ein Kommandozeilenprogramm, welches unter Verwendung des D3-Frameworks zugängliche SVG-Charts aus CSV-Dateien generiert und mit ARIA-Attributen aus der AChart-Taxonomie versieht. AChart Interpreter ist eine Client-seitige Webanwendung, die ein zugängliches SVG-Chart interpretiert, nebeneinander grafische und textuelle Versionen des Charts anzeigt und das Chart per Sprachsynthese vorlesen kann. Die Benutzeroberfläche wurde barrierefrei gestaltet, so dass blinde Nutzer das Programm dazu einsetzen können, ein Chart zu ver- stehen. Gleichzeitig kann es von Entwicklern und Chart-Autoren für die Verifizierung und Validierung des Accessibility-Markups von SVG-Charts verwendet werden. AChart Summariser ist ein Kommandozeilen- Werkzeug, welches ein zugängliches SVG-Chart interpretiert und eine textuelle Zusammenfassung des Charts ausgibt. Contents Contents iii List of Figures v List of Tables vii List of Listings ix Acknowledgements xi Credits xiii 1 Introduction 1 2 Web Accessibility5 2.1 Definitions.............................5 2.2 Assistive Technology.........................6 2.2.1 Braille...........................6 2.2.2 Computer Input and Output...................6 2.2.3 Screen Readers........................9 2.3 The Web Content Accessibility Guidelines................. 12 2.3.1 Principle 1: Perceivable..................... 13 2.3.2 Principle 2: Operable...................... 13 2.3.3 Principle 3: Understandable................... 13 2.3.4 Principle 4: Robust...................... 14 2.3.5 Further Development...................... 14 2.4 Techniques for Accessible Web Pages................... 14 2.4.1 Semantic HTML....................... 14 2.4.2 The WAI-ARIA System..................... 16 2.4.3 The Accessibility Tree..................... 17 3 Chart Accessibility 21 3.1 Tactile Output............................ 23 3.1.1 Static Output......................... 24 3.1.2 Refreshable Tactile Displays................... 26 3.2 Auditory Output........................... 28 3.2.1 Speech Output........................ 28 3.2.2 Sonification......................... 29 3.2.3 Combined Speech Output and Sonification.............. 29 i 3.3 Multimodal Output.......................... 30 3.4 Screen-Reader-Friendly Output..................... 31 3.5 Charting Libraries with Accessibility Features................ 33 3.5.1 Highcharts.......................... 33 3.5.2 FusionCharts......................... 34 3.5.3 Semiotic.......................... 34 3.5.4 amCharts.......................... 39 3.5.5 AnyChart.......................... 39 3.5.6 evoGraphs.......................... 39 3.5.7 ChartMaster......................... 42 3.6 Describler............................. 42 3.6.1 Chart Root......................... 43 3.6.2 Axes............................ 43 3.6.3 Data Points......................... 44 3.6.4 Legend Root......................... 44 3.6.5 Legend Item......................... 44 4 Semantic Enrichment of SVG Charts 45 4.1 Formats for Accessible Graphics..................... 45 4.1.1 Native Accessibility of SVG................... 46 4.1.2 Scientific Proposals for Semantic Enrichment............. 46 4.1.3 ARIA Enhancements to SVG................... 48 4.2 ARIA Guidelines for User Agents.................... 48 4.3 SVG Accessibility in Practice...................... 49 4.4 Scientific Proposals for Accessible SVG Charts................ 49 4.5 WAI-ARIA-Based Systems for Charts................... 50 4.5.1 Describler.......................... 54 4.5.2 WAI-ARIA Graphics Roles................... 57 4.5.3 W3C Proposal........................ 60 4.5.4 SVG Pseudo-Table....................... 64 4.5.5 SVG Pseudo-List....................... 67 4.5.6 Highcharts.......................... 70 4.5.7 Semiotic.......................... 75 4.5.8 amCharts.......................... 79 4.5.9 FusionCharts......................... 82 4.5.10 AnyChart.......................... 86 5 Accessible Charts with AChart 89 5.1 Motivation............................. 90 5.2 Developing an ARIA-Based System for Charts................ 91 5.3 AChart Taxonomy of Roles and Properties................. 93 6 AChart Creator 97 6.1 User Interaction........................... 97 6.1.1 Creating Line Charts...................... 101 6.1.2 Creating Bar Charts...................... 107 6.1.3 Creating Pie Charts...................... 111 6.2 Implementation........................... 115 6.2.1 SVG Generator........................ 115 6.2.2 AChart Creator Version 1.0................... 116 6.2.3 AChart