Web Accessibility by Unknown

Author:Unknown
Language: eng
Format: epub
ISBN: 9781447174400
Publisher: Springer London

22.3 Well-Structured and Information-Rich SVG

Traditionally diagrams on the web were embedded as bitmap images such as Jpeg, PNG, or GIF. While bitmaps can be made accessible to some degree by providing an alternative text description using the HTML alt attribute for image tags, this can at best be viewed as a stopgap solution. First, although alt attributes are voiced by screen readers, some impose a limit on the number of words they will speak. In addition, unlike for regular text, users can generally not interact with alternative texts, such as going back or stepping through it word-by-word. Second, and more importantly, complex diagrams are difficult to describe in one-liners or even more extended text. Consider the example of the Aspirin diagram from Fig. 22.1: simply announcing ‘Aspirin’ would certainly defeat the aim of the diagram to convey the molecules structural layout visually. Providing a description of that structure in terms of lines and characters and how they are connected would not only be very long but also make it nearly impossible for a reader to form the correct mental image of the displayed structure.

Thus, to benefit from a diagram like their sighted peers, blind readers must have a means to interact with the diagram, to explore it step-by-step and at their own speed, and possibly to experience the diagram’s structure in alternative formats. To this end, we need to embed semantic information on the diagram into its drawing. The HTML5 web standard (Berjon et al. 2013) offers its own dedicated image format with Scalable Vector Graphics (SVG) (Dahlström et al. 2011) that offers these possibilities. As a vector graphics format, it allows to specify components in terms of shapes and properties with coordinates where to place them instead of black and white or coloured pixels as in bitmap graphics. SVG images are drawn by the browser rather than simply displayed, which has not only the advantage that they scale lossless visually but also that they and their components are elements of the browsers DOM and can, therefore, be made accessible similar to any other part of the document.

One important prerequisite, however, is that the SVG is well constructed: consider the Aspirin molecule from Fig. 22.1 again. One can construct the SVG simply as a collection of 18 lines and 5 characters with the appropriate coordinates. While this would draw the diagram correctly, it would not capture any of the relations between the components that are so obvious to the sighted reader. But SVG does not only offer elements for painting, but also elements that are not rendered and can help to structure and annotate a drawing. In particular, it offers the container element g that allows to group related elements together and that can be arbitrarily nested, giving us an easy means to express semantic relations between components. We observe how this can be done with our Aspirin example as depicted in Fig. 22.2.

Fig. 22.2Structural overview of the Aspirin molecule consisting of one benzene ring with two attached functional groups: ester and carboxylic acid.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.