Accessibility Features in SVG - Working Draft

W3C potential Note in preparation

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

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 August 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19990812.dtd"> 
<svg width="6in" height="4.5in" viewBox="0 0 600 450">
  <title>Network</title>
  <desc>An example of a computer network based on a hub</desc>
</svg>

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

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 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 any graphics elements we already know quite a lot about it. (Note: To easily identify changes from the previous version of the example new content is strongly emphasized)

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19990812.dtd"> 
<svg width="6in" height="4.5in" viewBox="0 0 600 450">
  <title>Network</title>
  <desc>An example of a computer network based on a hub</desc>
  <g id="hub">
    <title>Hub</title>
    <desc>A typical 10BaseT/100BaseTX network hub</desc>
  </g>
  <g id="ComputerA">
    <title>Computer A</title>
    <desc>A common desktop PC</desc>
  </g>
  <g id="ComputerB">
    <title>Computer B</title>
    <desc>A common desktop PC</desc>
  </g>
  <g id="CableA">
     <title>Cable A</title>
     <desc>10BaseT twisted pair cable</desc>
  </g>
  <g id="CableB">
    <title>Cable B</title>
    <desc>10BaseT twisted pair cable</desc>
  </g>
</svg>

Example 2.2: A structured SVG document with alternative equivalents.

The component hierarchy with alternative equivalents can be used in different ways by different renderers. For instance, a simple non-visual renderer can provide access to the component hierarchy and allow the user to navigate her way up and down or at a certain level of the structure, giving her the equivalent description of each encountered component. A multimedia-capable renderer might name each component that has focus through speech output - much like tooltips are used in some Web browsers to render alternative text for images.

The simplest way to render the image in Example 2.2 is naturally to show the alternative equivalents as text, such in Figure 2.3. This can be done by attaching CSS [CSS] style information to the title and desc elements of the image. An example stylesheet to do this kind of rendering is presented and explained in Example 4.2 in Chapter 4. Without the style definition nothing from Example 2.2 would be presented to the user.

Network An example of a computer network based on a hub

Hub A typical 10baseT/100BaseTX network hub

Computer A A common desktop PC

Computer B A common desktop PC

Cable A 10BaseT twisted pair cable

Cable B 10BaseT twisted pair cable

Figure 2.3: Textual presentation of Example 2.2 when it is rendered with the stylesheet in Example 4.2

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, 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-style" type="text/css"?>
<svg width="6in" height="4.5in" viewBox="0 0 600 450">
  <g transform="translate(10 10)">     
    <title>Hub</title>
    <desc>A typical 10BaseT/100BaseTX network hub</desc>
    <rect width="253" height="84"/>
    <rect width="230" height="44" x="12" y="10"/>
    <circle cx="227" cy="71" r="7"/>
  </g>
</svg>

Example 3.1: Adding some shapes to form an image of the Hub.

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.

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

<?xml version="1.0"?>
<?xml-stylesheet href="http://www.w3.org/1999/09/SVG-access/svg-basic-style" type="text/css"?>
<svg width="6in" height="4.5in" viewBox="0 0 600 450">
  <g transform="translate(10 30)">     
    <title id="hub">Hub</title>
<!-- A text element which includes text from title -->
    <text x="0" y="-10">
      <tspan xlink:href="#hub"/>
    </text>
    <desc>A typical 10BaseT/100BaseTX network hub</desc>
    <rect width="253" height="84"/>
    <rect width="230" height="44" x="12" y="10"/>
    <circle cx="227" cy="71" r="7"/>
  </g>
</svg>

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

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 August 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19990812.dtd"> 
<svg width="6in" height="4.5in" viewBox="0 0 600 450">
  <g transform="translate(10 30)">
<!-- Define the socket -->    
    <defs>
      <g id="hubPlug">
        <desc>A 10BaseT/100baseTX socket</desc>
        <path d="h5 v-9 h12 v9 h5 v16 h-22 z"/>
      </g>
    </defs>
    <title id="hub">Hub</title>
    <desc>A typical 10BaseT/100BaseTX network hub</desc>
    <text x="0" y="-10">
      <tspan xlink:href="#hub"/>
    </text>
    <rect width="253" height="84"/>
    <rect width="230" height="44" x="12" y="10"/>
    <circle cx="227" cy="71" r="7"/>
