Accessibility Features in SVG - Working Draft

W3C potential Note in preparation

This version:
http://www.w3.org/1999/09/SVG-access/note-20000601
Latest version:
http://www.w3.org/1999/09/SVG-access
Previous version:
http://www.w3.org/1999/09/SVG-access/note-20000407
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. 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:

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
  5. Interactivity
    1. Animation
    2. Device-independent Events in SVG
  6. Inheriting Accessibility Benefits from XML
    1. Providing Information with Metadata
    2. Using SVG with Other XML Based Languages
    3. Supporting Assistive Technologies - DOM
  7. Accessibility in the Specification
  8. Further Reading
    1. About SVG
    2. About the Web Accessibility Initiative
    3. About W3C
  9. Acknowledgements
  10. 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 based SVG format can greatly improve the accessibility of graphical content on the Web if the now common raster-based formats, such as PNG, JPEG and GIF, are replaced by it. This is because SVG and other vector graphics images store the structural information of graphical shapes and their relations, and this information with corresponding alternative equivalents can be utilized by alternative rendering tools. Raster images have lost this structural information as they only store matrices of colored dots.

Because of the structural information that is embedded in the SVG images they are highly scalable and 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, color deficiences, 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.

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

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, although it does not have any graphic components that can be drawn

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.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.

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 following example extends the network image component introduced in the previous example by introducing six subcomponents:

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

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 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.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>
  <g id="CableN">
    <title>Cable N</title>
    <desc>10BaseT twisted pair cable</desc>
  </g>
</svg>

Example 2.2: A structured SVG document with alternative equivalents (download structure in 2.2).

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

Cable N 10BaseT twisted pair cable

Figure 2.3: Textual presentation of Example 2.2 when it is rendered with the stylesheet in Example 4.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). Authoring tools can support the authors to provide a good structure that is easy to understand by providing ways to visualize the component hierarchy.

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.

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"?>
<?xml-stylesheet href="http://www.w3.org/1999/09/SVG-access/svg-basic-style" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<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 a Hub (download hub image in 3.1).

rendering of 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 (see Figure 4.3).

3.2 Re-Using Alternative Text as Graphic

Images often include text that explains or names 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 from other elements, such as alternative text equivalents, can be reused. 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"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg width="6in" height="4.5in" viewBox="0 0 600 450">
  <g transform="translate(10 30)">     
    <title id="hub">Hub</title>
    <desc>A typical 10BaseT/100BaseTX network hub</desc>
<!-- A text element which includes text from title -->
    <text x="0" y="-10">
      <tref 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"/>
  </g>
</svg>

Example 3.3: Reusing the title as text in the Hub image (download hub image in 3.3).

rendering of named hub

Figure 3.4: Visual rendering of Example 3.3.

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 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 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.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="M0,5 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">
      <tref 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.5: Adding 5 sockets to the Hub in Example 3.3 (download hub image in 3.5).

rendering of hub with 5 sockets

Figure 3.6: A visual rendering of Example 3.5.

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"?>
<?xml-stylesheet href="http://www.w3.org/1999/09/SVG-access/svg-style" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.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">
    <tref 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(107 88)">
    <title>Cable A</title>
    <desc>10BaseT twisted pair cable</desc>
    <!-- Draw Cable A. -->
    <path d="M0,0c100,140 50,140 -8,160"/>
  </g>
  <g id="CableB" transform="translate(142 88)">
    <title>Cable B</title>
    <desc>10BaseT twisted pair cable</desc>
<!-- Draw Cable B. -->
    <path d="M0,0c100,180 110,160 159,160"/>
  </g>
  <g id="CableN" transform="translate(242 88)">
     <title>Cable N</title>
     <desc>10BaseT twisted pair cable</desc>
     <!-- Draw Cable N. -->
     <path d="M0,0c0,-70 20,-50 60,-50"/>
  </g>
</svg>

Example 3.7: Adding graphics to the Network components presented in Example 2.2 (download hacked-together network image in 3.7)

The whole network

Figure 3.8: A visual rendering of Example 3.7.

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

4.1 Simple Style Definitions

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.

