Accessibility Features in SVG - Working Draft

W3C potential Note in preparation

This version:
http://www.w3.org/1999/09/SVG-access/note-19991025
Latest version:
http://www.w3.org/1999/09/SVG-access
Previous version:
http://www.w3.org/1999/09/SVG-access/note-19991011
Editors:
Charles McCathieNevile <charles@w3.org>

Marja-Riitta Koivunen <marja@w3.org>


Abstract

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.

Status of this document

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.

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:

Table of contents

  1. Introduction
  2. Equivalent Alternatives
    1. Title and Description
    2. Structured Documents
  3. Accessible Graphics
    1. Basic Graphic Shapes
    2. Re-using Text as Graphics
    3. Re-using Graphic Components
    4. Re-using Components from Other Documents
  4. Controlling Presentation
    1. Style Definitions
    2. Style with Different Media
    3. Presentation of Text - Fonts
    4. Animation
  5. Inheriting Accessibility Benefits from XML
    1. Providing Information with Metadata
    2. Using SVG with Other XML Based Languages
    3. Supporting Assistive Technologies - DOM
  6. Accessibility in the Specification
  7. Further Reading
    1. About SVG
    2. About the Web Accessibility Initiative
    3. About W3C
  8. Acknowledgements
  9. References


Introduction

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.

Table 1.1: Comparison of PNG and SVG enlargements.
Small PNG image:

Small image

Small SVG image:

Small image

Enlarged PNG image:

 has very poor resolution

Enlarged SVG image:

Enlarged SVG

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 a 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.

As SVG has many accessibility benefits, it should be used as much as possible. In addition to being used as a standalone SVG document, SVG can also be easily used with other XML based languages. 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 being inherited from the XML. To illustrate how to create accessible SVG graphic with various SVG features the document uses a Network example 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.

2. Equivalent Alternatives

2.1 Title and Description

Authors specify equivalent alternatives by including the following elements in any SVG container or graphics element:

title
Provides a human-readable title for the element that contains it. Title may be used as a tooltip in a "standard" rendering.
desc
Provides a longer more complete description of an element that contains it. Authors should provide descriptions for complex or other content that has functional meaning.

Most 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, but 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>

Figure 2.1: A simple SVG document with title and desc elements.

2.2 Equivalent Alternatives in a Structured Document

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 user who explores a document containing SVG images can easily see which graphical elements construct the image of each component and what graphics in the components is 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 able to understand it. Re-using the component information helps in reducing and simplifying the definition of a complicated image in managing the image. @This is nearly the same as the previous@

The following example extends the network image component introduced in the previous example by introducing five subcomponents:

  1. Hub
  2. Computer A
  3. Computer B
  4. Cable A
  5. Cable B

Each subcomponent is included as a container element with an id attribute and equivalent information. Although this image does not yet contain or link to 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>

Figure 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 Figure 2.2 is naturally to show the alternative equivalents as text. This can be done by attaching CSS [CSS] style information to the title and desc elements of the image. The following style information simply defines that title and desc are rendered as block and inline elements and that the title inside the svg element will be bigger and bolder than the other titles. The result can be seen in Figure 2.4. Without the style definition nothing would be presented to the user. The stylesheets are explained in more detail in Chapter 4.


title { display: block }
desc { display: inline }
svg title { font-size: 120%;
            font-weight: bolder;
}

Figure 2.3: A simple stylesheet to be used with Figure 2.2.

Figure 2.4: A possible visual rendering of Figure 2.2.

3. Accessible Graphics

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

3.1 Basic Graphic Shapes

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"?>

