Marja-Riitta Koivunen <marja@w3.org>
Copyright � 1999 W3C� (MIT, INRIA, Keio), All Rights Reserved. W3C liability,
trademark,
document
use and software
licensing rules apply.
SVG offers a number of features which may make graphics on the Web accessible to a wider group of people. This can only occur if these features are correctly used. This very draft note attempts to describe the possibilities offered, and how they can be used.
This is some initial ideas which may be proposed as a note on the accessibility features of SVG. It is a preliminary working draft. It is inapropriate to reference W3C working drafts as anything other than "work in progress". This document is currently highly unstable. It is not expected to be stable before the Scalable Vector Graphics Specification [SVG] becomes a W3C Recommendation. However, comment is invited. Currently this document has not been reviewed by any working group. It is expected to be reviewed shortly by the WAI Protocols and Formats Group, the WAI Education and Outreach Group and the SVG Working Group.
This document is a potential draft W3C Note and has not yet been approved by anyone. In particular no endorsement is implied or made by the World Wide Web Consortium, the Web Accessibility Initiative, nor by the working groups or members thereof. Hopefully it will grow up into a real document one day, or will quietly resign and live out its autumn years in dignity and anonymity.
Publication of a W3C Note does not imply endorsement by the W3C Membership. A list of current W3C technical reports and publications, including working drafts and notes, can be found at http://www.w3.org/TR.
Please send comments to Charles McCathieNevile, Marja-Riitta Koivunen
@@To do list:
Scalable Vector Graphics [SVG] is an XML based mark-up language representing a new way of producing graphics for the Web. It provides many accessibility benefits, some of these originate from its use of the vector graphics model, some are inherited because SVG is built on top of XML, and the rest spring from the design of SVG itself, for example, SVG includes specific elements for equivalent alternatives.
Vector graphics is not a new technology, the very first CRT screens were only capable of showing vector images. However, on the Web the majority of images, such as PNG, JPEG and GIF, are raster based. SVG format could greatly improve the accessibility of graphical content on the Web if common raster-based formats would be replaced by it. This is because SVG and other vector graphics images store structural information of graphical shapes and their relations and this information with corresponding alternative equivalents can be utilized by alternative rendering tools. Raster images store only matrices of colored dots loosing the structural information that may have been available when creating the picture.
Because of the structural information the SVG images are highly scalable they can be zoomed and resized as needed by the reader without any loss of quality. In addition, the style of the images can be changed by the user. The scaling and styling possibilities help users with low vision or users using alternative interaction devices, such as tactile graphic devices, which typically have a very low resolution. Definition of their own stylesheets enables users to control the rendering of the images.
The following example illustrates the scalability of a vector graphics image. The first row shows a small PNG and a corresponding SVG image, which look the same. The second row shows an enlargement of both. It is easy to see that the PNG version of the image has suffered a significant loss of quality, while the SVG version looks smooth and shows more details than before.
| Small PNG image:
|
Small SVG image:
|
| Enlarged PNG image:
|
Enlarged SVG image:
|
SVG has many benefits inherited from XML that increase accessibility. One major benefit is that an SVG image is defined as text, so it can be created or edited by a text-processing application. A number of popular Web design tools are in fact enhanced text editing applications, and for users with certain types of disabilities these are much easier to use. Naturally, it is also possible to create graphic SVG authoring tools that require very little reading and writing, benefitting people with other types of disabilities.
Another important benefit available as a result of using XML is the ability to use assistive technologies with the DOM interface. Finally, the ability to attach stylesheets to SVG documents is actually also a result of using XML although here it is discussed with the SVG features supporting the control of presentation.
SVG can also be easily used with other XML based languages, which makes it possible to use the most accessible language for each part of a document. This relies on XML namespaces [NAMESPACES] and the general XML structure. SVG definitions can be embedded into other XML languages. For instance, a MathML document could use SVG for presenting equations and illustrative images of the equations. Similarly an SVG document can contain other XML based languages. For instance, a SVG document can include RDF metadata adding even more information of the graphical components and their relationships.
This document highlights the features in SVG which support accessibility. In Chapters 2, 3, and 4 we discuss the accessibility features of SVG. Chapter 5 explains the accessibility benefits that are inherited from XML. To illustrate how to create accessible SVG graphics with various SVG features the document uses an example of a network diagram which is successively built up. A reader with a sound basic grasp of HTML should be able to make sense of the examples, however, a good working knowledge of XML helps to make them more readily comprehensible.
Authors specify equivalent alternatives by including the following elements in any SVG container or graphics element:
titledescMost often the title and desc elements contain
text. However, if necessary they may also contain text mark-up from other XML
based languages. Chapter 5.2 has an example of including text mark-up in
equivalent alternatives.
The following example is a simple SVG document that includes a title and a description for an image of a computer network, although it does not have any graphic components that can be drawn
<?xml version="1.0"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19990812.dtd"><svg width="6in" height="4.5in" viewBox="0 0 600 450"><title>Network</title> <desc>An example of a computer network based on a hub</desc></svg>
Example 2.1: A simple SVG document with
title and desc elements.
An SVG image can consist of several hierarchical components each of which can have a title and a description. By using the hierarchy and the equivalents it is possible to create a rough mental model of the image without being able to see the graphics of the image. Therefore it is important that the SVG authors carefully build the hierarchical component structure so that it reflects the components of the object illustrated by the image. Some guidance for using structure can be found under guideline 3 and 12 in [WAI-WEBCONTENT].
The following example extends the network image component introduced in the previous example by introducing five subcomponents:
Each subcomponent is included as a container element with an
id attribute and equivalent information. Although this image does
not yet contain any graphics elements we already know quite a lot about it.
(Note: To easily identify changes from the previous version of the example
new content is strongly emphasized)
<?xml version="1.0"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19990812.dtd"><svg width="6in" height="4.5in" viewBox="0 0 600 450"><title>Network</title> <desc>An example of a computer network based on a hub</desc><g id="hub"> <title>Hub</title> <desc>A typical 10BaseT/100BaseTX network hub</desc> </g><g id="ComputerA"> <title>Computer A</title> <desc>A common desktop PC</desc> </g> <g id="ComputerB"> <title>Computer B</title> <desc>A common desktop PC</desc> </g> <g id="CableA"> <title>Cable A</title> <desc>10BaseT twisted pair cable</desc> </g> <g id="CableB"> <title>Cable B</title> <desc>10BaseT twisted pair cable</desc> </g> </svg>
Example 2.2: A structured SVG document with alternative equivalents.
The component hierarchy with alternative equivalents can be used in different ways by different renderers. For instance, a simple non-visual renderer can provide access to the component hierarchy and allow the user to navigate her way up and down or at a certain level of the structure, giving her the equivalent description of each encountered component. A multimedia-capable renderer might name each component that has focus through speech output - much like tooltips are used in some Web browsers to render alternative text for images.
The simplest way to render the image in Example 2.2 is naturally to show
the alternative equivalents as text, such in Figure 2.3. This can be done by
attaching CSS [CSS] style information to the
title and desc elements of the image. An example
stylesheet to do this kind of rendering is presented and explained in Example
4.2 in Chapter 4. Without the style definition nothing from Example 2.2 would
be presented to the user.
Network An example of a computer network based on a hub
Hub A typical 10baseT/100BaseTX network hub
Computer A A common desktop PC
Computer B A common desktop PC
Cable A 10BaseT twisted pair cable
Cable B 10BaseT twisted pair cable
Figure 2.3: Textual presentation of Example 2.2 when it is rendered with the stylesheet in Example 4.2
The user who explores a well-constructed SVG image can easily discover which graphical elements construct each component and what components are re-used. This does not decrease the need for author-provided equivalent information, but gives additional information when the user or a special device needs it (and is capable of using it). The ability to re-use structured components also helps authors, because images can be edited through their structure as well as through the individual graphic elements. The ability to do this in an authoring tool is one of the requirements of the Authoring Tool Accessibility Guidelines, and therefore by conforming SVG generating tools.
SVG provides a number of basic shapes, with which most people are familiar. Rectangles, circles, polygons and ellipses can all be easily created by name, making it a fairly simple matter to determine the basic shape or shapes used to represent an object. In the following example (which will be the hub for the network image) we have two rectangles, one inside the other, and a small circle inside the larger rectangle.
<?xml version="1.0"?><?xml-stylesheet href="http://www.w3.org/1999/09/SVG-access/svg-style" type="text/css"?> <svg width="6in" height="4.5in" viewBox="0 0 600 450"><g transform="translate(10 10)"><title>Hub</title> <desc>A typical 10BaseT/100BaseTX network hub</desc> <rect width="253" height="84"/><rect width="230" height="44" x="12" y="10"/><circle cx="227" cy="71" r="7"/></g></svg>
Example 3.1: Adding some shapes to form an image of the Hub.
Figure 3.2: Visual rendering of Example 3.1.
Figure 3.2 presents the Hub in Example 3.1 as a visual image. In case the graphics cannot be rendered there are other means that could help to understand the relations of the graphics elements. For instance, sometimes it might even help to render the graphical shapes, such as rectangles, circles or ellipses, as text. This can be done using stylesheets as shown in Chapter 4.
Images often include text that explain or name the elements presented in the image. With SVG the text is contained in text elements that keep the textual form available for various assistive or other technologies. Furthermore, the text can be reused from other elements. such as alternative text equivalents. This helps in managing of the text as it only needs to be changed at one place.
In the following, we add a text element to the image of the Hub that was described in Chapter 3.1. This text element re-uses the title text of the Hub image by adding an id attribute to it and rendering it as part of the text element.
<?xml version="1.0"?><?xml-stylesheet href="http://www.w3.org/1999/09/SVG-access/svg-basic-style" type="text/css"?> <svg width="6in" height="4.5in" viewBox="0 0 600 450"><g transform="translate(10 30)"><title id="hub">Hub</title> <!-- A text element which includes text from title --> <text x="0" y="-10"> <tspan xlink:href="#hub"/> </text> <desc>A typical 10BaseT/100BaseTX network hub</desc> <rect width="253" height="84"/><rect width="230" height="44" x="12" y="10"/><circle cx="227" cy="71" r="7"/></g></svg>
Example 3.3: Reusing the title as text in the
Hub image.
SVG allows the construction and re-use of graphic components. This makes it easier to understand the structure of complex images as the re-usable components are defined only once. An authoring tool may also utilize this feature to help creating and modifying graphics with the same components. This may help users having difficulties in fine motor control.
In the following example we have defined a socket, and added five of them to the hub in Example 3.3:
<?xml version="1.0"?><?xml-stylesheet href="http://www.w3.org/1999/09/SVG-access/svg-basic-style" type="text/css"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19990812.dtd"><svg width="6in" height="4.5in" viewBox="0 0 600 450"><g transform="translate(10 30)"> <!-- Define the socket --><defs> <g id="hubPlug"> <desc>A 10BaseT/100baseTX socket</desc> <path d="h5 v-9 h12 v9 h5 v16 h-22 z"/> </g> </defs><title id="hub">Hub</title> <desc>A typical 10BaseT/100BaseTX network hub</desc> <text x="0" y="-10"> <tspan xlink:href="#hub"/> </text> <rect width="253" height="84"/><rect width="230" height="44" x="12" y="10"/> <circle cx="227" cy="71" r="7"/><!-- five groups each using the defined socket --> <g transform="translate(25 25)" id="sock1"> <title>Socket 1</title> <use xlink:href="#hubPlug"/> </g> <g transform="translate(70 25)" id="sock2"> <title>Socket 2</title> <use xlink:href="#hubPlug"/> </g> <g transform="translate(115 25)" id="sock3"> <title>Socket 3</title> <use xlink:href="#hubPlug"/> </g> <g transform="translate(160 25)" id="sock4"> <title>Socket 4</title> <use xlink:href="#hubPlug"/> </g> <g transform="translate(205 25)" id="sock5"> <title>Socket 5</title> <use xlink:href="#hubPlug"/> </g> </g></svg>
Example 3.4: Adding 5 sockets to the Hub in Example 3.3.
Figure 3.5: A visual rendering of Example 3.4.
SVG images can also include components or complete images from other documents using XML Linking Language [Xlink]. Xlink enables easy construction and re-use of libraries of known images either locally or on the Web. For authors, this means being able to use a known graphic component even when it cannot be seen. For users, a central image library helps to learn to identify the standard graphic components.
The following example uses images and symbols defined elsewhere with the rest of the graphics. These are emphasized in the example. In addition, it adds a text element to the Network image and some graphics elements to the Cable images. These are just marked with comments.
<?xml version="1.0"?><?xml-stylesheet href="http://www.w3.org/1999/09/SVG-access/svg-style" type="text/css"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19990812.dtd"><svg width="6in" height="4.5in" viewBox="0 0 600 450"><title id="mainTitle">Network</title> <desc>An example of a computer network based on a hub</desc> <!-- Draw text. --> <text x="0" y="-10"> <tspan xlink:href="#mainTitle"/> </text> <!-- Use the hub image and its title and description information. --> <g id="hub" transform="translate(180 200)"> <image xlink:href="http://www.w3.org/1999/09/SVG-access/hub"/> </g> <!-- Use an external computer symbol.Scale to fit. --> <g id="ComputerA" transform="translate(20 170)"> <title>Computer A</title> <use xlink:href="http://www.w3.org/1999/09/SVG-access/computer#terminal" transform="scale(0.5)"/> </g> <!-- Use the same computer symbol. --> <g id="ComputerB" transform="translate(300 170)"> <title>Computer B</title> <use xlink:href="http://www.w3.org/1999/09/SVG-access/computer#terminal" transform="scale(0.5)"/> </g> <g id="CableA" transform="translate(0 -40)"> <title>Cable A</title> <desc>10BaseT twisted pair cable</desc> <!-- Draw Cable A. --> <path d="M107 128c100,140 50,140 -8,160"/> </g> <g id="CableB" transform="translate(-10 -40)"> <title>Cable B</title> <desc>10BaseT twisted pair cable</desc> <!-- Draw Cable B. --> <path d="M152 128c100,180 110,160 159,160"/> </g> <g id="CableN" transform="translate(-10 -40)"> <title>Cable N</title> <desc>10BaseT twisted pair cable</desc> <!-- Draw Cable N. --> <path d="M252 128c0,-70 20,-50 60,-50"/> </g> </svg>
Example 3.6: Adding graphics to the Network components presented in Example 2.2.
Figure 3.7: A visual rendering of Example 3.6.
Note that there is no title or desc elements for
the hub, since it is an SVG image and already contains those elements with
general descriptions. Each computerhas a different
title, but there is already a desc element defined
as part of the symbol element so it does not need to be
repeated.
One of the main themes in Web Content Accessiblity Guidelines [WAI-WEBCONTENT] is the separation of presentation from the other content. When presentation is separate the user has more control to adjust the style, such as color of elements or font size, to her specific needs. Furthermore, it is also easier to adjust the presentation to different output devices. However, the position of the graphics elements is so essential when drawing images that it is included to the SVG elements themself. CSS type means are used for all other style definitions.
Often images contain text which is converted to bitmap images and the textual information is lost. To prevent that SVG provides a way for authors to define their own fonts and use them to style textual content. For instance company logos can be presented with special fonts. This improves accessibility and supports the use of non-visual devices.
Finally, when the presentations need to be dynamic, SVG provides support for declarative definition of animations. When animation is used it is important for accessibility that the user can turn it off when necessary. In addition, the SVG specification itself requires that an image can be rendered without animation, for static media such as print.
SVG uses CSS syntax and properties or XSL to specify formatting effects
with stylesheets. As noted in Web Content Accessibility Guidelines [WAI-WEBCONTENT], and in Accessibility Features of CSS2
[CSS-access], stylesheets give the author means to
specify rich presentations, while ensuring that the different presentation
related needs of users can be met. A;though it is possible to specify styles
as attributes of particular elements, or as part of a style element, or in an
external linked style sheet, we have chosen to demonstrate linked style sheets
only. For an author to change the style, it is easiest if the styles are based
on element selectors in an external stylesheet, since it is possible to supply
a complete stylesheet. If styles are based on id or
class attributes then it is more difficult to provide an
appropriate way to override those definitions, and more difficult again if the
style is given inline as an attribute.
In SVG the default rendering of a graphic elements is a black fill, so without a stylesheet all the presented shapes would be solid black. To avoid that, the previous examples provide a link to the simple stylesheet presented in Example 4.1. It contains simple style definitions for changing the rendering style of selected graphic elements.
rect { fill: white; stroke: black;
stroke-width: 1 }
circle { fill: red; stroke: black;
stroke-width: 1 }
path { fill: white; stroke: black;
stroke-width: 1 }Example 4.1: A simple stylesheet for presenting rectangle, circle, and path elements.
It is possible to use style sheets also to provide a text or audio rendering of an SVG image. The content of title and desc elements is not rendered at all without a stylesheet definition but when a simple stylesheet presented in Example 4.2 is used Figure 2.2 will be presented as text. The style information simply defines that title is rendered as a block element and desc as an inline element and that the title directly inside the svg element will be bigger and bolder than the other titles. The first line makes sure that no other svg elements (such as the graphics elements) are presented. The result can be seen in Figure 2.4. The text is rendered as audio if the user can select that option in her user agent.
svg { display: none }
title { display: block }
desc { display: inline }
svg title { font-size: 120%;
font-weight: bolder;
}Example 4.2: A simple stylesheet to present title and desc elements as text.
If the user wants to get a rough idea of the graphics shapes used in an image we can use the stylesheet presented in Example 4.3. It will render the types of common graphics elements as text in between the title and desc renderings. We can use the stylesheet, for instance, to give some information of the graphical shapes of the Hub in Example 3.1 or 3.2. With simple CSS we cannot explain things such as: a small red circle is located in the bottom right corner of a rectangle. But it is possible that in the future there will be specialized players to do that, for example by using the mathematical processing available in XSLT. In case the text is rendered as audio, the stylesheet also includes audio emphasis for the main title by using a louder and lower voice.
svg { display: none }
title { display: block }
desc { display: inline }
svg title {
font-size: 120% ;
font-weight: bolder ;
volume: 120% ;
pitch: lower }
rect:before { content: "rectangle " }
ellipse:before { content: "ellipse " }
circle:before { content: "circle " }
path[d ~= z]:before,
polygon:before {
content: "closed shape "
}Example 4.3: A simple stylesheet with text for graphical shapes (download stylesheet in 4.3).
In some cases it is possible to use selected SVG elements as a special value for a style. For instance we can define a gradiant or a pattern element in SVG and then use it as a value for fill or stroke attribute in the stylesheet definition. Similarly we can use SVG elements to define filters, clipping paths, masks or new fonts. The SVG based style values cannot be defined in the stylesheet itself as they are SVG, which prevents us making a total separation between the definition of style and content. However, in this way the possible style definitions can be easily extended.
In Example 4.4 we define an image of a computer to be used in the network
we have been building. The image uses a stylesheet which gives styles for the
components of the computer by using their class attributes. For
instance, the class outline defines part of the image of each
component as an outline with minimal graphical details. This could be used by
low resolution devices, including tactile graphic displays and small-screen
devices. A stylesheet for these is presented in Chapter 4.3.
Some style definitions in the Example 4.5. stylesheet use the SVG color
gradient elements defined by the SVG image itself. Unfortunately, this brings
the style definitions back to the SVG document. Note, however, that these
gradients could be defined as a separate document so that they could be used
by several different stylesheets.
<?xml version="1.0"?><?xml-stylesheet href="http://www.w3.org/1999/09/SVG-access/svg-style" type="text/css"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19990812.dtd"><svg width="6in" height="4.5in" viewBox="0 0 600 450"><defs> <radialGradient id="screenGrad" cx="0" cy="0" r="200"> <stop class="s100" offset="100%"/> <stop class="s0" offset="0%"/> </radialGradient> <linearGradient id="discGrad"> <stop class="s100" offset="100%"/> <stop class="s0" offset="0%"/> </linearGradient> <symbol id="terminal"><desc>A common desktop PC</desc> <g id="monitorStand" transform="translate(35 101)"> <title>Monitor stand</title> <desc>One of those cool swivelling monitor stands that sit under the monitor</desc> <path d="m5 0 S 15 10 45 12"/> <path d="m85 0 S 75 10 45 12"/> <path d="m5 20 L 15 10 S 45 12 75 10 L 85 20z"/> </g> <g id="monitor" transform="translate(0 -20)"> <title>Monitor</title> <desc>A very fancy monitor</desc> <rect class="outline" width="160" height="120"/> <rect class="screen" width="138" height="95" x="11" y="12" /> </g> <g id="processor" transform="translate(0 122)"> <title>The computer</title> <desc>A desktop computer - broad flat box style</desc> <rect class="outline" width="160" height="60" /> <g id="discDrive" transform="translate(70 8)"> <title>disc drive</title> <desc>A built-in disc drive</desc> <rect class="disc" width="58" height="3" x="12" y="8" /> <rect class="light" width="8" height="2" x="12" y="15" /> </g> <circle cx="135" cy="40" r="5"/> </g> </symbol> </defs> <g id="Computer" transform="translate(180 85)"> <title>Computer</title> <use xlink:href="#terminal"/> </g> </svg>
Example 4.4: A computer image with definitions for gradient style values.
Figure 4.5: A visual rendering of Example 4.4
The following stylesheet defines styles for the computer and its components in Example 4.4. Notice that the gradiants defined for screen and disc are referenced here both when defining the colors for the gradiants and when using the gradiants with the computer image components.
#screenGrad .s100 {color:#AAA9A9 }
#screenGrad .s0 {color:black }
#discGrad .s100 {color:beige }
#discGrad .s0 {color:black }
svg {
<!-- Default styles to be inherited -->
fill: white;
stroke: black;
stroke-width: 0.3}
#terminal .outline {
fill: beige}
.computer {
fill: beige}
.screen {
fill: url(http://www.w3.org/1999/09/SVG-access/computer#screenGrad)}
.disc {
fill: url(http://www.w3.org/1999/09/SVG-access/computer#discGrad)}
.light {
fill:lightgreen}
<!-- Some style for the other network components -->
...Example 4.6: A stylesheet for the computer image in Example 4.4 (download stylesheet in 4.6).
The rendering of SVG images can be defined to depend on the media used for presentation. This is beneficial for accessibility as people with disabilities often utilizes alternative interaction devices. For instance some media such as screens, are suited to high-resolution graphics, other media such as braille to lower resolution graphics, and some people use audio instead of graphics. CSS can be used to provide an appropriate default presentation for all these different devices.
In the following example we expand the stylesheet in Example 4.5 to provide
a simplified version of the image for low-resolution media, such as embossed,
braille, handheld, or projection devices. The appropriate style definitions
for those devices are selected by using CSS @media rules. Within
the simplified version we define that only the outline part of the g elements
and text will be rendered. For this we utilize the outline class
elements defined in Example 4.4. Notice that in this case any graphics placed
directly in the svg element would still be rendered. The screen media
definitions contain the default style definitions presented earlier in Example
4.5. @@Where does display: svg come from? It is not a valid value according to
CSS2 or SVG doc? @@
@media embossed braille handheld projection {
<!-- only show things with the special class "outline" -->
svg { visibility: hidden }
.outline { visibility: visible;
fill: none;
stroke: black;
stroke-width: 5}
text { visibility: visible }
}
<!-- Guess I should have a voice one as well -->
@media screen {
<!-- Some style for the computer -->
...
<!-- Some style for the other network components -->
...
} Example 4.7: Extending stylesheet in Example 4.5 for different media (download stylesheet in 4.7).
Text is important for accessibility as it can be transformed to many senses by using assistive technologies. However, it is also important for branding and visual communication purposes in general to enable the author to control the presentation of the text. SVG allows this by providing support for using already existing fonts or creating new fonts by using the graphics elements of SVG. This provides authors with a powerful new mechanism for offering arbitrary fonts of much greater complexity than was previously possible. At the same time the actual text rendered in those fonts can be accessed directly by the user agent.
The following example uses a font named BaseTwelve to create the W3C Logo. The title of a group is used as rendered text so that the text needs to be defined only once. The style definitions are gathered together and referenced through the classes in the elements instead of using a style attribute. This makes it easier to change the style when experimenting with the logo. It is also easier to override styles for different classes of elements which might be necessary sometimes. For instance, users with low vision or with color deficiencies might need to do it even for logos.
@@Link to BaseTwelve font is missing, do we have it somewhere so we can create the image of W3C? CMN: No. That's the point - if you had it you wouldn't need to define fonts. We could show what it looks like if you have the font (the W3C logo) and if you don't (something a bit different)@@
@@Fix the shorter example - kerning, shift C, colours@@
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19990812.dtd">
<svg width=".9in" height="0.6in" viewBox="0 0 72 48">
<defs>
<style type="text/css">
.w3crect { fill:white; stroke-width:0 }
.w3ctext { font:BaseTwelve; font-size:45 }
.w3cline { fill:black; stroke-width:1 }
</style>
</defs>
<g id="w3clogo">
<title id="w3c">W3C</title>
<rect class=w3crect width="29" height="29"/>
<text class=w3ctext x="5" y="7.4">
<tspan xlink:href="#w3c"/>
</text>
<path class=w3cline d="M0 .5H72">
<path class=w3cline d="M0 46.5H72">
</g>
</svg>Figure 4.8: Using text and fonts to form an image of W3C logo.
Figure 4.9: A visual image of the W3C logo in Figure 4.8 both with a) BaseTwelve and b) a system lacking Base Twelve, that uses a substitute font.
The logo can be used by linking to it from an image element. If the user
does not have the BaseTwelve font then another (in this case default) font
will be used to render the text. Because the font is
used by referencing it from a CSS style declaration a
user can also easily override it. Of course since this is a normal XML
document the personal stylesheets given above will render the content (The
letters "W 3 C").
A new font for the logo can be defined by using the font element. The following example defines a font named w3clogofont. It includes the glyphs for the characters W, 3, and C. Each glyph element has a human-readable title, and the letter C has a description of the special effect provided for it. Use of SVG fonts allows designers to create any font they can imagine, without losing the text itself:
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19990812.dtd">
<svg width=".9in" height="0.6in" viewBox="0 0 48 72">
<defs>
<font id="w3clogofont" unitsPerEm="55"
capHeight="39.604" xHeight="25"
ascent="23" descent="12" bbox="0 -12 40 55"
baseline="0" centerline="20"
mathline="20" topline="43">
<glyph unicode="87" bbox="0 0 39.1157 39.604"
horizAdvX="39.1157">
<title>W</title>
<path d="M 19.8022 0 L 26.8921 24.105 L 33.9819 0 L 39.1157 0
L 27.3809 39.604 L 26.8921 39.604 L 19.5576 15.0596
L 12.2236 39.604 L 11.7349 39.604 L 0 0
L 5.13379 0 L 12.2236 24.105 L 17.0151 7.87262 L 14.6685 0z"/>
</glyph>
<glyph unicode="51" bbox="0 0 19.9981 39.604" horizAdvX="19.9981">
<title>3</title>
<path d="M 19.9981 26.893 C 19.9981 30.479 19.0445 33.494 17.1377 35.938
C 15.2305 38.383 12.7613 39.604 9.73001 39.604
C 7.44778 39.604 5.4595 38.879 3.76468 37.429
C 2.06979 35.978 0.815002 34.016 0 31.537 L 4.00931 29.875
C 4.59671 31.375 5.37109 32.5569 6.33249 33.42
C 7.29398 34.284 8.4263 34.715 9.73001 34.715
C 11.0991 34.715 12.2569 33.95 13.2022 32.418
C 14.1475 30.886 14.6201 29.045 14.6201 26.893
C 14.6201 24.513 14.1143 22.671 13.1045 21.368 11.9297 19.836 10.0884
19.069 7.57858 19.069
L 5.6236 19.069 5.6236 16.723 12.4688 4.88995 4.20511 4.88995 1.9068
8.80096 0.440491 8.80096 0.440491 0 19.5093 2.396 12.2725 14.864
C 14.8155 15.68 16.7383 17.163 18.042 19.314
C 19.3457 21.466 19.9981 23.992 19.9981 26.893z"/>
</glyph>
<glyph unicode="67" bbox="0 0 20.416 39.604" horizAdvX="20.416" class="shadow">
<title>C</title>
<desc>the shadow of a raised letter C</desc>
<path d="M 19.306 0 C 19.306 0 20.138 5.05597 20.138 5.05597
C 20.138 5.05597 17.194 10.688 17.194 10.688
C 17.194 10.688 16.064 8.29895 14.187 6.97595
C 12.605 5.862 11.574 5.62 9.96298 5.95197
C 7.89297 6.37897 5.547 8.85297 4.52197 11.904
C 3.297 15.555 3.28497 17.321 3.24197 18.944
C 3.17398 21.546 3.58398 23.083 3.58398 23.083
C 3.58398 23.083 1.797 19.776 1.81299 14.933
C 1.82498 11.477 2.36798 8.34198 3.96799 5.24799
C 5.375 2.52795 7.46698 0.895996 9.323 0.703979
C 11.242 0.505005 12.759 1.43097 13.93 2.43201
C 15.161 3.48297 16.405 5.78101 16.405 5.78101
C 16.405 5.78101 19.306 0 19.306 0z"/>
<path d="M 19.669 28.608 C 19.669 28.608 18.368 30.933 17.557 31.829
C 16.746 32.726 15.296 34.305 13.504 35.094
C 11.712 35.883 10.773 36.032 9.00299 35.862
C 7.23398 35.691 5.58899 34.667 5.013 34.241
C 4.43698 33.814 2.965 32.555 2.133 31.382
C 1.30099 30.208 0 27.862 0 27.862
C 0 27.862 0.724976 30.214 1.17798 31.211
C 1.43997 31.785 2.24197 33.543 3.38098 35.073
C 4.44299 36.499 6.50598 38.955 9.64197 39.5099
C 12.778 40.064 14.933 38.656 15.467 38.315
C 16 37.974 17.124 37.033 17.835 36.272
C 18.577 35.478 19.28 34.464 19.669 33.856
C 19.953 33.412 20.416 32.513 20.416 32.513z"/>
</glyph>
<kern u1="87" u2="51" k="4.207"/>
</font>
<style type="text/css">
.w3crect { fill: white; stroke-width:0 }
.w3ctext { font: w3clogofont; font-size:45 }
.w3cline { fill: black; stroke-width:1 }
glyph { fill: #006cff }
.shadow { fill: black }
</style>
</defs>
<g id="w3clogo">
<title id="w3c">W3C</title>
<rect class="w3crect" width="29" height="29"/>
<text class="w3ctext" x="5" y="7.4">
<tspan xlink:href="#w3c"/>
</text>
<path class="w3cline" d="M0 .5H72">
<path class="w3cline" d="M0 46.5H72">
</g>
</svg>Example 4.10: Defining a special font for the W3C logo.
Animation can easily clarify some things in a presentation or add eye catching movement to highlight some issues. Animation may prevent users from reading adjacent information in the page. Some users may even get epilectic seizures. Users may also have difficulties in making selections fast enough if they are embedded in the animation. Therefore animations need to be designed carefully so that they do not affect accessability or usability of the presentation. For instance, guideline 7 in Web Content Accessibility Guidelines [WAI-WEBCONTENT] recommends writing the content so that the user can pause or stop moving objects or pages, while the User Agent Accessibility Guidelines [WAI-USERAGENT] require that user agents allow the user to freeze any animations.
The animation model in SVG is jointly developed by the SVG and the Synchronised Multimedia Integration Language (SMIL) [SMIL-boston] working groups. The model offers a declarative approach for creating dynamic Web content. In many cases, this is simpler to understand and use than the programmatic model used in scripting languages, such as ECMAscript or Javascript.
Hopefully the animation model will allow user agents to provide clear information about what an animation is supposed to do even when the rendering device or environment does not have the media capabilities presumed by the author. At the moment this is theoretical - the authors are not aware of any implementations, and consequently this is not a well-understood area.
Because SVG is an XML application it provides user agents with Document
Object Model (DOM), as discussed in Chapter 5. The animate
elements are included in the DOM, and are therefore directly accessible to
User Agents. Note also the User Agent Accessibility Guidelines [WAI-USERAGENT] requirement that users can stop or
control the rate of any animation.
In the following example we use animation to highlight the connection between Computer B and the Hub. The CableB appears when the user focuses on the Computer B object. @@What we want to do is demonstrate how to use animate to change an image and at the same time change the text equivalents. That means we have to do some tricky stuff defining the text equivalents somewhere else and animate the xlink:href value to refer to the diffferent pieces. I think the key is to have an animation trigggered by a focusin that brngs up something on the computer, and maybe a different one on an activate.
<?xml version="1.0"?><?xml-stylesheet href="http://www.w3.org/1999/09/SVG-access/svg-style" type="text/css"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19990812.dtd"><svg width="6in" height="4.5in" viewBox="0 0 600 450"><title id="mainTitle">Network</title> <desc>An example of a computer network based on a hub</desc> <text x="0" y="-10"> <tspan xlink:href="#mainTitle"/> </text> <g id="hub" transform="translate(180 200)"> <use xlink:href="http://www.w3.org/1999/09/SVG-access/hub#theHub"/> </g> <g id="ComputerA" transform="translate(120 270)"> <title>Computer A</title> <use xlink:href="http://www.w3.org/1999/09/SVG-access/computer#terminal" transform="scale(0.75)"/> </g> <g id="ComputerB" transform="translate(400 270)"> <title>Computer B</title> <use xlink:href="http://www.w3.org/1999/09/SVG-access/computer#terminal" transform="scale(0.75)"/> </g> <g id="CableA"> <title>Cable A</title> <desc>10BaseT twisted pair cable</desc> <path d="M207 228c207,250 190,240 170,270"/> </g> <-- when Computer B gets a focus, make monitor dance appear --> <!-- @@note that the syntax for this is not entirely clear from the current draft specification --> <animate xlink:href="#CableB" attribute="opacity" from="0" to="1" begin="id(ComputerB)(onfocus)" dur="10s"/> <animate xlink:href="#CableBdesc" attribute="xlink:href" from="#plaindesc" to="#movidesc" begin="id(ComputerB)(onfocus)" dur="10s"/> <g id="CableB"> <title>Cable B</title> <desc>10BaseT twisted pair cable</desc> <path d="M252 228c320,250 400,240 450,270"/> </g> </svg>
Figure 4.11: Animations for the computer cable B.
SVG uses the new event set provided in DOM 2 [DOM],
which support device-independent interactive content. This allows authors of
SVG to meet the requirement in the Web Content Accessibility Guidelines [WAI-WEBCONTENT] to ensure that interactive content does
not rely on a particular type of user device. Good authoring practice will use
the focusin, focusout and activation
events rather than the device specific events, but note that according to the
User Agent Accessibility Guidelines [WAI-USERAGENT],
user agents must provide device-independent ways of using all functions,
including triggering events. This means that for a user agent which does not
support a pointing device, it must provide a means to generate pointer events.
@@what's the story with the "pointer-event" property - which events does this
work on?@@
In the above example (FIgure 4.10) the animation is triggered by a
focusin event, rather than a mouseover. User agents should allow
this event to be generated either from a mouse or other pointer (where
available) or from the keyboard (for example by navigating the structure of
the document - the tree of svg and g elements and their children.
The more information the author can provide of an SVG image and its components the better it is for accessibility. Adding Metadata to a document can help the user in searching for information, e.g. documents with a suitable accessibility rating, or in understanding relationships between components which cannot be easily expressed by using the SVG container model .
The following example uses XML namespaces [NAMESPACE] and the Resource Description Framework [RDF] to add some metadata about the cables connecting the computers and the hub to the earlier network image. In addition, it includes also metadata about the creators of the example.
<?xml version="1.0"?><?xml-stylesheet href="http://www.w3.org/1999/09/SVG-access/svg-style" type="text/css"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19990812.dtd"><svg width="6in" height="4.5in" viewBox="0 0 600 450"><metadata> <!-- some SVG metadata @@ when the syntax is defined... --> <!-- some other metadata, imported using XML namespaces --> <rdf:RDF xmlns:rdf = "http://www.w3.org/1999/02/22-rdf-syntax-ns" xmlns:dc = "http://purl.org/dc/elements/1.0/" xmlns:connect = "http://www.w3.org/1999/08/29-svg-connections-in-RDF"> <rdf:Description about="#CableA"> <connect:ends> <rdf:Bag> <rdf:li rdf:Resource="#socket1"/> <rdf:li rdf:Resource="#ComputerA"/> </rdf:Bag> </connect:ends> </rdf:Description> <rdf:Description about="#CableB"> <connect:ends> <rdf:Bag> <rdf:li rdf:Resource="#socket2"/> <rdf:li rdf:Resource="#ComputerB"/> </rdf:Bag> </connect:ends> </rdf:Description> <rdf:Description about=""> <dc:creator> <rdf:Bag> <rdf:li>Chris Lilley</rdf:li> <rdf:li>Daniel Dardailler</rdf:li> <rdf:li>Charles McCN</rdf:li> </rdf:Bag> </dc:creator> </rdf:Description> </rdf:RDF> </metadata><title id="mainTitle">Network</title> <desc>An example of a computer network based on a hub</desc> <text x="0" y="-10"> <tspan xlink:href="#mainTitle"/> </text> <g id="hub"> <use xlink:href="http://www.w3.org/1999/09/SVG-access/hub#theHub"/> </g> <g id="ComputerA" transform="translate(120 270)"> <title>Computer A</title> <use xlink:href="http://www.w3.org/1999/09/SVG-access/computer#terminal" transform="scale(0.75)"/> </g> <g id="ComputerB" transform="translate(400 270)"> <title>Computer B</title> <use xlink:href="http://www.w3.org/1999/09/SVG-access/computer#terminal" transform="scale(0.75)"/> </g> <g id="CableA"> <title>Cable A</title> <desc>10BaseT twisted pair cable</desc> <path d="M207 228c207,250 190,240 170,270"/> </g> <animate xlink:href="#CableB" <animate xlink:href="#CableB" attribute="opacity" from="0" to="1" begin="id(ComputerB)(onfocus)" dur="2s" fill="freeze"/> <g id="CableB"> <title>Cable B</title> <desc>10BaseT twisted pair cable</desc> <path d="M252 228c320,250 400,240 450,270"/> </g> </svg>
Example 6.1: Additional metadata for the Network and its components.
The SVG specification allows the use of XML namespaces [NAMESPACE] to introduce elements from other XML applications. In particular, the text, title and desc elements contain structured content, which can be marked up using extension to the SVG DTD or using a separate and already-known namespace. In the following example we use the Ruby specification to provide some pronunciation information..
<?xml version="1.0"?><?xml-stylesheet href="http://www.w3.org/1999/09/SVG-access/svg-style" type="text/css"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19990812.dtd"><svg width="6in" height="4.5in" viewBox="0 0 600 450" xmlns="http://www.w3.org/1999/08/12/WD-SVG-19990812/" xmlns:ruby!!! ><title id="mainTitle">Network</title> <desc>An example of a computer network based on a hub</desc> <text x="0" y="-10"> <tspan xlink:href="#mainTitle"/> </text> <g id="hub"> <use xlink:href="http://www.w3.org/1999/09/SVG-access/hub#theHub"/> </g> <g id="ComputerA" transform="translate(120 270)"> <title>Computer A</title> <use xlink:href="http://www.w3.org/1999/09/SVG-access/computer#terminal" transform="scale(0.75)"/> </g> <g id="ComputerB" transform="translate(400 270)"> <title>Computer B</title> <use xlink:href="http://www.w3.org/1999/09/SVG-access/computer#terminal" transform="scale(0.75)"/> </g> <g id="CableA"> <title>Cable A</title> <desc>10BaseT twisted pair cable</desc> <path d="M207 228c207,250 190,240 170,270"/> </g> <animate xlink:href="#CableB" <animate xlink:href="#CableB" attribute="opacity" from="0" to="1" begin="id(ComputerB)(onfocus)" dur="2s" fill="freeze"/> <g id="CableB"> <title>Cable B</title> <desc><net:networkSpeed>10BaseT</net:networkSpeed> twisted pair cable</desc> <path d="M252 228c320,250 400,240 450,270"/> </g> </svg>
Figure 6.2: An example of structured text.
SVG supports a Document Object Model [SVG-DOM] which provides a standard interface (API) to examine and manipulate document structure. It can be used by various tools and technologies. DOM is particularly beneficial to assistive technologies as they are often used in conjunction with "standard" tools e.g. user agents utilizing DOM. For example, a screenreader which provides voice output from a variety of applications can be customised to take advantage of the DOM interface. This can provide better access than would be possible if it were relying entirely on the standard rendering engine (perhaps a graphics editor, or a browser plug-in) for getting the data. An assistive technology can also use the DOM interface to change an SVG image to suit the needs of a user. Note that it is a requirement of the User Agent Accessibility Guidelines [WAI-USERAGENT] that user agents implement the DOM and export interfaces to assistive technologies.
See also the section on accessible events - these are inherited from the DOM 2 specification.
The specification itself provides benefits to accessibility. It requires conformance to accessibility guidelines as part of conformance for tools. It also provides an appendix on accessibility [SVG-access].
The first source for information about SVG is the specification itself [SVG]. In addition, the public Web page of the W3C SVG working group [SVG-page] is a good source of information, including articles and papers about SVG, news of implementations, etc.
W3C's Web Accessibility Initiative (WAI) addresses accessibility of the Web through five complementary activities that:
WAI's International Program Office enables partnering of industry, disability organizations, accessibility research organizations, and governments interested in creating an accessible Web. WAI sponsors include the US National Science Foundation and Department of Education's National Institute on Disability and Rehabilitation Research; the European Commission's DG XIII Telematics for Disabled and Elderly Programme; Telematics Applications Programme for Disabled and Elderly; Government of Canada, Industry Canada; IBM, Lotus Development Corporation, Bell Atlantic and NCR.
Additional information on WAI is available at http://www.w3.org/WAI.
The W3C was created to lead the Web to its full potential by developing common protocols that promote its evolution and ensure its interoperability. It is an international industry consortium jointly run by the Laboratory for Computer Science (LCS) at Massachusetts Institute of Technology (MIT) in the USA, the National Institute for Research in Computer Science and Control (INRIA) in France and Keio University in Japan. Services provided by the Consortium include: a repository of information about the World Wide Web for developers and users; reference code implementations to embody and promote standards; and various prototype and sample applications to demonstrate use of new technology. In February 2000, 399 organizations are Members of the Consortium. For more information about the World Wide Web Consortium, see http://www.w3.org/
The following people have contributed directly to the content of this document:
Dan Brickley, Daniel Dardailler, Jon Ferraiolo, Ian Jacobs, Chris Lilley, Eric Prud'hommeaux, Ralph Swick
We have also drawn on the work of:
The SVG Working Group and the WAI Protocols and Formats Working Group