Volume 21 (2002), number 4 pp. 777–786 COMPUTER GRAPHICS forum
SVG Linearization and Accessibility
Ivan Herman1 and Daniel Dardailler2
1World Wide Web Consortium, c/o W3C Benelux Office at CWI, 1098 SJ Amsterdam, The Netherlands
2World Wide Web Consortium, c/o INRIA, 2004, route de Lucioles, B.P. 93, 06902 Sophia Antipolis Cedex, France
ivan@w3.org, danield@w3.org
Abstract
The usage of SVG (Scaleable Vector Graphics) 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.
Although this paper concentrates on SVG, i.e. on graphics on the Web, the metadata approach and vocabulary
presented below can be applied in relation to other technologies, too. Indeed, accessibility issues have a much
wider significance, and have an effect on areas like CAD, cartography, or information visualization. Hence, the
experiences of the work presented below may also be useful for practitioners in other areas.
Keywords: 2D graphics, Scalable Vector Graphics (SVG), web accessibility, metadata in graphics, semantic web
ACM CSS: I.3.4 Graphics Utilities—Graphics Packages, I.3.6 Methodology and Techniques—Graphics data
structures and data types, Standards, K.4.2 Social Issues—Assistive technologies for persons with disabilities
1. Introduction
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 dis-
abilities 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 the
World Wide Web Consortium (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 ele-
ment (alt, longdesc): using these attributes, the author
can give a textual equivalent of the information contained in
the image. Based on 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 element 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 McCathieNevile and Koivunen in a W3C Note
[8]. However, their approach is by no means a complete
solution to the problem.
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
c
© The Eurographics Association and Blackwell Publishers Ltd
2002. Published by Blackwell Publishers, 108 Cowley Road,
Oxford OX4 1JF, UK and 350 Main Street, Malden, MA 02148,
USA. 777

778 I. Herman and D. Dardailler / SVG Linearization and Accessibility
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 term metadata (or “data about data”) has
been used for a while to denote data describing a particular
resource (whether on the Web or not). A typical example
is the cataloguing system used by libraries. The electronic
version of metadata, often included in the resource itself,
has come to the fore with the appearance of digital libraries,
on-line databases, etc. These applications often rely on the
availability of a coherent metadata about their resources,
using a well-established, common vocabulary.
The World Wide Web consortium has engaged into an
activity called the “Semantic Web” [2] whose goal is
to provide a systematic, and standardized mechanism to
define and describe metadata for Web resources. As part
of this activity, W3C has defined the Resource Description
Framework (RDF) [13,14], which is a way to encode
simple metadata statements in XML. Furthermore, the
metadata element in SVG allows the inclusion of any
XML vocabulary into the SVG file; this data is ignored
by the usual graphics players, but can be used by other
processing agents. For example, through the inclusion of
RDF into the metadata it is 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 (“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 Lovet and Dardailler in
their SVG linearizer tool [6], as part of Lovet’s internship
at W3C/INRIA. This report continues the work explored by
Lovet and Dardailler, by revisiting, improving, and extend-
ing 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:
(1) The author describes the SVG content using an RDF
vocabulary described below. In general, this RDF
information can be either embedded into the SVG file
or can be in a separate file.
(2) The author also adds textual descriptions using the
desc elements to (at least!) all elements which are
referred to as primary RDF resources. All these ele-
ments should also be identifiable through an id at-
tribute. For a specific element the tools considers the
first child desc element as being the corresponding
description.
(3) The linealizer tool reads the RDF information, com-
bines each RDF resource with the textual description,
possibly extract further information from the SVG
file itself, and produces a simple HTML file on its
output.
The rest of this paper concentrates on the RDF vocabulary
used. The tool can be downloaded and tested; more about
that below.
2. Some examples
The tool has been tested on a number of SVG files. All the
files, as well as the generated HTML files, are available on-
line, using the base URL:
http://www.svgopen.org/papers/2002/
herman_dardailler_svg__linearization_
and_accessibility/
The first example has also been reproduced in the Appendix.
The detailed description of the predicates in this paper makes
use of the metadata contained in these files.
3. Predicates
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 (e.g. in the
form of bulleted lists) when possible. In some cases the tool
tries to do more, as described with the predicate itself.
3.1. A Few Words about RDF
It is obviously not possible to give a full description of
RDF here, just a few words to make the essentials features
of what is described later understandable (again, the reader
is referred to the RDF Primer of W3C [14] for a more
systematic introduction to RDF).
An RDF file is a collection of simple statements of the
type “subject predicate object”. For example, the English
statement “Blackwell is the publisher of CGF” could be
described as:
• the subject is “Blackwell”
• the predicate is “publisher of”
• the object is “CGF”
c
© The Eurographics Association and Blackwell Publishers Ltd 2002