<!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(180 20010 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>

Figure 3.1: Graphical shapes forming an image of a Hub.

rendering of hub

Figure 3.2: Visual rendering of image in Figure 3.1.

Figure 3.2 presents the Hub in Figure 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 easily done by using a stylesheets as shown in Chapter 4.

3.2 Re-Using Alternative Text as Graphic

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 explained in Chapter 3.1. This text element re-uses the title text of the Hub image by adding an id attribute to it and referring to it from the text element.

<?xml version="1.0"?>
<svg width="6in" height="4.5in" viewBox="0 0 600 450">
  <g transform="translate(18010 30200)">     
    <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>

Figure 3.3: Reusing the title as text in the Hub image.

3.3 Re-Using Graphic Components

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 this example we have defined a socket, and added five of them to the hub from the previous example:

<?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">
  <g transform="translate(10 30180 200)">
<!-- 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>

Figure 3.4: Adding 5 sockets to the Hub in Figure 3.3.

rendering of hub with 5 sockets

Figure 3.5: Visual rendering of image in Figure 3.4.

3.4 Re-Using Components from Other Documents

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"?>
<!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(120 270)">
    <title>Computer A</title>
    <use xlink:href="http://www.w3.org/1999/09/SVG-access/computer#terminal" transform="scale(0.75)"/>
  </g>
<!-- Use the same computer symbol. -->
  <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>
<!-- Draw Cable A. -->
    <path d="M207 228c207,250 190,240 170,270"/>
  </g>
  <g id="CableB">
    <title>Cable B</title>
    <desc>10BaseT twisted pair cable</desc>
<!-- Draw Cable B. -->
    <path d="M252 228c320,250 400,240 450,270"/>
  </g>
</svg>

Figure 3.6: Adding graphics to the Network components presented in Figure 2.2.

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.

4. Controlling Presentation

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 can have more control when it is necessary 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. When drawing images the position of the graphics elements is so essential that that is included to the elements themself. CSS type means are used for other style definitions.

When presenting text SVG lets authors to define their own fonts and use that as style. This improves accessibility as there is no need to convert text to images and loose that information when using 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. (@ can the turning off be done with stylesheets? Probably not - unless there is a way to say animate { display:none } but I doubt it @)

4.1 Style Definitions

SVG uses CSS syntax and properties to specify formatting effects. As noted in Web Content Accessiblity Guidelines [WAI-WEBCONTENT], and in Accessibility Features of CSS2 [CSS-access], this provides a means for giving the author the ability to specify rich presentations, while allowing the users to ensure that the document is presented in a way which meets their different needs.

The following is a simple stylesheet that renders the title and desc elements as text. In addition, it renders the type of common graphics elements in the image as text. This could be used, for instance, to render the graphical shapes of Figure 3.1 when it is not possible to see the graphics. To emphasize the main title it is presented with larger font or when audio is used with lower and louder voice.

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 "
}

Figure 4.1: A simple stylesheet with text for graphical shapes (download stylesheet in 4.1).

The following example (the computer image for the network we have been building) has a link to a separate stylesheet by using ?xml-stylesheet element. The stylesheet defines styles for the components of the computer image. The image itself defines some color gradients to be used at the stylesheet, and attaches class attributes to some parts of the computer so that they can be referred to from the stylesheet. The outline class defines an outline with less graphical details for each component. This could be used by low resolution devices.

<?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">
         <stop offset="100%" style="color:#AAA9A9"/>
         <stop offset="0%" style="color:#1E1A16"/>
       </radialGradient>
       <linearGradient id="discGrad">
         <stop offset="100%" style="color:#F7EED2"/>
         <stop offset="0%" style="color:#1E1A16"/>
       </linearGradient>
      <symbol id="terminal">
        <desc>A common desktop PC</desc>
        <g id="monitorStand" transform="translate(40 120)">
          <title>Monitor stand</title>
          <desc>One of those cool swivelling monitor stands -
            the little ones that sit under the monitor</desc>
          <rect class="outline" width="44" height="10"/>
          <path d="m5 10a24 10 0 0 1 10 79z"/>
          <rect width="14" height="4" x="10" y="18"/>
        </g>
        <g id="monitor">
          <title>Monitor</title>
          <desc>A very fancy monitor</desc>
          <rect class="outline" width="164" height="120"/>
          <rect class="screen" width="142" height="95" x="11" y="12" />
        </g>
        <g id="processor" transform="translate(-37 122)">
          <title>The computer</title>
          <desc>A desktop computer - broad flat box style</desc>
          <rect class="outline" width="240" height="83" />
          <g id="discDrive" transform="translate(140 29)">
            <title>disc drive</title>
            <desc>A built-in disc drive</desc>
            <rect class="outline" width="82" height="30" />
            <rect class="disc" width="58" height="8" x="12" y="10" />
            <rect class="light" width="10" height="4" x="55" y="22" />
          </g>
          <circle cx="200" cy="68" r="4"/>
        </g>
      </symbol>
    </defs>
    <g id="Computer" transform="translate(180 85)">
      <title>Computer</title>
      <use xlink:href="#terminal"/>
    </g>