Although it is possible to specify styles as attributes of particular elements, or as part of a style element, we have chosen to demonstrate mostly external linked style sheets. With external stylesheets authors can more easily try out several different styles as they can supply a set of alternative stylesheets. An external stylesheet or a separate style element helps the author to make style changes to selected elements in one place. Style rules using element selectors are preferred over the styles based on id or class attribute selectors which are more difficult to override by users especially if every author uses different class names. However, the use of classes might be difficult to avoid, for instance, if the graphical elements or their combinations have different semantic meanings (see examples in Section 4.2). An inline style attribute is not a very good choice as it is difficult to manage by the authors, because each element style needs to be changed separately. It is also difficult to override by those users who need to do it because of their disabilities, the restrictions in their environment or the devices that they are using.

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 (download stylesheet in 4.1).

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 with Figure 2.2, the content will be presented as text. The style information in Example 4.2 simply defines that no svg elements (such as the graphics elements) are visible except the title and desc elements. The title element is rendered as a block while the desc is an inline element. Furthermore, the title element directly inside the svg element will be bigger and bolder than the other titles. The !important is used after each definition to make sure that other stylesheets that are used normally will not interfere with this stylesheet. The result can be seen in Figure 2.4. The text may also be rendered as audio if the user can select that option in her user agent.

svg   { visibility: hidden !important }
title { 
  visibility: visible !important;
  display: block !important 
}
desc  {
  visibility: visible !important;
  display: inline !important 
}
svg > title { 
  font-size: 120% !important;
  font-weight: bolder !important
}

Example 4.2: A simple stylesheet to present title and desc elements as text (download stylesheet in 4.2).

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   { visibility: hidden !important }
title { 
  visibility: visible !important;
  display: block !important 
}
desc  {
  visibility: visible !important;
  display: inline !important 
}
svg > title { 
  font-size: 120% !important;
  font-weight: bolder !important;
  volume: 120% !important;
  pitch: lower !important
}
rect:before    { content: "rectangle " !important}
ellipse:before { content: "ellipse " !important}
circle:before  { content: "circle " !important}
path[d ~= z]:before,
polygon:before {
   content: "closed shape " !important
}

Example 4.3: A simple stylesheet with text for graphical shapes (download stylesheet in 4.3).

4.2 Defining Style Values with SVG Elements

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. This brings the style definitions back to the SVG document. Note, however, that these gradients could be defined as a separate document, and 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 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.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>
          <rect class="outline-only" width="80" height="20" x="5" y="0" />
          <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 (@@everything is black - check stylesheet - notice that this uses svg-style not svg-computer-style@@ download computer image in 4.4).

Computer terminal

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.

/* Some style for the computer */

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

.outline-only {visibility:none}
#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).

4.3 Style with Different Media

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 use 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 text and the outline of graphics components will be rendered. For this we utilize the outline and outline-only class elements defined in Example 4.4. The screen media definitions contain the default style definitions presented earlier in Example 4.5.

/* some style for low-resolution media */

@media embossed braille handheld projection {
  svg      { visibility: hidden }
  .outline, .outline-only { 
             visibility: visible;
             fill: none;
             stroke: black;
             stroke-width: 5
  }
  text     { visibility: visible }
}


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

4.4 Presentation of Text - Fonts

Text is important for accessibility as it can be transformed to many senses by using assistive technologies. However, the author also needs to be able to control the presentation of the text e.g. for branding and visual communication purposes. 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 UA needs to understand to put the characters together in a component to make it easier to understand!!CMN@@

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 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg width="1.5in" height="1in" viewBox="0 0 150 100">
  <defs>
     <style type="text/css">
       svg { font:BaseTwelve; font-size:45; stroke-width:1 }
       .w3crect { fill:white; stroke:none }
       .w3cline { fill:black; stroke:black }   
       .bluetext { fill:blue;stroke:blue }
       .whitetext { fill:white; stroke:white }
       .shadowtext { fill:black; stroke:black}    
     </style>
  </defs>
  <g id="w3clogo" transform="translate(10,10)scale(1.2)">
    <title id="logotitle">W3C</title>
    <rect class="w3crect" x="-2" y="0" width="80" height="59"/>
    <g transform="translate(0,47)">
      <desc>characters W,3, and C</desc>
      <text class="bluetext">W</text>
      <g id="c" transform="translate(55,0)">
        <text class="shadowtext" x="3" y="0">C</text>
        <text class="whitetext" x="0" y="-4">C</text>
      </g>
      <text class="bluetext" x="34" y="0">3</text>
    </g>
    <g transform="translate(-2,0)">
      <desc>line below and on top of W3C</desc>
      <path class="w3cline" d="M0,0H80"/>
      <path class="w3cline" d="M0,59H80"/>
    </g>
  </g>
