Accessible Charts by Means of SVG and ARIA
CHRISTOPHER: Hello and welcome to my presentation. My name is Christopher Kopel and I'm happy to have the opportunity of presenting the results of my master thesis to you. I wrote my thesis at Graz University of Technology in Austria and completed it just a few months ago. And it is about accessible data visualisation. In particular, how to prepare digital charts in a way that they can be read by blind people. First of all, a short outline of what you may expect during the next minutes. I'll start with an introduction about the chart types we're dealing with and with an overview of known solutions for presenting charts to blind recipients. Then we'll dig into the main subject of my thesis. I'll introduce two web technologies namely SVG and ARIA and explain how they can be combined to create accessible charts. Then I'll tell you about the software I wrote for my thesis and show you a live demo and in the end I'll summarise some future work for this project. OK, so let's start. There are many types of data visualisations, for example, maps, notebook graphs, flow diagrams, and so on, but we'll focus only on charts of tabula data, that is, charts with data which can be represented in the form of a table as well. And there is an important term you should remember, in this context, is the data points. A cell of such a table or in any data item is called a data point in this context. We further focus on two of the most popular charts in the literature namely bar and line charts. Just to make sure that all of us have the same idea of these charts, a few explanations. A bar and a line chart both have two dimensions. That is, the data points have two components. Let's call them x and y component, and both chart types also have two-dimensional Cartesian coordinate system. So an x-y coordinate system and within this coordinate system each data point corresponds to a graphical point location with the x and y components of the data point. In a bar chart, a data point is shown by a rectangular box, a bar, which starts on the x-axis and the x-coordinates of the data point and ends at the x and y-coordinates of the data point. In other words, you can say the y-value, the y-component of the data point corresponds to the length of the bar. And the line chart we have one or more curves where the curve passes all the coordinates, the x and y-coordinates of all data points. So here you can say the y component of a data point corresponds to the height of a curve for a given x-coordinate. So how can we present such charts to blind people? As you probably know, there are several ways to do this. First of all, of course, tactile graphics with static ones on paper or swell paper or it's timer form method, something like that. And some refreshable dynamic, tactile displays, like for example the graffiti by arbitrary search then there are acoustic systems, acoustic exploration either by synthetic speech or sonification which means non speech audio sounds. And then there are multi-modal systems combining more than one sense together. But there are also special programmes running either on the normal personal computer or on a smartphone which can present the chart objects, the chart components as text fragments, and so these texts fragments can then be navigated by a keyboard and read out by screen reader either by speech synthesis or in brail. For example, there are some certain web-programming frameworks so-called charting libraries, which can be used to automatically generate charts from data and some of these charting libraries also include some accessibility features, for example the library HighCharts or the library FusionCharts when they aren't used to produce charts. These charts have some features that they can be read by blind users, by screen reader users. So how can this be done? How can a chart be prepared in such a way? The basic idea that the trick behind this is to define chart by its semantics and its data rather than its mere visual appearance. So it's not to say, for example, I want an x-axis and I want a horizontal axis and a vertical axis and three curves but to say I'd like a line chart with an x and a y-axis from this and this value range with three data series, nine data points per series and these and these data or this data table. And the software, if it has accessibility features then stores this semantic information along with the visual one, so it generates the visual chart and stores together with it in the same data structure, this semantic information. And what is also important to mention is that this should be done in a machine-readable way. So the information should be stored as text strings so that they can be easily extracted by software without any sophisticated or complex recognition algorithms. And there are several ways to do this but a recommended way is to use SVG and ARIA, so what's that? SVG stands for Scalable Vector Graphics and it's standardised, has been standardised by the World Wide Web Consortium, W3C. And it is a format for, an XML-based format for storing graphics, which means it stores graphics in a way that they are not composed of pixels as we know it from JPEG or PNG, for example, but by textual elements enclosed in angled brackets and in less than a greater than characters as we know it, for example, from HTML. Examples of these elements are <circle> to draw a circle obviously or <line> to draw straight line, <rect> to draw rectangular box or <path> to draw an arbitrary irregular shape. It has several advantages, less data, lower data amount, and it is machine-readable, graphics are structured as logical objects which are machine-readable. And there are also elements for embedding text, plain text, within the graphic. One element is called text. This is to include text which is visible on the screen and within the graphic. And there are two other elements called title and desc. That's spelled D-E-S-C for description. And these elements are meant to embed texts for screen readers and other assistive technology. So they are not automatically rendered on the screen but they are meant for screen readers. OK, so moving on to the next technology. ARIA stands for Accessible Rich Internet Applications. And this is a system of text attributes for assigning data and semantics to web content. It has also been standardised by the W3C, in particular by the Web Accessibility Initiative, WAI. That's why it's also called WAI-ARIA and it was originally intended only for web pages and web applications, but it can also be used for graphics. So how does this work? To assign any graphics or any semantics or any other information to let's say, an HTML or an SVG element you have to attach it a text attribute out of the ARIA set. There are several types of ARIA attributes, the two most important ones for this purpose are the roles and properties. And ARIA role defines the semantics. So that is the meaning of an element. For example, button or checkbox or article. Then there are also properties which add some further information to the object. For example, there is the the property aria-name, aria-label, sorry, aria-label which can be used to give an element a name or aria-describedby which can be used to point to another element holding a longer description or aria-haspopup says that the element has or invokes a tool tip or a pop up menu. Now, I'll show you, sorry. There are dozens of ARIA roles and properties defined by the W3C for web pages and web apps. But unfortunately there is no standard for charts yet, no standard ARIA roles and properties for charts. However, there are some proposals, some proposed solutions out there on the web. And one task of my master thesis was to summarise these proposals and to combine them to a new one, to a new solution where I tried to use as many standard ARIA roles and properties as possible. Some examples of new ARIA roles for charts are the role, chart for the chart itself or the whole chart then the role datapoint, spelled in one word D-A-T-A-P-O-I-N-T to denote a data point or the role xaxis, to denote an x-axis. Also spelled in one word, X-A-X-I-S. OK, I'll now show you a short simplified code snippets, SVG code snippet, so that you can see what such a chart might look like. At the beginning, you'll see the SVG root element. It has the role chart to indicate that this is a chart and the ARIA property aria-charttype, which is set to bar so that it says that this is a bar chart. The first chart element of the SVG document is a text element with role, heading. This says that this is the heading, so the title of the chart It is set to the value Fruit Consumption in 2020. So this is the chart title, visible and accessible by screen readers. Afterwards, we have a g element, g for grouping several other SVG elements. In this case it has the rule xaxis. So this is the group for the xaxis. It contains all the labels of the x-axis and it has the property aria-label set to Fruit. So it's name is Fruit, x's title is Fruit. Afterwards we have another g element with a role dataset. This is the group which contains all the data points. And as an example, we have within this g group, we have a rect element with role datapoint. Remember, we have a bar chart, so we need rectangular boxes and this can be drawn by a rect element. It has the role datapoint and it has the property aria-label set to Apples. And this should show, should mean that the x component of this data point is apples. And this rect element has another chart element. It's a text element with role datavalue. This is the y component of the data point and this has the text content 25. So this data points can be summarised as, x component Apples, y component 25, or in other words the consumption of apples is 25 billions or millions or whatever you may wish that's up to your fantasy. OK, so far about SVG and WAI-ARIA. So now let's move on to the practical part of my thesis it is Achart Software Project. Achart is spelled A-C-H-A-R-T. This stands for Accessible Chart and the project consists of two main software components. The first one is called Achart Creator. That's a command line tool for generating SVG charts with the ARIA markup just as cost, from tabular data, that is, from CSV files. And the second one is AChart Interpretor. That's a web application which can be used to open an SVG chart with the discussed ARIA mark-up. And then it extracts the semantics and the data from the chart and displays them as a textual structure. And this text structure can be navigated by keyboard and read out by both every or any screen reader or by a built-in speech which is provided by the browser. OK, so let's have a look at AChart Interpreter. Now I've opened up Mozilla Firefox with AChart Interpreter and with the chart which we saw in the example previously, you can see on the left hand side there is the so-called Graphic Panel where the visible chart can be seen, and on the right-hand side of the screen we have the so-called Text Panel with the textual analysis. And each object is represented by a textual object which can be navigated either by the virtual cards of this converter of course or by the Tab key. I'll use the Tab key now and move to the first element.
CONVERTER: Graphic contains one chart expanded.
CHRISTOPHER: OK, so it has a graphic that's the root elements. There's the whole graphics document and says it contains one chart. I move on with the Tab key.
CONVERTER: Chart Fruit Consumption in 2020 contains one data series expanded.
CHRISTOPHER: So it says Chart under the chart title and then how many data series it contains. CONVERTER: Bar charts showing amount in relation to fruit, from apples to oranges.
CHRISTOPHER: So that's a small, a short chart summary just to know what's going on there. It says the the chart type bar chart and then it uses the title of the y-axis and the title of the x-axis and says in relation so it has amount, which is the y-axis title in relation to fruit, which is the y-title. And then it says the range, to the first and the last x value of the x-axis. In this case from apples to oranges
CONVERTER: x-axis, fruit contains five labels ranging from apples to oranges.
CHRISTOPHER: So there we have summary of the x-axis again with the title of the x-axis, how many labels it contains, and again, the first and the last x-axis item. Now the same for the y-axis.
CONVERTER: y-axis amount ranging from four to 45. Data series contains five items expanded.
CHRISTOPHER: Yes, now we're on the data series object. It says it contains five items that is five data points and now we move into the data series. CONVERTER: Sort items in original order. CHRISTOPHER: First of all, we have a drop-down list to choose the salting mode for the data points. The default is in original order which means as it is visible in the chart.
CONVERTER: Apples, nine, one of five.
CHRISTOPHER: And now we're within the list of data points and the first element is apples with y value nine, OK. That's different from the sample we used before but well, no matter so there the consumption of apples is nine and it has item one of five. Now we can step through the data points by the cursor up and down keys.
CONVERTER: Bananas, 20, two of five. Grapefruits, 30, three of five. Lemons, eight, four of five.
CHRISTOPHER: OK, if I now go back to the sorting list.
CONVERTER: Sort items in original order. With Shift and Tab, now I choose for example. From lowest to highest value. CHRISTOPHER: From lowest to highest value, press Enter and press Tab once again, to go back to the list of data points. Lemons, eight, four of five.
CHRISTOPHER: I'm back on the data point from which I left lemons, but if I press now cursor down, CONVERTER: Apples, nine, one of five CHRISTOPHER: It goes up by the y components. Oranges 12, five of five.
CHRISTOPHER: OK, and now there are some features, for example, you can compare the data of the chosen data point to the other ones. This is by opening the context menu for this data points.
CONVERTER: Menu, jump to first item, F.
CHRISTOPHER: This is to jump to the first item of the list, I go to,
CONVERTER: Shows compared to the other values of this data series, D.
CHRISTOPHER: And press Enter.
CONVERTER: Leaving Menu, oranges compared to
CHRISTOPHER: Now we have a popup window where we see all other data points of the series and the comparison of oranges to this. So, let's see.
CONVERTER: Close lemons four higher, 150%
CHRISTOPHER: So it says oranges is four higher than lemons and that's some, a ration of 150%. CONVERTER: Apples, three higher, 133.33%
CHRISTOPHER: And oranges is three higher than apples, that's 133.33%, and so on, I press Escape to get back to list.
CONVERTER: Oranges, 12, five of five.
CHRISTOPHER: And what's also available for example is a statistic of the data series if I press Tab once again.
CONVERTER: Show statistics for this data series button.
CHRISTOPHER: And Enter.
CONVERTER: Statistics for Data Series 1.
CHRISTOPHER: Now we have some statistical values to get an overview of the data series.
CONVERTER: Close, number of items, five.
CHRISTOPHER: Five items in this list.
CONVERTER: Lowest value, eight for lemons.
CHRISTOPHER: So the minimum value.
CONVERTER: Highest value, 34 grapefruits. Range between highest and lowest value, 22.
CHRISTOPHER: So, the difference between the minimum and maximum y components.
CONVERTER: Sum of all values 79, average 15.8.
CHRISTOPHER: Yes, the mean of all y components.
CONVERTER: Median, 12.
CHRISTOPHER: And the median and that's it, I press Escape
CONVERTER: Show statistics.
CHRISTOPHER: And there's also the possibility to compare a data point to these statistical characteristics. But yes, I think that's it, we don't have so much time. So I'll interrupt at this point. So if you might've seen the AChart Interpreter is online on the webspace of my university. So feel free to try it out and yes, have a look at it. It's on www.student.tugraz, that's spelled T-U-G-R-A-Z .at/kopel spelled K-O-P-E-L. And yes I'm grateful for any suggestions for improvements, any back reports, any feedback. So feel free to try it out, there's also a help text with a detailed explanation of features. Apart from this, of course, there are some things which can be done in this project. For example, AChart Interpreter should be extended to more chart types and higher chart dimensions. It would be great to have sonification of data series to get an acoustic overview of the data. Then it would also be very helpful to employ intelligent algorithms which compose an automatic description of a chart, an overall description of the data trend. And then one of my plans is to make AChart Interpreter browser extension for Firefox and or Google Chrome, so that you can use it with any arbitrary chart on any arbitrary web page. And finally, another idea is to implement the support for tactile graphic displays for touch sensitive tactile displays, so that it reads the finger position of the exploring the finger, and then read the information about the attached chart object. OK, so that's it for my part. I'm happy to answer any questions you might have and thank you very much for your attention.