</svg>

Figure 4.2: A computer with some gradiants for a stylesheet.

The stylesheet defines a style for the terminal and its components. Notice that the gradiants defined for screen and disc are referenced here. The styles relevant to the computer image are presented in the following:

<!-- Some style for the computer -->

#terminal .outline {
  fill: #F7EED2;
  stroke: #1E1A16;
  stroke-width: 0.3}
.computer {
  fill: #F7EED2;
  stroke: #1E1A16;
  stroke-width: 0.3}
.screen {
  fill: url(http://www.w3.org/1999/09/SVG-access/computer-styled#screenGrad);
  stroke: #1E1A16;
  stroke-width: 3}
.disc {
  fill: url(http://www.w3.org/1999/09/SVG-access/computer-styled#discGrad);
  stroke:#1E1A16;
  stroke-width: 0.3}

...

Figure 4.3: A stylesheet for the computer image in Figure 4.2 (download stylesheet in 4.3).

4.2 Style with Different Media

Some media are suited to high-resolution graphics, some to lower resolution graphics, or the ability to change between the two. It is also possible to use CSS to provide a more appropriate default presentation for different sets of user needs. We can expand our stylesheet to use the special outline class and the CSS @media rule to provide a simplified version of the image for low-resolution media, as the following example shows:

@media embossed braille handheld projection {
<!-- only show things with the special class "outline" -->
  g        { display: none }
  .outline { display: svg }
  text     { display: svg }
}

<!-- Guess I should have a voice one as well -->

@media screen {

<!-- style for the hub -->
  .socket {
    fill:   url(http://www.w3.org/1999/09/3-network1#sockGradient) #111 ;
    stroke: #1E1A16 ;
    stroke-width: 0.3 }
  .hub {
    fill: #007CC5 ;
    stroke: #1E1A16;
    stroke-width: 0.3 }
  #hub .outline {
    fill: #75C5F2 ;
    stroke: #1E1A16 ;
    stroke-width: 0.3 }
  .light {
    fill: #83C220 ;
    stroke: #1E1A16;
    stroke-width: 0.3 }
  .cable { fill: none ;
    stroke: #D11B1B ;
    stroke-width: 11 }

<!-- Some style for the computer -->

  #terminal .outline {
    fill: #F7EED2 ;
    stroke: #1E1A16 ;
    stroke-width: 0.3 }
  .computer {
    fill: #F7EED2 ;
    stroke: #1E1A16 ;
    stroke-width: 0.3 }
  .screen {
    fill: url(http://www.w3.org/1999/09/SVG-access/computer-styled#screen) ;
    stroke: #1E1A16 ;
    stroke-width: 3 }
  .disc {
    fill: url(http://www.w3.org/1999/09/SVG-access/computer-styled#disc) ;
    stroke:#1E1A16 ;
    stroke-width: 0.3 }
} 

Figure 4.4: A stylesheet for different media (download stylesheet in 4.4).

4.3 Presentation of Text - Fonts

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.

<?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.5: Using text and fonts to form an image of W3C logo.

Figure 4.6: A visual image of the W3C logo in Figure 4.5.

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>

Figure 4.7: Defining a special font for the W3C logo.

4.4 Animation

The animations model is being jointly developed by the working groups for SVG and the Synchronised Multimedia Integration Language (SMIL) [SMIL-boston]. The model offers a declarative approach for creating dynamic Web content In many cases, it 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 much clearer information about what will happen in an animation when rendering to an environment which 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. This feature will need to be understood by User Agents, and information about the changes will need to be made available to the user, if there is to be any accessibility benefit. 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 show Computer B being connected to the hub:

<?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 the cable 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="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>

Figure 4.8: Animations for the computer cable B.

5. Inheriting Accessibility Benefits from XML

5.1 Providing Information with Metadata

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>

Figure 5.1: Additional metadata for the Network and its components.

5.2 Using SVG with Other XML Based Languages

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..

@@Yeah! A ruby is a good example... if I can use a sensible-size namespace...

<?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 5.2: An example of structured text.

5.3 Supporting Assistive Technologies - DOM

DOM means that there is a standard way of interacting with the document that can be used by existing tools and techniques. This is particularly beneficial to assistive technologies which are used in conjunction with "standard" software which exposes the DOM. For example, a screenreader which is used to provide voice output from a variety of applications can be customised to take advantage of standard APIs such as DOM to 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 data. An assistive technology can also use the DOM 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.

6. Accessibility in the 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-spec-access]. @@and with luck I'll poke into all the examples to make them good examples of accessibility. The first part of that is including images everywhere, which I imagine is a work item for the SVG group.

7. Further Reading

About SVG

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.

About the Web Accessibility Initiative

W3C's Web Accessibility Initiative (WAI) addresses accessibility of the Web through five complementary activities that:

  1. Ensure that the technology of the Web supports accessibility
  2. Develop accessibility guidelines
  3. Develop tools to facilitate evaluation and repair of Web sites
  4. Conduct education and outreach
  5. Conduct research and development

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 dand NCR.

Additional information on WAI is available at http://www.w3.org/WAI.

About the World Wide Web Consortium (W3C)

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 MIT Laboratory for Computer Science (LCS) 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 September 1999, more than 350 organizations are Members of the Consortium. For more information about the World Wide Web Consortium, see http://www.w3.org/


Acknowledgments

The following people have contributed directly to the content of this document:

Dan Brickley, Daniel Dardailler, 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

References

[CSS1]
"Cascading Style Sheets Level 1" H. Lie, B. Bos eds. Available at http://www.w3.org/TR/REC-CSS1
[CSS]
"Cascading Stylesheets Level 2" H. Lie, B. Bos, C. Lilley, I. Jacobs eds. Available at http://www.w3.org/TR/REC-CSS2
[CSS-access]
"Accessibility Features of CSS" I Jacobs, J. Brewer eds. Available at http://www.w3.org/TR/CSS-access
[NAMESPACE]
"Namespaces in XML" T. Bray, D. Hollander, A. Layman, editors, 14 January 1999. Available at http://www.w3.org/TR/REC-xml-names/
[RDF]
"Resource Description Framework (RDF) Model and Syntax" O. Lassila, R. Swick eds. Available at http://www.w3.org/TR/REC-rdf-syntax/
[SMIL]
"Synchronised Multimedia Integration Language" P Hoschka ed. http://www.w3.org/TR/smil
[SMIL-boston]
20 August 1999 working Draft of "Synchronised Multimedia Integration Language Boston Specifiaction" J. Ayars et. al. eds. available at http://www.w3.org/TR/WD-smil-boston-19990820
[SMIL-access]
"Accessibility features in SMIL" M Koivunen, I Jacobs eds. Available at http://www.w3.org/TR/SMIL-access
[SVG]
"Scalable Vector Graphics 1.0 Specification", J. Ferraiolo ed. Available at http://www.w3.org/TR/SVG
[WAI-AUTOOLS]
"Authoring Tool Accessibility Guidelines (working Draft)", Treviranus, Richards, Jacobs, McCathieNevile eds. Available at http://www.w3.org/TR/WAI-AUTOOLS
[WAI-USERAGENT]
"User Agent Accessibility Guidelines (Working Draft)", Gunderson, Jacobs eds. Available at http://www.w3.org/TR/WAI-USERAGENT
[WAI-WEBCONTENT]
"Web Content Accessibility Guidelines 1.0" Vanderheiden, Chisholm, Jacobs eds. Available at http://www.w3.org/TR/WAI-WEBCONTENT