Ivan Herman
World Wide Web Consortium
C/o W3C Benelux Office at CWI
Kruislaan 413, 1098 SJ Amsterdam, The Netherlands
email: ivan@w3.org
Daniel Dardailler
World Wide Web Consortium
C/o INRIA
2004, route de Lucioles, B.P. 93, 06902 Sophia Antipolis Cedex, France
email: danield@w3.org
Keywords: Accessibility of SVG; Web Accessibility
Abstract
The usage of SVG creates new possibilities as well as new challenges for the accessibility of Web sites. This paper presents a metadata vocabulary to describe the information content of an SVG file geared towards accessibility. When used with a suitable tool, this metadata description can help in generating a textual ("linear") version of the content, which can be used for users with disabilities or with non-visual devices.
Images play an important role in conveying information on the Web. However, the information presented in images must be accessible to all users, including those with visual disabilities or simply using non-visual devices. This problems has been recognized for a while already. For example, the Web Content Accessibility Guidelines[19], published by W3C, addresses this issue as part of its checklist. With reference to graphics, for example, authors of Web pages using traditional HTML are supposed to make use of the extra attributes available in the img element (alt, longdesc): using these attributes, the author can give a textual equivalent of the information contained in the image. By using these attributes a specialized browser is able to convey the right information to the user (in parallel to or instead of the graphics content itself).
In this respect, SVG[4,17] creates new possibilities as well as new challenges. Some elements of SVG, namely the title and desc elements, make it possible to annotate every elements in an SVG file. Thus, extra information can be provided, by-passed by a "traditional" viewer but usable by specialized user agents. This, and other accessibility features of SVG (grouping, styling, etc) have already been explored by C. McCathieNevile and M.-R. Koivunen in a W3C Note[8].
SVG is also very different from a traditional PNG or JPEG image. A bitmap image does not reveal the original structure of the information content. For example, the fact that one object in the image is "behind" or "on the left" of another cannot be retrieved from the pixels themselves (except maybe through sophisticated image analysis); unless the accompanying description is very verbose, it is quite difficult to add this sort of information to description attribute values. On the other hand, the SVG file itself retains these sorts of relationships and they are potentially available on the client side. This means that the information, which can be conveyed to a user with disabilities (or using non-visual devices) can be potentially much richer and more complex, hence also much more informative. Also, SVG may include animation and interaction; revealing the dynamic aspect of the SVG content may be essential to understand the content of the graphics.
A more systematic usage of metadata is a possible step forward. The metadata element of SVG allows the inclusion of any XML vocabulary into the SVG file. By using the XML syntax of RDF[2,13,14], it is therefore possible to add additional, and more structured information on the SVG content. Using RDF has the extra advantage of using a standardized formalism for metadata, thereby being able to re-use tools, visual editors, etc, to generate and process the metadata itself. (If the user is not familiar with RDF and/or its representation in XML, the RDF Primer can be particularly useful[14].)
The idea of the linealizer tool, described in this paper, is to extract information from the SVG file using the included metadata and to produce a textual (ie, "linear") description of the information content of the graphics. This description, in our case a simple and text-only HTML file, can be used, for example, by a voice browser. This linealizer tool is not simply a metadata to HTML converter, though; while interpreting the metadata elements, the tool also extracts further information from the SVG structure itself. This approach has been first explored by G. Lovet and D. Dardailler in their SVG linearizer tool[6], as part of G. Lovet's internship at W3C/INRIA. This report continues the work explored by Lovet and Dardailler, by revisiting, improving, and extending the metadata vocabulary used in the original report and by extending the functionality of the linealizer tool.
In short, the tool performs the following steps:
The rest of this paper concentrates on the RDF vocabulary used. The tool can be downloaded and tested; more about that below.
The tool has been tested on a number of SVG files. Here is a table linking to some of the example SVG files, as well as to the generated HTML files. The detailed description of the predicates in this paper makes use of the metadata contained in these files.
| SVG File (with embedded RDF) | Generated HTML file | |
|---|---|---|
| Architecture of a WebCGM[20] file | cgmarch.svg | cgmarch.html |
| A small SVG example with accompanying explanation and code | duckWithCode1.svg | duckWithCode1.html |
| Examples for various type of SVG paths | pathexamples.svg | pathexamples.html |
| SVG transformation examples | svgtransformations.svg | svgtransformations.html |
| The network example used in the accessibility note of C. McCathieNevile and M.-R. Koivunen[8] | network.svg | network.html |
| W3C membership evolution chart | membership.svg | membership.html |
| Overview of W3C recommendations | recOverview.svg | recOverview.html |
| Simple deformation of a curve | PathAnimation.svg | PathAnimation.html |
| Spinning W3C Logo | animw3c.svg | animw3c.html |
| Dataflow network of filter effects | dataflowWithDucks.svg | dataflowWithDucks.html |
The reader can look at the complete RDF description of these files by looking at the SVG source. Also, as a further example, a more complete slide set (prepared for a Eurographics conference in Manchester, UK, in September 2001[4]) has been prepared in SVG, and the content of each of slide has been annotated with the metadata described in this paper.
This section gives a definition of the RDF predicates.
By default, the linealizer tool displays a textual version of the predicate, including some simple structure (eg, in the form of bulleted lists) when possible. In some cases the tool tries to do more, as described with the predicate itself.
The possible diversity of the graphics content on the Web is extremely high and some of the predicates below make sense only if the content's general category is clear to the user. The current taxonomy has been defined by Daniel Dardailler[3] based on an informal survey of a large number of Web pages (see also the section on further research below).
One might be tempted to extract the content automatically using the group structure of SVG. Although this works well in simple cases, it can be misleading. Indeed, the SVG content may include elements which are present for "fanciness" (ie, background color filters, etc) but do not convey meaningful information to a textual agent. It is often better to ignore those for the purpose of linearization. Hence the introduction of separate predicates describing the structure of the information.
The following example (extracted from cgmarch.svg) states that the slide contains four parts, identified as MetafileStructure, PictureDetails, PictureBody, and SymbolLibraries. Note that here and in what follows the axsvg namespace prefix is used to identify the linealizer predicates. This namespace declaration is usually part of the enclosing rdf:RDF element (see the examples for details).
<rdf:Description about="#SlideContent">
<axsvg:Contains>
<rdf:Bag>
<rdf:li rdf:resource="#MetafileStructure"/>
<rdf:li rdf:resource="#PictureDetails"/>
<rdf:li rdf:resource="#PictureBody"/>
<rdf:li rdf:resource="#SymbolLibraries"/>
</rdf:Bag>
</axsvg:Contains>
</rdf:Description>
The usage of rdf:Bag is optional:
<rdf:Description about="#SlideContent"> <axsvg:Contains resource="#MetafileStructure"/> <axsvg:Contains resource="#PictureDetails"/> <axsvg:Contains resource="#PictureBody"/> <axsvg:Contains resource="#SymbolLibraries"/> </rdf:Description>
However, by using rdf:Bag the linealizer tool can produce a more structured output (turning the bag into a bulleted list).
The following example (again extracted from cgmarch.svg) states that the resource Picture1 (which is part of the MetafileStructure) "expands" to PictureDetails, ie, the latter give the details for the former.
<rdf:Description about="#Picture1"> <axsvg:ExpandsTo rdf:resource="#PictureDetails"/> </rdf:Description>
The following example (from network.svg) states that the resource CableA, referring to a cable, connects the computer to a socket.
<rdf:Description about="#CableA">
<axsvg:Connects>
<rdf:Seq>
<rdf:li rdf:resource="ComputerA"/>
<rdf:li rdf:resource="sock1"/>
</rdf:Seq>
</axsvg:Connects>
</rdf:Description>
The following example (extracted from svgtransformations.svg) contains three statements:
<rdf:Description about="#duck">
<axsvg:IsDef>true</axsvg:IsDef>
</rdf:Description>
<rdf:Description about="#Original">
<axsvg:InstanceOf rdf:resource="#duck"/>
</rdf:Description>
<rdf:Description about="#simpleTranslate">
<axsvg:InstanceOf>
<rdf:Description>
<rdf:type rdf:resource="http://www.w3.org/2001/svgRdf/axsvg-resource.rdf#UseDescription"/>
<axsvg:Symbol rdf:resource="#duck"/>
<axsvg:Transformation>translate(200,190)</axsvg:Transformation>
</rdf:Description>
</axsvg:InstanceOf>
</rdf:Description>
Note the usage of the rdf:type predicate. This predicate refers to a more precise specification of the subject, using RDF Schemas[15]. This predicate tells us that the subject of the axsvg:InstanceOf predicate is an anonymous resource of a special type, describing the details of a use SVG element.
The resources identified by these predicates are not (necessarily) text nodes in the SVG sense. They can be, for example, texts enclosed in groups or even more complicated graphical objects, where only the textual parts are meaningful for a non-visual environment.
The following example (extracted from svgtransformations.svg) identifies three textual elements used as labels for scaleSkewXTranslate. The tool displays the textual contents of the translate4, ske4, and scale4 elements.
<rdf:Description about="#scaleSkewXTranslate">
<axsvg:LabelledBy>
<rdf:Bag>
<rdf:li resource="#translate4"/>
<rdf:li resource="#skew4"/>
<rdf:li resource="#scale4"/>
</rdf:Bag>
</axsvg:LabelledBy>
</rdf:Description>
These predicate give an abstract description on the placement of the various SVG objects relative to one another or relative to the full canvas
The following example (extracted from svgtransformations.svg) states that Original is placed in the middle of the full SVG viewport, and that simpleTranslate is in a south-east direction of Original.
<rdf:Description about="#Original">
<axsvg:InPosition>M</axsvg:InPosition>
</rdf:Description>
<rdf:Description about="#simpleTranslate">
<axsvg:InDirection>
<rdf:Description>
<rdf:type rdf:resource="http://www.w3.org/2001/svgRdf/axsvg-resource.rdf#DirectionDescription"/>
<axsvg:RelativeTo rdf:resource="#Original"/>
<axsvg:Direction>SE</axsvg:Direction>
</rdf:Description>
</axsvg:InDirection>
</rdf:Description>
These predicates are specific to chart-like figures.
The following example (extracted from membership.svg) describes the three data lines which is central to the chart; each has a category and a reference to a resource. To make the example clearer, the SVG content for totalMemberLine is also shown; the tool displays the content of the desc element.
<rdf:Description about="#DataLines">
<axsvg:Chart>
<rdf:Bag>
<rdf:li>
<rdf:Description>
<rdf:type rdf:resource="http://www.w3.org/2001/svgRdf/axsvg-resource.rdf#ChartDescription"/>
<axsvg:DataCategory>Total Members</axsvg:DataCategory>
<axsvg:DataValues rdf:resource="#totalMemberLine"/>
</rdf:Description>
</rdf:li>
<rdf:li>
<rdf:Description>
<rdf:type rdf:resource="http://www.w3.org/2001/svgRdf/axsvg-resource.rdf#ChartDescription"/>
<axsvg:DataCategory>Full Members</axsvg:DataCategory>
<axsvg:DataValues rdf:resource="#fullMemberLine"/>
</rdf:Description>
</rdf:li>
<rdf:li>
<rdf:Description>
<rdf:type rdf:resource="http://www.w3.org/2001/svgRdf/axsvg-resource.rdf#ChartDescription"/>
<axsvg:DataCategory>Affiliate Members</axsvg:DataCategory>
<axsvg:DataValues rdf:resource="#affMemberLine"/>
</rdf:Description>
</rdf:li>
</rdf:Bag>
</axsvg:Chart>
</rdf:Description>
...
<path id="totalMemberLine" class="totalMembers" d="M0 50
L50,108 L100,117 L150,152
L200,158 L250,179 L300,231
L350,264 L400,293 L450,329
L500,363 L550,419 L600,478
L650,509">
<desc>50,108,117,152,158,179,231,264,293,329,363,419,478,509</desc>
</path>
Unfortunately, this mechanism forces the author to write the data twice: once for the coordinates in path and once in the description. One could envisage an automatic mechanism extracting the coordinate values from the path directly, but the correct interpretation of a the d attribute of a path is not obvious (only the "Y" values are meaningful in this example). Besides, other shape elements could also be used, not only paths.
These predicates describe the effects of animation objects on other objects in SVG.
Animation objects in SVG have a relatively high "granularity": to perform a specific animation effect one may have to use several SVG animation objects whose combined effects are perceived by the user as one animation. On a metadata level one should usually hide this granularity. This means that while, in what follows, the term "animation" or "animate" will be used in the sense used in the SVG recommendation, "animation resource" might also mean a group of animation objects, or an RDF resource defined directly in the metadata section to describe an animation effect.
The following example (extracted from PathAnimation.svg) contains the animation on a simple path. Note the usage of:
<rdf:Description rdf:about="#AnimatedDuck"> <axsvg:AnimatedBy rdf:resource="#Animation"/> </rdf:Description> <rdf:Description rdf:ID="#Animation"> <desc>Deforms the duck into a potato and back</desc> <rdf:type rdf:resource="http://www.w3.org/2001/svgRdf/axsvg-resource.rdf#AnimationDescription"/> <axsvg:AnimationSubjects rdf:resource="#AnimatedDuck"/> <axsvg:AnimationBegins>user clicks on duck</axsvg:AnimationBegins> <axsvg:AnimationDuration>2s</axsvg:AnimationDuration> </rdf:Description>
The following example (extracted from animw3c.svg) is more complex, and describes the animation on the spinning W3C logo and the disappearing domain logos. Note that, instead of describing the detailed timing, AnimationSeq is used. This is not absolutely precise, because the fading out of the activity logos begin one second before the end of the W3C logo spin, but this detail is not really important if the tool is used to display the content of the image textually.
<rdf:Description rdf:about="#opaciteimg2">
<axsvg:AnimationSubjects rdf:resource="#domainLogos"/>
<axsvg:AnimationDuration>2s</axsvg:AnimationDuration>
</rdf:Description>
<rdf:Description rdf:ID="#logoAnimate">
<desc>Spins around the logo by also reducing its size to almost invisible</desc>
<axsvg:AnimationSubjects rdf:resource="#W3CLogo"/>
<axsvg:AnimationDuration>5s</axsvg:AnimationDuration>
</rdf:Description>
<rdf:Description rdf:ID="#logoAnimate2">
<desc>Scales the logo up to a reasonable size</desc>
<axsvg:AnimationSubjects rdf:resource="#W3CLogo"/>
<axsvg:AnimationDuration>4s</axsvg:AnimationDuration>
</rdf:Description>
<rdf:Description rdf:ID="#animationTiming">
<rdf:type rdf:resource="http://www.w3.org/2001/svgRdf/axsvg-resource.rdf#AnimationDescription"/>
<desc>Describes the relative timing of the animations</desc>
<axsvg:AnimationSeq>
<rdf:Seq>
<rdf:li rdf:resource="#logoAnimate"/>
<rdf:li rdf:resource="#logoAnimate2"/>
<rdf:li rdf:resource="#opaciteimg2"/>
</rdf:Seq>
</axsvg:AnimationSeq>
<axsvg:AnimationBegins>at load time</axsvg:AnimationBegins>
</rdf:Description>
In most of the cases, the shape itself does not convey any important information on the content of the slide, so the usage of that predicate might be less useful than one might think at first.
The current linealizer tool is a proof-of-concept implementation rather than a finished software. The first version of the tool, by G. Lovet and D. Dardailler[6] was written in Java, the current version is based on XSLT for easier maintainability. The tool is restricted in its management of resources: it can manage simple #id type of fragment identifiers only, and only for elements in the same file (ie, the RDF metadata must be in the same SVG file). A more elaborate version of the tool should include a full URI management (which could lead to metadata files "outside" the SVG source) as well as a full XPath implementation to identify elements. Also, at present, the RDF parser can only handle the basic serialization syntax of RDF[13]. The tool itself consists of two XSLT files which can be downloaded from the W3C web site: rdfp.xsl and Properties.xsl. The XSLT files rely on the Saxon XSLT processor[16].
Generating the RDF metadata is done mostly by hand for now. SVG authoring tools should give the authors the possibility to annotate the graphics elements using at least the desc and title elements, but this is not yet the case. Ideally, the metadata section should also be editable from within the authoring tool. One of the advantages of using RDF, though, is that one can reuse tools developed for RDF in general. As an example, the IsaViz[12] tool for the visual generation and editing of RDF metadata has become recently available, and has already proven to be extremely helpful in generating the metadata for linearization, too.
The vocabulary, as described in the paper, has also been formally defined using using RDF Schema[15] (the schema can also be downloaded; the file name is axsvg-schema.rdf). Although the current tool does not check the validity of the metadata predicates against this schema yet, this is clearly one of the directions for further work.
One of the important features of the system is that the RDF vocabulary does not try to cover everything and it also relies on the human description provided with the resources. In our view, it is this interplay between the "formal" description in RDF and the "informal" descriptions which gives an extra power to our approach.
Nevertheless, the specification of the right vocabulary is undeniably the hardest research issue to evolve this approach further. It is probably not possible to define one all-encompassing vocabulary; rather, one should rely and on various vocabularies developed in specific areas (eg, constraint based graphics[1], automatic generation of multimedia content[10], etc). Using different namespaces (instead of the only namespace used in this document, ie, axsvg) one could envisage a rich metadata vocabulary structure well adapted to the particular usage of a specific SVG file, and where vocabularies belonging to different areas could be used side by side. Possible equivalence of the various taxonomies can be secured through web ontology tools currently under development within the framework of the W3C Semantic Web activities[2].
However, even if one can borrow from the terminology of specific areas, like the ones cited above, work still has to be done in adapting or developing vocabularies. Perhaps surprisingly, certain areas of information visualization research might be useful here. Information visualization is concerned about finding the right abstractions to present data visually. However, it has been recognized that to find those abstractions, one has to gain a thorough understanding of both the low, perceptual level of human understanding, as well as the higher, cognitive level mechanisms[5,7,11]. Understanding the higher level cognitive processes may help in finding the right taxonomy for the description of pictorial data, which is exactly what the metadata vocabulary is all about. But this is clearly the subject of extensive and interdisciplinary research.
[1] G. J. Bardos, J. J. Tirtowidjojo, K. Marriott, B. Meyer, W. Portnoy, and A. Borning, "A Constraint Extension to Scalable Vector Graphics", in: Proceedings of The Tenth International World Wide Web Conference, V. Y. Shen, N. Saito, M. R. Lyu, and M. E. Zurko (eds.), ACM Press, (2001).
[2] T. Berners-Lee, J. Hendler, and O. Lassila, "The Semantic Web", Scientific American, (2001).
[3] D. Dardailler, "Dependency statements for SVG", W3C Note, (February 2000).Available at http://www.w3.org/WAI/PF/dep-svg.
[4] D. A. Duce, I. Herman, and F. R. A. Hopgood, "Web 2D Graphics File Formats", Computer Graphics Forum, 21(1), (2002).
[5] D.J. Duke, I. Herman, "Minimal Graphics", IEEE Computer Graphics & Application, 21(6), (2001). A more detailed version is in: Reports of the Centre for Mathematics and Computer Sciences, INS-9903 (1999), ISSN 1386-3681, available at http://www.cwi.nl/~ivan/AboutMe/Publications/INS-R9903.pdf.
[6] G. Lovet and D. Dardailler, "SVG Linearizer tools", W3C Note, (September 2000). Available at http://www.w3.org/WAI/ER/ASVG/.
[7] A. M. MacEachren, How Maps Work, The Guilford Press, New York London, (1995).
[8] C. McCathieNevile and M-R. Koivunen, "Accessibility Features of SVG", W3C Note, (August 2000). Available at http://www.w3.org/TR/SVG-access/.
[9] L. Rutledge, "SMIL 2.0: XML for Web Multimedia", IEEE Internet Computing, 5(5), (2001).
[10] L. Rutledge, B. Bailey, J. van Ossenbruggen, L. Hardman, and J. Geurts, "Generating Presentation Constraints from Rhetorical Structure", in: Proceedings of the 11th ACM conference on Hypertext and Hypermedia, ACM Press (2000).
[11] C. Ware, Information Visualization, Morgan Kaufman, San Francisco, (2000).
[12] "IsaViz: A Visual Authoring Tool for RDF", http://www.w3.org/2001/11/IsaViz/.
[13] "Resource Description Framework (RDF) Model and Syntax", W3C Recommendation, O. Lassila and R. Swick (eds.), (February 1999). Available at http://www.w3.org/TR/REC-rdf-syntax/.
[14] "RDF Primer", W3C Working Draft, F. Manola and E. Miller (eds.), (2002). Available at http://www.w3.org/TR/rdf-primer/.
[15] "Resource Description Framework (RDF) Schema Specification 1.0", W3C Candidate Recommendation, D. Brickley and R.V. Guha (eds.), (March 2000). Available at http://www.w3.org/TR/rdf-schema/.
[16] http://saxon.sourceforge.net.
[17] "Scalable Vector Graphics (SVG) 1.0 Specification", W3C Recommendation, J. Ferraiolo, et al. (eds.), (September 2001). Available at http://www.w3.org/TR/SVG/.
[18] "Synchronized Multimedia Integration Language (SMIL 2.0) Specification", W3C Recommendation, J. Ayars, et al. (eds.), (August 2001). Available at http://www.w3.org/TR/smil20/.
[19] "Web Content Accessibility Guidelines 1.0", W3C Recommendation, W. Chisholm, G. Vanderheiden and I. Jacobs (eds.), (May 1999). Available at http://www.w3.org/TR/WAI-WEBCONTENT/.
[20] "WebCGM Profile", W3C Recommendation, T. Bartosh et al., (eds.), (January 1999). Available at http://www.w3.org/TR/REC-WebCGM/.