Authoring Web-accessible Mathematical Diagrams

The resulting SVG will be fully accessible and can be inspected in a browser either visually or via keyboard interaction, speech output and sonification. In addition, it is easy to generate alternate formats: Tactile graphics are generated by exploiting MathJax's ability to generate Braille for tactile formula labels. Similarly audio-tactile graphics can be produced that can work with the ViewPlus' Iveo technology by embedding the speech annotations as title and description elements into the SVG. This type of SVG can also be used in environments and ebook readers where no JavaScript is available, simulating navigation by a simple tabindex structure. However, in the remainder of the section we will explain accessibility for the browser provision.

We employ AJAX functionality to import both SVG and the XML annotations into a web page and inject the diagcess library to provide the bridge between annotations and graphical elements. The main feature of our accessible diagrams is the ability for a reader to interact with it via step-wise navigation. The basic browsing functionality is implemented by an explorer attached to the SVG element as event listener. A screenreader user is alerted to its existence via a dedicated ARIA label. The explorer can be entered via keystroke Enter or mouse click and left with Escape. Once the explorer is active, the user can navigate using the arrow keys and switch features, such as magnification, color changes, and sonification via additional keys. Technically these functionalities are realised as follows:

For browsing the diagram, we have chosen a relatively simple exploration model that was originally designed for working with chemical diagrams [11] and honed in further user testing [4]. Granularity and range of movement is determined by the annotation structure as described in the previous section.

To illustrate, we observe the traversal of our example diagram in figure 3.1. Note how the subtitles correspond to the annotations presented in the previous section. Here the yellow highlights represent the components of the diagram under consideration. Initially the entire diagram is highlighted. When going Down, the axes are first announced with additional information, requested using the X key, giving the range of both the x and y axis. Moving Right on that level, we examine the graph and tangent line together. Going Down again we can inspect the function's graph while moving Right highlights the point and finally the tangent line. Both graphs can be sonified by pressing O. We then reach a boundary, indicated by an earcon, with a final Right.

Labels are treated distinctly to structural components of the diagram should they contain mathematical formulas. While they can be manually described by the author by providing a dedicated annotation element, we also exploit the fact that they are rendered with MathJax, which can provide accessibility support via the Speech Rule Engine [10]. This means that formulas are rendered as SVG with an attached aria-label containing a corresponding speech string — which can be localised or given in Braille. At the moment we only expose the top-most aria-label as an alternative to the manual description if one is given. However, SRE can also embed speech deeply into the rendered formula, with one speech string per subexpression, together with a navigation structure based on a semantic interpretation of the formula. This feature can be useful for more complex formulas as the differential equation in Figure 1.1. We aim to integrate this as a future feature.