</svg>

Figure 4.8: Using text and fonts to form an image of W3C logo (download W3C logo in 4.8).

a)w3c logo with BaseTwelve font

b)w3c logo without BaseTwelve font

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 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg width="1.5in" height="1in" viewBox="0 0 150 100">
  <defs>
    <style type="text/css">
       svg { font:w3clogofont; font-size:45; stroke-width:1 }
       .w3crect { fill:white; stroke:none }
       .w3cline { fill:black; stroke:black } 
       .bluetext { fill: rgb(0,90,156); ;stroke:rgb(0,90,156); }
       .whitetext { fill:white; stroke:white }
       .shadowtext { fill:black; stroke:black}             
        glyph    { fill: rgb(0,90,156) }  
    </style>
    <font id="w3clogofont" units-per-em="55"
          cap-height="39.604" x-height="25"
          ascent="23" descent="12"
          baseline="0" centerline="20" 
          topline="43" mathline="20" horiz-adv-x="2"   
          text-bottom="0" text-top="45"
          ideographic="5" hanging="0" >
      <desc>w3clogofont</desc>
      <missing-glyph>
        <text>*</text>
      </missing-glyph>
<!-- delete
<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="W" horiz-adv-x="39.1157">
<!-- delete
      <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 33.9819,0 39.1157,0 
           L 27.3809,39.604 26.8921,39.604 19.5576,15.0596 
           L 12.2236,39.604 11.7349,39.604 0,0 5.13379,0 
           L 12.2236,24.105 17.0151,7.87262 14.6685,0z"/>
      </glyph>
      <glyph unicode="3" horiz-adv-x="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
           L 4.20511,4.88995 1.9068,8.80096 0.440491,8.80096
           L 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>
<!-- delete
      <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> -->

<!-- delete
      <glyph unicode="67" bbox="0 0 20.416 39.604" horizAdvX="20.416" class="shadowtext">-->
        
      <glyph unicode="C" horiz-adv-x="20.416">
        <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>
      <hkern u1="W" u2="3" k="4.207"/>
 <!delete
      <kern u1="87" u2="51" k="4.207"/> -->
    </font>
  </defs>

  <g id="w3clogo" transform="translate(10,10) scale(1.2)">
    <title id="logotitle">W3C</title>
    <rect class="w3crect" x="-2" y="0" width="80" height="59"/>
    <g transform="translate(0, 47)">
      <desc>W3C logo</desc>
      <text class="bluetext">W</text>
      <text class="shadowtext" x="55" y="0">C</text>
      <text class="bluetext" x="34" y="0">3</text>
    </g>
    <g transform="translate(-2,0)">
      <desc>line below and on top of W3C</desc>
      <path class="w3cline" d="M0,0H80"/>
      <path class="w3cline" d="M0,59H80"/>
    </g>
  </g>

<!-- delete
  <g id="w3clogo">
    <title id="w3c">W3C</title>
    <rect class="w3crect" width="29" height="29"/>
    <text class="w3ctext" x="5" y="7.4">
      <tref 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 @@!!CMN!!delete the marked parts after checking that this works@@ (download W3C logo in 4.10 @@broken as tools broken@@ ).

5. Interactivity

5.1 Animation

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.

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 brings 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">
    <tref 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. @@copy first the latest example from earlier @@

5.2 Accessible events

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). See WCAG checkpoints, and UA checkpoints

6. Inheriting Accessibility Benefits from XML

6.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. See WCAG checkpoints.

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 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg width="6in" height="4.5in" viewBox="0 0 600 450">
  <metadata>
    <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">
    <tref 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. @@use new examples, and get GraphViz example@@

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

<?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 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.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">
    <tref 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.

6.3 Supporting Assistive Technologies - Document Object Model

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.

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

8. 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 and 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 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/


Acknowledgments

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

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
[DOM]
"Document Object Model Level 2 Specification" L Wood et al. editors. Available at http://www.w3.org/TR/DOM-Level-2
[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
[SVG-access]
SVG Specification chapter X - accessibilty
[SVG-DOM]
SVG Specification chapter X - DOM
[SVG-page]
The Scalable Vector Graphics Web page is the public repository of information for the working group. Available at http://www.w3.org/Graphics/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