<!-- five groups each using the defined socket -->
    <g transform="translate(25 25)" id="sock1">
      <title>Socket 1</title>
      <use xlink:href="#hubPlug"/>
    </g>
    <g transform="translate(70 25)" id="sock2">
      <title>Socket 2</title>
      <use xlink:href="#hubPlug"/>
    </g>
    <g transform="translate(115 25)" id="sock3">
      <title>Socket 3</title>
      <use xlink:href="#hubPlug"/>
    </g>
    <g transform="translate(160 25)" id="sock4">
      <title>Socket 4</title>
      <use xlink:href="#hubPlug"/>
    </g>
    <g transform="translate(205 25)" id="sock5">
       <title>Socket 5</title>
       <use xlink:href="#hubPlug"/>
    </g>
  </g>
</svg>

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

rendering of hub with 5 sockets

Figure 3.5: A visual rendering of Example 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"?>
<?xml-stylesheet href="http://www.w3.org/1999/09/SVG-access/svg-style" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19990812.dtd"> 
<svg width="6in" height="4.5in" viewBox="0 0 600 450">
  <title id="mainTitle">Network</title>
  <desc>An example of a computer network based on a hub</desc>
<!-- Draw text. -->
  <text x="0" y="-10">
    <tspan xlink:href="#mainTitle"/>
  </text>
<!-- Use the hub image and its title and description information. -->
  <g id="hub" transform="translate(180 200)">
    <image xlink:href="http://www.w3.org/1999/09/SVG-access/hub"/>
  </g>
  <!-- Use an external computer symbol.Scale to fit. -->
  <g id="ComputerA" transform="translate(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>

Example 3.6: Adding graphics to the Network components presented in Example 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 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. A;though it is possible to specify styles as attributes of particular elements, or as part of a style element, or in an external linked style sheet, we have chosen to demonstrate linked style sheets only. For an author to change the style, it is easiest if the styles are based on element selectors in an external stylesheet, since it is possible to supply a complete stylesheet. If styles are based on id or class attributes then it is more difficult to provide an appropriate way to override those definitions, and more difficult again if the style is given inline as an attribute.

In SVG the default rendering of a graphic elements is a black fill, so without a stylesheet all the presented shapes would be solid black. To avoid that, the previous examples provide a link to the simple stylesheet presented in Example 4.1. It contains simple style definitions for changing the rendering style of selected graphic elements.

rect      { fill: white; stroke: black;
            stroke-width: 1 }

circle    { fill: red; stroke: black;
            stroke-width: 1 }

path      { fill: white; stroke: black;
            stroke-width: 1 }

Example 4.1: A simple stylesheet for presenting rectangle, circle, and path elements.

It is possible to use style sheets also to provide a text or audio rendering of an SVG image. The content of title and desc elements is not rendered at all without a stylesheet definition but when a simple stylesheet presented in Example 4.2 is used Figure 2.2 will be presented as text. The style information simply defines that title is rendered as a block element and desc as an inline element and that the title directly inside the svg element will be bigger and bolder than the other titles. The first line makes sure that no other svg elements (such as the graphics elements) are presented. The result can be seen in Figure 2.4. The text is rendered as audio if the user can select that option in her user agent.

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

Example 4.2: A simple stylesheet to present title and desc elements as text.

If the user wants to get a rough idea of the graphics shapes used in an image we can use the stylesheet presented in Example 4.3. It will render the types of common graphics elements as text in between the title and desc renderings. We can use the stylesheet, for instance, to give some information of the graphical shapes of the Hub in Example 3.1 or 3.2. With simple CSS we cannot explain things such as: a small red circle is located in the bottom right corner of a rectangle. But it is possible that in the future there will be specialized players to do that, for example by using the mathematical processing available in XSLT. In case the text is rendered as audio, the stylesheet also includes audio emphasis for the main title by using a louder and lower voice.

svg { display: none }
title { display: block }
desc { display: inline }
svg title {
  font-size: 120% ;
  font-weight: bolder ;
  volume: 120% ;
  pitch: lower }
rect:before { content: "rectangle " }
ellipse:before { content: "ellipse " }
circle:before { content: "circle " }
path[d ~= z]:before,
polygon:before {
   content: "closed shape "
}

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

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. Unfortunately, this brings the style definitions back to the SVG document. Note, however, that these gradients could be defined as a separate document so that they could be used by several different stylesheets.

<?xml version="1.0"?>
<?xml-stylesheet href="http://www.w3.org/1999/09/SVG-access/svg-style" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19990812.dtd"> 
<svg width="6in" height="4.5in" viewBox="0 0 600 450">
    <defs>
      <radialGradient id="screenGrad">
         <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(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>

Example 4.4: A computer image with definitions for gradient style values.

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 styles for the computer image -->

#screenGrad .s100 {color:#AAA9A9 }
#screenGrad .s0 {color:#1E1A16 }
#discGrad .s100 {color:#F7EED2 }
#discGrad .s0 {color:#1E1A16 }

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

<!-- Some style for the other network components -->
...

Example 4.5: A stylesheet for the computer image in Example 4.4 (download stylesheet in 4.5).

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 utilizes alternative interaction devices. For instance some media such as screens, are suited to high-resolution graphics, other media such as braille to lower resolution graphics, and some people use audio instead of graphics. CSS can be used to provide an appropriate default presentation for all these different devices.

In the following example we expand the stylesheet in Example 4.5 to provide a simplified version of the image for low-resolution media, such as embossed, braille, handheld, or projection devices. The appropriate style definitions for those devices are selected by using CSS @media rules. Within the simplified version we define that only the outline part of the g elements and text will be rendered. For this we utilize the outline class elements defined in Example 4.4. Notice that in this case any graphics placed directly in the svg element would still be rendered. The screen media definitions contain the default style definitions presented earlier in Example 4.5. @@Where does display: svg come from? It is not a valid value according to CSS2 or SVG doc? @@

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

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

@media screen {
  
<!-- Some style for the computer -->
...

<!-- Some style for the other network components -->
...

 } 

Example 4.6: Extending stylesheet in Example 4.5 for different media (download stylesheet in 4.6).

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

@@Link to BaseTwelve font is missing, do we have it somewhere so we can create the image of W3C? CMN: No. That's the point - if you had it you wouldn't need to define fonts. We could show what it looks like if you have the font (the W3C logo) and if you don't (something a bit different)@@

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

Figure 4.8: A visual image of the W3C logo in Figure 4.7 both with a) BaseTwelve and b) the default font.

The logo can be used by linking to it from an image element. If the user does not have the BaseTwelve font then another (in this case default) font will be used to render the text. Because the font is used by referencing it from a CSS style declaration a user can also easily override it. Of course since this is a normal XML document the personal stylesheets given above will render the content (The letters "W 3 C").

A new font for the logo can be defined by using the font element. The following example defines a font named w3clogofont. It includes the glyphs for the characters W, 3, and C. Each glyph element has a human-readable title, and the letter C has a description of the special effect provided for it. Use of SVG fonts allows designers to create any font they can imagine, without losing the text itself:

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19990812.dtd">
<svg width=".9in" height="0.6in" viewBox="0 0 48 72">
  <defs>
    <font id="w3clogofont" unitsPerEm="55"
          capHeight="39.604" xHeight="25"
          ascent="23" descent="12" bbox="0 -12 40 55"
          baseline="0" centerline="20"
          mathline="20" topline="43">
      <glyph unicode="87" bbox="0 0 39.1157 39.604"
             horizAdvX="39.1157">
        <title>W</title>
        <path d="M 19.8022 0 L 26.8921 24.105 L 33.9819 0 L 39.1157 0 
           L 27.3809 39.604 L 26.8921 39.604 L 19.5576 15.0596 
           L 12.2236 39.604 L 11.7349 39.604 L 0 0
           L 5.13379 0 L 12.2236 24.105 L 17.0151 7.87262 L 14.6685 0z"/>
      </glyph>
      <glyph unicode="51" bbox="0 0 19.9981 39.604" horizAdvX="19.9981">
        <title>3</title>
        <path d="M 19.9981 26.893 C 19.9981 30.479 19.0445 33.494 17.1377 35.938 
           C 15.2305 38.383 12.7613 39.604 9.73001 39.604 
           C 7.44778 39.604 5.4595 38.879 3.76468 37.429
           C 2.06979 35.978 0.815002 34.016 0 31.537 L 4.00931 29.875 
           C 4.59671 31.375 5.37109 32.5569 6.33249 33.42 
           C 7.29398 34.284 8.4263 34.715 9.73001 34.715 
           C 11.0991 34.715 12.2569 33.95 13.2022 32.418 
           C 14.1475 30.886 14.6201 29.045 14.6201 26.893 
           C 14.6201 24.513 14.1143 22.671 13.1045 21.368 11.9297 19.836 10.0884 
              19.069 7.57858 19.069 
           L 5.6236 19.069 5.6236 16.723 12.4688 4.88995 4.20511 4.88995 1.9068 
              8.80096 0.440491 8.80096 0.440491 0 19.5093 2.396 12.2725 14.864 
           C 14.8155 15.68 16.7383 17.163 18.042 19.314 
           C 19.3457 21.466 19.9981 23.992 19.9981 26.893z"/>
      </glyph>
      <glyph unicode="67" bbox="0 0 20.416 39.604" horizAdvX="20.416" class="shadow">
        <title>C</title>
        <desc>the shadow of a raised letter C</desc>
        <path d="M 19.306 0 C 19.306 0 20.138 5.05597 20.138 5.05597 
           C 20.138 5.05597 17.194 10.688 17.194 10.688
           C 17.194 10.688 16.064 8.29895 14.187 6.97595 
           C 12.605 5.862 11.574 5.62 9.96298 5.95197
           C 7.89297 6.37897 5.547 8.85297 4.52197 11.904 
           C 3.297 15.555 3.28497 17.321 3.24197 18.944
           C 3.17398 21.546 3.58398 23.083 3.58398 23.083 
           C 3.58398 23.083 1.797 19.776 1.81299 14.933
           C 1.82498 11.477 2.36798 8.34198 3.96799 5.24799 
           C 5.375 2.52795 7.46698 0.895996 9.323 0.703979
           C 11.242 0.505005 12.759 1.43097 13.93 2.43201 
           C 15.161 3.48297 16.405 5.78101 16.405 5.78101
           C 16.405 5.78101 19.306 0 19.306 0z"/>
        <path d="M 19.669 28.608 C 19.669 28.608 18.368 30.933 17.557 31.829 
           C 16.746 32.726 15.296 34.305 13.504 35.094
           C 11.712 35.883 10.773 36.032 9.00299 35.862 
           C 7.23398 35.691 5.58899 34.667 5.013 34.241
           C 4.43698 33.814 2.965 32.555 2.133 31.382 
           C 1.30099 30.208 0 27.862 0 27.862
           C 0 27.862 0.724976 30.214 1.17798 31.211 
           C 1.43997 31.785 2.24197 33.543 3.38098 35.073
           C 4.44299 36.499 6.50598 38.955 9.64197 39.5099 
           C 12.778 40.064 14.933 38.656 15.467 38.315
           C 16 37.974 17.124 37.033 17.835 36.272 
           C 18.577 35.478 19.28 34.464 19.669 33.856
           C 19.953 33.412 20.416 32.513 20.416 32.513z"/>
      </glyph>
      <kern u1="87" u2="51" k="4.207"/>
    </font>
    <style type="text/css">
      .w3crect { fill: white; stroke-width:0 }
      .w3ctext { font: w3clogofont; font-size:45 }
      .w3cline { fill: black; stroke-width:1 } 
      glyph    { fill: #006cff }
      .shadow  { fill: black }
    </style>
  </defs>
  <g id="w3clogo">
    <title id="w3c">W3C</title>
    <rect class="w3crect" width="29" height="29"/>
    <text class="w3ctext" x="5" y="7.4">
      <tspan xlink:href="#w3c"/>
    </text>
    <path class="w3cline" d="M0 .5H72">
    <path class="w3cline" d="M0 46.5H72">
  </g>
</svg>

Example 4.9: Defining a special font for the W3C logo.

4.5 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. At the moment this is theoretical - the authors are not aware of any implementations, and consequently this is not a well-understood area.

Because SVG is an XML application it provides user agents with Document Object Model (DOM), as discussed in Chapter 5. The animate elements are included in the DOM, and are therefore directly accessible to User Agents. Note also the User Agent Accessibility Guidelines [WAI-USERAGENT] requirement that users can stop or control the rate of any animation.

In the following example we use animation to highlight the connection between Computer B and the Hub. The CableB appears when the user focuses on the Computer B object. As the user controls the beginning and ending of the animation there are no problems to stop it. Furthermore, it will stop automatically after a predefined time. @@ Can we add this time? Is the cable really invisible earlier? Why? Would make more sense e.g. to move arrows along the wire so that the user would see where the bits go when computer is selected. CMN Whatever. It was just an example that sprang into my mind. Currently it fires on focus, and takes 2 seconds.@@

<?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.10: 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>

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

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

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

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